firstName, lastName이라는 두 개의 속성을 가진 객체가 있다.
const person = {
firstName: 'Hyeonsu',
lastName: 'Kim'
};
fullName이 필요할 때 다음 식을 실행시킬 수 있다:
console.log(person.firstName + ' ' + person.lastName);
console.log(`${person.firstName} ${person.lastName}`);
문제는 필요할 때마다 이 템플릿을 원하는 곳마다 복붙해야한다는 것.
이럴 때는 객체 안에 fullName이라는 메소드를 설정해주고 밖으로 불러내는 것이 낫다.
const person = {
firstName: 'Hyeonsu',
lastName: 'Kim',
fullName() {
return `${person.firstName} ${person.lastName}`
}
};
console.log(person.fullName()); // Hyeonsu Kim
이때 문제는 이 값이 읽기 전용이라는 것, 즉 밖에서 fullName 값을 설정해주지 못한다는 것.
만약person.fullName = 'John Smith';
를 선언했을 때 자동적으로 firstName과 lastName을 설정하게 된다면 좋을텐데. = Setter
그리고 console.log에서 메소드를 부르는 게 아니라 속성을 조회한다면 좋을텐데. = Getter
이때 getters와 setters를 쓰게된다.
getter를 통해 사람의 fullName을 속성으로 읽고,
setter를 통해 밖에서 fullName을 설정할 수 있다.
const person = {
firstName: 'Hyeonsu',
lastName: 'Kim',
get fullName() {
return `${person.firstName} ${person.lastName}`
}
set fullName(value) {
const parts = value.split(' ');
this.firstName = parts[0];
this.lastName = parts[1];
}
};
person.fullName = 'John Smith';
console.log(person.fullName); // John Smith
set fullName(value)를 통해 객체 밖의 John Smith라는 값을 받아와 공백을 기준으로 파트를 나눠 firstName과 lastName을 바꿔줬다.
get fullName을 통해 fullName을 속성으로 읽어 console.log에서 따로 함수를 실행하지 않고 조회할 수 있다.