JavaScript Object Properties
JavaScript Object Properties: 이해와 활용
JavaScript 객체는 다양한 **프로퍼티(properties)**로 구성되어 있으며, 프로퍼티는 객체의 데이터를 저장하는 기본 단위입니다. 이 가이드는 JavaScript의 객체 프로퍼티에 대한 이해를 높이고, 이를 효과적으로 활용하는 방법을 제공합니다.
1. 프로퍼티란?
- *프로퍼티(Property)**는 객체의 속성을 나타내며, 키-값 쌍으로 구성됩니다. 프로퍼티는 객체의 상태를 정의하고, 객체가 수행할 수 있는 행동을 나타내는 메서드(함수)와 함께 객체를 구성합니다.
1.1. 프로퍼티의 구조
const person = {
name: "Alice", // 'name'은 키, "Alice"는 값
age: 30, // 'age'는 키, 30은 값
greet() { // 'greet'는 키, 함수는 값
console.log(`Hello, my name is ${this.name}`);
}
};
2. 프로퍼티 접근 방법
JavaScript에서 객체의 프로퍼티에 접근하는 방법은 두 가지가 있습니다: **점 표기법(Dot Notation)**과 대괄호 표기법(Bracket Notation).
2.1. 점 표기법(Dot Notation)
점 표기법은 객체의 프로퍼티에 접근할 때 가장 일반적으로 사용되는 방법입니다.
const car = {
brand: "Tesla",
model: "Model S",
year: 2022
};
console.log(car.brand); // 출력: Tesla
console.log(car.year); // 출력: 2022
2.2. 대괄호 표기법(Bracket Notation)
대괄호 표기법은 프로퍼티의 이름이 동적으로 결정될 때 유용하며, 문자열 형태로 프로퍼티 이름을 전달할 수 있습니다.
const car = {
brand: "Tesla",
model: "Model S",
year: 2022
};
console.log(car["model"]); // 출력: Model S
// 변수로 프로퍼티 접근
const propName = "year";
console.log(car[propName]); // 출력: 2022
사용 시점:
- 프로퍼티 이름에 공백이나 특수 문자가 포함된 경우
- 동적으로 프로퍼티 이름을 설정해야 하는 경우
const user = {
"first name": "John",
"last-name": "Doe"
};
console.log(user["first name"]); // 출력: John
3. 프로퍼티 수정 및 추가
JavaScript 객체의 프로퍼티는 언제든지 수정하거나 새로운 프로퍼티를 추가할 수 있습니다.
3.1. 프로퍼티 수정
const person = {
name: "Alice",
age: 30
};
// 프로퍼티 수정
person.age = 31;
console.log(person.age); // 출력: 31
3.2. 새로운 프로퍼티 추가
const person = {
name: "Alice",
age: 30
};
// 새로운 프로퍼티 추가
person.gender = "female";
console.log(person.gender); // 출력: female
4. 프로퍼티 삭제
객체의 프로퍼티는 delete 연산자를 사용하여 삭제할 수 있습니다.
const person = {
name: "Alice",
age: 30,
occupation: "Engineer"
};
// 프로퍼티 삭제
delete person.occupation;
console.log(person); // 출력: { name: "Alice", age: 30 }
주의사항:
delete는 프로퍼티를 완전히 제거하므로, 나중에 해당 프로퍼티에 접근하면undefined가 됩니다.
5. 프로퍼티의 열거 가능성
JavaScript에서는 객체의 프로퍼티가 열거 가능한지 여부를 확인할 수 있습니다. 기본적으로 모든 프로퍼티는 열거 가능하지만, Object.defineProperty()를 사용하여
열거 가능성을 설정할 수 있습니다.
5.1. 열거 가능한 프로퍼티
const person = {
name: "Alice",
age: 30
};
for (let key in person) {
console.log(key); // 출력: name, age
}
5.2. 비열거성 프로퍼티
Object.defineProperty() 메서드를 사용하여 비열거성 프로퍼티를 설정할 수 있습니다.
const person = {};
Object.defineProperty(person, "name", {
value: "Alice",
enumerable: false // 비열거성으로 설정
});
for (let key in person) {
console.log(key); // 출력: (비어 있음)
}
console.log(person.name); // 출력: Alice
5.3. 프로퍼티 정의 속성
프로퍼티를 정의할 때 configurable, enumerable, writable과 같은 속성을 설정할 수 있습니다.
const person = {};
Object.defineProperty(person, "name", {
value: "Alice",
writable: false, // 수정 불가능
enumerable: true, // 열거 가능
configurable: false // 삭제 불가능
});
person.name = "Bob"; // 변경되지 않음
console.log(person.name); // 출력: Alice
delete person.name; // 삭제되지 않음
console.log(person.name); // 출력: Alice
6. 객체의 프로퍼티 접근자
JavaScript에서는 **접근자 프로퍼티(Accessor Property)**를 사용하여 객체의 프로퍼티에 접근하는 방법을 정의할 수 있습니다. 접근자 프로퍼티는 getter와
setter를 통해 구현됩니다.
6.1. Getter
getter는 객체의 프로퍼티 값을 반환하는 메서드입니다.
const person = {
firstName: "John",
lastName: "Doe",
get fullName() {
return `${this.firstName} ${this.lastName}`;
}
};
console.log(person.fullName); // 출력: John Doe
6.2. Setter
setter는 객체의 프로퍼티 값을 설정하는 메서드입니다.
const person = {
firstName: "John",
lastName: "Doe",
get fullName() {
return `${this.firstName} ${this.lastName}`;
},
set fullName(name) {
const parts = name.split(" ");
this.firstName = parts[0];
this.lastName = parts[1];
}
};
person.fullName = "Jane Smith"; // setter 호출
console.log(person.firstName); // 출력: Jane
console.log(person.lastName); // 출력: Smith
7. 프로퍼티의 순서
객체의 프로퍼티는 기본적으로 삽입된 순서대로 순회되지만, 숫자로 된 키는 정렬됩니다.
7.1. 문자열 키와 숫자 키
const obj = {
1: "one",
3: "three",
2: "two",
"a": "alpha",
"b": "beta"
};
for (let key in obj) {
console.log(key); // 출력: 1, 2, 3, a, b
}
주의사항:
- 숫자 키는 정수로 변환되어 정렬되며, 그 다음 문자열 키가 알파벳 순서로 출력됩니다.
8. 프로퍼티 정적 검사
JavaScript에서는 객체의 프로퍼티가 특정 조건을 만족하는지 확인할 수 있는 메서드를 제공합니다.
8.1. hasOwnProperty()
객체가 특정 프로퍼티를 가지는지 여부를 확인합니다. 이 메서드는 객체의 인스턴스가 특정 프로퍼티를 직접 가지고 있을 경우에만 true를 반환합니다.
const person = {
name: "Alice",
age: 30
};
console.log(person.hasOwnProperty("name")); // 출력: true
console.log(person.hasOwnProperty("gender")); // 출력: false
8.2. in 연산자
in 연산자는 객체가 특정 프로퍼티를 가지고 있는지를 확인합니다. 이 경우 프로토타입 체인을 통해 상속받은 프로퍼티도 포함됩니다.
const person = {
name: "Alice",
age: 30
};
console.log("name" in person); // 출력: true
console.log("toString" in person); // 출력: true (Object의 메서드)
9. 객체 병합 및 복사
여러 객체를 병합하거나 복사하는 방법을 통해 객체를 효과적으로 관리할 수 있습니다.
9.1. 얕은 복사(Shallow Copy)
객체의 첫 번째 수준만 복사하며, 중첩된 객체는 참조를 공유합니다.
const original = { a: 1, b: { c: 2 } };
const copy = Object.assign({}, original);
copy.a = 2;
copy.b.c = 3; // nested object reference change
console.log(original.b.c); // 출력: 3 (변경됨)
9.2. 깊은 복사(
Deep Copy)
객체의 모든 수준을 완전히 복사하여 원본 객체와 독립적인 새 객체를 생성합니다. JSON.parse(JSON.stringify()) 방법이나 라이브러리를 사용하여 수행할 수 있습니다.
const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));
deepCopy.b.c = 3; // nested object change
console.log(original.b.c); // 출력: 2 (변경되지 않음)
10. 요약
- 프로퍼티 개념: 객체는 키-값 쌍으로 구성된 프로퍼티를 통해 데이터를 저장합니다.
- 접근 방법: 점 표기법과 대괄호 표기법을 사용하여 프로퍼티에 접근할 수 있습니다.
- 프로퍼티 수정 및 추가: 객체의 프로퍼티는 언제든지 수정하거나 추가할 수 있습니다.
- 삭제:
delete연산자를 사용하여 프로퍼티를 삭제할 수 있습니다. - 열거 가능성: 프로퍼티는 기본적으로 열거 가능하며,
Object.defineProperty()를 사용하여 열거 가능성을 조정할 수 있습니다. - 접근자 프로퍼티:
getter와setter를 통해 객체의 프로퍼티 접근 방식을 정의할 수 있습니다. - 순서: 객체의 프로퍼티는 기본적으로 삽입 순서대로 순회되지만, 숫자로 된 키는 정렬됩니다.
- 정적 검사:
hasOwnProperty()와in연산자를 사용하여 객체의 프로퍼티 존재 여부를 확인할 수 있습니다. - 병합 및 복사: 객체를 병합하거나 복사하여 관리할 수 있습니다.
JavaScript 객체의 프로퍼티를 잘 이해하고 활용하면, 더 나은 웹 개발자로 성장할 수 있습니다. 이 가이드를 바탕으로 객체의 프로퍼티를 익히고, 실무에 적용해보세요!