16. 프로퍼티 어트리뷰트

in 모던자바스크립트




내부 슬롯과 내부 메서드

  • 내부 슬롯 : js 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티
  • 내부 메서드 : js 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 메서드
  • ([[...]]) 로 감싼 이름들 대부분
  • 내부 슬롯, 내부 메서드는 ECMAScript 사양에 정의된 대로 구현되어 js엔진에서 실제 동작하지만, 개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아니다.
  • 즉 js 엔진의 내부 로직으로 원칙적으로 js는 내부 슬롯과 내부 메서드에 직접 접근,호출할 방법 제공 x
  • 단, 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공한다.
// 모든 객체는 [[Property]] 라는 내부 슬롯을 갖는다.
// 내부 로직이므로 직접 접근할 수 없지만
// __proto__를 통해 간접적으로 접근 가능
const o = {}

// 내부 슬롯은 직접 접근 x
o.[[Prototype]] //Uncaught SyntaxError

// 일부 내부 슬롯과 내부 메서드에 한해, 간접적으로 접근할 수 있는 수단 제공
o.__proto__ // Object.prototype

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

  • js 엔진은 프로퍼티를 생성할 때, 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다.
  • 프로퍼티의 상태 : 프로퍼티의 값, 값의 갱신 가능 여부, 열거 가능 여부, 재정의 가능 여부
// 프로퍼티 어트리뷰트 : js 엔진이 관리하는 내부 상태 값인 내부 슬롯
[[Value]], [[Writable]], [[Enumerable]], [[Configurable]]
  • 프로퍼티 어트리뷰트에 직접 접근 x
  • Object.getOwnPropertyDescriptor 메서드를 사용하여 간접적으로 확인 가능
const person = {
  name: "jo",
};

console.log(Object.getOwnPropertyDescriptor(person, "name"));
//{ value: 'jo', writable: true, enumerable: true, configurable: true }
// 첫번째 매개변수 : 객체의 참조
// 두번째 매개변수 : 프로퍼티 키를 문자열로
// getOwnPropertyDescriptor 메서드는 프로퍼티 디스크립터 객체를 반환
// 프로퍼티 디스크립터 : 프로퍼티 어트리뷰트 정보 제공
// 만약 존재하지 않는 프로퍼티나 상속받은 프로퍼티에 대한 프로퍼티 디스크립터 요구시 undefined 반환
// 하나의 프로퍼티에 대해 프로퍼티 디스크립터 객체 반환
  • ES8에 도입된 Object.getOwnPropertyDescriptors 메서드는 모든 프로퍼티의 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체들을 반환
const person = {
  name: "jo",
};

person.age = 25;

console.log(Object.getOwnPropertyDescriptors(person));
// {
//     name: { value: 'jo', writable: true, enumerable: true, configurable: true },
//     age: { value: 25, writable: true, enumerable: true, configurable: true }
//   }

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

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

데이터 프로퍼티

  • 해당 프로퍼티 어트리뷰트는 js 엔진이 프로퍼티를 생성할 때 기본값으로 자동 정의한다.
  • [[Value]] : 프로퍼티를 키를 통해 프로퍼티 값에 접근하면 반환되는 값
  • [[Writable]] : 프로퍼티 값의 변경 여부를 나타내며, 불리언 값
  • [[Enumerable]] : 프로퍼티의 열거 가능 여부를 나타내며, 불리언 값
  • [[Configurable]] : 프로퍼티의 재정의 가능 여부를 나타내며, 불리언 값
    • false : 해당 프로퍼티의 삭제, 어트리뷰트 값의 변경 금지
    • Writable-true) [[Value]]의 변경과 [[Writable]]를 false로 바꾸는 건 허용

접근자 프로퍼티

  • 자체적으로 값을 갖지 않고, 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수로 구성된 프로퍼티
  • [[Get]] : 접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 읽을 때 호출되는 접근자 함수
  • [[Set]] : 접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 저장할 때 호출되는 접근자 함수
  • [[Enumerable]] : 데이터 프로퍼티의 [[Enumerable]]과 같다.
  • [[Configurable]] : 데이터 프로퍼티의 [[Configurable]]과 같다.
  • 접근자 함수는 getter/setter 함수라고도 부른다.
const person = {
  firstName: "nahyun",
  lastName: "jo",

  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  set fullName(name) {
    [this.firstName, this.lastName] = name.split(" ");
  },
};

console.log(person.firstName + " " + person.lastName); //nahyun jo

