JavaScript

getter & setter 를 사용해 보자!

Gushers 2022. 8. 26. 23:57

프로젝트를 하면서 객체를 생성하는 일은 매우 빈번히 일어난다.
그중에서도 최근에 Stack 알고리즘을 직접 구현할 때 나는 getter와 setter를 사용했기에 다시한번 복습하고자 이 글을 작성해보고자 한다.

getter와 setter 란?

접근자 프로퍼티는 getter(획득자)와 setter(설정자) 메서드로 표현될 수 있다.
객체 리터럴 안에서 getter와 setter는 get과 set으로 나타낼 수 있다.
getter 메서드는 프로퍼티를 읽으려고 할 때 실행되고, setter 메서드는 프로퍼티에 값을 할당하려 할 때 실행된다.

 const obj = {
      get prop(){

     },
     set propName(name){

     }
 };

이렇게 설명을 읽고나면 처음엔 그래서 왜 getter와 setter를 쓰는걸꺼? 라는 생각이 들었다.
그래서 나는 내가 Stack 알고리즘을 만들면서 Stack을 예시로 들면 이해하는데 매우 좋을 것 같다라는 생각이 들었다.

getter와 setter를 어떻게 사용할까?

Stack을 예로 들어보고자 한다.
만약 우리가 숫자를 배열속에 넣고자 할 때 우리는 .push를 통해 숫자를 넣을 것이다.
그렇게 숫자를 넣게되면 배열의 길이가 늘어나 .length를 통해 배열의 길이를 확인할 수 있다.
그리고 배열의 길이를 수정하는 일은 불가능한 일이다.

const arr = [];
arr.push(1); // [1]
arr.push(2); // [1,2]
arr.push(3); // [1,2,3]

arr.length // 3
arr.length = 100 // Error

하지만 나는 Stack 알고리즘을 구현하면서 배열의 내장함수인 .push,.pop,.length를 사용하지 않고 직접 구현을 하기로 했다.
큰 틀은 아래 코드와 같았다.

class Stack {
  length = 0; // 외부에서 수정 가능
  #length = 0;    // length를 사용하는 것이 불가능

  length(){    // length를 사용하기 위해 괄호()를 요구
   // 코드
   return console.log(this.#num)
  }

  push(value){
   // 코드 
  }
  pop(){
  // 코드
  return num 
 }
}

하지만 이렇게 작성했을때 문제점이 있었다.

.length를 함수로 작성하면 괄호()를 무조건 붙여줘야 한다.
괄호를 사용하지 않기 위해 함수가 아닌 Class내 변수로 선언한다면 외부에서 접근하여 값을 변경하는 것이 가능해진다.
변수로 선언한 값을 외부에서 수정할 수 있기 때문에 Private를 연결해주니 외부에서 아예 접근하는 것이 불가능해진다.

이럴때 getter와 setter를 사용하면 위 문제들을 모두 해결할 수 있다.

getter와 setter을 적용

class Stack {
  #_length = 0;

  get length(){    
   // 코드
   return this.#_length
  }

  push(value){
   // 코드 
  }
  pop(){
  // 코드
  return num 
 }
}

위 코드는 getter만 사용한 코드이다.
이렇게 작성해줌으로써 length를 사용할 때 괄호를 붙이지 않아도 되고, private를 사용했기 때문에 외부에서 숫자를 변경하는 것이 불가능해진다.
setter를 사용한 예제는 모던 자바스크립트 튜토리얼 책에도 나와있는 예시를 사용해보고자 한다.

let user = {
  name: "John",
  surname: "Smith",

  get fullName() {
    return `${this.name} ${this.surname}`;
  },

  set fullName(value) {
    [this.name, this.surname] = value.split(" ");
  }
};

user.fullName = "Alice Cooper";

console.log(user.fullName);

코드를 보면 setter를 이용하여 값을 저장해주는 것을 볼 수 있다.
그럼 set을 통해 설정된 값을 get을 이용하여 출력하는 것을 볼 수 있다.
이처럼 getter와 setter는 값의 저장과 출력에 따라 자동으로 get과 set함수가 실행되는 것을 알 수 있다.