---

# 서론 – “함수가 왜 기억을 할까?”

프로그래밍을 막 시작한 초보 개발자라면 함수가 단순히 입력을 받아 결과를 반환하는 도구라고 생각하기 쉽습니다. 하지만 JavaScript에서는 함수가 자신이 선언될 때의 환경을 기억하고, 그 기억을 바탕으로 동작하는 클로저(Closure) 라는 강력한 개념이 존재합니다.

이 글에서는 “Chapter 4: Functions Remember” 라는 주제에 맞춰, JavaScript 클로저가 무엇이며 왜 필요한지, 그리고 실제 코드 예제로 어떻게 활용할 수 있는지를 차근차근 설명합니다. 초보자도 이해할 수 있도록 쉬운 비유와 시각적인 예시를 곁들였으니, 이제 함수가 기억을 하는 비밀을 함께 밝혀보세요!

---

# 본론

# 1️⃣ 클로저란? – 함수와 스코프의 마법

• 스코프(Scope) : 변수가 접근 가능한 영역

• 클로저 : 함수가 선언된 시점의 외부 스코프를 기억하고, 나중에 실행될 때도 그 스코프에 접근할 수 있는 현상

예시

js

function makeCounter() {

  let count = 0;               // 외부 스코프 변수

  return function() {

    count += 1;                // 내부 함수가 외부 변수에 접근

    return count;

  };

}

const counter = makeCounter(); // 클로저가 생성

console.log(counter()); // 1

console.log(counter()); // 2

makeCounter가 실행된 뒤에도 count 변수는 사라지지 않고, 반환된 함수가 그 값을 기억합니다.

# 2️⃣ 왜 클로저가 필요할까? – 데이터 은닉과 유지

• 프라이버시 : 외부에서 직접 접근할 수 없는 비공개 변수 만들기

• 상태 유지 : 이벤트 핸들러, 타이머 등 비동기 로직에서 값이 사라지지 않게 함

실전 예시 – 버튼 클릭 카운터

js

function createClickHandler() {

  let clicks = 0;

  return function() {

    clicks++;

    console.log(`버튼이 ${clicks}번 클릭되었습니다.`);

  };

}

const btn = document.getElementById('myBtn');

btn.addEventListener('click', createClickHandler());

클릭할 때마다 clicks가 증가하는데, clicks는 외부에서 직접 수정할 수 없으므로 안전하게 상태를 관리할 수 있습니다.

# 3️⃣ 클로저와 메모리 관리 – 함정과 해결법

• 메모리 누수 위험 : 클로저가 불필요하게 큰 객체를 참조하면 가비지 컬렉션이 작동하지 않아 메모리 사용량이 증가합니다.

• 해결 팁

  1. 필요 없는 레퍼런스 제거 – 사용이 끝난 변수는 null 혹은 undefined 로 초기화

  2. 함수 범위 최소화 – 가능한 한 작은 스코프 안에서 클로저를 만들기

# 4️⃣ 실전 활용 사례 – 모듈 패턴과 커링

# 4‑1) 모듈 패턴

js

const TodoModule = (function() {

  let todos = [];                // 비공개 데이터

  return {

    add(item) { todos.push(item); },

    list() { console.log(todos); }

  };

})();

TodoModule.add('JavaScript 공부');

TodoModule.list(); // ['JavaScript 공부']

클로저를 이용해 외부에 노출되지 않는 비공개 변수 todos 를 안전하게 관리합니다.

# 4‑2) 커링(Currying)

js

function multiply(a) {

  return function(b) {

    return a * b;

  };

}
const double = multiply(2);

console.log(double(5)); // 10

첫 번째 함수 호출 시 a 값을 기억하고, 반환된 함수가 그 값을 활용해 연산을 수행합니다.

# 5️⃣ 클로저 디버깅 팁 – 개발자를 위한 체크리스트

| 체크포인트 | 설명 |

|------------|------|

| 변수 범위 확인 | 클로저가 참조하는 변수가 어디서 선언됐는지 파악 |

| 메모리 사용량 | 브라우저 개발자 도구 → 메모리 탭에서 누수 여부 검사 |

| 의도된 동작인지 | 함수가 기대한 대로 외부 변수를 유지하고 있는지 콘솔 로그로 검증 |

---

# 결론 – 오늘부터 클로저를 활용해 보세요!

JavaScript 클로저는 함수가 기억을 하는 마법이며, 데이터 은닉, 상태 유지, 모듈화 등 다양한 상황에서 핵심적인 역할을 합니다. 이제 여러분도 클로저를 직접 만들어보고, 프로젝트에 적용해 보세요.

• 실습: 위 예시 코드를 그대로 복사해 브라우저 콘솔에서 실행해 보기

• 응용: 자신만의 작은 모듈을 클로저로 구현해 보는 연습

클로저를 제대로 이해하면, 더 깔끔하고 유지보수하기 쉬운 코드를 작성할 수 있습니다. 오늘 배운 내용을 바탕으로 함수 기억하기 연습을 꾸준히 하면, 어느새 고급 개발자로 한 걸음 더 나아가게 될 거예요.

행동 유도: 댓글에 여러분이 만든 클로저 예시를 공유하거나, 궁금한 점을 남겨 주세요! 함께 성장하는 개발 커뮤니티가 되길 바랍니다.

---

SEO 키워드: JavaScript 클로저, 함수 기억, 프로그래밍 기초

참고 링크: The Secret Life of JavaScript: Understanding Closures