📖 클로저(Closure)

이번 포스팅은 자바스크립트 클로저에 대해서 정리해보자.

클로저란?

클로저는 자바스크립트 뿐만 아니라 함수를 일급객체로 취급하는 함수형 프로그래밍 언어에서 많이 쓰이는 특성이다.

따라서 EcmaScript 사양에는 등장하지 않으며 MDN에서는 다음과 같이 설명이 되어있다.

A Closure is the combination of a function and the lexical environment within which that function was declared

클로저는 함수가 선언된 렉시컬 환경에 연관되었다고 적혀있는데, 일단 렉시컬 환경이 무엇인지 살펴보자!

렉시컬 스코프

렉시컬 스코프란 함수의 상위 스코프를 함수를 어디서 호출하는지보다 어디서 선언을 했는지에 따라 결정하는 것이다.

다음 코드를 보고 실행결과를 예측해보자. 👀

const x = 1;
function outerFunc() {
  const x = 10;
  innerFunc()
}

function innerFunc() {
  console.log(x)
}

outerFunc()

만약 조금 헷갈린다면, 아직 렉시컬 스코프에 대해 제대로 이해하지 못한것이다! 조금이라도 헷갈린다면 실행 컨텍스트 포스팅을 참조하는 것을 추천한다.

innerFunc가 선언된 곳은 outerFunc 내부가 아니라 외부이기 때문에, outerFunc에서 만든 변수 x는 outerFunc에서는 보이지 않는다. 따라서 전역 스코프에 있는 x를 참조하게 되며, 출력 결과는 1이 나온다.

클로저와 렉시컬 환경

그러면 클로저와 렉시컬 환경은 어떤 관계가 있을까?

const x = 1

function outer() {
  const x = 10;
  const inner = function() {console.log(x)}
  return inner
}

const innerFunc = outer();
innerFunc()

위 코드를 살펴보면 innerfunc에는 outer함수 내에서 생성된 inner 함수가 return된다. 그리고 outer 함수 자체는 stack에서 제거되지만, inner 함수는 계속해서 outer 함수의 변수인 x를 사용할 수 있다.

앞에서 자바스크립트는 렉시컬 스코프를 따른다고 이야기했다. 따라서 함수는 처음 생성될때 선언된 곳의 상위 컨텍스트를 기억하게 된다.

위의 예시를 보면 inner 함수는 outer 함수 안에 선언이 되었기 때문에, 생성될때의 상위 스코프인 outer 함수를 기억한다.

따라서 outer가 실행이 완료되어 스택에서 제거된 후에도 변수 x의 값을 언제든 참조하여 가져올 수 있다.

이러한 개념을 클로저라고 한다.

클로저의 활용

그렇다면 클로저는 어디에 활용될 수 있을까? 클로저는 상태를 안전하게 변경하고 유지시키기 위해 사용된다.

다음 코드를 보자.

let num = 0;
const add = function() {
  return ++num;
}

console.log(add())
console.log(add())
console.log(add())

num을 1씩 증가시키는 코드이다. 이 코드는 그럭저럭 잘 동작 하지만 사실 여러가지 문제를 발생시킬 수 있다.

전역에 num 변수가 선언되어있어서 다른 함수에서 해당 값을 변경시키는 경우 state이 바뀌어 문제를 일으킬 수 있기 때문이다.

이런 문제점을 해결하기 위해 클로저를 활용할 수 있다.

const add = (function() {
  let num = 0;
//클로저 활용
  return function() {
    // num 을 1 만큼 증가시킨다
    return ++num;
  }
}())

console.log(add())
console.log(add()) 
console.log(add())

이렇게 add라는 함수 안에 num 변수를 입력해주고, 해당 함수가 상위 함수 add 안에서 선언이 되게 함으로써 해당 함수가 num 값의 상태를 유지하게 하여 활용을 할 수 있다.

그럼 더하기에 이어서 빼기 기능도 구현해보자.

const counter = (function () {
  let num = 0;

  return {
    add() {
      return ++num;
    },
    subtract() {
      return num > 0 ? --num : 0;
    },
  };
})();

console.log(counter.subtract());
console.log(counter.add());
console.log(counter.add());
console.log(counter.add());
console.log(counter.add());
console.log(counter.subtract());

counter에는 즉시 실행함수가 생성한 add와 subtract를 메서드를 가진 객체가 return된다. 여기서 중요한 점은 num 변수는 add와 subtract만이 접근할 수 있다는 것이다.

변수값은 언제든 변경될 수 있기 때문에 프로그램의 안정성을 높이기 위해서는 클로저를 적극적으로 사용해야 한다.

마지막으로 함수형 프로그래밍에서 클로저를 활용하는 예제를 보며 마치도록 하자.

// 카운트 상태를 유지하기 위한 변수를 기억하는 클로저를 반환
const counter = (function () {
  // 카운트 상태를 유지하기 위한 변수
  let count = 0;

  // 함수를 인수로 전달받는 higher order function을 클로저로 반환
  return function (arithmetics) {
    // 현재 카운트 값에 클로져가 전달받은 함수를 실행시키는 함수 반환
    count = arithmetics(count);
    return count;
  };
})();

function add(n) {
  return ++n;
}

function subtract(n) {
  return --n;
}

console.log(counter(add));
console.log(counter(add));
console.log(counter(add));
console.log(counter(subtract));
console.log(counter(subtract));
console.log(counter(add));

참고 문서

https://poiemaweb.com/js-closure

마치며

이번 포스팅에서는 클로저에 대해 알아보았다.

리액트 공식 문서를 살펴볼때 처음 타이머 예시코드에서 클로저를 활용해서 작성된 코드가 이해가 안되었는데, 클로저를 공부하고 다시 읽어보니 이해가 되어서 뿌듯했다.🙌🙌