클로저

---

클로저의 사전적 정의

“A closure is the combination of a function and the lexical environment within which that function was declared.”
클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다.

이렇게 봤을때는 전혀 무슨 말인지 이해하지 못하는 경우가 당연하다.
그래서 나름대로 공부해보고 쉽게 설명하기 위해 적어본다.

클로저의 쉬운 설명

클로저는 일반적으로 어떤 함수가 자신의 내부가 아닌 외부에서 선언된 변수에 접근하는 것을 뜻합니다.

한가지 예시를 보여드리겠습니다.
다음과 같이 미국 달러를 대한민국 원으로 환전해주는 간단한 함수를 예를 들어 설명해보겠습니다. 이 함수는 미국 달러(usd)를 인자로 받아서 함수 내부에 선언된 환율(rate)을 이용하여 대한민국 원(krw)으로 환전한 결과를 반환합니다.

function convertUsdToKrw(dollar) {
  const rate = 1113.5;
  return dollar * rate;
}

> convertUsdToKrw(5)
5567.5

이번에는 환율(rate)을 함수 외부에 선언하면 어떨까요?

const rate = 1113.5;

function convertUsdToKrw(dollar) {
  return dollar * rate;
}

> convertUsdToKrw(5)
5567.5

이 함수를 동일한 인자를 넘겨서 호출해보면 완전히 동일한 결과값이 반환되는 것을 알 수 있습니다.

이렇게 자바스크립트에서 함수는 매개 변수와 로컬 변수 뿐만 아니라 외부에서 선언된 변수도 자유롭게 접근을 할 수 있습니다. 그리고 이렇게 함수가 자신의 밖에서 선언된 변수에 접근하는 것을 클로저라고 합니다.

클로저의 대표적인 예

대부분의 자바스크립트 개발자들은 알게 모르게 이미 작성하는 코드의 많은 부분에서 클로저를 사용하고 있을 것입니다. 특히, 어떤 함수 내에서 또 다른 함수를 선언할 때, 알게 모르게 클로저를 자주 사용하게 됩니다.

예를 들어, 여러 개의 미국 달러를 대한민국 원으로 환전해주는 함수를 작성해보겠습니다.

function batchConvertUsdToKrw(dollars) {
  const rate = 1113.5;
  return function changeDollar() {
  	return dollars.map(dollar => dollar * rate); 
  } 
}

const moneyChange =  batchConvertUsdToKrw([10,20,30,40])
moneyChange();

이 코드에서 보면 함수 batchConvertUsdToKrw 에 인자로 [10,20,30,40] 을 매개변수로 넘겨 주면서 함수를 실행시켜 함수 changeDollar()을 moneyChange 변수에 넣어줬습니다.
그리고 moneyChange() 함수를 호출하면 여전히 rate 변수를 이용하는 것을 볼 수 있습니다.

이렇듯 클로저는 함수가 선언됐을 당시에 환경을 기억하고 있다가 그 함수 내부 함수에서 그 환경을 이용하고 싶을 때 쓸 수 있습니다.