클로저의 사용법

클로저란 외부 함수가 소멸했음에도 내부함수가 외부함수의 지역변수(자유변수)에 접근할 수 있는 메커니즘을 말한다.

캡슐화를 통해 외부함수의 지역변수(자유변수)의 오염을 막을 수 있기 때문에 다음과 같이 사용하곤 했다.

MusicPlayer.js

const playControler = (() => {
  let playingIndex = 0;

  const setPlayStatus = (boolean) => {
    if (boolean) {
      $playBtn.classList.remove('playing');
      $musicPlayer.pause();
    } else {
      $playBtn.classList.add('playing');
      $musicPlayer.play();
    }
  };

  const playNext = () => {
    playingIndex++;

    if (playingIndex > musics.length - 1) playingIndex = 0;

    paintSelectedList(playingIndex);
    setMusic(musics[playingIndex]);
    setPlayStatus(PLAY_ON);
  };

  const playPrev = () => {
    playingIndex--;

    if (playingIndex < 0) playingIndex = musics.length - 1;

    paintSelectedList(playingIndex);
    setMusic(musics[playingIndex]);
    setPlayStatus(PLAY_ON);
  };

  return {
    setPlayStatus, playSelectedList, playNext, playPrev
  };
}());

재생관련 기능을 가진 함수들은 현재 재생중인 곡의 인덱스를 알아야 한다.

하지만 인덱스 정보는 몇가지 함수들만 사용하고 그 함수들만 접근 가능해야 변수 오염을 예방할 수 있다.

이렇게 함수들이 공통으로 사용하는 변수와 함수들을 묶는 용도로 사용해 왔으나 다음 코드와 같이 단순히 매개변수 위치를 바꾸거나 비슷한 기능을 묶는 용도로도 사용한다.

Todo-List.js

const ajax = (() => {
  const req = (method, url, callback, payload) => {
    const xhr = new XMLHttpRequest();

    xhr.open(method, url);
    xhr.setRequestHeader("content-type", "application/json");
    xhr.send(JSON.stringify(payload));

    xhr.onload = () => {
      if (xhr.status === 200 || xhr.status === 201) {
        callback(JSON.parse(xhr.response));
      } else {
        console.error("Error", xhr.status, xhr.statusText);
      }
    };
  };

  return {
    get(url, cb) {
      req("GET", url, cb);
    },
    post(url, payload, cb) {
      req("POST", url, cb, payload);
    },
    patch(url, payload, cb) {
      req("PATCH", url, cb, payload);
    },
    delete(url, cb) {
      req("DELETE", url, cb);
    },
  };
})();

위 코드는 XMLHttpRequest 객체를 이용한 통신 코드이다. get, post, patch, delete를 클로저로 묶어 하나의 객체의 프로퍼티들로 사용한다.

이 뿐만 아니라 매개변수 위치를 바꿨다. payload는 있을 수도 있고 없을 수도 있는 변수라 매개변수 가장 끝쪽에 위치시켜야 한다. 하지만 콜백함수 뒤에 추가 매개변수가 있는 것은 미관상 보기 좋지 않다. 따라서 클로저를 사용하여 payload 변수가 콜백 함수보다 앞에 위치할 수 있게 바꿨다.

이처럼 클로저는 변수의 오염을 막는 용도뿐만 아니라 매개변수의 위치를 바꾸고 유사기능을 묶는 용도로도 사용할 수 있다.

If you like this blog or find it useful for you, you are welcome to comment on it. You are also welcome to share this blog, so that more people can participate in it. If the images used in the blog infringe your copyright, please contact the author to delete them. Thank you !

FEATURED TAGS

FRIENDS