프로퍼티 어트리뷰트

프로퍼티 어트리뷰트
16.1 내부 슬롯과 내부 메서드
- 16-01
16.2 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체
- 16-02
- 16-03
16.3 데이터 프로퍼티와 접근자 프로퍼티
- 16.3.1 데이터 프로퍼티
  - 16-04
  - 16-05
- 16.3.2 접근자 프로퍼티
  - 16-06
  - 16-07
16.4 프로퍼티 정의
- 16-08
- 16-09
16.5 객체 변경 방지

16.1 내부 슬롯과 내부 메서드

=> 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드. 이중 대괄호[[]]로 감싼 이름들이 내부 슬롯과 내부 메서드.

자바스크립트 엔진에서 실제로 동작하지만 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아니다.
내부 슬롯, 내부 메서드는 자바스크립트 엔진의 내부 로직이르모 원칙적으로 직접 접근, 호출할 수 있는 방법을 제공하지 않음.
(일부만 간접 접근 수단 제공)

예를 들어 모든 객체는 [[Prototype]]이라는 내부 슬롯을 가지고, __proto__를 통해 간접 접근 가능.

16-01

const o = {};

// 내부 슬롯은 자바스크립트 엔진의 내부 로직이므로 직접 접근할 수 없다.
o.[[Prototype]] // -> Uncaught SyntaxError: Unexpected token '['
// 단, 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공하기는 한다.
o.__proto__ // -> Object.prototype

16.2 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체

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

프로퍼티의 상태
- 프로퍼티의 값(value)
- 값의 갱신 가능 여부(writable)
- 열거 가능 여부(enumerable)
- 재정의 가능 여부(configurable)

프로퍼티 어트리뷰트는 자바스크립트 엔진이 관리하는 내부 상태 값(meta-property)인 내부 슬롯 [[writable]], [[Enumerable]], [[Configurable]]이다.

프로퍼티 어트리뷰트에 직접 접근할 수 없지만, Object.getOwnPropertyDescriptor 메서드를 사용하여 간접 확인 가능.

16-02

const person = {
  name: 'Lee',
};

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

=> 첫 번째 매개변수에는 객체 참조 전달, 두 번째 매개변수에는 프로퍼티 키를 문자열로 전달.
프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체를 반환. 만약 존재하지 않는 프로퍼티나 상속받은 프로퍼티에 대한 프로퍼티 디스크립터를 요구하면 undefined가 반환됨.

16-03

ES8에서 도입된 Object.getOwnPropertyDescriptors 메서드는 모든 프로퍼티의 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체들을 반환함.

const person = {
  name: 'Lee',
};

// 프로퍼티 동적 생성
person.age = 20;

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

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

프로퍼티
- 데이터 프로퍼티
  - 키와 값으로 구성된 일반적인 프로퍼티.
- 접근자 프로퍼티(accessor property)
  - 자체적으로 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 호출되는 접근자 함수(accessor function)로 구성된 프로퍼티.

16.3.1 데이터 프로퍼티

자바스크립트 엔진이 프로퍼티를 생성할 때 기본값으로 자동 정의되는 프로퍼티 어트리뷰트.

[[Value]]
- 프로퍼티 키를 통해 프로퍼티 값에 접근하면 반환되는 값
- 프로퍼티 키를 통해 프로퍼티 값을 변경하면 [[Value]]에 값을 재할당
- 프로퍼티가 없으면 프로퍼티를 동적 생성하고 생성된 값을 저장
[[Writable]]
- 프로퍼티 값의 변경 가능 여부를 나타내며 불리언 값을 가짐
- [[Writable]]의 값이 false인 경우 해당 프로퍼티의 값을 변경할 수 없는 읽기 전용 프로퍼티가 됨
[[Enumerable]]
- 프로퍼티의 열거 가능 여부를 나타내며 불리언 값을 가짐
- false인 경우 for in문이나 Object.keys 메서드 등으로 열거할 수 없음
[[Configurable]]
- 재정의 가능 여부를 나타내며 불리언 값을 가짐
- false인 경우 해당 프로퍼티의 삭제, 프로퍼티 어트리뷰트 값의 변경이 금지됨
- 단, [[Writable]]이 true인 경우 값의 변경과 Writable을 false로 변경하는 것은 허용됨

16-04

[[Value]]의 값은 프로퍼티 값으로 초기화
[[Writable]], [[Enumerable]], [[Configurable]]의 값은 true로 초기화.

const person = {
  name: 'Lee',
};

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

16-05

const person = {
  name: 'Lee',
};

// 프로퍼티 동적 생성
person.age = 20;

console.log(Object.getOwnPropertyDescriptors(person));
/*
{
  name: {value: "Lee", writable: true, enumerable: true, configurable: true},
  age: {value: 20, writable: true, enumerable: true, configurable: true}
}
*/

