클로저(Closure)를 알아보자

클로저(Closure)를 알아보자

클로저란?

"A closure is the combination of a function and the lexical environment within which that function was declared"

클로저는 함수와 함수가 선언된 어휘적 환경(렉시컬 환경)의 조합이다.
클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지를 먼저 이해해야 한다.

단순 정의를 보면 간단하지만 이를 이해할 수 있는 사람은 많지 않다고 생각하고 하나씩 풀어가며 알아보자.

클로저를 알기 위해 실행 컨텍스트에 대한 사전 지식을 가지고 시작하는 것이 이해하기 더 좋다. 그러므로 실행 컨텍스트에 대해서 먼저 알아보자!

 

실행 컨텍스트란?

코드를 실행하는데 필요한 환경을 제공하는 객체

EX)

• 전역 코드 : 전역 영역에 존재하는 코드
• Eval 코드 : eval 함수로 실행되는 코드
• 함수 코드 : 함수 내에 존재하는 코드

실행 컨텍스트는 STACK이 생성되고 소멸한다. 아래 간단한 예시로 실행 컨텍스트의 작동 방식을 확인해보자.

function foo(i) {
    if (i === 3) {
        return;
    }
    else {
        foo(++i);
    }
};

console.log(foo(0));

 

실행 스택에 대해 기억해야 할 5가지 핵심 사항

1. 싱글 스레드
2. 동기식 실행
3. 글로벌 컨텍스트
4. 무한 함수 컨텍스트
5. 각 함수 호출 새로운 컨텍스트 생성(재귀적 호출 포함)

실행 컨텍스트에 알아보았으니 이제 클로저에 대해 코드로 알아보자

 var outerVariable = 1;

function OuterFunction() {

    var outerVariable = 100;

    function InnerFunction() {
        alert(outerVariable);
    }

    return InnerFunction;
}
var innerFunc = OuterFunction();

innerFunc(); // 100

쉽게 말해서 InnerFunction이 OuterFunction보다 오래 살아있는 경우 클로저가 사용된다.

 

클로저는 은닉화를 사용할 수 있다. (함수 안에 값을 숨기고 싶을 때 사용)

function secretNum(){
	let num = 5;
  	return num;
}

const result = secretNum(); // result = 5

console.log(num) // ReferenceError: num is not defined

 

참고

https://medium.com/@itIsMadhavan/what-is-the-execution-context-stack-in-javascript-e169812e851a

What is the Execution Context & Stack in JavaScript?