TIL 24 (클로저 함수)(2021.10.30)

클로저 출처 MDN

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다.

 

어휘적 범위 지정(Lexical scoping)

 여기서 "lexical"이란, 어휘적 범위 지정(lexical scoping) 과정에서 변수가 어디에서 사용 가능한지 알기 위해 그 변수가 소스코드 내 어디에서 선언되었는지 고려한다는 것을 의미한다. 단어 "lexical"은 이런 사실을 나타낸다. 중첩된 함수는 외부 범위(scope)에서 선언한 변수에도 접근할 수 있다.

---

클로저는 자바스크립트의 강력한 기능 중 하나입니다.

자바스크립트는 함수의 중첩(함수 안에 함수를 정의하는것)을 허용하고, 내부함수가 외부 함수 안에서 정의된 모든 변수와 함수들을 완전하게 접근 할 수 있도록 승인해줍니다.(그리고 외부함수가 접근할수 있는 모든 다른 변수와 함수들까지)

 

그러나 외부 함수는 내부 함수 안에서 정의된 변수와 함수들에 접근 할 수 없습니다. 이는 내부 함수의 변수에 대한 일종의 캡슐화를 제공합니다. 또한, 내부함수는 외부함수의 범위에 접근할 수 있기 때문에, 내부 함수가 외부 함수의 수명을 초과하여 생존하는 경우, 외부함수에서 선언된 변수나 함수는 외부함수의 실행 기간보다 오래갑니다. 클로저는 내부 함수가 어떻게든 외부 함수 범위 밖의 모든 범위에서 사용 가능해지면 생성됩니다.

---

=> MDN에서는 클로저를 함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 말합니다.

그리고 '이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다.' 라고 표현하고 있습니다.

 

쉽게 말하자면, 외부함수의 실행환경에 접근할 수 있는 '내부함수' 라고 할 수 있습니다. 외부함수로 부터 내부함수가 선언되는 환경을 어휘적 환경이라고 합니다. 이러한 어휘적 환경 내에 외부함수의 변수도 있기 때문에 내부함수는 외부함수의 변수에 대해서 접근할 수 있습니다. 

 

클로저 함수의 특징

1. 함수를 리턴하는 함수이다.

2. 내부 함수는 외부 변수에 접근 가능하다.

 

단점은 클로저 함수는 실행 후에도 메모리 상에 객체가 남아있게 되어 성능이 저하될 수 있다.

 

클로저를 이용해서 유용하게 쓰이는 패턴에 대해서 알아보겠습니다.

1. 데이터 보존
클로저 함수는 외부 함수의 실행이 끝나더라도 외부 함수 내의 변수를 계속해서 사용할 수 있다.
const adder = function(x) {
	return function(y) {
		return x + y;
	}
} // 이러한 함수는 adder(x)(y)로 사용할 수 있다.
const add5 = adder(5)
add5(7) // 12 - adder이라는 함수 밖으로 나왔음에도 외부 함수의 x 변수를 이용해 
// 5를 할당할 수 있다. 이는 어휘적 환경을 메모리에 저장하기 때문에 가능한 일이다. 

add5(10) // 15

2.정보의 접근 제한
const makeResult = () => {
	let value = 0;
	return {
		increase: () => {
			value = value + 1
		},
		decrease: () => {
			value = value - 1
		},
		getResult: () => value
	}
}
const make1 = makeResult();

1의 데이터 보존을 통해서 함수의 value = 0 을 사용할 수 있으며, make1은
increase, decrease, getResult를 가진 객체가 된다.
여기서 클로저 함수를 이용하지 않았을 경우, 함수 내부에 value를 두지 못하며,
value는 전역변수가 된다. 전역 변수는 부수 효과로 인해서 의도치 않게 변경될 수 있는데 
내부에 value 변수를 선언함으로써, 함수를 변경하지 않는 이상 쉽게 value를 바꿀 수 없다.
클로저를 이용해서 전역변수의 사용을 줄이고, 스코프를 이용해서 value의 값을 보호할 수 있다.

3. 모듈화
const make1 = makeResult();
make1.increase();
make1.increase();
make1.decrease();
make1.getResult(); // 값은 0 + 1 + 1 - 1 = 1이 된다.

const make2 = makeResult();
make2.decrease();
make2.decrease();
make2.decrease();
make2.getResult(); // 값은 0 - 1 - 1 - 1 = -3이 된다.
이처럼 make1과 make2가 함수의 value값에 영향을 미치지 않기 때문에 재사용할 수 있다.