Closure

자바스크립트에서 클로저는 함수가 선언(또는 생성)될 당시 주변환경(Lexical Environment)을 기억하는 것

function makeFunc() {
  var test = "test";
}
console.log(test);

"Uncaught ReferenceError: test is not defined" 이렇게 에러가 발생한다.

기본적으로 함수 내부에서 만들어진 변수는 외부 스코프에서 접근을 할수가 없다.

하지만 클로저를 이용하면 이러한 문제를 해결할 수 있다.

function makeFunc() {
  var name = "하태현";
  function displayName() {
    console.log(name);
  }
  return displayName;
}
var myFunc = makeFunc();
myFunc();

여기서 중요한 것은 myFunc함수는 name변수가 담겨있는 makeFunc함수 외부 스코프에서 실행되는데 name이 아무 문제 없이 출력이 된다.
makeFunc함수가 실행되면서 변수 name이 선언 되었고 displayName함수도 생성이 된다. 그때 displayName함수는 주변 환경을 기억하게 된다. 그래서 외부 스코프에서 실행된다해도 기억하고 있는 환경에 접근이 가능한 것이다.

자바스크립트에서 모든 함수는 선언되는 주변 환경을 기억하게된다.

function foo() {
  let count = 0;
  function bar() {
    count++;
    console.log(count);
  }
  return bar;
}
const baz = foo();
baz(); // 1
baz(); // 2
baz(); // 3

baz()를 2회차 3회차 실행했을때 count가 계속 증가한것을 보면 클로저가 함수가 선언될 당시에만 주변 환경을 기억하는게 아니라 지속적으로 그 변화를 추적한다.

function addCurry(x) {
  return function add(y) {
    return x + y;
  };
}
const addFive = addCurry(5);
const addTen = addCurry(10);
const result1 = addFive(1);
const result2 = addFive(4);
const result3 = addTen(30);
console.log(result1); // 6
console.log(result2); // 9
console.log(result3); // 40

예제 코드에서 보면,
const addFive = addCurry(5);
const addTen = addCurry(10);
addCurry함수가 두번 실행된다. 이 경우에는 add함수는 1번 선언되고, 2번 생성 된것이다.
그래서 addFive,addTen은 각각 x에 5와 10을 가진 함수가 되는 것이다.

⛔ Warning

클로저는 성능 관련 이슈나 메모리 누수의 가장 흔한 원인이라고 한다. 생성된 함수가 주변 환경에 대한 값을 지속적으로 사용하고 있을수 있기 때문에, Garbage Collection에 의해 정리되지 않는다.

Garbage Collection이란, 자바스크립트 엔진이 내부적으로 사용하는 메모리 관리 시스템.
Garbage Collection은 우리가 사용하지 않는 값들에 대한 메모리영역을 주기적으로 정리하고 불필요한 메모리 사용이 없도록 관리한다.