클로저

클로저(closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가르킨다. 클로저는 자바스크립트를 이용한 고난이도의 테크닉을 구사하는데 필수적인 개념으로 활용된다.

내부함수

자바스크립트는 함수 안에서 또 다른 함수를 선언할 수 있다. 아래의 예제를 보자. 결과는 경고창에 coding everybody가 출력될 것이다.

function outter(){
    function inner(){
        var title = 'coding everybody'; 
        alert(title);
    }
    inner();
}
outter();

위의 예제에서 함수 outter의 내부에는 함수 inner가 정의 되어 있다. 함수 inner를 내부 함수라고 한다.

내부함수는 외부함수의 지역변수에 접근할 수 있다. 아래의 예제를 보자. 결과는 coding everybody이다.

function outter(){
    var title = 'coding everybody';  
    function inner(){        
        alert(title);
    }
    inner();
}
outter();

위의 예제는 내부함수 inner에서 title을 호출(4행)했을 때 외부함수인 outter의 지역변수에 접근할 수 있음을 보여준다.

클로저

클로저(closure)는 내부함수와 밀접한 관계를 가지고 있는 주제다.
내부함수는 외부함수의 지역변수에 접근 할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있다.
이러한 메커니즘을 클로저라고 한다.
아래 예제는 이전의 예제를 조금 변형한 것이다.
결과는 경고창으로 coding everybody를 출력할 것이다.

function outter(){
    var title = 'coding everybody';  
    return function(){        
        alert(title);
    }
}
inner = outter();
inner();

예제의 실행순서를 주의깊게 살펴보자.
7행에서 함수 outter를 호출하고 있다.
그 결과가 변수 inner에 담긴다. 그 결과는 이름이 없는 함수다.
실행이 8행으로 넘어오면 outter 함수는 실행이 끝났기 때문에 이 함수의 지역변수는 소멸되는 것이 자연스럽다.
하지만 8행에서 함수 inner를 실행했을 때 coding everybody가 출력된 것은 외부함수의 지역변수 title이 소멸되지 않았다는 것을 의미한다.

클로저란 내부함수가 외부함수의 지역변수에 접근 할 수 있고, 외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 의미한다.

function returnChar(x) {
	let outerChar = x;
	return function returnChar2(y) {
		let innerChar = y;
		return outerChar + innerChar;
	};
}
const x = returnChar('x');
const xy = x('y');  // xy
const xz = x('z');   // xz
const xc = x('c');   //xc
function outer(x) {
	let outerVal = x;
	return function inner(y) {
		let innerVal = y;
		return {
			x: outerVal,
			y: innerVal,
		};
	};
}

const sum = (num1) => (num2) => (num3) =>
	num1 + num2 + num3;
const sum5 = sum(5);
const sum10 = sum(10);
sum5(10)(10);  // 25
sum5(20)(10);  // 35
sum5(30)(10);  // 45
sum10(5)(10);   // 25
sum10(15)(10);   // 35