JavaScript에서 getter를 활용하면 객체의 속성을 마치 일반 속성처럼 자연스럽게 접근할 수 있습니다. 이러한 동작을 가능하게 해주는 키워드가 바로 'get'입니다. getter는 내부적으로 계산 로직을 숨기면서도 속성 접근 문법을 그대로 유지할 수 있어 코드의 가독성과 캡슐화를 높여줍니다. 지금부터 간단한 예제를 통해 그 동작 방식을 살펴보겠습니다.
예제 1: 괄호를 사용해 호출한 경우
아래 예제에서는 'details' 속성을 함수처럼 details() 형태로 호출하고 있습니다. 하지만 'details'는 getter로 정의된 속성이므로 함수가 아니며, 따라서 의도한 결과를 얻을 수 없습니다.
<html>
<body>
<p id = "prop"></p>
<script>
var business = {
product: "Tutorix",
parent : "Tutorialspoint",
get details() {
return this.product+" is the product of" + " " + this.parent;
}
};
document.getElementById("prop").innerHTML = business.details();
</script>
</body>
</html>예제 2: 괄호를 제거한 경우
이번에는 호출 시 괄호를 제거했습니다. 이렇게 하면 'get' 키워드 덕분에 "details"가 더 이상 함수가 아닌 속성으로 취급되어, 정상적으로 문자열 값이 반환됩니다.
<html>
<body>
<p id = "prop"></p>
<script>
var business = {
product: "Tutorix",
parent : "Tutorialspoint",
get details() {
return this.product+" is the product of" + " " + this.parent;
}
};
document.getElementById("prop").innerHTML = business.details;
</script>
</body>
</html>실행 결과
Tutorix is the product of Tutorialspoint
정리
getter는 메서드처럼 정의하지만 속성처럼 읽어서 사용하는 특수한 접근자입니다. 핵심은 다음과 같습니다.
- getter로 정의된 속성은 괄호 없이 접근해야 합니다.
- 괄호를 붙여 호출하면 함수가 아니므로 오류가 발생하거나 의도한 결과를 얻지 못합니다.
- getter를 사용하면 복잡한 계산 과정을 감추고, 간결하고 직관적인 속성 접근 문법을 제공할 수 있습니다.