Post

클로저(Closure)

클로저(Closure)

클로저(Closure)란?

클로저(Closure) 는 “함수가 만들어질 때의 주변 변수들을 기억하는 것”을 말한다. 즉, 함수가 자신이 만들어진 환경을 기억하는 것 !

이는 자바스크립트의 두 가지 특징에서 비롯된다

  • 함수는 일급 객체이다. (변수에 담기거나, 인자로 전달될 수 있음)
  • 렉시컬 스코프(Lexical Scope) 를 따른다. (함수가 선언된 위치에 따라 스코프가 결정됨)

예시로 이해하기

1
2
3
4
5
6
7
8
9
10
function outerFunction(outerVariable) {
  return function innerFunction(innerVariable) {
    console.log('Outer Variable: ' + outerVariable);
    console.log('Inner Variable: ' + innerVariable);
  };
}

const newFunction = outerFunction('outside');
newFunction('inside');

출력 결과 :

1
2
Outer Variable: outside
Inner Variable: inside

여기서 innerFunctionouterFunction 내부에서 선언되었기 때문에, outerFunction의 스코프에 접근할 수 있다 즉, outerFunction이 이미 실행을 마쳤더라도, innerFunctionouterVariable을 “기억”하고 있는 것임 이 현상이 바로 클로저라고 한다.


클로저는 언제 활용될까?

클로저는 데이터를 은닉하거나 상태를 유지해야 하는 상황에서 자주 사용한다.


예시 1️⃣ : 데이터 은닉 (Private 변수)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function counter() {
  let count = 0;

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

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

count 변수는 함수 외부에서 직접 접근할 수 없고, increasedecrease를 통해서만 조작됩니다. 이처럼 클로저를 이용하면 데이터 보호캡슐화를 구현할 수 있습니다.


예시 2️⃣ : 비동기 작업에서의 상태 유지

비동기 함수에서는 실행 시점이 지연되기 때문에, 그 시점의 변수 상태를 유지하려면 클로저가 유용하다.

1
2
3
4
5
6
7
8
function createLogger(name) {
  return function() {
    console.log(`Logger: ${name}`);
  };
}

const logger = createLogger('MyApp');
setTimeout(logger, 1000); // 1초 후에도 'Logger: MyApp' 출력

createLogger의 실행이 끝났더라도 name 값은 클로저에 의해 기억되어 있습니다.


예시 3️⃣ : 모듈 패턴 (Module Pattern)

클로저는 모듈 패턴을 구현할 때도 자주 사용된다.

모듈 패턴 : 내부 로직을 숨기고, 외부로 노출할 기능만 선택적으로 제공하는 방식

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const userModule = (function () {
  let name = 'Guest';

  function getName() {
    return name;
  }

  function setName(newName) {
    name = newName;
  }

  return {
    getName,
    setName,
  };
})();

console.log(userModule.getName()); // Guest
userModule.setName('Alice');
console.log(userModule.getName()); // Alice

name 변수는 외부에서 직접 접근할 수 없고, getNamesetName을 통해서만 접근이 가능하다. 이렇게 하면 코드의 응집도를 높이고, 데이터 일관성을 지킬 수 있다.


🧩 정리

  • 정의 : 함수가 선언될 당시의 스코프를 기억하여, 이후에도 접근할 수 있는 기능
  • 핵심 개념 : 함수의 스코프 + 렉시컬 스코프
  • 주요 활용 : 데이터 은닉, 비동기 로직, 모듈 패턴

클로저 = “함수가 태어날 때의 기억을 간직한 함수”


END

This post is licensed under CC BY 4.0 by the author.