[JavaScript] 클로저(Closure)

1. 클로저란 무엇인가?

클로저는 함수가 선언될 당시의 렉시컬 환경(Lexical Environment)을 기억하여, 외부 함수의 변수에 접근할 수 있는 함수를 의미합니다.
JavaScript에서 함수는 선언된 위치를 기준으로 스코프가 결정되는데, 이 스코프를 기억하고 유지할 수 있는 것이 클로저의 핵심입니다.

1) 클로저의 특징

1. 외부 함수의 변수에 접근할 수 있다.
   • 내부 함수는 자신이 선언된 함수의 변수에 접근할 수 있습니다.
2. 외부 함수 실행이 종료된 후에도 변수 상태를 유지한다.
   • 클로저를 사용하면 외부 함수가 종료된 후에도 그 함수의 변수가 소멸되지 않고 유지됩니다.
3. 데이터 은닉 및 캡슐화가 가능하다.
   • 클로저를 사용하면 외부에서 직접 접근할 수 없는 private 변수를 만들 수 있습니다.

2) 클로저의 동작 원리

클로저가 동작하는 이유는 JavaScript의 렉시컬 스코프(Lexical Scope) 때문입니다. 함수는 자신이 선언된 위치의 스코프 체인을 기억합니다. 이로 인해 내부 함수는 외부 함수의 변수에 접근할 수 있게 됩니다.
클로저의 간단한 예제

function makeCounter() {  
  let count = 0; // 외부 함수의 변수  

  return function () {  
    // 내부 함수가 외부 변수(count)를 참조  
    count++;  
    console.log(`현재 카운트: ${count}`);  
  };  
}  

const counter = makeCounter(); // 외부 함수를 호출해서 내부 함수를 반환  

counter(); // 출력: 현재 카운트: 1  
counter(); // 출력: 현재 카운트: 2  
counter(); // 출력: 현재 카운트: 3

• 여기서 makeCounter()를 호출하면 count라는 지역 변수와 그 값을 사용할 수 있는 내부 함수가 만들어지고 반환됩니다.
• counter는 그 내부 함수를 가리키고, count는 계속 유지됩니다.
• 만약 makeCounter를 다시 호출한다면?
• 새로운 count가 만들어집니다. 이 말은 새로운 카운터가 만들어진다는 뜻이에요.

const counter1 = makeCounter(); // 첫 번째 카운터
counter1(); // 출력: 현재 카운트: 1
counter1(); // 출력: 현재 카운트: 2

const counter2 = makeCounter(); // 두 번째 카운터
counter2(); // 출력: 현재 카운트: 1 (새로운 count가 생성됨)
counter2(); // 출력: 현재 카운트: 2

counter1(); // 출력: 현재 카운트: 3 (첫 번째 카운터는 별개로 유지)

• 여기서 볼 수 있듯이, makeCounter를 호출할 때마다 새로운 클로저와 새로운 count 변수가 생성됩니다.
• 이런 동작 원리가 바로 클로저의 핵심이랍니다. 중요한 점은, 반환된 내부 함수가 외부 함수의 변수에 대한 "참조"를 유지한다는 것이에요.

결론

클로저는 JavaScript의 중요한 개념으로, 이를 이해하면 JavaScript로 더 효율적이고 강력한 코드를 작성할 수 있습니다.
클로저는 단순히 이론으로 끝나는 개념이 아니라, 데이터 은닉, 이벤트 핸들링, 비동기 작업, 함수형 프로그래밍 등 다양한 상황에서 실질적으로 사용됩니다.