📅 스터디 정보

1. 🗺️ 개념 지도 (Overview)

이 주제를 한 문장으로 설명하면?

"클로저는 함수가 선언된 시점의 렉시컬 환경을 기억해, 외부 함수의 실행이 끝난 후에도 그 스코프의 변수에 접근할 수 있는 메커니즘이다."

이 주제가 왜 중요한가?

• 전역 변수 없이 상태를 유지하거나 데이터를 은닉하는 핵심 수단이다.
• React useState, useEffect, useCallback이 클로저를 기반으로 동작하며, 이를 모르면 Stale Closure 버그의 원인을 파악하기 어렵다.
• 프론트엔드 면접에서 this 바인딩과 함께 가장 자주 둥장하는 JS 핵심 개념이다.

[클로저 (Closure)]
├── 전제 개념
│   ├── 렉시컬 스코프 (Lexical Scope)
│   ├── 실행 컨텍스트 (Execution Context)
│   └── 스코프 체인 (Scope Chain)
├── 클로저의 동작
│   ├── 외부 변수 참조 유지
│   ├── 자유 변수 (Free Variable)
│   └── GC 수거 방지
├── 활용 패턴
│   ├── 데이터 은닉 (Private 변수)
│   ├── 상태 유지 (카운터, 누적값)
│   ├── 팩토리 함수
│   └── once 패턴
├── 주의사항
│   ├── Stale Closure (useEffect / useCallback)
│   └── 메모리 누수
└── 실무 연결
    ├── React useState / useEffect / useCallback
    └── debounce / throttle

2. 📖 핵심 개념 정리

⚠️ 단순 복붙 금지! 반드시 자신의 말로 재작성할 것

2-1. 렉시컬 스코프(Lexical Scope) — 클로저의 전제

자바스크립트는 함수가 어디서 호출됐는지가 아니라 어디서 선언됐는지를 기준으로 상위 스코프를 결정한다. 함수가 선언되는 순간 상위 스코프가 정적으로 확정되며, 이후 호출 위치와 무관하게 그 스코프의 변수에 접근한다.

1. 함수가 선언될 때, 자바스크립트 엔진은 해당 함수가 선언된 위치의 스코프 정보를 함수 내부에 기록한다.
2. 함수가 실행될 때, 이 기록을 따라 외부 변수를 탐색한다.
3. 일반적으로 함수 실행이 끝나면 내부 지역 변수는 GC의 수거 대상이 된다.

// 호출 위치가 아닌 선언 위치 기준
const value = 'outer';

function printValue() {
  console.log(value); // 선언 위치(전역)의 value 참조
}

