[JS] (16-4) 프로퍼티 정의

프로퍼티 정의

프로퍼티 정의는 새로운 프로퍼티를 추가하면서 프로퍼티의 어트리뷰트를 명시적으로 정의하거나, 기존 프로퍼티의 프로퍼티 어트리뷰트를 재정의 하는 것을 말한다.

기존의 객체정의 방법으로는 프로퍼티의 어트리뷰트까지 사용자에 맞게 정의 할 수 없다.

const obj = {
	name: 'car'
}

내가 만든 객체의 프로퍼티를 갱신 가능하게 할 것인지, 열거 가능하게 할 것인지, 재정의 등이 가능하게 하도록 정의 할 수 있다.

🖍 이때 우린 Object.defineProperty메서드를 사용하여 프로퍼티와 프로퍼티의 어트리뷰트를 정의 할 수 있다.
인수로는 객체의 참조와 데이터 프로퍼티의 키인 문자열, 프로퍼티 디스크립터 객체를 전달한다.

const person = {};

Object.defineProperty(person, 'firstName', {
	value : 'Sehan',
    	writable : true,
    	enumerable : true, 
    	configurable : true,
});

프로퍼티 어트리뷰트 값에 따른 차이

value, writable, enumerable, configurable 어트리뷰트를 따로 지정하지 않을 경우(누락 시킬 경우) undefined과 false가 기본값이다.

Object.defineProperty(person, 'lastName', {
	value : 'Kim'
});

let descriptor = Object.getOwnPropertyDescriptor(person, 'firstName');
console.log('firstName',descriptor);
//firstName {value: 'Sehan', writable: true, enumerable: true, configurable: true}

descriptor = Object.getOwnPropertyDescriptor(person, 'lastName');
console.log('lastName',descriptor);
//firstName {value: 'Kim', writable: false, enumerable: false, configurable: false}  

• Enumerable 이 False인 경우,
  - 해당 프로퍼티는 for..in 문이나 Object.keys 등으로 열거 할 수 없다.
  //lastName 프로퍼티는 열거되지 않음!

console.log(Object.keys(person)); // ["firstName"]

• Writable 이 False인 경우,
  - 해당 프로퍼티의 Value의 값을 변경 할 수 없다.
  //lastName 프로퍼티의 값은 변경되지 않음!

person.firstName = 'BonBon';
console.log(person); // {firstName: 'BonBon', lastName: 'Kim'}

person.lastName = 'Lee'; -> 에러는 발생하지 않음!
console.log(person); // {firstName: 'BonBon', lastName: 'Kim'}

• Configurable 이 False인 경우,
  - 해당 프로퍼티의 Value의 값을 삭제, 재정의 할 수 없다.

delete person.lastName; 
console.log(person); // {firstName: 'BonBon', lastName: 'Kim'}

Object.defineProperty(person, 'lastName', {enumerable: true});

접근자 프로퍼티의 경우

프로퍼티 드스크립터 객체를 인수로 전달할 때 내부에 getter, setter 함수를 지정해주면 된다.

Object.defineProperty(person, 'fullName', {
	get() {
    	  return `${this.firstName} ${this.lastName}';
    	}, 
        set(name) {
          [this.firstName, this.lastName] = name.split(' ');
        }, 
        enumerable: true,
        configurable: true
});

여러 프로퍼티를 한번에 정의하기

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

const person = {};

Object.defineProperty(person, {
	firstName: {
            value : 'Sehan',
            writable : true,
            enumerable : true, 
            configurable : true,
        },
    	lastName : {
       	    value: 'Kim',
            writable : true,
            enumerable : true, 
            configurable : true,
        },
        fullName: {
                get() {
              return `${this.firstName} ${this.lastName}';
            }, 
            set(name) {
              [this.firstName, this.lastName] = name.split(' ');
            }, 
            enumerable: true,
            configurable: true
        }
});