16.3.2 접근자 프로퍼티

자체적으로 값을 갖지 않고, 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수로 구성된 프로퍼티.

[[Get]]
- 접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 읽을 때 호출되는 접근자 함수. 접근자 프로퍼티 키로 프로퍼티 값에 접근하면 프로퍼티 어트리뷰트 [[Get]]의 값, 즉 getter 함수가 호출되고 그 결과가 프로퍼티 값을 반환됨
[[Set]]
- 접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 저장할 때 호출되는 접근자 함수. 접근자 프로퍼티 키로 프로퍼티 값을 저장하면 프로퍼티 어트리뷰트 [[Set]]의 값, 즉 setter 함수가 호출되고 그 결과가 프로퍼티 값으로 저장됨
[[Enumerable]]
- 상동
[[Configurable]]
- 상동

getter/setter 함수라고도 불림. 모두 정의할 수 있고 하나만 정의할 수도 있음

16-06

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

  // fullName은 접근자 함수로 구성된 접근자 프로퍼티다.
  // getter 함수
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  // setter 함수
  set fullName(name) {
    // 배열 디스트럭처링 할당: "31.1 배열 디스트럭처링 할당" 참고
    [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 함수가 호출된다.
console.log(person.fullName); // Heegun Lee

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

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

get 메서드 호출 시 동작 순서

프로퍼티 키 유효 확인. 문자열 또는 심벌.
프로토타입 체인에서 프로퍼티 검색.
검색된 프로퍼티가 데이터 프로퍼티인지, 접근자 프로퍼티인지 확인
getter 함수 호출하여 결과 반환.

프로토타입
- 어떤 객체의 상위 객체의 역할을 하는 객체. 프로토타입은 하위 객체에게 자신의 프로퍼티와 메서드를 상속함. 상속받은 하위 객체는 자신의 프로퍼티, 메서드를 자신의 것처럼 자유롭게 사용할 수 있음
프로토타입 체인
- 프로토타입이 단방향 링크드 리스트 형태로 연결되어 있는 상속 구조를 말함. 객체의 프로퍼티나 메서드에 접근할 때 해당 객체에 없으면 프로토타입 체인을 따라 프로토타입의 프로퍼티, 메서드를 차례대로 검색함.

16-07

접근자 프로퍼티와 데이터 프로퍼티를 구별하는 방법 : 디스크립터 객체의 프로퍼티가 다름

// 일반 객체의 __proto__는 접근자 프로퍼티다.
Object.getOwnPropertyDescriptor(Object.prototype, '__proto__');
// {get: ƒ, set: ƒ, enumerable: false, configurable: true}

// 함수 객체의 prototype은 데이터 프로퍼티다.
Object.getOwnPropertyDescriptor(function () {}, 'prototype');
// {value: {...}, writable: true, enumerable: false, configurable: false}

16.4 프로퍼티 정의

=> 새로운 프로퍼티를 추가하면서 프로퍼티 어트리뷰트를 명시적으로 정의하거나, 기존 프로퍼티의 프로퍼티 어트리뷰트를 재정의하는 것.
객체의 프로퍼티가 어떻게 동작해야 하는지를 명확히 정의할 수 있음.

16-08

const person = {};

// 데이터 프로퍼티 정의
Object.defineProperty(person, 'firstName', {
  value: 'Ungmo',
  writable: true,
  enumerable: true,
  configurable: true,
});

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

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

// 디스크립터 객체의 프로퍼티를 누락시키면 undefined, false가 기본값이다.
descriptor = Object.getOwnPropertyDescriptor(person, 'lastName');
console.log('lastName', descriptor);
// lastName {value: "Lee", writable: false, enumerable: false, configurable: false}

// [[Enumerable]]의 값이 false인 경우
// 해당 프로퍼티는 for...in 문이나 Object.keys 등으로 열거할 수 없다.
// lastName 프로퍼티는 [[Enumerable]]의 값이 false이므로 열거되지 않는다.
console.log(Object.keys(person)); // ["firstName"]

// [[Writable]]의 값이 false인 경우 해당 프로퍼티의 [[Value]]의 값을 변경할 수 없다.
// lastName 프로퍼티는 [[Writable]]의 값이 false이므로 값을 변경할 수 없다.
// 이때 값을 변경하면 에러는 발생하지 않고 무시된다.
person.lastName = 'Kim';

// [[Configurable]]의 값이 false인 경우 해당 프로퍼티를 삭제할 수 없다.
// lastName 프로퍼티는 [[Configurable]]의 값이 false이므로 삭제할 수 없다.
// 이때 프로퍼티를 삭제하면 에러는 발생하지 않고 무시된다.
delete person.lastName;

// [[Configurable]]의 값이 false인 경우 해당 프로퍼티를 재정의할 수 없다.
// Object.defineProperty(person, 'lastName', { enumerable: true });
// Uncaught TypeError: Cannot redefine property: lastName

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

// 접근자 프로퍼티 정의
Object.defineProperty(person, 'fullName', {
  // getter 함수
  get() {
    return `${this.firstName} ${this.lastName}`;
  },
  // setter 함수
  set(name) {
    [this.firstName, this.lastName] = name.split(' ');
  },
  enumerable: true,
  configurable: true,
});

descriptor = Object.getOwnPropertyDescriptor(person, 'fullName');
console.log('fullName', descriptor);
// fullName {get: ƒ, set: ƒ, enumerable: true, configurable: true}

person.fullName = 'Heegun Lee';
console.log(person); // {firstName: "Heegun", lastName: "Lee"}

Object.defineProperty 메서드로 프로퍼티 정의할 때 디스크립터 객체의 프로퍼티를 일부 생략할 수 있음.

생략 시 기본값
- value : undefined
- get : undefined
- set : undefined
- writable : false
- enumerable : false
- configurable : false

16-09

Object.defineProperties 메서드로 여러 개 프로퍼티 한 번에 정의 가능

const person = {};

Object.defineProperties(person, {
  // 데이터 프로퍼티 정의
  firstName: {
    value: 'Ungmo',
    writable: true,
    enumerable: true,
    configurable: true,
  },
  lastName: {
    value: 'Lee',
    writable: true,
    enumerable: true,
    configurable: true,
  },
  // 접근자 프로퍼티 정의
  fullName: {
    // getter 함수
    get() {
      return `${this.firstName} ${this.lastName}`;
    },
    // setter 함수
    set(name) {
      [this.firstName, this.lastName] = name.split(' ');
    },
    enumerable: true,
    configurable: true,
  },
});

person.fullName = 'Heegun Lee';
console.log(person); // {firstName: "Heegun", lastName: "Lee"}

16.5 객체 변경 방지

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

객체 확장 금지
- Object.preventExtensions
- 프로퍼티 삭제, 프로퍼티 값 읽기, 쓰기, 프로퍼티 어트리뷰터 재정의
객체 밀봉
- Object.seal
- 프로퍼티 값 읽기, 쓰기
객체 동결
- Object.freeze
- 프로퍼티 값 읽기

16.5.1 객체 확장 금지

Object.preventExtensions : 객체 확장 금지. 프로퍼티 추가 금지 의미.

프로퍼티 추가 방법

프로퍼티 동적 추가
Object.defineProperty

16-10

const person = { name: 'Lee' };

// person 객체는 확장이 금지된 객체가 아니다.
console.log(Object.isExtensible(person)); // true

// person 객체의 확장을 금지하여 프로퍼티 추가를 금지한다.
Object.preventExtensions(person);

// person 객체는 확장이 금지된 객체다.
console.log(Object.isExtensible(person)); // false

// 프로퍼티 추가가 금지된다.
person.age = 20; // 무시. strict mode에서는 에러
console.log(person); // {name: "Lee"}

// 프로퍼티 추가는 금지되지만 삭제는 가능하다.
delete person.name;
console.log(person); // {}

// 프로퍼티 정의에 의한 프로퍼티 추가도 금지된다.
Object.defineProperty(person, 'age', { value: 20 });
// TypeError: Cannot define property age, object is not extensible

16.5.2 객체 밀봉

Object.seal : 프로퍼티 추가 및 삭제, 프로퍼티 어트리뷰트 재정의 금지 => 읽기, 쓰기만 가능

16-11

const person = { name: 'Lee' };

// person 객체는 밀봉(seal)된 객체가 아니다.
console.log(Object.isSealed(person)); // false

// person 객체를 밀봉(seal)하여 프로퍼티 추가, 삭제, 재정의를 금지한다.
Object.seal(person);

// person 객체는 밀봉(seal)된 객체다.
console.log(Object.isSealed(person)); // true

// 밀봉(seal)된 객체는 configurable이 false다.
console.log(Object.getOwnPropertyDescriptors(person));
/*
{
  name: {value: "Lee", writable: true, enumerable: true, configurable: false},
}
*/

// 프로퍼티 추가가 금지된다.
person.age = 20; // 무시. strict mode에서는 에러
console.log(person); // {name: "Lee"}

// 프로퍼티 삭제가 금지된다.
delete person.name; // 무시. strict mode에서는 에러
console.log(person); // {name: "Lee"}

// 프로퍼티 값 갱신은 가능하다.
person.name = 'Kim';
console.log(person); // {name: "Kim"}

// 프로퍼티 어트리뷰트 재정의가 금지된다.
Object.defineProperty(person, 'name', { configurable: true });
// TypeError: Cannot redefine property: name

16.5.3 객체 동결

Object.freeze : 프로퍼티 추가 및 삭제, 프로퍼티 어트리뷰트 재정의 금지, 갱신 금지 => 읽기만 가능

16-12

const person = { name: 'Lee' };

// person 객체는 동결(freeze)된 객체가 아니다.
console.log(Object.isFrozen(person)); // false

// person 객체를 동결(freeze)하여 프로퍼티 추가, 삭제, 재정의, 쓰기를 금지한다.
Object.freeze(person);

// person 객체는 동결(freeze)된 객체다.
console.log(Object.isFrozen(person)); // true

// 동결(freeze)된 객체는 writable과 configurable이 false다.
console.log(Object.getOwnPropertyDescriptors(person));
/*
{
  name: {value: "Lee", writable: false, enumerable: true, configurable: false},
}
*/

// 프로퍼티 추가가 금지된다.
person.age = 20; // 무시. strict mode에서는 에러
console.log(person); // {name: "Lee"}

// 프로퍼티 삭제가 금지된다.
delete person.name; // 무시. strict mode에서는 에러
console.log(person); // {name: "Lee"}

// 프로퍼티 값 갱신이 금지된다.
person.name = 'Kim'; // 무시. strict mode에서는 에러
console.log(person); // {name: "Lee"}

// 프로퍼티 어트리뷰트 재정의가 금지된다.
Object.defineProperty(person, 'name', { configurable: true });
// TypeError: Cannot redefine property: name

16.5.4 불변 객체

변경 방지 메서드들은 얕은 변경 방지(shallow only)로 직속 프로퍼티만 변경 방지되고 중첩 객체는 영향을 주지 못함.

16-13

const person = {
  name: 'Lee',
  address: { city: 'Seoul' },
};

// 얕은 객체 동결
Object.freeze(person);

// 직속 프로퍼티만 동결한다.
console.log(Object.isFrozen(person)); // true
// 중첩 객체까지 동결하지 못한다.
console.log(Object.isFrozen(person.address)); // false

person.address.city = 'Busan';
console.log(person); // {name: "Lee", address: {city: "Busan"}}

16-14

중첩 객체까지 동결하려면 재귀적으로 Object.freeze 메서드 호출해야 함

function deepFreeze(target) {
  // 객체가 아니거나 동결된 객체는 무시하고 객체이고 동결되지 않은 객체만 동결한다.
  if (target && typeof target === 'object' && !Object.isFrozen(target)) {
    Object.freeze(target);
    /*
      모든 프로퍼티를 순회하며 재귀적으로 동결한다.
      Object.keys 메서드는 객체 자신의 열거 가능한 프로퍼티 키를 배열로 반환한다.
      ("19.15.2. Object.keys/values/entries 메서드" 참고)
      forEach 메서드는 배열을 순회하며 배열의 각 요소에 대하여 콜백 함수를 실행한다.
      ("27.9.2. Array.prototype.forEach" 참고)
    */
    Object.keys(target).forEach((key) => deepFreeze(target[key]));
  }
  return target;
}

const person = {
  name: 'Lee',
  address: { city: 'Seoul' },
};

// 깊은 객체 동결
deepFreeze(person);

console.log(Object.isFrozen(person)); // true
// 중첩 객체까지 동결한다.
console.log(Object.isFrozen(person.address)); // true

person.address.city = 'Busan';
console.log(person); // {name: "Lee", address: {city: "Seoul"}}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

16_study_ldh.md

16_study_ldh.md

프로퍼티 어트리뷰트

16.1 내부 슬롯과 내부 메서드

16-01

16.2 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체

16-02

16-03

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

16.3.1 데이터 프로퍼티

16-04

16-05

16.3.2 접근자 프로퍼티

16-06

16-07

16.4 프로퍼티 정의

16-08

16-09

16.5 객체 변경 방지

16.5.1 객체 확장 금지

16-10

16.5.2 객체 밀봉

16-11

16.5.3 객체 동결

16-12

16.5.4 불변 객체

16-13

16-14

Files

16_study_ldh.md

Latest commit

History

16_study_ldh.md

File metadata and controls

프로퍼티 어트리뷰트

16.1 내부 슬롯과 내부 메서드

16-01

16.2 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체

16-02

16-03

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

16.3.1 데이터 프로퍼티

16-04

16-05

16.3.2 접근자 프로퍼티

16-06

16-07

16.4 프로퍼티 정의

16-08

16-09

16.5 객체 변경 방지

16.5.1 객체 확장 금지

16-10

16.5.2 객체 밀봉

16-11

16.5.3 객체 동결

16-12

16.5.4 불변 객체

16-13

16-14