클로저와 렉시컬 스코프

클로저와 렉시컬 스코프는 자바스크립트에서 중요한 개념입니다. 이 둘은 서로 밀접하게 관련되어 있으며, 자바스크립트 코드를 작성할 때 이해하고 활용하는 것이 중요합니다.

먼저 렉시컬 스코프에 대해 알아보겠습니다. 렉시컬 스코프는 함수가 선언될 때, 그 함수가 속한 스코프에서 변수를 참조하는 방식을 의미합니다. 즉, 함수가 어디서 호출되는지가 아니라 어디에 선언되는지에 따라 변수의 스코프가 결정됩니다. 이는 코드를 작성하는 시점에서 스코프가 결정되므로 정적 스코프라고도 합니다.

예를 들어보겠습니다. 다음과 같은 코드가 있다고 가정해봅시다.

const name = "John";

function sayHello() {
  console.log("Hello, " + name + "!");
}

function greet() {
  const name = "Alice";
  sayHello();
}

greet();

이 코드는 "Hello, John!"을 출력합니다. 이는 렉시컬 스코프에 의해 name 변수가 sayHello 함수가 선언된 스코프에서 참조되기 때문입니다. 즉, sayHello 함수가 선언될 당시에는 name 변수가 전역 스코프에 존재하였으므로, 함수 내부에서 변수를 참조할 때는 전역 변수를 사용합니다.

이제 클로저에 대해 알아보겠습니다. 클로저는 함수와 그 함수가 선언된 렉시컬 스코프의 조합입니다. 클로저는 함수 내부에서 생성된 함수가 외부 함수의 변수에 접근할 수 있게 해줍니다. 이는 함수가 실행을 마친 후에도 외부 함수의 변수를 참조할 수 있게 됩니다.

다음은 클로저를 사용한 간단한 예시입니다.

function createCounter() {
  var count = 0;

  return function() {
    count++;
    console.log(count);
  };
}

var counter = createCounter();
counter(); // 1
counter(); // 2

이 코드는 createCounter 함수를 호출하여 반환된 함수를 counter 변수에 할당합니다. 반환된 함수는 외부 함수인 createCounter의 변수인 count에 접근할 수 있습니다. 반환된 함수를 호출할 때마다 count 변수를 증가시키고 출력합니다. 이는 클로저를 통해 count 변수를 계속해서 참조할 수 있기 때문에 가능한 것입니다.

클로저는 주로 비동기적인 동작이 필요한 상황에서 유용하게 사용됩니다. 외부 함수의 변수를 계속해서 참조할 수 있기 때문에, 비동기적인 동작이 완료되었을 때 해당 변수를 사용할 수 있습니다.

클로저와 렉시컬 스코프는 자바스크립트 코드의 실행 흐름과 변수의 스코프를 이해하는 데 중요한 개념입니다. 이를 이해하고 활용하여 코드를 작성하면 더욱 효율적이고 유지보수가 용이한 코드를 작성할 수 있습니다.