I’m gonna be an awesome professional

2 minute read



자바스크립트에서 set과 get은 객체 내의 특정 속성에 대한 접근을 제어하기 위한 메커니즘을 말한다

이는 접근자 프로퍼티 (accessor properties) 기능을 활용하여 구현된다


get

get은 객체의 속성에 접근할 때 호출되는 메소드로 속성 값을 읽을 때 실행되는 함수다

const obj = {
  // 데이터 속성
  _name: 'Alice',

  // 접근자 프로퍼티
  get name() {
    return this._name;
  }
};

console.log(obj.name); // 'Alice' 출력

=> obj 객체에 name 이라는 접근자 프로퍼티가 정의되어 있다

=> obj.name을 호출할 때마다 get 메소드가 실행되어 _name 속성의 값 ‘Alice’를 반환한다



set

set 은 객체의 속성에 값을 할당할 때 호출되는 메소드로 속성에 값을 설정할 때 실행되는 함수다

const obj = {
  // 데이터 속성
  _name: '',

  // 접근자 프로퍼티
  set name(newName) {
    this._name = newName;
  }
};

obj.name = 'Bob'; // set 메소드 호출
console.log(obj._name); // 'Bob' 출력

=> obj 객체에 name이라는 접근자 프로퍼티가 정의되어 있다

=> obj.name = 'Bob'을 호출하면 set 메소드가 실행되어 _name 속성에 ‘Bob’을 할당한다



[ChatGPT로 알아본 접근자 프로퍼티 사용예시]

get과 set은 주로 객체의 속성에 접근할 때 추가적인 로직을 수행하거나 값을 변환할 때 유용하게 사용된다

예를 들어, 속성 값을 동적으로 계산하거나 변경을 제한하는 등의 작업을 할 수 있습니다

const temperature = {
  _celsius: 0, 
  
  get celsius() {
    //섭씨
    return this._celsius;
  },
  
  set celsius(value) {
    //섭씨
    this._celsius = value;
  },
  
  get fahrenheit() {
    //섭씨를 화씨로 변환
    return this._celsius * 9 / 5 + 32;
  },
  
  set fahrenheit(value) {
    //섭씨를 화씨로 변환
    this._celsius = (value - 32) * 5 / 9;
  }
};

temperature.celsius = 25; // set 메소드 호출
console.log(temperature.fahrenheit); // get 메소드 호출, 77 출력
temperature.fahrenheit = 32; // set 메소드 호출
console.log(temperature.celsius); // get 메소드 호출, 0 출력

=> temperature 객체에 celsius와 fahrenheit라는 두 가지 속성이 있다

 get과 set 접근자 프로퍼티를 정의하여 섭씨 온도와 화씨 온도 사이의 변환을 수행


get과 set은 객체지향 프로그래밍에서 정보 은닉과 접근 제어를 위한 중요한 도구로,

속성에 접근할 때 추가적인 로직을 실행하거나 속성 값을 조작할 수 있는 강력한 기능이다



get 과 set은 꼭 같이 사용해야 하는가?

get과 set이 항상 같이 사용될 필요는 없다

이 두 기능은 각각 객체의 속성을 읽고 쓰는 동작을 제어하기 위해 독립적으로 사용될 수 있다


[ get 만 사용하는 경우 ]

const obj = {
  _age: 30,
  get age() {
    return this._age;
  }
};

console.log(obj.age); // 30 출력
obj.age = 35; // 이 줄은 아무 효과가 없음
console.log(obj.age); // 여전히 30 출력

=> get 메소드를 사용하여 obj.age 속성 값을 읽을 때 _age 값을 반환하도록 함

=> set 메소드가 없으므로 obj.age = 35;와 같은 할당은 아무런 효과가 없다



[ set 만 사용하는 경우 ]

const obj = {
  _age: 30,
  set age(newAge) {
    if (newAge > 0 && newAge < 150) {
      this._age = newAge;
    } else {
      console.log('나이는 0보다 크고 150보다 작아야 합니다.');
    }
  }
};

obj.age = 35; // set 메소드 호출, _age 값이 35로 변경됨
console.log(obj.age); // 35 출력

obj.age = 200; // set 메소드 호출, 유효성 검사에 걸려서 메시지 출력
console.log(obj.age); // 여전히 35 출력

=> set 메소드를 사용하여 obj.age 속성에 값을 할당할 때 유효성을 검사하고, 그에 따라 _age 값을 변경하거나 오류 메시지를 출력하도록 설정했다

=> get 메소드가 없으므로 console.log(obj.age);는 현재 _age 값을 반환한다


get과 set은 독립적으로 사용될 수 있으며, 각각의 상황에 따라 유연하게 적용될 수 있다

하지만 두 메소드를 함께 사용하면 객체의 속성 접근과 변화를 더욱 세밀하게 제어할 수 있다


Updated:

You may also enjoy