JavaScript에서는 get과 set 키워드를 사용하여 객체 프로퍼티에 대한 접근자(accessor)인 게터(Getter)와 세터(Setter)를 손쉽게 정의할 수 있습니다. 이를 활용하면 프로퍼티를 읽거나 쓸 때 특정 로직이 자동으로 실행되도록 만들 수 있습니다.
Getter(게터)란?
게터는 객체의 프로퍼티에 접근할 때 함수가 암묵적으로 호출되어 값을 반환하는 기능입니다. JavaScript에서는 get 키워드를 사용하여 정의하며, 식별자(identifier)에는 숫자나 문자열을 사용할 수 있습니다.
Setter(세터)란?
세터는 프로퍼티에 값을 설정(할당)할 때 함수가 암묵적으로 호출되며, 할당하려는 값이 인수로 전달됩니다. JavaScript에서는 set 키워드를 사용하여 정의하며, 마찬가지로 식별자에는 숫자나 문자열을 사용할 수 있습니다.
예제
다음은 게터와 세터를 함께 구현한 실제 동작 예제입니다.
<html>
<body>
<script>
var department = {
deptName: "Marketing",
deptZone: "North",
deptID: 101,
get details() {
return "Department Details<br>" + "Name: " + this.deptName + " <br>Zone: " + this.deptZone + "<br>ID: " + this.deptID;
},
set details(info) {
var words = info.toString().split(' ');
this.deptName = words[0] || '';
this.deptZone = words[1] || '';
this.deptID = words[2] || '';
}
}
department.details = 'Marketing North 001';
document.write(department.deptName);
document.write(department.deptZone);
document.write(department.deptID);
</script>
</body>
</html>예제 설명
위 예제에서 details라는 이름의 게터와 세터가 하나의 객체에 정의되어 있습니다. 먼저 세터에 'Marketing North 001' 문자열이 할당되면, 값이 공백 단위로 분리되어 각각 부서명(deptName), 지역(deptZone), ID(deptID) 프로퍼티에 저장됩니다. 이후 해당 프로퍼티들을 출력하면 세터를 통해 설정된 새로운 값들이 화면에 표시됩니다.
이처럼 게터와 세터를 사용하면 내부 데이터를 직접 노출하지 않으면서도, 읽기와 쓰기 시점에 원하는 처리 로직을 캡슐화할 수 있어 더 안전하고 유연한 코드 작성이 가능합니다.