클로저와 렉시컬 스코프는 자바스크립트의 함수와 변수의 동작 방식을 이해하는 데 매우 중요한 개념입니다.

아래에서 각각의 개념과 그 관계를 자세히 설명하겠습니다.

1. 렉시컬 스코프 (Lexical Scope)

• 정의: 렉시컬 스코프는 함수가 어디에서 선언되었는지에 따라 **변수의 유효 범위(**스코프)가 결정되는 방식을 말합니다. 즉, 함수 내부에서 사용 가능한 변수들은 함수가 작성된 코드의 물리적 위치(소스 코드 상의 위치)에 의해 정해집니다.
• 예시:

const globalVar = "전역";

function outer() {
  const outerVar = "외부";

  function inner() {
    const innerVar = "내부";
    console.log(globalVar);  // 전역 변수, 접근 가능
    console.log(outerVar);   // outer 함수의 변수, 접근 가능
    console.log(innerVar);   // inner 함수의 변수, 당연히 접근 가능
  }

  inner();
}

outer();

• 여기서 inner 함수는 자신이 선언된 위치(outer 함수 내부)에 따라 outerVar에 접근할 수 있습니다.
• 비교: 렉시컬 스코프는 마치 집의 구조와 같습니다. 집(외부 함수) 안에 있는 방(내부 함수)은 집 안에 있는 물건들(변수들)에 접근할 수 있지만, 집 밖에서 바로 방 안의 물건에 접근하기는 어렵습니다.

2. 클로저 (Closure)

• 정의: 클로저는 함수가 자신이 생성된 렉시컬 환경(변수, 상수 등)을 기억한 채, 그 환경 외부에서 실행되더라도 해당 환경에 접근할 수 있는 특성을 의미합니다. 쉽게 말해, 함수와 그 함수가 선언될 때의 환경을 함께 “닫아”서 보존하는 것입니다.
• 예시:

function makeCounter() {
  let count = 0; // makeCounter의 지역 변수

  // inner 함수는 makeCounter의 렉시컬 스코프에 있는 count에 접근할 수 있다.
  return function() {
    count += 1;
    return count;
  };
}

const counter = makeCounter(); // 클로저 생성: counter 함수는 makeCounter의 렉시컬 환경(count)에 대한 참조를 가짐.
console.log(counter()); // 1
console.log(counter()); // 2

• 위 코드에서 makeCounter 함수가 종료된 후에도, 반환된 함수는 count 변수에 접근할 수 있습니다. 이것이 클로저의 전형적인 예입니다.
• 비교: 클로저는 마치 "기록된 메모"와 같습니다. 예전 정보를 잊지 않고 계속 참조할 수 있도록 기록해둔 것처럼, 클로저는 함수가 생성된 당시의 환경을 기억해둡니다.

3. 클로저와 렉시컬 스코프의 관계

• 렉시컬 스코프가 클로저의 기반: 클로저는 렉시컬 스코프의 특성을 이용합니다. 함수가 선언된 시점에 어떤 변수가 유효한지 결정되고, 클로저는 그 유효 범위를 그대로 기억합니다.