function wrapper() {

핵심 포인트:

• 스코프는 선언 위치 기준으로 결정된다. (호출 위치 기준 X)
• 함수가 종료되면 지역 변수는 사라진다 → 클로저는 이 변수를 유지하는 방법이다.

2-2. 클로저 (Closure)

내부 함수가 외부 함수의 변수를 참조할 때, 외부 함수의 실행이 끝나도 해당 변수가 GC에 수거되지 않고 내부 함수를 통해 계속 접근 가능한 상태가 된다. 이 내부 함수를 클로저라고 한다.

1. 외부 함수가 실행되며 지역 변수가 생성된다.
2. 내부 함수가 그 변수를 참조한다.
3. 외부 함수가 내부 함수를 반환하고 실행을 마친다.
4. 일반적으로 지역 변수는 GC 수거 대상이 되지만, 반환된 내부 함수가 여전히 참조하고 있으므로 수거되지 않는다.
5. 반환된 함수를 호출하면 외부 함수의 변수에 계속 접근할 수 있다.

function makeAdder(x) {
  // x는 makeAdder의 지역 변수
  return function(y) {
    return x + y; // 외부 함수의 x를 클로저로 참조
  };
}

const add5  = makeAdder(

핵심 포인트:

• 클로저 = 함수 + 그 함수가 선언됐을 때의 렉시컬 환경
• 내부 함수가 참조하는 외부 변수를 자유 변수(Free Variable) 라고 한다.
• makeAdder 를 호출할 때마다 독립적인 렉시컬 환경이 생성되므로, add5 와 add10 의 x 는 서로 영향을 주지 않는다.

2-3. 클로저 활용 패턴

클로저는 주로 세 가지 목적으로 활용된다. 1. 변수를 외부에서 직접 접근하지 못하도록 은닉할 때 2. 전역 변수 없이 함수 호출 간 상태를 유지할 때 3. 특정 값이 고정된 새 함수를 생성할 때(팩토리 함수)

1. 데이터 은닉: 변수를 외부 스코프에서 접근할 수 없게 하고, 메서드를 통해서만 조작하도록 제한한다.
2. 상태 유지: 전역 변수 없이 함수 호출 사이에 값을 보존한다.
3. 팩토리 함수: 호출 시 전달한 인자를 클로저로 고정한 새 함수를 반환한다.
4. once 패턴: called 플래그를 클로저로 유지해 함수가 최초 1회만 실행되도록 제어한다.

// 1️⃣ 데이터 은닉
function createAccount(initialBalance) {
  let balance = initialBalance; // 외부 직접 접근 불가

  return {
    deposit(amount)  { balance += amount; return balance; },

핵심 포인트:

• 데이터 은닉: 변수를 직접 수정할 수 없고 공개된 메서드로만 조작 가능 → 의도치 않은 변경 방지
• 상태 유지: 외부 함수를 호출할 때마다 독립적인 렉시컬 환경이 생성되어 인스턴스 간 상태가 격리된다.
• once 패턴: executed 플래그가 클로저로 유지되어 최초 실행 이후 로직을 건너뛴다.

3. 🔍 깊이 이해하기

왜 이렇게 설계됐을까? (Design Decision)

이 기술/개념이 왜 이런 방식으로 만들어졌는지 배경을 이해하자

• 자바스크립트에서 함수는 일급 객체로 변수에 할당되거나 다른 함수의 인자·반환값으로 사용된다.
• 반환된 함수가 선언 시점의 스코프를 기억하지 못하면, 외부 변수에 전혀 접근할 수 없어 콜백·고차 함수 패턴이 성립하지 않는다.
• 렉시컬 스코프 원칙에 의해 함수는 선언 시 스코프 정보를 자동으로 보존하고, 이것이 클로저의 동작 기반이 된다.
• javascript.info에 따르면 자바스크립트에서는 사실상 모든 함수가 클로저다. (예외: new Function 문법)

다른 개념과의 비교

클로저 vs 전역 변수 — 상태 유지 방법 비교

일반 함수 vs 클로저를 반환하는 함수 — 변수 수명 비교

실무에서는 어떻게 쓰이나?

실제 프로젝트에서 마주칠 수 있는 상황

// 실제 구현과 다르지만, 클로저 관점의 개념 모델
function useState(initialVal) {
  let _state = initialVal;

  const getState = () => _state;
  const setState = (next) =>

// ❌ 문제: time이 항상 0으로 고정됨
function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const id = setInterval

// ❌ 문제: query가 항상 초기값 ''를 참조
function SearchBox() {
  const [query, setQuery] = useState('');

  const search = useCallback(() => {
    fetchResults

function debounce(fn, delay) {
  let timerId = null;

  return function(...args) {
    clearTimeout(timerId);
    timerId = setTimeout(()

4. 🎤 구두 설명 연습

면접관 앞에서 말하듯이 작성. 읽는 용도가 아니라 말하는 연습을 위한 섹션

"~이 뭔가요?" 질문에 대한 답변 스크립트

[도입 - 핵심 정의 먼저]
"클로저는 함수가 선언된 시점의 렉시컬 환경을 기억해,
 외부 함수 실행이 끝난 후에도 그 스코프의 변수에 접근할 수 있는 메커니즘입니다."

[부연 - 왜/어떻게]
"자바스크립트는 함수 선언 시 상위 스코프 정보를 내부에 저장합니다.
 내부 함수가 외부 변수를 참조하고 있으면 외부 함수가 종료돼도
 해당 변수는 GC에 수거되지 않고 유지됩니다."

[마무리 - 실무 연결]
"실무에서는 주로 세 가지로 활용합니다.
 데이터를 외부에서 직접 수정하지 못하게 은닉하거나,
 전역 변수 없이 함수 호출 간 상태를 유지하거나,
 특정 값을 고정한 새 함수를 만드는 팩토리 패턴에 씁니다.
 React의 useState도 클로저로 상태를 유지하며,
 useEffect의 의존성 배열을 잘못 관리하면 Stale Closure 버그가 발생합니다."

⏱️ 1분 요약 버전

면접관이 바쁠 때, 딱 1분 안에 설명하는 버전

클로저는 함수가 선언될 당시의 렉시컬 환경을 기억하여, 외부 스코프의 변수에 계속 접근할 수 있는 함수입니다. 외부 함수가 종료된 이후에도 내부 함수가 해당 변수를 참조하고 있다면, 그 변수는 가비지 컬렉션의 대상이 되지 않고 유지됩니다. 이러한 특성을 활용해 데이터 은닉, 상태 유지, 팩토리 함수 구현 등에 사용되며, React Hooks 역시 이 원리를 기반으로 동작합니다.

5. ❓ 예상 면접 질문 & 답변

각 질문에 대해 STAR 구조 혹은 두berlingo 두berlingo 두 문장 요약으로 작성

기본 질문

심화 질문 (꼬리질문 대비)

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}

🧨 함정/난이도 높은 질문

6. 🛠️ 실습 / 직접 구현해보기

개념을 몸으로 익히기 위한 미니 실습

실습 목표

실습 코드

// ① private 변수를 가진 스택 구현
function createStack() {
  const items = []; // 외부 직접 접근 불가

  return {
    push(item) { items.push(item); },

실습하면서 깨달은 점

• stack.items에 직접 접근하면 undefined가 반환된다. items 자체가 클로저 스코프 안에 격리되어 있어서 외부에서는 해당 변수의 존재를 인식조차 할 수 없기 때문이다. 클래스의 private 필드 없이도 동일한 은닉 효과를 낼 수 있다는 점에서, 면접에서 "JavaScript에서 private 변수를 어떻게 구현하나요?"라는 질문이 나오면 클로저 패턴을 예시로 들 수 있겠다는 걸 깨달았다.
• var와 let을 setTimeout과 함께 직접 실행해보면 3 3 3 vs 0 1 2로 결과가 즉시 갈린다. var는 블록 스코프가 없어 루프 전체에서 i 하나를 공유하고, 콜백이 실행될 시점엔 이미 루프가 끝나 i === 3이 된 상태라는 것이 체감됐다.
• debounce를 구현하면서 timerId가 반환된 함수 바깥에 선언되어 있어야 한다는 게 핵심이라는 걸 알았다. timerId가 함수 내부에 있으면 호출할 때마다 초기화되어 이전 타이머를 취소할 수 없다.

7. 📝 나만의 요약 노트

공부하고 나서 진짜 내 머릿속에 남은 것들만 정리

오늘 이 주제에서 가장 중요한 것 3가지

1. 클로저 = 함수 + 선언 시점의 렉시컬 환경 → 외부 함수 종료 후에도 자유 변수가 유지된다.
2. 자유 변수는 내부 함수가 참조하는 한 GC에 수거되지 않는다 → 상태 유지의 근거이자 메모리 누수의 원인
3. React useEffect / useCallback에서 의존성 배열을 빠뜨리면 Stale Closure 버그가 발생한다.

헷갈렸던 부분 & 해결

8. 📚 참고 자료