# JavaScript 클로저 완전 정복! 함수가 기억하는 비밀을 파헤쳐 보자 (55자)

---

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

프로그래밍을 막 시작한 초보 개발자라면 **함수**가 단순히 입력을 받아 결과를 반환하는 도구라고 생각하기 쉽습니다. 하지만 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](https://dev.to/aaron_rose_0787cc8b4775a0/the-secret-life-of-javascript-understanding-closures-40if)