클로저(Closure)

클로저는 자신이 선언된 컨텍스트에서 사용 가능한 변수를 '기억'하는 함수를 말한다. 실행 컨텍스트와 렉시컬 환경이 어떻게 클로저의 동작 원리에 영향을 주는지 간단하게 알아보자.

렉시컬 환경(Lexical Environment)

렉시컬 환경이랑 JavaScript에서 변수, 함수, 스코프 등을 관리하는 내부 데이터 구조이다. 렉시컬 환경에 대해서는 실행 컨텍스트에서 설명한 글이 있으니 참조하길 바란다.

클로저(Closure)란?

클로저(Closure)는 함수와 그 함수가 선언된 렉시컬 환경의 조합이다.
함수가 생성될 때 해당 함수의 렉시컬 환경을 기억하고, 이 렉시컬 환경을 함수가 실행될 때 접근할 수 있게 해준다.

예를 들어, 어떤 함수가 다른 함수 안에서 선언되었다고 가정해보자. 이때, 내부 함수는 외부 함수의 변수에 접근할 수 있다. 그런데 외부 함수의 실행이 끝나고 나서도, 내부 함수는 여전히 외부 함수의 변수에 접근할 수 있다. 이렇게 외부 함수의 변수를 '기억'하고 있는 내부 함수를 클로저라고 부른다.

function outer() {
  var outerVar = "저는 외부 변수이다.";

  function inner() {
    console.log(outerVar); // '저는 외부 변수이다.'가 출력된다.
  }

  return inner;
}

var myClosure = outer();
myClosure(); // '저는 외부 변수이다.'가 출력된다.

클로저(Closure)의 특징

1. 외부 함수의 변수에 접근 가능

클로저는 자신이 생성될 때의 환경을 '기억'한다. 즉, 클로저는 자신이 선언된 스코프의 변수에 접근할 수 있는 특별한 함수이다. 이는 외부 함수의 실행이 끝나서 외부 함수가 메모리에서 사라진 후에도 그 환경을 기억하게 하는 특성 때문이다.

2. 상태 유지

클로저는 상태를 유지할 수 있다. 즉, 클로저는 자신이 생성될 때의 환경을 기억하기 때문에, 한 번 생성된 이후로는 그 상태를 계속 유지하게 된다. 이 특성은 클로저가 '데이터 은닉', '상태 유지' 등의 기능을 수행하는 데 사용된다.

3. 데이터 은닉과 캡슐화

클로저는 외부로부터 데이터를 숨기고, 외부에 노출시키고 싶은 기능만을 노출시킬 수 있다. 이를 통해 객체 지향 프로그래밍의 캡슐화를 구현할 수 있다.

4. 함수의 매개변수 유지

클로저는 함수의 매개변수를 유지할 수 있다. 이는 함수가 비동기적으로 작동할 때 매우 유용한다. 함수가 나중에 실행될 때 클로저는 함수의 매개변수와 변수를 기억하고 있기 때문이다.

5. 메모리 누수 주의

클로저는 사용이 끝난 변수를 계속해서 참조하고 있기 때문에 메모리를 소모한다. 따라서 클로저를 사용할 때에는 메모리 누수에 주의해야 한다. 클로저를 사용한 후에는 참조를 제거해주는 것이 좋다.

클로저(Closure)의 활용

1. 은닉화(Encapsulation)

클로저를 사용하면 프라이빗(private) 변수와 함수를 구현하여 정보 은닉화를 할 수 있다.

// 은닉화
function createCounter() {
  let count = 0;
  return function () {
    count++;
    console.log(count);
  };
}

const counter = createCounter();
counter(); // 1
counter(); // 2

2. 반복문과 비동기 작업

// 반복문과 setTimeout 함수를 조합하여 일정 시간 간격으로 값을 출력하는 코드
for (var i = 0; i <= 3; i++) {
  (function (index) {
    setTimeout(function () {
      console.log(index);
    }, index * 1000);
  })(i);
}

3. 함수 팩토리(Function Factory)

클로저를 활용하여 함수를 동적으로 생성하는 함수 팩토리 패턴도 많이 사용된다.

function createCalculator(operator) {
  return function (a, b) {
    switch (operator) {
      case "+":
        return a + b;
      case "-":
        return a - b;
      case "*":
        return a * b;
      case "/":
        return a / b;
      default:
        return NaN;
    }
  };
}

마무리

이처럼 클로저(Clousure)는 JavaScript에서 다양한 상황에서 활용될 수 있다. 함수와 그 함수가 생성된 렉시컬 환경의 조합으로서 중요한 역할을 하는 클로저에 대해 자세히 숙지하고 있자.