JavaScript Object Properties: 속성 정의와 활용 방법 - 좋은공간 좋은집

JavaScript에서 객체(Object)는 데이터를 저장하고 처리하는 중요한 구조이며, 객체의 속성(Properties)은 객체 내부에 저장된 값입니다. 객체 속성은 키-값(Key-Value) 쌍으로 이루어지며, 객체를 구성하는 핵심 요소입니다. 이 글에서는 JavaScript 객체 속성에 대한 개념, 속성 정의 방법, 접근 및 수정 방법을 다루어보겠습니다.

객체 속성(Property) 정의

객체 속성은 객체를 생성하면서 정의할 수 있으며, key와 value의 쌍으로 이루어져 있습니다. 각 key는 문자열이나 Symbol일 수 있으며, value는 문자열, 숫자, 불리언, 함수 등 다양한 데이터 타입을 가질 수 있습니다.

let car = {
    brand: "Tesla",
    model: "Model 3",
    year: 2021
};

위 예제에서 객체 car는 brand, model, year라는 세 가지 속성을 가지고 있습니다. 각각의 속성은 해당 자동차의 브랜드, 모델, 제조 연도를 나타냅니다.

객체 속성에 접근하기

객체의 속성에 접근하는 방법은 두 가지가 있습니다: 점 표기법과 대괄호 표기법입니다.

점 표기법

점 표기법은 가장 직관적인 방법으로, 객체의 특정 속성에 접근할 때 객체명.속성명을 사용합니다.

console.log(car.brand);   // 결과: "Tesla"
console.log(car.year);    // 결과: 2021

위 코드에서는 car 객체의 brand와 year 속성에 접근하여 그 값을 출력합니다.

대괄호 표기법

대괄호 표기법은 속성 이름을 문자열로 지정해야 할 때 사용되며, 변수에 속성명을 저장해 사용할 때 유용합니다.

console.log(car["model"]);  // 결과: "Model 3"

let property = "year";
console.log(car[property]);   // 결과: 2021

위 예제에서 car["model"]로 속성에 접근하고, 변수 property를 사용하여 year 속성에 접근합니다.

객체 속성 추가 및 수정

JavaScript에서는 객체에 동적으로 속성을 추가하거나 기존 속성의 값을 수정할 수 있습니다. 점 표기법 또는 대괄호 표기법을 사용해 이를 쉽게 처리할 수 있습니다.

속성 추가

car.color = "red";  // 새로운 속성 추가
console.log(car.color);  // 결과: "red"

위 코드에서는 car 객체에 color라는 새로운 속성을 추가하고 값을 "red"로 설정했습니다.

속성 값 수정

car.year = 2022;  // 기존 속성 수정
console.log(car.year);  // 결과: 2022

기존 속성 year의 값을 2022로 수정했습니다. 객체 속성은 언제든지 이렇게 쉽게 수정할 수 있습니다.

객체 속성 삭제

객체의 특정 속성을 삭제하려면 delete 연산자를 사용합니다. 속성을 삭제하면 해당 속성은 더 이상 객체에 존재하지 않게 됩니다.

delete car.model;  // model 속성 삭제
console.log(car.model);  // 결과: undefined

model 속성을 삭제한 후에 해당 속성에 접근하면 undefined가 반환됩니다.

속성의 존재 여부 확인

객체에서 특정 속성이 존재하는지 확인하려면 in 연산자를 사용할 수 있습니다.

console.log("brand" in car);  // 결과: true
console.log("model" in car);  // 결과: false

위 코드에서 "brand" 속성은 객체에 존재하지만, 앞서 삭제된 "model" 속성은 더 이상 존재하지 않기 때문에 false가 반환됩니다.

속성의 속성 기술자

JavaScript 객체의 각 속성은 기본적으로 속성 기술자(Property Descriptor)를 가지고 있습니다. 속성 기술자는 객체의 속성이 어떻게 동작할지를 정의하며, 이를 사용해 속성을 더욱 세밀하게 제어할 수 있습니다.

• value: 속성의 값
• writable: 속성의 값을 수정할 수 있는지 여부
• enumerable: 속성을 반복문에서 열거할 수 있는지 여부
• configurable: 속성을 삭제하거나 속성 기술자를 수정할 수 있는지 여부

속성 기술자는 Object.defineProperty() 메서드를 사용해 설정할 수 있습니다.

속성 기술자 설정 예제

let person = {
    name: "Alice"
};

Object.defineProperty(person, "age", {
    value: 25,
    writable: false,
    enumerable: true,
    configurable: false
});

console.log(person.age);  // 결과: 25
person.age = 30;  // writable: false 이므로 값 변경 안 됨
console.log(person.age);  // 결과: 25

위 코드에서는 age 속성을 정의할 때 writable을 false로 설정했기 때문에 속성 값을 수정할 수 없습니다.

객체 속성의 열거

for...in 반복문을 사용하면 객체의 열거 가능한(enumerable) 속성을 순차적으로 탐색할 수 있습니다.

for (let key in car) {
    console.log(key + ": " + car[key]);
}

위 코드에서는 car 객체의 열거 가능한 모든 속성 키와 그 값을 출력합니다.

결론

JavaScript 객체 속성은 데이터를 저장하고 조작하는 데 중요한 역할을 합니다. 속성을 동적으로 추가, 수정, 삭제할 수 있으며, 속성 기술자를 사용해 객체의 동작을 더욱 세밀하게 제어할 수 있습니다. 객체의 속성 관리 방법을 잘 이해하고 나면, 더 효율적으로 JavaScript 프로그램을 작성할 수 있습니다.

이제 객체 속성에 대한 개념을 바탕으로 다양한 프로젝트에서 활용해 보세요!