자바스크립트에서 객체의 속성(property)에 접근하거나 값을 할당할 때, 내부적으로 특정 함수가 실행되도록 만들 수 있는 문법이 바로 getter와 setter입니다. 겉으로 보기에는 일반적인 속성처럼 사용하지만, 실제로는 함수가 암묵적으로 호출된다는 점이 핵심입니다.
Getter란 무엇인가?
Getter는 객체의 속성에 접근할 때 함수가 암묵적으로 호출되어 값을 반환하는 방식입니다. 자바스크립트에서는 get 키워드를 사용하여 정의하며, 식별자(identifier)로는 숫자 또는 문자열을 사용할 수 있습니다.
즉, obj.property 형태로 값을 읽으려고 하는 순간 getter 함수가 자동으로 실행되고, 그 결과값이 마치 일반 속성처럼 반환됩니다.
Setter란 무엇인가?
Setter는 객체의 속성에 값을 할당할 때 함수가 암묵적으로 호출되며, 할당하려는 값이 함수의 인수(argument)로 전달됩니다. 자바스크립트에서는 set 키워드를 사용하여 정의하며, getter와 마찬가지로 숫자 또는 문자열 식별자를 사용할 수 있습니다.
Setter 내부에서 별도의 반환문을 작성하지 않으며, 전달받은 값을 가공하거나 검증한 후 여러 내부 속성에 나누어 저장하는 등의 로직을 처리할 수 있다는 점이 특징입니다.
Getter와 Setter의 핵심 차이점
- 호출 시점: Getter는 속성을 '읽을 때' 호출되고, Setter는 속성에 값을 '쓸 때' 호출됩니다.
- 사용 키워드: Getter는
get, Setter는set키워드를 사용합니다. - 반환값: Getter는 반드시 값을 반환해야 하지만, Setter는 반환값 없이 전달받은 인수를 처리합니다.
- 매개변수: Setter는 할당되는 값을 받기 위한 매개변수가 하나 필요하며, Getter는 매개변수를 갖지 않습니다.
Getter와 Setter 구현 예제
다음 예제는 하나의 객체 안에서 getter와 setter를 함께 정의하고 활용하는 방법을 보여줍니다.
<html>
<body>
<script>
var department = {
deptName: "Finance",
deptZone: "South",
deptID: 105,
get details() {
return "Department Details<br>"
+ "Name: " + this.deptName + "<br>"
+ "Zone: " + this.deptZone + "<br>"
+ "ID: " + this.deptID;
},
set details(info) {
var res = info.toString().split(' ');
this.deptName = res[0] || '';
this.deptZone = res[1] || '';
this.deptID = res[2] || '';
}
};
department.details = 'Marketing North 001';
document.write(department.deptName);
document.write(department.deptZone);
document.write(department.deptID);
</script>
</body>
</html>예제 동작 원리
위 코드에서 department.details = 'Marketing North 001'; 문장이 실행되면 setter가 호출되어 문자열이 공백 기준으로 분리되고, 각각 부서명(deptName), 지역(deptZone), ID(deptID) 속성에 저장됩니다. 이후 details 속성에 접근하면 getter가 호출되어 세 속성을 조합한 정보 문자열이 반환됩니다.
실행 결과는 다음과 같습니다.
Marketing North 001
이처럼 getter와 setter를 활용하면 외부에서는 단순히 속성에 접근하는 것처럼 보이지만, 내부적으로는 데이터 검증, 포맷 변환, 계산 로직 등을 자유롭게 수행할 수 있어 더 안전하고 유연한 객체 설계가 가능합니다.