클로저란?

목적 : 면접 때 질문받은 클로저에 대한 이해

 

실행 컨택스트에 대한 지식이 존재한다면, 이해될 수밖에 없는 개념

 

클로저 정의 : " 함수와 그 함수가 선언된 렉시컬 환경의 조합 "

함수란 단어가 2번이나 나왔듯 자바스크립트 외에도 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 접할 수 있는 개념입니다.

예제 코드를 통한 이해를 하도록 해보겠습니다.

const x = 1;

function outerFunc() {
  const x = 10;

  function innerFunc() {
    console.log(x); // 10
  }

  innerFunc();
}

outerFunc();

코드에서 실행 콘텍스트의 관점으로 봤을 때 outerfunc가 먼저 호출되고, 뒤에 innerfunc가 호출됩니다.

 

[실행 콘텍스트는 스택 구조를 이루기 때문에 outerfunc 위에 innerfunc가 쌓여있습니다]

outerfunc 함수내부에서 innerfunc를 호출하고 있습니다. 자바스크립트에서 함수는 렉시컬 스코프를 따르기 때문에

innerfunc가 선언된 상위 스코프인 outerfunc를 스코프로 갖게 되고 x 변수에 접근할 수 있게 됩니다.

이를 바탕으로,

const x = 1;

// ①
function outer() {
  const x = 10;
  const inner = function () { console.log(x); }; // ②
  return inner;
}

// outer 함수를 호출하면 중첩 함수 inner를 반환한다.
// 그리고 outer 함수의 실행 컨텍스트는 실행 컨텍스트 스택에서 팝되어 제거된다.
const innerFunc = outer(); // ③
innerFunc(); // ④ 10

위 코드를 보게 되면

outer 함수가 호출되어 실행되고, inner를 반환합니다. 이때 outer의 함수 실행 콘텍스트는 pop 되게 되면서 x의 변수도

생명주기를 마감합니다. 그러나 inner 함수에서는 outer 내부의 x에 접근할 수 있습니다.

이처럼 자신을 포함하고 있는 외부 함수보다 중첩 함수의 생명주기가 더 오래 유지되는 경우 외부 함수 밖에서 중첩 함수를 호출하더라도 외부 함수의 지역 변수에 접근할 수 있는데 이러한 함수를 클로저(closure)라고 부릅니다.

이러한 외부 함수의 지역변수를 자유 변수라고 부릅니다. 이렇게 될 수 있는 이유는 실행 컨텍스트는 pop 되더라도
렉시컬 환경이 남게 되기에 생명주기가 마감된 외부 함수의 지역변수에 접근할 수 있습니다.

클로저의 목적은 상태를 안전하게 유지, 변경하는데 사용되며, 상태가 의도치 않게 변경되는 것을 막고 안전하게 은닉하기 위한 활용도가 있습니다.

 

결론: 클로저에 대한 정의 및 이해, 목적