클로저에 대해

클로저의 정의

주변 상태(어휘적 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합 - mdn

• 생성된 당시의 스코프체인을 기억하는 함수
• 함수가 선언될 때의 렉시컬 환경을 기억하는 함수

 

클로저의 이해

function makeFunc() {
  const name = "Mozilla";
  function displayName() {
    console.log(name);
  }
  return displayName;
}

const myFunc = makeFunc();
myFunc();

함수만 봐서는 리턴된 displayName에서는 name이라는게 없기 때문에 에러가 날 것 같이 생겼다. 하지만 클로저가 형성되어 name 변수에 대한 데이터를 가지고 있기 때문에 에러가 나지 않는다. name이 있는 어휘적 환경에 대한 참조를 유지한다고 말할 수 있다.

 

클로저의 사용

클로저는 어떤 데이터와 그 데이터를 조작하는 함수를 연결시켜주어 유용하게 사용할 수 있다.

 

1. 캡슐화

• 클로저를 사용해 중요한 값을 내부로 숨기고 제어 가능한 인터페이스를 제공할 수 있다.

 

객체 지향 기반 언어에서는 비공개 메서드 (private method)라는 게 있다. 이 메서드는 같은 클래스 내부의 다른 메서드에서만 그 메서드들을 호출할 수 있다. 자바스크립트에 class가 도입되기 전에 비공개 메서드 개념을 구현하기 위해 클로저를 사용했다고 한다.

function counter() {
  let count = 0;

  return {
    increment: function () {
      count += 1;
    },
    print: function () {
      return count;
    },
  };
}

const module = counter();
module.increment();
console.log(module.print());

이게 그 예시이다. increment, print에서 참조하는 count를 기억하고 있다. 그리고 counter로 생성한 module에서는 count에 바로 접근할 수 없고 마음대로 조작할 수 없도록 보호되어있다.

 

2. 메모이제이션

function memoize() {
  const cache = {};

  return (url) => {
    if (cache[url]) {
      console.log(`cached: ${url}`);
      return cache[url];
    } else {
      console.log("호출");
      cache[url] = "response";
    }
  };
}

const memoizedFetch = memoize();

memoizedFetch(
  "[https://pokeapi.co/api/v2/pokemon/1/](https://pokeapi.co/api/v2/pokemon/1/)"
);
memoizedFetch(
  "[https://pokeapi.co/api/v2/pokemon/2/](https://pokeapi.co/api/v2/pokemon/2/)"
);
memoizedFetch(
  "[https://pokeapi.co/api/v2/pokemon/2/](https://pokeapi.co/api/v2/pokemon/2/)"
);

• 객체 cache를 두고 매개변수로 받은 url에 따라 캐시를 가져오거나 새로 데이터를 불러와 캐시에 저장하는 로직 작성이 가능하다.

 

3. 함수형 프로그래밍

• 함수형 프로그래밍에서 등장하는 대표적인 개념 중 하나가 커링이다. 커링은 여러 개의 인자를 받는 함수를 하나의 인자만 받는 함수로 나눠서 순차적으로 호출될 수 있게 체인 형태로 구성한 것이다.

function add(a) {
  return (b) => {
    return a + b;
  };
}

const add10 = add(10);

console.log(add10(5)); // 15

 

참고자료

• mdn 클로저
• 모던 자바스크립트 튜토리얼 - 커링