프로퍼티에 대해 알아보자에 대해 알아보자

안녕하세요. 오늘은 프로퍼티에 대해 정리하려고 합니다. 기본 개념이 약해서 꾸준히 공부해 나갈려고 합니다.

---

자바스크립트의 프로퍼티

자바스크립트는 객체 지향 프로그래밍 언어로, 객체는 프로퍼티(속성)들의 집합입니다. 프로퍼티는 객체의 상태와 동작을 정의하며, 키(key)와 값(value)으로 구성됩니다. 이번 글에서는 자바스크립트의 프로퍼티에 대해 깊이 있게 살펴보겠습니다.

1. 프로퍼티 정의 및 접근

자바스크립트에서 객체의 프로퍼티는 점 표기법(dot notation) 또는 대괄호 표기법(bracket notation)을 사용하여 정의하고 접근할 수 있습니다.

let person = {
    name: "John",
    age: 30
};

// 점 표기법
console.log(person.name); // John
person.age = 31;

// 대괄호 표기법
console.log(person["age"]); // 31
person["name"] = "Jane";

대괄호 표기법은 프로퍼티 키가 변수일 때나 공백, 특수 문자가 포함된 경우 유용합니다.

let property = "name";
console.log(person[property]); // Jane

person["full name"] = "Jane Doe";
console.log(person["full name"]); // Jane Doe

2. 프로퍼티의 추가와 삭제

객체에 새로운 프로퍼티를 추가하거나 기존 프로퍼티를 삭제할 수 있습니다.

// 프로퍼티 추가
person.gender = "male";
person["country"] = "USA";

// 프로퍼티 삭제
delete person.age;
delete person["gender"];

3. 프로퍼티 특성

프로퍼티에는 몇 가지 중요한 특성이 있습니다. 이 특성들은 Object.defineProperty 메서드를 사용하여 설정할 수 있습니다.

• value: 프로퍼티의 값
• writable: 프로퍼티 값의 수정 가능 여부 (기본값: true)
• enumerable: 프로퍼티의 열거 가능 여부 (기본값: true)
• configurable: 프로퍼티의 삭제 및 특성 수정 가능 여부 (기본값: true)

let car = {};
Object.defineProperty(car, 'model', {
    value: 'Tesla',
    writable: false,
    enumerable: true,
    configurable: true
});

console.log(car.model); // Tesla
car.model = 'Ford'; // 수정 불가
console.log(car.model); // Tesla

4. 접근자 프로퍼티 (Accessor Properties)

접근자 프로퍼티는 데이터를 읽거나 쓸 때 함수를 실행하는 프로퍼티입니다. getter와 setter를 사용하여 정의합니다.

let user = {
    firstName: 'John',
    lastName: 'Doe',
    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    },
    set fullName(name) {
        [this.firstName, this.lastName] = name.split(' ');
    }
};

console.log(user.fullName); // John Doe
user.fullName = 'Jane Smith';
console.log(user.firstName); // Jane
console.log(user.lastName); // Smith

getter는 프로퍼티 값을 읽을 때, setter는 프로퍼티 값을 쓸 때 호출됩니다.

5. 데이터 프로퍼티와 접근자 프로퍼티

프로퍼티는 데이터 프로퍼티(data property)와 접근자 프로퍼티(accessor property)로 나뉩니다.

• 데이터 프로퍼티: 값을 저장하는 기본적인 프로퍼티
• 접근자 프로퍼티: 함수로 정의되며, 값을 읽거나 쓸 때 호출됨

6. 프로퍼티 열거

for...in 문을 사용하면 객체의 열거 가능한(enumerable) 프로퍼티를 반복(iterate)할 수 있습니다.

for (let key in person) {
    if (person.hasOwnProperty(key)) {
        console.log(`${key}: ${person[key]}`);
    }
}

이 방법은 상속된 프로퍼티를 포함하지 않습니다.

7. 프로퍼티 존재 여부 확인

in 연산자 또는 hasOwnProperty 메서드를 사용하여 객체에 특정 프로퍼티가 존재하는지 확인할 수 있습니다.

console.log('name' in person); // true
console.log(person.hasOwnProperty('age')); // false

in 연산자는 상속된 프로퍼티도 확인하지만, hasOwnProperty는 객체 고유의 프로퍼티만 확인합니다.

8. 불변성 (Immutability)

프로퍼티를 불변으로 만들려면 writable과 configurable을 false로 설정합니다. 이를 통해 프로퍼티 값을 수정하거나 삭제할 수 없게 만듭니다.

Object.defineProperty(person, 'birthYear', {
    value: 1990,
    writable: false,
    configurable: false
});

console.log(person.birthYear); // 1990
person.birthYear = 2000; // 무시됨
delete person.birthYear; // 무시됨
console.log(person.birthYear); // 1990

9. 다중 프로퍼티 정의

Object.defineProperties 메서드를 사용하면 여러 프로퍼티를 한 번에 정의할 수 있습니다.

Object.defineProperties(person, {
    job: {
        value: 'Developer',
        writable: true,
        enumerable: true,
        configurable: true
    },
    salary: {
        value: 50000,
        writable: false,
        enumerable: false,
        configurable: false
    }
});

console.log(person.job); // Developer
console.log(person.salary); // 50000

오늘도 필자의 부족한 글 읽어 주셔서 감사합니다.