//setter
// 접근자 프로토타입에 값을 저장하면 setter 함수가 호출
person.fullName = "rang Jo";
console.log(person); //{ firstName: 'rang', lastName: 'Jo', fullName: [Getter/Setter] }

//getter
// 접근자 프로퍼티 fullName 에 접근하면 getter 함수 호출
console.log(person.fullName); //rang Jo

// firstName은 데이터 프로퍼티
let descriptor = Object.getOwnPropertyDescriptor(person, 'firstName')
console.log(descriptor)
//{ value: 'rang', writable: true, enumerable: true, configurable: true }

// fullName은 접근자 프로퍼티
descriptor = Object.getOwnPropertyDescriptor(person, 'fullName')
console.log(descriptor)
//{
//     get: [Function: get fullName],
//     set: [Function: set fullName],
//     enumerable: true,
//     configurable: true
//   }

접근자 프로퍼티 fullName이 프로퍼티 값에 접근하는 과정

  • 내부적으로 [[Get]] 내부 메서드가 호출된다.
  • 프로퍼티 키가 유효한지 확인 > 프로피티키는 문자열, 심벌이어야 한다.
  • 프로토타입 체인에서 프로퍼티를 검색
  • 검색된 fullName 프로퍼티가 데이터 프로퍼티인지 접근자 프로퍼티인지 확인
  • 접근자 프로퍼티 fullName의 프로퍼티 어트리뷰트 [[Get]]의 값, 즉 getter 함수를 호출하여 그 결과를 반환
    • 접근자 프로퍼티 fullName의 프로퍼티 어트리뷰트 [[Get]]의 값 === Object.getOwnPropertyDescriptor 메서드가 반환하는 프로퍼티 디스크립터 객체의 get 프로퍼티 값

프로토타입

  • 어떤 객체의 상위 객체의 역할을 하는 객체
  • 프로토타입은 하위 객체에게 자신의 프로퍼티, 메서드를 상속
  • 프로토타입 체인 : 프로토타입이 단방향 링크드 리스트 형태로 연결되어 있는 상속 구조

접근자 프로퍼티와 데이터 프로퍼티를 구별하는 방법

// 일반 객체의 __proto__는 접근자 프로퍼티다
Object.getOwnPropertyDescriptor(Object.prototype, '__proto__')

// 함수 객체의 prototype은 데이터 프로퍼티다.
Object.getOwnPropertyDescriptor(function(){}, 'prototype')

프로퍼티 정의

  • 새로운 프로퍼티를 추가하면서 프로퍼티 어트리뷰트를 명시적으로 정의하거나, 기존 프로퍼티의 프로퍼티 어트리뷰트를 재정의 하는 것
  • 이를 통해 객체의 프로퍼티가 어떻게 동작해야 하는지를 명확히 정의할 수 있다.
  • Object.defineProperty 메서드를 사용하면 프로퍼티의 어트리뷰트를 정의할 수 있다.
    • 인수로는 객체의 참조와 데이터 프로퍼티의 키인 문자열, 프로퍼티 디스크립터 객체를 전달한다.
const person = {}

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

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

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

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

console.log(Object.keys(person)) //[ 'firstName' ]
// lastName 프로퍼티의 Enumerable 값이 false니까 얘는 조회가 안돼!

// Writable 이 false 이므로 변경할 수 없다.
// 이때 에러는 발생하지 않고 무시된다.
person.lastName = "Kim"
console.log('lastName', descriptor)
// lastName {
//     value: 'Jo',
//     writable: false,
//     enumerable: false,
//     configurable: false
//   }

// Configurable이 false 이므로 해당 프로퍼티 삭제 불가능
// 이때 에러는 발생하지 않고 무시된다.
delete person.lastName

// Configurable 이 false여서 해당 프로퍼티 재정의 할 수 없다.
Object.defineProperty(person, 'lastName', {enumerable:true})
//TypeError: Cannot redefine property: lastName

Object.defineProperty(person, 'fullName', {
    get() {
        return `${this.firstName} ${this.lastName}`
    },

    set(name) {
        [this.firstName, this.lastName] = name.split(' ')
    },

    enumerable: true,
    configurable: true
})

descriptor = Object.getOwnPropertyDescriptor(person, 'fullName')
console.log('fullName', descriptor)

// fullName {
//   get: [Function: get],
//   set: [Function: set],
//   enumerable: true,
//   configurable: true

