[Javascript] 클로저(Closure)란?

  

클로저란?

클로저는 함수가 다른 함수 안에서 정의되고, 그 함수의 외부 변수에 접근할 수 있는 것

 

- 함수 내 함수

클로저는 함수 내부에 정의된 함수입니다. 이 함수는 외부 함수의 스코프에 접근할 수 있습니다.

 

- 외부 변수 접근

클로저는 외부 함수(자신포함)의 변수나 매개변수에 접근할 수 있으며, 그 값을 읽거나 변경할 수 있습니다.

 

- 스코프 유지

외부 함수가 실행을 완료하더라도 클로저 함수는 여전히 외부 함수의 스코프 정보를 유지합니다. 이것은 클로저 함수가 외부 함수의 변수에 계속 접근할 수 있는 이유입니다.

 

 

예시

위의 개념으로만 보면 이해가 잘 안 될 수 있으니 예제를 통해 자세히 살펴보도록 하겠습니다.

function outer() {
  let outerVar = '저는 외부 변수입니다.';

  function inner() {
    console.log(outerVar); // inner 함수가 outer 함수의 변수에 접근
  }

  return inner;
}

const closureFunc = outer(); // outer 함수가 실행되고 inner 함수가 반환됨
closureFunc(); // "저는 외부 변수입니다." 출력

 

위의 코드에서 outer 함수는 inner 함수를 반환하고, inner 함수는 outer 함수 내에 정의된 변수 outerVar에 접근합니다. 이것이 바로 클로저입니다. 코드를 자세히 살펴보겠습니다.

 

1. outer 함수가 호출될 때, outerVar 변수가 생성되고 값이 할당됩니다.

2. inner 함수가 outer 함수 내에서 정의되고 반환됩니다. 이때 inner 함수는 outer 함수의 변수인 outerVar에 접근할 수 있습니다.

3. outer 함수가 완료되어 스코프에서 벗어난 후에도 inner 함수는 outerVar에 접근할 수 있습니다. (클로저의 핵심)

 

실제로 closureFunc을 호출하면 inner 함수가 outerVar에 접근하여 값을 출력합니다. inner 함수는 이미 반환된 outer 함수의 *렉시컬 환경(Lexical Environment)을 유지하고 있으며, 외부 변수에 계속 접근할 수 있습니다.

즉, 클로저란 외부 변수를 기억하고 접근할 수 있는 함수라고 보시면 됩니다.

 

이런 방식으로 클로저를 사용하면 외부 함수의 변수를 보호하고, 데이터 은폐 및 정보 은폐를 구현할 수 있습니다. 클로저는 많은 Javascript 라이브러리와 모듈 시스템, 비동기 프로그래밍에서 사용되며, 이러한 상황에서 변수와 함수를 캡슐화하여 보안성을 높이고 모듈화를 구현하는데 활용됩니다.

 

 

 

References

[Javascript] ES6 Execution Context (실행 컨텍스트) 정리 - 렉시컬 환경