JS - Closure (클로저)

Yuni·2023년 3월 16일
0

JS

목록 보기
1/17
post-thumbnail

클로저(Closure)

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다.
출처: MDN

일단 저는 뭔소린지 모르겠고 점심이나 먹고 싶네요.
그럼 아래 점심 예시를 한 번 볼까요?

function lunch() {
	const food1 = "짜장면";
    function addMenu() {
    	const food2 = "탕수육";
        function lunchCheck() {
        	console.log("내가 먹은 점심은 "+food1,food2+"입니다!");
        }
        return lunchCheck();
    }
    return addMenu();
}

ESFP가 물어봅니다.
"메뉴 뭐 였어?" //addMenu() or lunchCheck()
유니는 대답합니다.
메뉴라니 무슨 말이세요? [대화를 종료합니다.]
// Uncaught ReferenceError: addMenu is not defined

그러자 옆에 있던 ENFP가 물어봅니다.
"아니 음식 뭐 먹었냐구" // food1 or food2
또 유니는 대답합니다.
음식은 또 무슨 말이에요? [대화를 종료합니다.]
// Uncaught ReferenceError: food1() is not defined

보다 못한 ISTJ가 물어봅니다.
"오늘 점심 뭐 먹었어?" // lunch();
유니는 대답합니다.
"내가 먹은 점심은 짜장면 탕수육입니다!"


유니가 도대체 왜 이럴까...



이러는 이유는 바로 클로저 때문입니다.
클로저는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가리키는 특성 그 자체입니다. 위 예시에서 lunchCheck() 함수에서 lunch 함수에 있는 food1과 addMenu 함수에 있는 food2에 접근할 수 있었던 이유죠.

클로저는 많은 함수형 프로그래밍 언어 사용 시 특정 상황에서 공통적으로 발생하는 ‘현상’이고 함수는 이 현상이 나타나기 위한 ‘조건’에 해당합니다.


내부함수가 외부함수의 맥락에 접근할 수 있는거면 더 열리는 느낌인데 왜 클로저일까요?

이유는 클로저의 핵심이 렉시컬 스코프를 이용해서, 변수의 접근 범위를 폐쇄해버리는데 있기 때문입니다. 위 예시에서 ENFP와 ESFP가 내부함수를 건드렸을 때 유니가 대화를 종료한 이유입니다.


더 간단하게 얘기하면 아래와 같습니다.
1) 외부함수 스코프에서 내부함수 스코프로 접근 X
2) 내부함수에서는 외부함수 스코프에서 선언된 변수에 접근 O

이게 왜 좋을까요?

첫번째로, 정보를 은닉하기 좋습니다. 제가 뭘 먹었는지는 제대로 물어보는 사람에게만 알려줄 거예요!

두번째로, 정보를 보존하기 좋습니다. 제가 먹은 건 짜장면과 탕수육이에요. 혹시라도 짬뽕과 유린기로 바꿔 소문낼 생각 마세요!

세번째로는 재사용이 용이합니다. 함수로만 사용할 수 있다는 생각은 넣어둬 넣어둬!

function createCard() {
	let title = "";
	let content = "";
	
	function changeTitle(text) {title = text}
	function changeContent(text) {content = text}
	function print() {
		console.log("TITLE -", title);
		console.log("CONTENT - ", content);
	}
	return {changeTitle, changeContent, print};
}

const card1 = createCard();
card1.changeTitle("생일카드");
card1.changeContent("생일축하해");
card1.print();

빈 카드 템플릿을 만들어 생일카드로 만들었지요. 이렇듯 감사카드도 만들 수 있고 경고카드도 만들 수 있습니다. 기본적인 틀은 보존하면서도 재사용이 유리하죠! 손수 한땀한땀 타이틀 부터 컨텐트까지 객체 매번 만들 뻔 했어요. 휴

좋은점만 있는 건 아니에요...

자바스크립트는 함수가 호출되는 환경과 별개로, 기존에 선언되어 있던 환경을 기준으로 변수를 조회합니다.
외부함수의 실행이 종료된 후에도 클로저 함수는 내부함수가 원한다면 외부함수의 스코프 함수가 선언된 어휘적 환경에 접근할 수 있습니다.

따라서 클로저를 많이 쓸 경우 메모리의 용량에 과부하가 오고 퍼포먼스 저하를 초래할 수 있겠지요.

profile
Look at art, make art, show art and be art. So does as code.

0개의 댓글