자습

[JavaScript] 데이터 프로퍼티 vs 접근자 프로퍼티

행수쌤 2023. 7. 24. 21:07
728x90
반응형

데이터 프로퍼티(Data Properties)와 접근자 프로퍼티(Accessor Properties)는 자바스크립트 객체에서 속성(property)을 정의하는 두 가지 방법을 나타냅니다. 이들은 객체의 속성에 대한 동작과 접근 방식을 다르게 정의하는데 사용됩니다.

1. 데이터 프로퍼티 (Data Properties):
데이터 프로퍼티는 객체의 속성에 직접 값을 저장하고 가져오는 데 사용되는 일반적인 속성입니다. 이러한 프로퍼티는 이름(key)과 값(value)의 쌍으로 이루어져 있으며, 객체의 상태를 나타내는 데 사용됩니다.

데이터 프로퍼티는 [[Value]], [[Writable]], [[Enumerable]], [[Configurable]]라는 내부 속성들을 갖고 있습니다:

[[Value]]: 속성에 저장된 값입니다.
[[Writable]]: 속성의 값을 수정 가능한지 여부를 나타냅니다.
[[Enumerable]]: 속성이 for...in 루프 등에서 열거 가능한지 여부를 나타냅니다.
[[Configurable]]: 속성의 구성(configurable) 가능 여부를 나타냅니다. 설정 가능한 속성은 삭제하거나 속성의 특성을 변경할 수 있습니다.
기본적으로 객체의 속성은 데이터 프로퍼티로 정의됩니다. 예시를 통해 데이터 프로퍼티를 보여드리겠습니다:

const person = {
  name: 'John',
  age: 30
};

console.log(person.name); // 출력: "John"
console.log(person.age); // 출력: 30


2. 접근자 프로퍼티 (Accessor Properties):
접근자 프로퍼티는 객체의 속성에 접근할 때 특정 동작을 수행하도록 정의되는 프로퍼티입니다. 이러한 프로퍼티는 get과 set이라는 함수로 구성되어 있습니다.

get: 속성에 접근할 때 호출되는 함수로, 해당 속성 값을 반환합니다.
set: 속성에 값을 할당할 때 호출되는 함수로, 해당 속성에 값을 설정합니다.
접근자 프로퍼티는 [[Get]], [[Set]], [[Enumerable]], [[Configurable]]라는 내부 속성들을 갖고 있습니다. [[Get]]과 [[Set]]은 각각 get과 set 함수를 가리킵니다.

접근자 프로퍼티는 데이터 프로퍼티와 달리 직접 값을 저장하지 않고, 값을 설정하거나 가져오는 동작을 컨트롤하는 용도로 사용됩니다. 예시를 통해 접근자 프로퍼티를 보여드리겠습니다:

const temperature = {
  _celsius: 0,
  get celsius() {
    return this._celsius;
  },
  set celsius(value) {
    if (value < -273.15) {
      console.error('Invalid temperature. Value is below absolute zero.');
    } else {
      this._celsius = value;
    }
  },
  get fahrenheit() {
    return this._celsius * 9/5 + 32;
  },
  set fahrenheit(value) {
    this._celsius = (value - 32) * 5/9;
  }
};

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

temperature.fahrenheit = 100;
console.log(temperature.celsius); // 출력: 37.77777777777778
console.log(temperature.fahrenheit); // 출력: 100

위 예제에서 temperature 객체는 celsius와 fahrenheit라는 접근자 프로퍼티를 가지고 있습니다. celsius 접근자 프로퍼티는 _celsius라는 데이터 프로퍼티의 값을 가져오고 설정하는데 사용되며, fahrenheit 접근자 프로퍼티는 _celsius 값을 화씨로 변환하여 가져오고 설정하는데 사용됩니다. 이를 통해 속성에 접근하는 동작을 커스터마이징할 수 있습니다.

728x90
반응형