[JavaScript] 클로저(Closure)

클로저(Closure)

자바스크립트에서 클로저(Closure)는 함수와 그 함수가 선언된 렉시컬 환경(Lexical Environment) 간의 조합을 나타낸다. 간단히 말하면, 클로저는 함수가 자신이 생성된 렉시컬 스코프를 기억하고 그 스코프에 접근할 수 있게 하는 메커니즘이다.

아래의 예시 코드를 통해 클로저의 메커니즘을 살펴보자.

function outer() {
  const message = "Closure";

  function inner() {
    console.log(message);
  }

  return inner;
}

const myFunction = outer();
myFunction(); // 출력: "Closure"

1. const myFunction = outer(); 해당 코드가 실행 될 때, outer 함수의 렉시컬 스코프에 message = "Closure" 기억되게 되고 return inner; 코드에 따라 myFunction 이라는 변수는 inner 함수를 참조하게 된다.

2. 이후 myFunction();가 실행되면 참조된 inner 함수를 찾아 실행하게 되는데 inner 함수의 렉시컬 스코프에는 message 값이 존재하지 않으니 상위 스코프인 outer 함수의 렉시컬 스코프에 기억된 message를 찾아 값을 가져와 console.log(message);코드를 실행시키게 된다.

이렇게 상위 렉시컬 스코프에 접근 할 수 있고, 그 스코프에 있는 변수에 접근할 수 있는 상황을 클로저라고 한다. 클로저를 활용하면 함수가 생성된 당시의 렉시컬 환경을 기억하고, 이를 통해 외부 변수에 접근 할 수 있다.

References

• https://github.com/Esoolgnah/Frontend-Interview-Questions/blob/main/Notes/important-5/closure.md