JavaScript 클로저와 렉시컬 스코핑

1. 클로저(Closure)

클로저는 함수가 자신이 생성될 당시의 환경(스코프)을 기억하여, 그 함수가 다른 곳에서 호출되더라도 그 환경에 접근할 수 있게 하는 개념. 이를 통해 함수는 자신이 생성될 때의 상태를 유지하고 활용가능.

function outerFunction() {
  let outerVariable = 'I am outer!';
  
  function innerFunction() {
    console.log(outerVariable); // outerVariable에 접근
  }
  
  return innerFunction;
}

const closureExample = outerFunction();
closureExample(); // 결과: 'I am outer!'

위 예제에서 innerFunction은 outerFunction의 내부에 정의되어 있고, outerVariable에 접근할 수 있다. 이때 innerFunction이 반환되어 closureExample에 할당되면, outerVariable에 대한 참조가 유지되고 클로저가 형성.

2. 렉시컬 스코핑(Lexical Scoping)

렉시컬 스코핑은 함수가 정의된 위치에 따라 변수의 스코프가 결정되는 것을 의미한다. 즉, 함수가 어디에서 호출되는지가 아니라 어디에 선언되었는지에 따라 스코프가 결정.

function outerFunction() {
  let outerVariable = 'I am outer!';
  
  function innerFunction() {
    console.log(outerVariable); // outerVariable에 접근
  }
  
  return innerFunction;
}

const closureExample = outerFunction();
closureExample(); // 결과: 'I am outer!'

위 예제에서 innerFunction은 외부 함수 outerFunction 내에 정의되어 있다. 이때 innerFunction은 outerFunction 내부의 outerVariable에 접근할 수 있다. 이는 렉시컬 스코핑에 의해 함수가 선언된 위치에 따라 변수의 스코프가 결정되는 것을 보여준다.

클로저와 렉시컬 스코핑은 JavaScript에서 매우 강력한 기능을 제공하며, 이를 올바르게 활용하면 보다 효율적이고 유연한 코드를 작성할 수 있다.