[JS ES6] getter, setter

gminnimk·2025년 3월 20일

JS ES6

목록 보기

18/31

자바스크립트에서 getter와 setter는 객체 내부의 데이터를 안전하게 읽고 수정하기 위한 문법입니다. 단순히 함수로 데이터를 꺼내거나 수정하는 방식을 대체하여, 코드의 직관성과 데이터 무결성을 높여줍니다.

1️⃣ 왜 getter, setter를 사용하는가?

데이터 무결성 유지
- 직접 데이터에 접근하지 않고 간접적으로 다루어 실수로 잘못된 데이터가 입력되는 것을 방지합니다.
- 예를 들어, 나이를 문자열로 입력하는 실수를 방지하기 위해 setter 내에서 parseInt()를 사용할 수 있습니다.
코드 가독성 및 간결성
- 기존에는 함수를 호출할 때 소괄호를 사용해야 했지만, getter/setter를 사용하면 마치 속성에 접근하듯 코드를 작성할 수 있어 더욱 직관적입니다.
내부 로직 캡슐화
- 복잡한 계산이나 데이터 가공 로직을 내부 함수로 감싸서 관리하면, 외부에서는 단순히 값을 읽거나 수정하는 인터페이스만 사용하게 되어 유지보수가 용이합니다.

2️⃣ 객체에서 데이터를 꺼내는 방법

2.1. 함수로 구현한 예

var 사람 = {
  name: 'Kim',
  age: 30,
  // 내년 나이를 계산하는 함수
  nextAge() {
    return this.age + 1;
  }
};

console.log(사람.nextAge()); // 출력: 31

설명:
내년 나이를 계산하기 위해 함수를 만들어, 사람.nextAge()를 호출하면 자동으로 this.age + 1 값을 반환합니다.

3️⃣ 객체에서 데이터를 수정하는 방법

3.1. 함수로 구현한 예

var 사람 = {
  name: 'Kim',
  age: 30,
  // 나이를 수정하는 함수
  setAge(나이) {
    this.age = 나이;
  }
};

사람.setAge(40); // 나이를 40으로 수정

설명:
데이터를 직접 할당하는 대신, 함수를 통해 변경하면 내부 검증 로직을 추가할 수 있습니다. 예를 들어, 아래와 같이 검증을 넣을 수 있습니다.

var 사람 = {
  name: 'Kim',
  age: 30,
  setAge(나이) {
    // 실수로 문자열이 들어와도 숫자로 변환
    this.age = parseInt(나이);
  }
};

사람.setAge('200'); // 숫자 200으로 저장

4️⃣ get/set 키워드를 이용한 간편한 문법

4.1. setter

구현 예:

var 사람 = {
  name: 'Kim',
  age: 30,
  // set 키워드를 사용하여 setter 정의
  set setAge(나이) {
    this.age = parseInt(나이);
  }
};

사람.setAge = 40; // 함수 호출 없이 간단히 나이 수정

장점:
- 소괄호 없이, 등호를 사용해 값을 할당하듯 쉽게 사용할 수 있습니다.

4.2. getter

구현 예:

var 사람 = {
  name: 'Kim',
  age: 30,
  // get 키워드를 사용하여 getter 정의
  get nextAge() {
    return this.age + 1;
  }
};

console.log(사람.nextAge); // 소괄호 없이 값을 가져옴, 출력: 31

장점:
- 함수 호출 없이 단순히 속성을 읽는 것처럼 사용할 수 있어, 코드가 직관적입니다.

5️⃣ 클래스에서의 getter, setter 사용

클래스 내부에서도 동일한 문법을 사용할 수 있습니다.

예제: 클래스 내 getter/setter

class 사람 {
  constructor() {
    this.name = 'Park';
    this.age = 20;
  }
  // getter: 내년 나이 계산
  get nextAge() {
    return this.age + 1;
  }
  // setter: 나이 수정
  set setAge(나이) {
    this.age = 나이;
  }
}

const 사람1 = new 사람();
console.log(사람1.nextAge); // 출력: 21
사람1.setAge = 50;
console.log(사람1.age); // 출력: 50

설명:
- 클래스 내부에 정의된 getter/setter를 통해, 객체 생성 후에도 간단하게 데이터를 읽거나 수정할 수 있습니다.

6️⃣ 사용 규칙 및 주의사항

setter 규칙:
- 반드시 하나의 파라미터만을 받아야 하며, 내부에서 데이터 검증 및 변환 로직을 추가할 수 있습니다.
getter 규칙:
- 파라미터 없이 사용하며, 반드시 return 문을 포함하여 값을 반환해야 합니다.
잘못된 사용 방지:
- getter는 값을 단순히 반환하는 용도로, setter는 값을 수정하는 용도로 사용해야 하며, 역할에 맞게 작성하지 않으면 에러가 발생할 수 있습니다.

📌 정리

getter와 setter는 객체 내의 데이터를 보호하고, 무결성을 유지하며, 코드를 더 직관적이고 안전하게 만드는 ES6 신문법입니다. 직접 데이터를 수정하거나 접근하는 대신, 내부 로직을 캡슐화하여 함수 또는 키워드를 통해 간접적으로 데이터를 다루는 방식은 유지보수와 확장성 측면에서 큰 이점을 제공합니다.