person.fullName = "jo rang"
console.log(person) //{ firstName: 'jo', fullName: [Getter/Setter] }
  • Object.defineProperty 는 한번에 하나의 프로퍼티만 정의 가능
  • Object.defineProperties 는 여러개의 프로퍼티 한번에 정의 가능
const person = {};

Object.defineProperties(person, {
  firstName: {
    value: "nahyun",
    writable: true,
    enumerable: true,
    configurable: true,
  },
  lastName: {
    value: "jo",
    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,
  },
});

person.fullName = "jo rang";
console.log(person);
//{ firstName: 'jo', lastName: 'rang', fullName: [Getter/Setter] }

객체 변경 방지

  • 객체는 변경 가능한 값 > 재할당 없이 직접 변경 가능
  • 프로퍼티를 추가, 삭제, 갱신 가능하며, 프로퍼티 어트리뷰트도 재정의 가능
  • js는 객체의 변경을 방지하는 다양한 메서드가 있다. (강도가 다르다)
    • 객체 확장 금지 : Object.preventExtensions
    • 객체 밀봉 : Object.seal (읽기, 쓰기 가능)
    • 객체 동결 : Object.freeze (읽기 가능)

객체 확장 금지

  • Object.preventExtensions : 객체 추가 금지
  • 확장이 금지된 객체는 프로퍼티 추가가 금지된다.
  • 프로퍼티 추가 방법
    • 프로퍼티 동적 추가, Object.defineProperty
    • 이 두개 모두 금지
  • 확장 가능한 객체인지 확인 : Object.isExtensible
const person = { name: "jo" };

console.log(Object.isExtensible(person)); //true

Object.preventExtensions(person);

console.log(Object.isExtensible(person)); //false

person.age = 20;
// 무시
// use strict 에서는 에러
console.log(person); //{ name: 'jo' }

// 확장은 금지지만 삭제는 가능
delete person.name;
console.log(person); //{}

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

객체 밀봉

  • Object.seal : 프로퍼티 추가 및 삭제, 어트리뷰터 재정의 금지
  • 밀봉된 객체는 읽기와 쓰기만 가능하다.
  • 밀봉된 객체인지 확인 : Object.isSealed
const person = { name: "jo" };

console.log(Object.isSealed(person)); //false

Object.seal(person);

console.log(Object.isSealed(person)); //true

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

person.age = 20;
// 무시
// use strict 에서는 에러
console.log(person); //{ name: 'jo' }

// 프로퍼티 삭제 금지 > 무시
delete person.name;
console.log(person); //{ name: 'jo' }

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

객체 동결

  • Object.freeze : 프로퍼티 추가, 삭제, 어트리뷰터 재정의 금지, 프로퍼티 값 갱신 금지
  • 동결된 객체는 읽기만 가능하다.
  • 동결된 객체인지 확인 : Object.isFrozen
const person = { name: "jo" };

console.log(Object.isFrozen(person)); //false

Object.freeze(person);

console.log(Object.isFrozen(person)); //true

// 동결된 객체는 writable, configurable이 false
console.log(Object.getOwnPropertyDescriptors(person));
// {
//     name: {
//       value: 'jo',
//       writable: false,
//       enumerable: true,
//       configurable: false
//     }
//   }

person.age = 20;
// 무시
// use strict 에서는 에러
console.log(person); //{ name: 'jo' }

// 프로퍼티 삭제 금지 > 무시
delete person.name;
console.log(person); //{ name: 'jo' }

// 프로퍼티 추가 금지
person.name = "kim";
console.log(person); //{ name: 'jo' }

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

불변 객체

  • 위의 변경 방지 메서드 : 얕은 변경 방지로, 직속 프로퍼티만 변경이 방지되고 중첩 객체까지는 영향을 주지 못한다.
  • Obejct.freeze 로 객체를 동결해도 중첩 객체까지 동결할 수는 없다.
const person = { name: "jo", 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: 'jo', address: { city: 'Busan' } }
  • 객체의 중첩 객체까지 동결 > 변경이 불가능한 불변 객체 > 객체를 값으로 갖는 모든 프로퍼티에 대해 재귀적으로 Object.freeze 메서드 호출
function deepFreeze(target) {
  // 객체가 아니거나, 동결된 객체 무시, 객체이고 동결되지 않은 객체만 동결
  if (target && typeof target === "object" && !Object.isFrozen(target)) {
    Object.freeze(target);
  }
  Object.keys(target).forEach((key) => deepFreeze(target[key]));
}