JS: Getter, Setter

김현수·2020년 12월 25일
0

Getter: 속성에 접근할 때 사용

Setter: 속성을 바꿀 때 사용

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에서 따로 함수를 실행하지 않고 조회할 수 있다.

0개의 댓글