Javascript Closure

javascript의 클로저

javascript를 공부하는 사람이라면 클로저는 다들 한번씩 들어봤을 것이다.
그렇다면 클로저란 무엇이냐?

MDN에는 "클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다." 라고 정의하고 있다.

필자가 만약 클로저를 설명한다면
함수에서 함수를 리턴할 때 내부에 변수를 숨길 수 있도록 해주는 자료구조라고 설명할 것이다.

다음 예시를 보자

function makeFunc() { 
	var name = "Mozilla"; 
    function displayName() { 
    	alert(name); 
    }
 	return displayName; 
 } //myFunc변수에 displayName을 리턴함 
 
 var myFunc = makeFunc(); //유효범위의 어휘적 환경을 유지 
 //리턴된 displayName 함수를 실행(name 변수에 접근) myFunc();

코드를 살펴봤을 때 myFunc에는 displayName이 들어가게 되면서 displayName내부의 name변수에 더이상 접근 할 수 없을 것이라는 생각이 든다.

하지만 자바스크립트는 다르다. (물론 자바스크립트 뿐만 아니라 closure를 지원하는 언어 포함)
그 이유는 리턴하는 함수가 클로저를 형성하기 때문이다.
클로저는 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다.

이게 무슨 말이냐면
myFunc은 makeFunc이 실행될 때 생성된 displayName에 대한 참조이고,
displayName의 인스턴스 변수 name에 참조를 유지한다.

정리하자면 함수가 호출될 때 참조값들이 전부 유지가 되기 때문에 해당 참조값들을 사용할 수 있다.

참조값이 유지될 수 있는 이유는 실행컨텍스트와 관련이 되어있는데 이는 다음번에 정리하고자 한다.

도움될만한 글 : https://poiemaweb.com/js-closure
출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures