[javascript] 자바스크립트 프로퍼티 디스크립터 실전 예제

07 Dec 2023

javascript

프로퍼티 디스크립터는 객체의 속성을 정의하는 메타데이터를 나타냅니다. 자바스크립트에서는 Object.defineProperty() 메서드를 사용하여 프로퍼티 디스크립터를 설정할 수 있습니다. 이를 통해 프로퍼티의 값을 읽기 전용으로 만들거나, 특정 동작을 지정할 수 있습니다.

다음은 프로퍼티 디스크립터를 활용한 실전 예제입니다.

읽기 전용 프로퍼티 만들기

const person = {};

Object.defineProperty(person, 'name', {
  value: 'John Doe',
  writable: false, // 읽기 전용으로 설정
});

person.name = 'Jane Smith'; // 에러 발생 (strict mode에서는 TypeError)

console.log(person.name); // 'John Doe' 출력

위 예제에서 person 객체의 name 프로퍼티를 읽기 전용으로 만들었습니다. writable 속성을 false로 설정하여 값을 변경할 수 없게 하였습니다. 따라서 person.name을 변경하려고 시도하면 에러가 발생하며, console.log(person.name)을 통해 ‘John Doe’가 출력됩니다.

Getter와 Setter 사용하기

const temperature = {
  value: 0,
};

Object.defineProperty(temperature, 'celsius', {
  get() {
    return this.value;
  },
  set(newValue) {
    this.value = newValue;
  },
});

temperature.celsius = 25;
console.log(temperature.celsius); // 25 출력

위 예제에서 temperature 객체의 celsius 프로퍼티에 getter와 setter를 정의하였습니다. getter에서는 현재 값인 this.value를 반환하고, setter에서는 새로운 값인 newValue를 받아서 this.value에 할당합니다. 따라서 temperature.celsius = 25로 값을 설정하면 console.log(temperature.celsius)에서 25가 출력됩니다.

읽기 전용 프로퍼티 만들기

Getter와 Setter 사용하기

참고 자료