개요
게터(Getter)와 세터(Setter)는 자바스크립트에서 객체 접근자(Object Accessor)를 정의할 수 있게 해주는 기능입니다. 두 기능의 핵심적인 차이점은 게터는 객체에서 속성 값을 가져올(get) 때 사용하고, 세터는 객체에 속성 값을 설정(set)할 때 사용한다는 점입니다.
get과 set 키워드를 사용하면 겉보기에는 일반 속성처럼 보이지만, 실제로는 함수 로직이 실행되는 특별한 속성을 만들 수 있습니다. 아래 예제를 통해 각각의 동작 방식을 자세히 살펴보겠습니다.
Getter(게터)란?
게터는 get 키워드로 정의하며, 객체의 속성 값을 읽어올 때 자동으로 실행되는 함수입니다. 게터는 반드시 값을 반환(return)해야 하며, 매개변수를 가질 수 없습니다.
예제
다음 예제에서는 "business"라는 객체를 생성하고, 게터를 사용하여 "company" 속성 값을 출력합니다.
<html>
<body>
<script>
var business = {
Name: "Musk",
Country: "America",
company: "PayPal",
get comp() {
return this.company;
}
};
document.write(business.comp);
</script>
</body>
</html>출력 결과
PayPal
위 코드에서 business.comp에 접근하는 순간 게터 함수가 실행되어 this.company 값인 "PayPal"이 반환됩니다. 일반 속성에 접근하는 것처럼 보이지만, 내부적으로는 정의된 함수 로직이 수행되는 것이 핵심입니다.
Setter(세터)란?
세터는 set 키워드로 정의하며, 객체의 속성에 값을 할당할 때 자동으로 실행되는 함수입니다. 세터는 정확히 하나의 매개변수(설정할 값)를 받아야 하며, 값을 반환하지 않습니다.
예제
다음 예제에서는 "business"라는 객체를 생성하고, 세터를 사용하여 "company" 속성의 값을 PayPal에서 SolarCity로 변경합니다.
<html>
<body>
<script>
var business = {
Name: "Musk",
Country: "America",
company: "PayPal",
set comp(val) {
this.company = val;
}
};
business.comp = "SolarCity";
document.write(business.company);
</script>
</body>
</html>출력 결과
SolarCity
business.comp = "SolarCity"처럼 값을 할당하는 순간 세터 함수가 실행되어 this.company에 새로운 값이 저장됩니다. 이후 출력해 보면 변경된 값 "SolarCity"가 확인됩니다.
Getter와 Setter의 주요 차이점 비교
| 구분 | Getter | Setter |
|---|---|---|
| 정의 키워드 | get | set |
| 역할 | 속성 값 읽기(조회) | 속성 값 쓰기(설정) |
| 매개변수 | 없음 | 반드시 1개 |
| 반환값 | 필수(return) | 없음 |
| 호출 방법 | obj.prop 형태로 읽기 | obj.prop = value 형태로 할당 |
Getter와 Setter를 사용하는 이유
- 캡슐화: 내부 데이터를 직접 노출하지 않고 제어된 방식으로만 접근할 수 있습니다.
- 유효성 검사: 세터에서 값이 저장되기 전에 조건을 검사하여 잘못된 값의 입력을 막을 수 있습니다.
- 계산된 속성: 게터를 활용하면 여러 속성을 조합한 값을 동적으로 반환할 수 있습니다.
- 유지보수성: 내부 구현을 변경하더라도 외부에서 사용하는 인터페이스는 그대로 유지할 수 있습니다.
마무리
정리하면, 게터는 객체의 속성 값을 가져오는 데, 세터는 객체의 속성 값을 설정하는 데 사용됩니다. 두 접근자를 함께 활용하면 데이터를 안전하게 보호하면서도 직관적인 문법으로 객체를 다룰 수 있어, 더 견고하고 유지보수하기 좋은 자바스크립트 코드를 작성할 수 있습니다.