Javascript 클로저

Goal

클로저의 개념에 대해 이해한다.

What is Closure

MDN문서에 따르면 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다.
특히 클로저를 이해하기 위해서는 Lexical Scoping을 먼저 이해해야한다고 한다.

Lexical Scoping?

먼저 스코프란 쉽게 말해 변수나 함수의 유효 범위이다. 유효 범위를 벗어난 곳에서의 함수 변수는 호출할 수 없다.

렉시컬 스코프란 함수가 어디서 호출하였는지가 아니라 어디에 선언하였는지에 따라 결정되는 방식이다.

function addMaker() {
  const a = 10;  // a는 addMaker에 의해 생성된 지역 변수이다.
  function addNumber() { // addNumber()은 내부 함수이며, 클로저다.
    console.log(a); // 부모 함수에서 선언된 변수를 사용한다.
  }
  addNumber();
}
addMaker();

addMaker()은 지역변수 a와 함수 addNumber()를 생성한다.
addNumber() 내부에는 지역변수가 선언되지 않았다는 점에 주목해야한다.
함수의 내부에서 선언된 함수는 자신을 선언한 함수(부모)의 변수에 접근할 수 있다. 때문에 addNumber()함수는 a라는 변수에 접근할 수 있는 것이다.

클로저(Closure)

function addMaker() {
  const a = 10;
  function addNumber() {
    console.log(a);
  }
  return addNumber();
}
const addFunction = addMaker;
addFunction();

이 코드는 이 전의 예제와 동일한 결과가 실행된다.
다른 점은 addNumber()함수가 실행되기 전에 외부 함수인 addMaker()로부터 리턴되어 addFunction변수에 저장된다는 점이다.

자바스크립트는 함수를 리턴하고, 리턴하는 함수가 클로저를 형성한다.

조금 다른 예제를 한번 더 살펴보자

function addMaker(b) {
  const a = 10;
  return function(c) {
      return a + b + c; // 10 + 5 + 3
  }
}
const addFunction = addMaker(5); 
console.log(addFunction(3)); 

addMaker(b)함수는 b라는 인자를 받고 새로운 함수를 반환한다.
반환되는 함수는 addMaker의 지역변수 a와 인자 b, 그리고 새로운 함수의 인자 c를 더한 값을 반환한다.
여기서 addFunction은 클로저이다.

Summary

• Lexical Scope는 함수가 어디에 선언되었는지에 결정되는 방식이다.
• 클로저는 외부 변수를 기억하고 접근할 수 있는 함수를 의미한다.
• 일단은 함수 내에서 선언된 함수 그리고 함수 내에서 반환되는 함수를 클로저라고 이해하도록 하자