JavaScript getter 와 setter 의 사용

JavaScript 에서도 getter, setter 를 지원한다.

사용하는 방법에 대한 설명은 어디에서나 찾을 수 있었는데, 언제 그리고 왜 사용해야하는지는 찾을 수 없어서 직접 케이스를 만들어 보았다.

 

Use case: 자료구조형 클래스 선언

// 기본 클래스 선언
class Bounds {
  constructor(southWest, northEast) {
    this.south = southWest.south;
    this.west = southWest.west;
    this.north = northEast.north;
    this.east = northEast.east;
  }
}

 

 

southWest, northEast 값을 한 번에 얻고 싶다는 요구 사항이 들어온다면?

class Bounds {
  constructor(southWest, northEast) {
    this.south = southWest.south;
    this.west = southWest.west;
    this.north = northEast.north;
    this.east = northEast.east;
    
    // southWest, northEast 값을 반환하는 메소드를 선언한다
    this.getSouthWest = () => {
      return {
        south: this.south,
        west: this.west,
      };
    };
    this.getNorthEast = () => {
      return {
        north: this.north,
        east: this.east,
      };
    }; 
  }
}

메소드를 통해 원하는 값을 반환하도록 할 수 있다. 하지만 southWest, northEast 값을 수정할 수는 없다. 따라서 다음과 같이 개선해볼 수 있다.

class Bounds {
  constructor(southWest, northEast) {
    this.south = southWest.south;
    this.west = southWest.west;
    this.north = northEast.north;
    this.east = northEast.east;
    this.getSouthWest = () => {
      return {
        south: this.south,
        west: this.west,
      };
    };
    this.getNorthEast = () => {
      return {
        north: this.north,
        east: this.east,
      };
    };

    // southWest/northEast 를 설정하는 메소드를 선언한다
    this.setSouthWest = (southWest) => {
      this.south = southWest.south;
      this.west = southWest.west;
    };
    this.setNorthEast = (northEast) => {
      this.north = northEast.north;
      this.east = northEast.east;
    };
  }
}

// 사용 예:
const bounds = new Bounds({
  south: 1,
  west: 2,
}, {
  north: 3,
  east: 4,
});
bounds.south // 1
bounds.west // 2
bounds.north //3
bounds.east // 4
bounds.getSouthWest() // {south: 1, west: 2}
bounds.getNorthEast() // {north: 3, east: 4}
bounds.setSouthWest({south: 10, west: 20})
bounds.setNorthEast({north: 30, east: 40})

위 코드를 통해 south/west/north/east 및 southWest, northEast를 설정하고 반환하도록 처리할 수 있다.

하지만, 다시 코드를 살펴보면 south/west/north/east 의 경우 변수에 직접 접근하여 값을 설정하고 반환할 수 있는 반면 southWest, northEast 의 경우 메소드를 통해 값을 설정하고 반환해야 한다.

자료구조 클래스의 값에 접근하는 방식에 일관성이 깨진 것이다. 일관성을 유지하려면 getter, setter 를 활용하면 된다.

class Bounds {
  constructor(southWest, northEast) {
    this.south = southWest.south;
    this.west = southWest.west;
    this.north = northEast.north;
    this.east = northEast.east;
  }
  get southWest() {
    return {
      south: this.south,
      west: this.west,
    };
  };
  get northEast() {
    return {
      north: this.north,
      east: this.east,
    };
  };
  set southWest(southWest) {
    this.south = southWest.south;
    this.west = southWest.west;
  };
  set northEast(northEast) {
    this.north = northEast.north;
    this.east = northEast.east;
  };
}

// 사용 예:
/*
const bounds = new Bounds({
  south: 1,
  west: 2,
}, {
  north: 3,
  east: 4,
});

bounds.south // 1
bounds.west // 2
bounds.north //3
bounds.east // 4
bounds.southWest // {south: 1, west: 2}
bounds.northEast // {north: 3, east: 4}
bounds.southWest = {south: 10, west: 20}
bounds.northEast = {north: 30, east: 40}
*/

 

 

자, 이제 southWest, northEast 도 south/west/north/east 와 같은 방식으로 변수처럼 값을 설정하고 반환할 수 있다.