자바스크립트 객체 Object 완벽 가이드 속성 접근 수정 삭제까지

🔎 자바스크립트 객체란 무엇인가

자바스크립트에서 객체(Object)는 데이터를 key-value 쌍으로 저장하는 구조입니다.
즉, 이름과 값이 짝을 이루어 하나의 속성을 형성하고, 이러한 속성들의 집합이 객체를 구성합니다.
숫자, 문자열, 불리언과 같은 원시 타입을 넘어서, 더 복잡하고 구조적인 데이터를 표현할 수 있는 기본 단위이기도 합니다.

예를 들어 사람을 표현하는 객체를 생각해보면, 이름(name), 나이(age), 직업(job)과 같은 속성을 가질 수 있습니다.
이때 각 속성은 고유한 키(key)로 구분되며, 해당 키에 연결된 값(value)을 통해 실제 데이터를 담습니다.
이러한 특성 덕분에 객체는 실생활의 사물을 프로그래밍적으로 모델링하기에 매우 적합합니다.

const person = {
    name: "홍길동",
    age: 30,
    job: "개발자"
};

위 예시처럼 객체는 중괄호 { } 안에 여러 속성을 정의하며, 각각의 속성은 쉼표로 구분됩니다.
키는 문자열로 표현되며, 값은 문자열, 숫자, 불리언, 배열, 함수 등 자바스크립트에서 지원하는 어떤 타입도 될 수 있습니다.
따라서 객체는 단순한 데이터 저장소를 넘어, 동작(메서드)까지 포함할 수 있는 강력한 구조입니다.

🗝️ key와 value의 구조 이해하기

객체(Object)는 key와 value의 쌍으로 구성됩니다.
key는 객체 속성을 구분하기 위한 고유한 이름이며, value는 그에 해당하는 실제 데이터입니다.
쉽게 말해 ‘이름표(key)’와 ‘내용물(value)’이 한 세트를 이루는 방식이라 할 수 있습니다.

자바스크립트에서 key는 문자열(string)이나 심볼(symbol) 타입만 사용할 수 있습니다.
반면 value는 문자열, 숫자, 불리언은 물론이고 배열, 함수, 또 다른 객체까지 담을 수 있어 매우 유연합니다.
이 덕분에 객체는 단순 데이터 저장소를 넘어 계층적 구조를 표현할 수 있습니다.

const car = {
    brand: "Hyundai",     // key: brand, value: "Hyundai"
    model: "Sonata",      // key: model, value: "Sonata"
    year: 2024,           // key: year, value: 2024
    features: ["ABS", "Airbag", "Navigation"], // value로 배열 가능
    drive: function() {   // value로 함수 가능
        console.log("운전 시작");
    }
};

위 예시에서 brand, model, year 등이 key이고, 각각 “Hyundai”, “Sonata”, 2024가 value입니다.
또한 features는 배열을 값으로 가지고 있으며, drive는 함수 자체가 값으로 들어간 메서드입니다.
이처럼 다양한 타입을 value로 담을 수 있다는 점은 객체 활용의 큰 강점입니다.

⚙️ 객체 속성 접근 방법

객체의 속성에 접근하는 방법은 크게 두 가지가 있습니다.
점 표기법(dot notation)과 대괄호 표기법(bracket notation)인데, 상황에 따라 적절하게 선택해서 사용해야 합니다.

🔹 점 표기법 (Dot Notation)

점 표기법은 가장 직관적이고 자주 쓰이는 방식입니다.
객체 이름 뒤에 마침표(.)를 붙이고, 이어서 key 이름을 작성하면 됩니다.

const user = {
    name: "김철수",
    age: 25
};

console.log(user.name); // "김철수"
console.log(user.age);  // 25

위 코드에서 user.name은 “김철수”라는 값을 반환합니다.
이처럼 key 이름이 고정적이고 특별한 문자가 없는 경우 dot notation이 가장 간단합니다.

🔹 대괄호 표기법 (Bracket Notation)

대괄호 표기법은 key 이름을 문자열로 감싸서 사용하는 방식입니다.
key에 공백, 특수문자, 또는 동적으로 정해지는 값이 포함될 때 반드시 이 방법을 사용해야 합니다.

const user = {
    "full name": "이영희",
    age: 28
};

console.log(user["full name"]); // "이영희"
console.log(user["age"]);       // 28

특히 동적으로 key를 지정할 때 bracket notation이 유용합니다.

const keyName = "age";
console.log(user[keyName]); // 28

✏️ 객체 속성 수정과 추가하기

객체는 이미 존재하는 속성 값을 수정하거나, 새로운 속성을 추가할 수 있습니다.
이러한 유연성 덕분에 자바스크립트 객체는 동적인 데이터 구조로 활용됩니다.

🔹 속성 값 수정하기

객체의 속성을 수정하는 것은 기존 속성에 새로운 값을 할당하면 됩니다.

const book = {
    title: "자바스크립트 기초",
    pages: 300
};

// 속성 값 수정
book.pages = 350;
console.log(book.pages); // 350

위 예시처럼 book.pages 값을 300에서 350으로 수정했습니다.
dot notation과 bracket notation 모두 사용 가능합니다.

🔹 새로운 속성 추가하기

존재하지 않는 key에 값을 할당하면 자동으로 새로운 속성이 추가됩니다.

book.author = "홍길동";
console.log(book.author); // "홍길동"

위 코드처럼 객체에 새로운 속성을 간단히 추가할 수 있습니다.
이 방식은 데이터가 동적으로 변하는 상황에서 특히 유용합니다.

🗑️ 객체 속성 삭제 방법

객체에서 특정 속성이 더 이상 필요하지 않다면 삭제할 수 있습니다.
자바스크립트에서는 delete 연산자를 사용하여 속성을 제거합니다.
삭제된 속성은 더 이상 객체 내부에서 접근할 수 없습니다.

🔹 delete 연산자 사용하기

const user = {
    name: "김철수",
    age: 27,
    job: "개발자"
};

delete user.age;

console.log(user);
// { name: "김철수", job: "개발자" }

위 코드에서 delete user.age를 실행하면 age 속성이 제거됩니다.
삭제 이후에는 user 객체에서 age를 더 이상 참조할 수 없습니다.

🔹 undefined와의 차이

속성을 삭제하는 것과 단순히 값을 undefined로 설정하는 것은 다릅니다.
delete는 속성 자체를 제거하지만, undefined 할당은 속성을 남겨둔 채 값만 비우는 것입니다.

user.job = undefined; 
console.log(user); 
// { name: "김철수", job: undefined }

이처럼 delete는 객체의 구조 자체를 바꾸는 반면, undefined는 데이터 값만 비워놓습니다.
상황에 따라 의도에 맞게 선택해서 사용하는 것이 중요합니다.

❓ 자주 묻는 질문 (FAQ)