[JavaScript] 객체 내부에서의 getter, setter
업무를 하면서 객체 내부에서도 get, set을 쓸 수 있다는 것을 배웠다. 객체 내부에서 굳이 get, set을 사용하는지 궁금했는데, 이번 기회에 정리해보게 되었다.
객체의 getter, setter
const person = {
firstName: 'Olivia',
lastName: 'Kim',
get fullName() {
return `${this.firstName} ${this.lastName}`;
},
set fullName(name) {
[this.firstName, this.lastName] = name.split(' ');
}
};
console.log(person.fullName); // Olivia Kim
person.fullName = 'Alex Park';
console.log(person.firstName); // Alex
console.log(person.lastName); // Park
객체 내부에 get과 set을 위의 예시 코드와 같이 설정해두면, 해당 key를 get하는지, set하는지에 따라 내부에 설정된 getter와 setter가 자동으로 실행된다. fullName을 호출하면(get) get으로 return해둔 설정 값이 나오고, fullName의 값을 설정하면(set) set으로 설정해둔 로직이 이행된다.
정리해보면 아래와 같다.
목적
객체의 프로퍼티에 대한 접근과 할당을 제어하기 위해 사용한다.
사용 시점
특정 프로퍼티에 접근하거나(get), 값을 설정할 때(set) 자동으로 호출된다.
장점
1. 캡슐화
👉 내부 데이터의 접근을 제어해 무결성을 유지할 수 있다. ex. 데이터 검증, 포맷 변경 등
2. 자동 호출
👉 프로퍼티에 직접 접근하는 것처럼 보이지만, 실제로는 로직을 실행해 값을 변환하거나 설정한다.
3. 인터페이스의 일관성 유지
👉 객체 외부에서는 일반 프로퍼티처럼 보이기 때문에 사용자가 내부 구현을 알 필요가 없다.
[비교] 프로퍼티를 함수로 만들기
const person = {
firstName: 'Olivia',
lastName: 'Kim',
fullName() {
return `${this.firstName} ${this.lastName}`;
}
};
console.log(person.fullName()); // Olivia Kim
객체에서 return하는 값을 만들 때는 getter가 아닌 프로퍼티로 함수를 만드는 방법이 더 일반적이다. 위와 같이 객체의 프로퍼티로 함수를 설정하면 getter를 설정했을 때와 같이 fullName값을 얻을 수 있다.
목적
특정 동작이나 기능을 수행하기 위한 함수를 정의한다.
사용 시점
일반 함수처럼 명시적으로 호출된다. (사용하려면 반드시 호출이 필요하다.)
장점
1. 명확한 호출
👉 함수를 명시적으로 호출해 동작을 실행한다.
2. 매개변수 사용
👉 필요에 따라 매개변수를 전달해 다양한 동작을 수행할 수 있다. (getter는 불가능한다.)
getter/setter와 함수인 프로퍼티의 차이
- getter/setter는 프로퍼티 접근 또는 설정 시점에 자동으로 호출되는 반면, 일반 함수는 명시적으로 호출해야 한다.
- getter/setter는 데이터의 캡슐화와 데이터 무결성 유지에 유리하며, 프로퍼티처럼 사용되기 때문에 인터페이스가 일관적이다.
- 일반 함수는 함수 호출 시점과 방식이 명확하며, 매개변수를 받을 수 있다.
정리
- getter/setter는 객체의 특정 프로퍼티에 대한 접근과 설정을 보다 안전하고 효율적으로 관리하기 위해 사용된다.
- 반면 함수는 특정 기능을 수행하기 위한 용도로 사용된다.
- 따라서 장점과 사용 목적이 다르므로, 상황에 따라 적절한 방식을 선택하여 사용하는 것이 좋다.