코드스테이츠 13일차 (3) - 클로저

열공하는바보·2023년 4월 27일
1

클로져 또는 클로저(closure)

대망의 클로져에 대해 이야기해볼 시간입니다... 두구두구두구 강사님께서 자바스크립트의 첫번째 벽이 될 수 있다고 말씀하셨습니다. 과연 얼마나 어렵기에...
제가 최대한 이해한대로 다른분들께 도움이 될 수 있게끔 최대애애애애애한 쉽고 간단하게 설명해보고자 합니다. 혹시나 틀린 게 있으면 꼭 가르쳐주십시오 선배님들!

클로저란, 내부 함수가 외부 함수의 변수를 기억하는 것입니다. 예를 들어서,

function outerFunction(){		// 외부함수의 선언
	let saved = 0;		// 외부함수의 변수임!!!
    return function innerFunction(){	// 내부함수의 선언 및 외부 함수가 내부함수를 리턴함!!!!
    	console.log(saved);	// 과연 내부함수가 호출될 때, 외부함수의 변수인 saved에 접근할 수 있을까?
    		}
}

let inFunction = outerFunction();	// 외부함수를 호출하면, 내부함수를 리턴해줌
// 즉, inFunction은 사실상 innerFunction인 셈!!

위 코드를 보시면 내부함수가 외부함수에 의해 리턴됩니다. 다들 아시다시피 ()는 함수를 호출하는 겁니다! 그러면 이제 inFunction을 호출해봅시다! inFunction()로 함수 호출!!

놀랍게도 inFunction은 console.log에 에러없이 찍힙니다!! 이런, inFunction은 분명
innerFunction과 같고 innerFunction 자체만 호출했을때는 saved 변수가 보이지 않을텐데 말이죠!

return function innerFunction(){	
    	console.log(saved);		// 오잉, 나는 saved를 어떻게 기억하는거지?
    		}

여기서 클로저의 중요한 부분이 나옵니다. 클로저는 선언 당시의 기억을 가지고 있습니다. 선언 단계에서 보시면 내부함수는 말 그대로, 외부함수의 내부에 있기 때문에, 외부함수의 변수에 당연히 접근할 수 있습니다. 클로저라는 친구덕에, 밖에서 호출이 되는 순간에도 이 접근을 기억할 수 있는 것이죠!

innerFunction을 호출하더라도 saved라는 외부함수의 변수를 기억!!!

말이 조금 장황해진 것 같습니다. 언제나 그렇듯 비유가 최고죠!!

외부함수를 조기축구 동호회라고 생각해봅시다.
그리고 내부함수를 조기축구 회원, 즉 저라고 생각해보죠!

당연히 조기축구 회원은 조기축구 동호회에 속해있습니다. ( 외부함수 내에 내부함수 선언 )

이제 조기축구 동호회의 회장님을 외부함수의 변수라고 생각해봅시다. (외부함수의 변수 선언)

그리고 외부함수인 조기축구 동호회는 이유는 모르겠지만 저를 내보냅니다 (외부함수의 리턴)

자, 이제 누군가가(완전히 제 3자) 조기축구 회원인 저를(내부함수를) 호출합니다.

누군가 : "야~, 이용혁이, 일로 와봐, 너 동호회에서 잘렸다매?"
나 : "아 그런걸 뭐하러 얘기합니까?"
누군가 : "거, 너네 동호회 회장이 누구냐?" (내부함수에게 외부함수의 변수를 묻는다)
나 : "김oo님인데요?" (내부함수는 외부함수의 변수를 기억하고 있다)
누군가 : "아니 너는 동호회에서 잘렸는데 회장을 어떻게 기억하고 있지!!"
나 : "뭔 소리여, 그걸 왜 기억 못 해"

조금이나마 클로저의 이해에 도움이 되었으면 합니다. 다들 파이팅~~~

profile
안녕하세요

0개의 댓글