[Closure] 자바스크립트의 숨겨진 강력한 기능

728x90

클로저(Closure) 

클로저(Closure)는 자바스크립트에서 자주 등장하지만, 처음 접하면 다소 추상적으로 느껴지는 개념입니다. 하지만 클로저를 이해하면 상태를 은닉하거나, 콜백 함수 내 변수 유지, 팩토리 함수 생성 등 다양한 실무 패턴을 더 깊이 있게 이해할 수 있습니다.

 

---

1.  클로저란?

클로저란, 함수가 선언될 당시의 렉시컬 환경을 기억하는 함수입니다. 즉, 외부 함수의 변수에 접근할 수 있는 내부 함수를 말합니다. 함수가 이미 실행을 끝냈더라도, 그 내부 함수는 여전히 외부 변수에 접근할 수 있습니다.

function outer() {
  const name = 'JavaScript';

  function inner() {
    console.log(`Hello, ${name}`);
  }

  return inner;
}

const fn = outer(); // outer() 실행 → inner 함수 반환
fn(); // Hello, JavaScript

어떻게 가능한가요?

• outer() 함수는 실행이 끝났지만, inner() 함수가 name에 접근 가능합니다.
  → 이게 바로 클로저입니다.

 

---

2.  클로저를 사용하는 이유

a.  데이터 은닉 (Private 변수)

function counter() {
  let count = 0;

  return {
    increase() {
      count++;
      console.log(count);
    },
    decrease() {
      count--;
      console.log(count);
    }
  };
}

const c = counter();
c.increase(); // 1
c.increase(); // 2
c.decrease(); // 1

• count는 외부에서 접근할 수 없습니다. (은닉됨)
• 오직 increase, decrease만 접근 가능합니다.
  → 정보 은닉 + 상태 유지 = 클로저

b.  콜백 함수에서의 상태 유지

function makeTimer(message) {
  return function () {
    console.log(message);
  };
}

const helloTimer = makeTimer('Hello!');
setTimeout(helloTimer, 1000);

• message는 외부 함수가 끝났어도 setTimeout 내에서 유지됩니다.

 

---

3.  실수하기 쉬운 예제

반복문 안의 클로저

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

• var는 함수 스코프라서 모두 같은 i를 참조합니다.

해결 방법 1 : let 사용

for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i); // 0, 1, 2
  }, 100);
}

해결 방법 2 : 클로저 사용

for (var i = 0; i < 3; i++) {
  (function(j) {
    setTimeout(() => {
      console.log(j); // 0, 1, 2
    }, 100);
  })(i);
}

 

---

4.  클로저는 언제 만들어지나요?

• 함수가 다른 함수 내부에서 정의될 때
• 내부 함수가 외부 변수에 접근할 때
• 내부 함수가 외부 함수 밖으로 반환되거나, 콜백으로 전달될 때

 

---

5.  클로저의 장점과 주의점

장점

• 상태 유지가 가능합니다.
• 정보 은닉을 할 수 있습니다.
• 모듈화에 유리합니다.

주의점

• 과도한 메모리 점유가 될 수 있습니다. (GC가 외부 변수 정리 못 함)
• 디버깅이 어려울 수 있습니다.

 

---

6.  마무리

클로저는 JavaScript의 함수형 특성과 스코프 체인의 결합으로 만들어지는 고급 기능입니다. 익숙해지면 모듈, 커링, 고차 함수, 콜백, 리액트 훅 등 다양한 패턴을 쉽게 이해하고 구현할 수 있습니다.

 

---

반응형