[모자딥]프로퍼티 어트리뷰트 16.03~16.06

예제 16.03

• 사람 변수에 name: 'Lee' 할당
• 이후 동적으로 사람 객체에 age와 gender를 추가함 => '사람' 변수에 name : 'Lee' , age : 20, gender = '남자' 추가된 상태
• Object.getOwnPropertyDescriptors메서드로 사람 변수에 추가된 모든 프로퍼티의 프로퍼티 어트리뷰트를 조회

const 사람 = {
    name: 'Lee'
};

// 프로퍼티 동적 생성
사람.age = 20;
사람.gender = '남자'

//console.log(사람) name: 'Lee', age = 20, gender = '남자'

// 모든 프로퍼티의 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체들을 반환한다.
console.log(Object.getOwnPropertyDescriptors(사람))
// {  
//     name: { value: 'Lee', writable: true, enumerable: true,  configurable: true },
//     age: { value: 20, writable: true, enumerable: true, configurable: true },
//     gender: { value: '남자', writable: true, enumerable: true, configurable: true }
//   }

 

예제 16.04

• Obejct.getOwnPropertyDescriptor 메서드는 특정 프로퍼티에 대한 어트리뷰트를 조회
• 예제에서는 사람 객체의 name 프로퍼티에 대한 프로퍼티 어트리뷰트를 조회
• Object.getOwnPropertyDescriptor 첫번쨰 인자로 조회할 요소, 두번째 인자로 조회할 프로퍼티를 지정

const 사람 = {
    name: 'Lee'
};

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

예제 16.05

• 사람 변수 지정
• 동적으로 프로퍼티 지정 age,gender,job 프로퍼티 추가
• Object.getOwnPropertyDescriptors 메서드로 사람변수에 지정된 프로퍼티들에 대한 프로퍼티 어트리뷰트 조회

const 사람 = {
    name: 'Lee'
};

// 프로퍼티 동적 생성
사람.age = 20;
사람.gender = '남자';
사람.job = '공무원'
//console.log(사람){ name: 'Lee', age: 20, gender: '남자', job: '공무원' }

console.log(Object.getOwnPropertyDescriptors(사람));
//{
//  name: { value: 'Lee', writable: true, enumerable: true, configurable: true },
//  age: { value: 20, writable: true, enumerable: true, configurable: true },
//  gender: { value: '남자', writable: true, enumerable: true, configurable: true },
//  job: { value: '공무원', writable: true, enumerable: true, configurable: true}
//}

예제 16.06

const 사람 = {
    // 데이터 프로퍼티
    firstName: '용식',
    lastName: '김',

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

//용식 김
console.log(사람.firstName + ' ' + 사람.lastName);

// 접근자 프로퍼티를 통한 프로퍼티 값의 저장
사람.fullName = '니가 최고야';
console.log(사람); //{ firstName: '니가', lastName: '최고야', fullName: [Getter/Setter] }

// 니가 최고야
console.log(사람.fullName);

// firstName은 데이터 프로퍼티다.
// 데이터 프로퍼티는 [[Value]], [[Writable]], [[Enumerable]], [[Configurable]] 프로퍼티 어트리뷰트를 갖는다.
let descriptor1 = Object.getOwnPropertyDescriptor(사람, 'firstName');
let descriptor2 = Object.getOwnPropertyDescriptor(사람, 'lastName');
console.log(descriptor1);
console.log(descriptor2);
// descriptor1 { value: '니가', writable: true, enumerable: true, configurable: true }
// descriptor2 { value: '최고야', writable: true, enumerable: true, configurable: true }

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