렉시컬 스코프와 클로저

자바스크립트에서 함수가 변수를 “어디서” 찾는지, 그리고 그 환경을 “어떻게” 기억하는지에 대해 알아보자.

---

목차

1. 들어가며
2. 렉시컬 스코프란?
3. 클로저란?
4. 렉시컬 스코프와 클로저의 관계
5. 마치며

---

들어가며

자바스크립트의 함수 구조를 들여다보면, “함수 안에서 변수를 어디서 찾지?” 에 대한 의문이 생겨난다.
그 답이 바로 렉시컬 스코프(Lexical Scope)이고, 여기에 한 술 더 떠서 함수가 환경을 기억하는 핵심 개념이 클로저(Closure)다.
이 두 개념만 잘 이해해도 자바스크립트의 변수 접근과 상태 유지가 훨씬 수월해진다.

---

렉시컬 스코프란?

정의

• 함수가 어디에 선언되었는지(lexical 위치)에 따라, 함수 내부에서 참조할 수 있는 외부 변수가 결정되는 규칙.
• 정적 스코프(Static Scope) 라고도 부른다.

예제

var x = 1;

function foo() {
  var x = 10;
  bar();
}

function bar() {
  console.log(x);
}

foo(); // 1
bar(); // 1

• bar 함수는 전역에서 선언됐으니, 상위 스코프도 언제나 전역이다.
• foo() 안이든 바깥이든 호출 위치는 상관없이 bar()는 전역 x를 찍는다.

핵심 정리

함수의 상위 스코프는 “선언된 위치”로 고정된다. 호출 위치는 영향을 주지 않는다.

---

클로저란?

정의

• 함수가 선언될 때의 렉시컬 환경(외부 변수 모음) 을 기억하여, 함수 실행이 끝난 뒤에도 그 환경에 접근할 수 있게 해주는 기능.
• MDN: “함수와 그 함수가 선언된 어휘적 환경의 조합”

예제

function makeCounter() {
  let count = 0;
  return function() {
    count++;
    console.log(count);
  };
}

const counter = makeCounter();
counter(); // 1
counter(); // 2

• makeCounter()가 실행되며 count 변수를 가진 환경을 생성.
• 내부 함수를 반환(return)할 때, count 환경을 함께 묶어서 반환 → 이게 클로저!
• 반환된 counter는 count를 계속 기억하고, 호출할 때마다 값을 유지·증가시킨다.

핵심 정리

클로저는 함수와 그 함수가 태어났을 때의 환경을 묶어두는 것. 반환 후에도 외부 변수를 “계속 쓸 수” 있게 해준다.

---

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

• 클로저가 동작하려면, 렉시컬 스코프가 먼저 뒷받침되어야 한다.
• 함수가 어디에 선언되었는지(렉시컬 스코프)에 따라 “어떤 환경”을 기억할 것인지가 결정되고,
• 그 기억한 환경을 클로저가 실제로 붙들고 있는 구조.

---

마치며

• 렉시컬 스코프 덕분에 함수가 “어디서 선언됐느냐”로 상위 스코프가 정해진다.
• 클로저 덕분에 그 상위 스코프(환경)를 함수가 끝난 뒤에도 기억하고 사용할 수 있다.

두 개념을 이해하면, 비동기 콜백·함수 공장(pattern)·모듈화된 코드 작성할 때 훨씬 자유롭게 상태를 관리할 수 있다.
코드 짤 때 “이 함수, 어디서 선언됐더라?” “저 변수를 언제까지 기억해야 하지?”를 떠올리며 적용해 보자.