JavaScript Getter & Setter 이해

 

원래 이런 형태의 person객체 안에 fullName 이라는 function이 있었다고 생각해봅시다.

 

const person = {
  firstName: "Hong",
  lastName: "Gildong",
  fullName(){
    return `${person.firstName} ${person.lastName}`;
  }
};

console.log(person.fullName());

이 상태에서는 객체 안에 정의된 값을 가져올 수만 있고,
객체 밖에서 새로운 값을 set 해줄 수가 없다.

 

console에 출력할 때도 person.fullName()처럼 ()를 써야만 한다.

 

이 문제를 getter, setter를 이용해 해결할 수 있다.

 

• getter : to access properties
• setter : to change(or mutate) properties

 

 

먼저 getter를 사용해보자.

const person = {
  firstName: "Hong",
  lastName: "Gildong",
  get fullName(){
    return `${person.firstName} ${person.lastName}`;
  }
};

console.log(person.fullName);

객체 안 fullName() 앞에 get을 붙임으로써
콘솔에 출력할 때 person.fullName이라고 쓸 수 있다.
fullName을 properties처럼 사용할 수 있게 된 것이다.

 

 

다음은 setter를 사용하는 방법이다.

const person = {
  firstName: "Hong",
  lastName: "Gildong",
  get fullName(){
    return `${person.firstName} ${person.lastName}`;
  },
  set fullName(value){
    const parts = value.split(' ');
    this.firstName = parts[0];
    this.lastName = parts[1]
  }
};

person.fullName = 'James Bond'
console.log(person.fullName);