클로저 (Closure)

🙋🏻‍♀️ Closure란?

외부함수의 변수에 접근할 수 있는 내부 함수 (혹은 이러한 작동 원리). 아래 예시에서 inner() 는 클로저 함수다.

function outer() {
	let outerCall = 'full'
	console.log(outerCall);

	function inner(){
	let innerCall = 'tomatoes'
	console.log(innerCall); 

	return inner; 
}

// tricky questions!
console.log(outer()()); // 'full', 'tomatoes'
let inner = outer(); // 'full', definition of inner
console.log(inner()) // 'tomatoes'

// note: 두 번째 inner 변수에 할당하는 순간, outer() 함수가 호출된다.  

🙋🏻‍♀️ Closure 는 어떻게 많이 쓰이나요?

💡 커링: 함수 하나가 n 개의 인자를 받는 대신, n 개의 함수를 만들어 각각 인자를 받게 하는 방법

함수형 프로그래밍의 대표적인 예제로서, 두 번 연속 실행을 통해 사용한다. 외부함수 인자 값을 고정한 후, 재사용 할 수 있어서 유용하다. (마치 템플릿처럼 사용)

function adder(x) {
	return function(y) {
		return x + y; 
	}
}

adder(5)(10) // 15; 
let adder3 = adder(3)
adder3(7) // 10; 

💡 클로저 모듈 패턴: 변수를 스코프 안쪽에 가두어 함수 밖으로 노출시키지 않는 방법

함수를 새로운 변수에 할당함으로써, 클로저 함수 밖에 있는 외부변수의 값 (아래 예시에서는 initVal) 을 노출시키지 않으면서도 얼마든지 독립적인 변수로서 재사용이 가능하다.

function makeCounter() {
	let initVal = 0; 
	
	return {
		add: function() { initVal++ }
		minus: function() { initVal -- }
		finalVal: function () { return initVal }
	}
}

let counterOne = makeCounter(); 
let counterTwo = makeCounter(); 

// counter 를 몇 개 생성하든지 간에, 각 변수는 독립적인 값을 갖는다.  

// 아래와 같이 type 변수를 함수 내에 설정해서, 외부 요소에 의해 변경되지 않도록 보호할 수 있다.
function makePayment() {
	const type = ['cash', 'card']
	
	return {
		payByCash: function(amount) { 
			console.log(`About to pay ${amount} by ${type[0]}`);  
		},
		payByCash: function(amount) { 
			console.log(`About to pay ${amount} by ${type[1]}`);  
		},
	}
}

👉🏼 [관련 MDN 자료]