좌표 변환

클로저는 JavaScript의 프로그래밍 패턴으로, 바깥 렉시컬 스코프에 있는 변수를 중첩된 코드 블록 안에서 사용할 수 있게 해줘요. JavaScript는 클로저를 자연스럽게 지원하기 때문에, 클로저가 무엇인지도 모른 채 자주 사용하게 돼요.

// Top-level declarations are global-scope
const dozen = 12;

{
  // Braces create a new block-scope
  // Referencing the outer variable is a closure.
  const twoDozen = dozen * 2;
}

// Because of the block-scope declaration, twoDozen is not available here.
twoDozen;
// => Uncaught ReferenceError: twoDozen is not defined

중괄호 {} 외에도 함수(그리고 클래스)도 새로운 스코프를 만들고, 값을 감쌀 수 있어요:

const dozen = 12;

// Functions create a new function-scope and block-scope.
// Referencing the outer variable here is a closure.
function nDozen(n) {
  // This is declared inside the function scope, and uses the top-level scope.
  // This works, and encloses the value 12.
  const twoDozen = dozen * 2;

  // This only uses the locally declared variable and the passed argument to the parameter `n`
  return (twoDozen / 2) * n;
}

// Because of the function-scope declaration, twoDozen is not available here.
twoDozen;
// => Uncaught ReferenceError: twoDozen is not defined

twoDozen 예제에서 보았듯이, 값은 중첩된 스코프(함수, 블록 등)에 감쌀 수 있지만, 그 문맥 밖으로 끌어낼 수는 없어요. 대부분의 경우, 현대 JavaScript에서는 값이 바깥 스코프로 새어 나가지 않도록 의도해요.

클로저로 상태를 저장하고 값을 전달하기

let이나 var처럼 변경할 수 있는 변수 선언을 사용하면 어떤 상태를 보존할 수 있어요:

let counter = 0;

// This function closure increments the counter's state in the outer lexical context.
// This way the counter can be shared between many calling contexts.
export function increment() {
  counter += 1;
  return counter;
}

increment();
// => 1

counter;
// => 1

상태를 새어 나가게 하지 않으면서 값을 감싸기

상태를 보존하기 위해 값을 감싸는 것, 그리고 감싼 값은 바깥으로 새어 나가지 않는다는 두 가지 아이디어를 합치면 비공개 값을 만들 수 있어요.

가장 흔한 방법은 어떤 상태를 감싸는 함수를 반환하는 함수를 만드는 거예요.

export function makeCounter() {
  let counter = 0;

  // This returns a new function that encloses the local variable counter
  return function increment() {
    counter += 1;
    return counter;
  };
}

// Counter did not leak
counter;
// => Uncaught ReferenceError: counter is not defined

// This creates a new counter.
// This assigns the increment function to the variable myFirstCounter.
const myFirstCounter = makeCounter();

typeof myFirstCounter;
// => function

myFirstCounter.name;
// => increment

myFirstCounter();
// => 1
myFirstCounter();
// => 2

// This creates new counter (with new, separate local state / enclosed counter variable)
const mySecondCounter = makeCounter();

mySecondCounter();
// => 1

// It does not affect the first counter.

myFirstCounter();
// => 3