[JavaScript DeepDive] 16장_프러퍼티 어트리뷰트

📖 학습 목차

• 16장_프러퍼티 어트리뷰트

 

✅ 프로퍼티 어트리뷰트

프로퍼티란 속성이란 뜻으로, JS에서는 객체 내부의 속성을 의미한다.

객체도 0개 이상의 프로퍼티의 조합으로 이루어져 있다.

 

프로퍼티 어트리뷰트란 프로퍼티의 상태를 나타내는 것이다.

프로퍼티 상태란 프로퍼티의 값(value), 값의 갱신 가능 여부(writable),

열거 가능 여부(enumerable), 재정의 가능 여부(configurable)를 의미 한다.

 

즉, 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다.

const person = {
    // 프로퍼티
    name : 'Lee'
}
// 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체를 반환한다.
console.log(Object.getOwnPropertyDescriptor(person, 'name'))
// { value: 'Lee', writable: true, enumerable: true, configurable: true }

 

✍ 데이터 프로퍼티와 접근자 프로퍼티

🧐데이터 프로퍼티

키와 값으로 구성된 일반적인 프로퍼티다.

자바스크립트 엔진이 프로퍼티를 생성할 때 기본값으로 자동 정의 된다.

// { value: 'Lee', writable: true, enumerable: true, configurable: true }

 

🧐접근자 프로퍼티

자체적으로는 값을 갖기 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때

사용되는 접근자 함수로 구성된 프로퍼티다. // 차후 예제로 소개

 

객체의 프로퍼티	프로퍼티 어트리뷰트
데이터 프로퍼티	Value, Writable, Enumerable, Configurable
접근자 프로퍼티	Get, Set, Enumerable, Configurable

 

const person = {
    // 데이터 프로퍼티
    firstName : 'Ungmo',
    lastName : 'Lee',

    // fullName은 접근자 함수로 구성된 접근자 프로퍼티 
    // getter 함수 
    get fullName() {
        return `${this.firstName} ${this.lastName}`
    },
    //setter 함수 
    set fullName(name) {
        // 배열 디스트럭처링 할당
        [this.firstName, this.lastName] = name.split(' ');
    }
};

// 데이터 프로퍼티를 통한 프로퍼티 값의 참조
console.log(person.firstName + ' ' + person.lastName); //Ungmo Lee

// 접근자 프로퍼티를 통한 프로퍼티 값의 저장
// fullName에 값을 저장하면 setter 함수가 호출
person.fullName = "Heegun Lee";
console.log(person); //{ firstName: 'Heegun', lastName: 'Lee', fullName: [Getter/Setter] }

// 접근자 프로퍼티를 통한 프로퍼티 값의 참조
// fullName에 접근하면 getter 함수가 호출
console.log(person.fullName) //Heegun Lee

// firstName은 데이터 프로퍼티
// 데이터 프로퍼티는 [[Value]], [[Writable]], [[Enumerable]], [[Configurable]]
// 프로퍼티 어트리뷰트를 갖는다.
let discriptor = Object.getOwnPropertyDescriptor(person, 'firstName');
console.log(discriptor);
//{ value: 'Heegun',writable: true,enumerable: true,configurable: true}

// fullName은 접근자 프로퍼티 
// 접근자 프로퍼티는 [[Get]], [[Set]], [[Enumerable]], [[Configurable]]
// 프로퍼티 어트리뷰트를 갖는다.
let descriptor = Object.getOwnPropertyDescriptor(person, 'fullName');
console.log(descriptor);   
//{ get: [Function: get fullName], set: [Function: set fullName],    enumerable: true,   configurable: true  }

person 객체의 firstName과 lastName 프로퍼티는 일반적인 데이터 프로퍼티다.

메서드 앞에 get, set이 붙은 메서드가 getter, setter 함수이고, 이는 접근자 프로퍼티다.

접근자 프로퍼티는 자제척으로 값을 가지지 않으며 다만 데이터 프로퍼티의 값을 읽거나 저장할 때 관여한다.

 

✍ 객체 변경 방지

객체는 변경 가능한 값이므로 재할당 없이 직접 변경할 수 있다. 즉, 프로퍼티를 추가하거나 삭제할 수 있고,

프로퍼티 값을 갱신할 수 있으며, 메소드를 사용하여 프로퍼티 어트리뷰트를 재정의할 수도 있다.

자바스크립트는 객체의 변경을 방지하는 다양한 메서드를 제공한다.

객체 변경 방지 메서드들은 객체의 변경을 금지하는 강도가 다르다.

구분	메서드	추가	삭제	값 읽기	값 쓰기	재정의
객체 확장금지	Object.preventExtensions	x	o	o	o	o
객체 밀봉	Object.seal	x	x	o	o	x
객체 동결	Object.freeze	x	x	o	x	x

객체 동결 함수 사용시 객체의 중첩 까지는 동결이 불가능 하므로

객체의 중첩 객체까지 동결을 할려면 재귀적으로 수행해줘야 한다.

 

👨‍💻 이번 장에서는 생소한 개념과 용어의 혼동으로 한 번에 이해가 되지 않았다. 평소 아무런 생각 없이 사용하던 객체를
프로퍼티와 메서드의 조합으로 이루어져 있고, 또 이 안에서 데이터 프로퍼티, 접근자 프로퍼티를 통해 나열, 수정, 재정의 등의 개념을 알 수 있었고, 객체 변경 방지를 통해 객체를 안전하게 보호할 수 있는 방법 또한 알아갔다.
점점 단원이 뒤로 갈수록, 용어의 혼동과 생소한 개념이 많은 것 같다. 꼼꼼히 보지 않으면 이해가 안 될 것 같다.