💿 상태 패턴

🕹️ 상태 패턴이란

객체의 상태를 조건문으로 검사해서 행위를 달리하는것이 아닌
상태를 객체화 하여 상태가 행동할 수 있도록 위임하는 패턴.
객체의 상태에 따라 행동을 변경

videoPlayer를 상태패턴 만들기

VideoPlay클래스를 통해 상태를 인자로 받고, setState를 통해 상태를 바꾸도록 한다

class VideoPlay {
  constructor(state) {
    // Object.create를 통해 새로운 객체로 받고, Object.assign을 통해 객체복사를 진행한다
    this.state = Object.create(Object.assign({ videoplayer: this }, state));
  }
  setState(state) {
    this.state = Object.create(Object.assign({ videoplayer: this }, state));
  }
}

const streaming = {
  pause() {
    return "스트리밍 중지";
  },
  play() {
    return "스트리밍 재생";
  },
  changeBrand() {
    this.videoplayer.setState(brand);
  },
};
const brand = {
  pause() {
    return "브랜드 중지";
  },
  play() {
    return "don`t use";
  },
  changeStreaming() {
    this.videoplayer.setState(streaming);
  },
};

상태패턴 사용

const videoState = new VideoPlay(streaming);
console.log(videoState.state.play()); // 스트리밍 재생
console.log(videoState.state.pause()); // 스트리밍 중지
videoState.state.changeBrand(); // 객체 상태 변경
console.log(videoState.state.play()); // don`t use
console.log(videoState.state.pause()); // 브랜드 중지
videoState.state.changeStreaming(); // 객체 상태 변경
console.log(videoState.state.play()); // 스트리밍 재생
console.log(videoState.state.pause()); // 스트리밍 중지

상태패턴 변경 사용 후기

상태패턴을 사용했을때 확실히 If/else문 보다는 객체를 관리하기때문에,확장성이 생겼다. 그리고 객체기반으로 상태를 변경하기때문에, 변경에도 용이하다. 다만 그 만큼 객체(streaming,brand 등)를 추가적으로 만들어줘야 한다는 단점이 있다.
if/else으로 작성 후 상태가 계속 추가가 된다면 사용해보면 괜찮은 패턴이다