클로저
1. intro
클로저는 일급객체함수의 개념을 이용하여 유효범위에 묶인 변수를 바인딩하기 위한 일종의 기술이기 때문에 변수의 유효범위에 대한 어느정도 이해가 바탕이 되어야 자바스크립트의 클로저를 이해하는데 유리함이 있습니다.
아직 변수의 유효범위를 학습하기 전이긴 하지만, 변수의 유효범위 역시 이해하기가 어렵기 때문에 조금씩 익숙해지기 위해 클로저 먼저 공부를 해보도록 하겠습니다.
2. 클로저란?
클로저는 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성으로, 함수가 생성될 당시의 환경을 기억을 해놓고 캡쳐해놓습니다.
관련 개념들을 예제와 함께 살피며 공부해보록 하겠습니다.
예제1
javaScript의 클로저(Closure)는 독립적인 변수(로컬로 사용되지만 둘러싼 범위에서 정의된 변수)를 참조하는 함수입니다. 이 함수는 생성될 당시의 환경을 기억합니다.
이 방식으로 종료된 함수의 type을 확인해 볼 수 있습니다.
function returnX() {
return 'x';
}
const x = retrunX()
console.log(typeof x) // stringreturnX()함수는 문자열x를 반환하며 실행이 종료되어 접근이 불가능할 것으로 예상하기 쉽지만, 자바스크립트에서는 리턴하는 함수가 클로저를 형성하며 함수가 실행되었을 당시의 환경을 기억하게 됩니다.
따라서returnX()함수는 문자열x를 반환하며 실행이 종료되었지만, 변수x의 타입은string인 것을 알 수 있습니다.
다음은 조금 더 흥미로운 예제를 살펴보도록 하겠습니다.
예제2
function sum(num1) {
return function (num2) {
return function (num3) {
return num1 + num2 + num3;
}
}
}
//화살표함수를 이용해 아래와 같이 코드를 줄일수도 있습니다.
//const sum = (num1) => (num2) => (num3) => num1 + num2 + num3;
const sum5 = sum(5);
const sum10 = sum(10);
console.log(sum5(10)(10)) //25
console.log(sum5(20)(10)) // 35
console.log(sum5(30)(10)) //45위 예제에서는 단일 인자 num1을 받아서 받아서 새 함수를 반환하는 sum()함수 정의했습니다. 또한 반환되는 함수는 단일인자 num2를 받아서 새로운 함수를 반환하며 그 함수는 단일인자 num3를 받아서 num1과 num2, num3의 합을 반환합니다.
그리고 sum()함수를 이용하여 sum5를 정의했습니다. 여기서 sum5는 num1에 5가 들어간 상태로, sum10은 num1에 10이 들어간 상태로 기억(클로저)되어 있습니다.이렇게 sum5와 sum10은 모두 클로저로 같은 함수의 본문 정의를 공유하지만 서로 다른 어휘적 환경을 저장합니다.
또한 클로저가 리턴된 후에도 함수 실행 시 클로저에 저장된 num1과 num2에 접근하여 값을 계산할 수 있는 것을 확인할 수 있습니다.
3. 마무리하며
지금까지 클로저에 대해 배워보았는데 사실, 클로저는 무엇이라고 정의하기가 굉장히 어렵습니다. 자바스크립트에서 굉장히 다양하게 활용할 수 있으며 react같은 라이브러리에서도 사용이 될 수 있기 때문입니다.
하지만 굳이 정의를 내리자면 클로저는 어휘적인 환경을 기억해놓고 캡쳐해놓을 수 있는 함수 기법이라고 설명할 수 있습니다. 굉장히 낯설게 어려울 수 있지만 계속해서 보고 익숙하게 생각을 하며 react나 다른 코드에서 클로저를 사용한 사례가 있을지 생각해보며 함께 공부하는 것을 권장드립니다.
