getter와 setter 메서드

getter와 setter

하나의 메서드로서 getter는 객체의 속성을 반환하고, setter는 객체의 속성을 설정하거나 변경한다.

const me = {
 age : 26,
 name : "now_0o"
}

console.log(me.name); // "now_0o"
me.name = "wooje";

getter와 setter를 사용하면 이렇게 객체에 대해 직접적으로 접근하지 않고 get과 set 메서드를 통해 해당되는 속성에만 접근하도록 제한을 할 수 있다.

const me = {
 age : 26,
 name : "now_0o",
  
 getName(){
   return me.name;
 },
  
 setName(newName){
 	me.name = newName;
 }
}

console.log(getName()); // "now_0o"
setName("wooje");

getter와 setter를 사용하는 이유

처음으로 예를 든 코드와 getter와 setter를 사용한 코드가 작동과정도 똑같고 오히려 메서드를 선언하는 과정에서 코드가 늘어나보이는데 도대체 왜 사용하는 것일까?

첫번째로 getter와 setter를 사용하여 객체에 직접적으로 접근을 하지않아 필요한 정보만 보여줄 수 있다. 즉 다른 정보를 숨길 수 있어 보안을 강화할 수 있다.
두번째로 원하지 않는 값이 담기는 것을 방지 할 수 있다.

const me = {
 age : 26,
 name : "now_0o",
  
 getName(){
   return me.name;
 },
  
 setName(newName){
   	if(typeof newName !== 'string'){
      console.log("이름은 문자만 설정 가능합니다.");
      return;
    }
 	me.name = newName;
 }
}

위와 같이 이름에 문자열이 아닌 다른 타입의 데이터가 들어가는 것을 막을 수 있다.

get과 set

ES6부터는 get과 set을 이용해 getter와 setter를 더 간단하게 선언할 수 있다.
get과 set을 이용해 선언한 메서드는 접근 시 기존 속성에 접근할 때와 같은 방식으로 접근하는데
직접적으로 속성에 접근하는 것이 아닌 가상의 프로퍼티는 생성하여 접근하는 방식이다.

const me = {
 age : 26,
 name : "now_0o",
  
 get myName(){
   return me.name;
 },
  
 set myName(newName){
   	if(typeof newName !== 'string'){
      console.log("이름은 문자만 설정 가능합니다.");
      return;
    }
 	me.name = newName;
 }
}

console.log(myName()); // X
console.log(me.myName); // O
me.Myname = "wooje";

주의

setter의 데이터 프로퍼티와 접근자 프로퍼티의 값이 동일하면 무한루프에 빠지게 되니 주의.

const me = {
 age : 26,
 name : "now_0o", // 데이터 프로퍼티
  
 get myName(){
   return me.name;
 },
  
 set name(newName){ // 접근자 프로퍼티
   	if(typeof newName !== 'string'){
      console.log("이름은 문자만 설정 가능합니다.");
      return;
    }
 	me.name = newName;
 }
}

me.name = "wooje"; // 무한루프