자바스크립트 객체 속성 getters와 setters

09 Sep 2023

javascript

자바스크립트는 다른 프로그래밍 언어와 마찬가지로 객체 지향 프로그래밍의 개념을 지원합니다. 객체의 속성에 접근하는 getter와 setter는 객체의 속성을 보호하고 조작할 수 있는 강력한 도구입니다. 이번 블로그에서는 자바스크립트에서 어떻게 속성의 getter와 setter를 정의하고 사용하는지 알아보겠습니다.

Getter 함수

Getter 함수는 객체의 속성에 접근할 때 호출되는 함수입니다. 이 함수를 사용하면 속성에 직접 접근하는 대신, 특정한 계산 또는 로직을 실행하여 값을 반환할 수 있습니다.

Getter 함수는 get 키워드와 함께 객체의 속성으로 정의됩니다. 다음은 Getter 함수를 사용하여 객체의 속성을 읽는 예제입니다.

const person = {
  firstName: 'John',
  lastName: 'Doe',
  
  get fullName() {
    return this.firstName + ' ' + this.lastName;
  }
};

console.log(person.fullName);  // "John Doe"

위의 코드에서 fullName은 person 객체의 속성입니다. 속성에 접근할 때 person.fullName과 같이 조작할 수 있습니다. 그러나 앞에 get 키워드를 사용하여 fullName이 함수임을 나타내고 있습니다. 이때 속성에 접근하면 Getter 함수가 호출되어 firstName과 lastName의 값을 조합하여 전체 이름을 반환합니다.

Setter 함수

Setter 함수는 객체의 속성에 값을 할당할 때 호출되는 함수입니다. 이 함수를 사용하면 속성에 할당되는 값을 검증하고 조작할 수 있습니다.

Setter 함수 역시 set 키워드와 함께 객체의 속성으로 정의됩니다. 다음은 Setter 함수를 사용하여 객체의 속성에 값을 할당하는 예제입니다.

const person = {
  firstName: 'John',
  lastName: 'Doe',

  set fullName(name) {
    const names = name.split(' ');
    this.firstName = names[0];
    this.lastName = names[1];
  }
};

person.fullName = 'Jane Smith';

console.log(person.firstName);  // "Jane"
console.log(person.lastName);  // "Smith"

위의 코드에서 fullName은 person 객체의 속성입니다. person.fullName에 값을 할당할 때 = 기호를 사용하면 Setter 함수가 호출되어 전달된 이름을 공백으로 분리한 다음 각각을 firstName과 lastName에 할당합니다.

Getter와 Setter의 활용

Getter와 Setter 함수를 사용하면 객체의 속성을 효과적으로 조작할 수 있습니다. 다음은 Getter와 Setter를 사용하여 계산된 속성을 관리하는 예제입니다.

const rectangle = {
  width: 0,
  height: 0,

  get area() {
    return this.width * this.height;
  },

  set area(value) {
    const ratio = Math.sqrt(value / this.area);
    this.width *= ratio;
    this.height *= ratio;
  }
};

rectangle.width = 10;
rectangle.height = 5;

rectangle.area = 100;

console.log(rectangle.width);   // 14.142135623730951
console.log(rectangle.height);  // 7.0710678

위의 코드에서 area는 rectangle 객체의 Getter와 Setter가 정의된 속성입니다. area를 읽을 때는 현재 width와 height를 곱하여 넓이를 반환하고, area에 값을 할당할 때는 width와 height를 조정하여 주어진 넓이에 맞게 사각형의 크기를 조정합니다.

Getter와 Setter 함수를 사용하면 객체의 속성에 더 많은 제어를 가질 수 있고, 외부에서의 잘못된 값을 방지하거나 계산된 값을 제공할 수 있습니다. 객체 지향 프로그래밍에서는 이러한 기능을 통해 코드를 더 모듈화하고 유지 관리하기 쉽게 만들 수 있습니다.

더 많은 자바스크립트 개념과 활용법을 알아보고 싶다면 공식 문서나 다양한 자바스크립트 튜토리얼을 참고해 보세요. 즐거운 코딩되세요!