(JS) Closure

Closure

Closure라는 단어는 기본적으로 "폐쇄"라는 의미를 갖고 있습니다. 자바스크립트에서 말하는 Closure란 이와 유사하게도,

함수가 선언될(혹은 생성될) 당시 주변환경(Lexical Enviroment)과 함께 갇히는 것을 의미합니다. "함수가 선언될 당시"가 의미하듯, 클로저는 함수가 선언되는 주변 환경과 관련해 생성되는 개념입니다.

실행되는 장소나 시점은 관계가 없습니다.

function say () {
  const a = 1;
  const b = 2;

  function log () {
    console.log(a + b);
  }

  return log;
}

const func = say();

func();

위 예제에서 func()변수가 가르키게 되는 것은 log함수입니다.

func()함수가 실행되는 줄의 a, b 변수가 담겨있는 say함수 스코프의 외부에 있음에도 불구하고, a값과 b값은 콘솔에 출력하는데 아무런 문제가 없습니다.

이러한 현상을 발생시키는 것이 바로 클로저입니다.

모든 자바스크립트 함수는 선언될 당시에 클로저가 형성돠어 주변 환경을 기억할 수 있게됩니다.

say함수가 실행됨으로써 변수 a,b가 선언되었고,log함수 또한 생성되었습니다. 이때 log함수는 선언될 당시 주변 환경을 기억하게 됩니다.

그렇기에 실제로 실행되는 부분이 외부 스코프 혹은 나중 시점이라 하더라도 함수가 선언될 당시 기존 환경에 대한 접근이 가능합니다.

함수가 실행되는 위치나 시점과는 관계없이, 자바스크립트에서 모든 함수는 선언되는 주변 환경을 기억하게 됩니다.

function addCurry (x) {
  return function add (y) {
    return x + y;
  };
}

const addFive = addCurry(5);
const result = addFive(5);

console.log(result);

(함수실행절차)

• addcurry함수를 실행
• add함수가 생성됩니다.(함수는 생성될때 주변 환경을 기억하게 됩니다. 즉, 매개 변수 x의 값이 5라는 정보를 기억합니다.)
• addFive함수를 실행합니다.
• x+y구문을 연산합니다.
• addFive함수가 기억하는 매개변수 x는 5이고, y는 매개변수의 값은 5입니다.
  즉 x+y는 10이 됩니다.
• result변수에 10이 할당