[Javascript] 클로저(Closure)

클로저(Closure) : (공장,학교,병원 등의 영구적인) 폐쇄(되는 상황) - naver 사전

자바스크립트에서 가장 어려운 개념을 말하라면 아마 클로저를 말할것같다.

클로저를 이야기하기 전에, 

• 자바스크립트의 함수는 변수에 저장이 가능하다는것, (함수의 주소값을 가진다는것)
• 변수의 스코프와 스코프 적용규칙을 알고있다는것 (let, const, var 들의 스코프)

이 2가지만 알고 있으면 그리 어렵지 않다.

[Javascript] 변수가 살아가는곳, scope

사람도 사는 반경이 있듯 프로그래밍언어에서 변수는 그 삶의 범위가 있다. scope: the range of subject covered by a book, programme, discussion, etc. 프로그래밍에서의 스코프의 의미는 변수를 쓸수있는(사..

artdev.tistory.com

// 함수에 대한 포스팅은 나중에 하겠음.

---

mdn에서 클로저의 정의를 보면

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

"함수와 함수가 선언된 어휘적 환경의 조합", "변수의 유효범휘지정"

이 두부분을 알아야 한다.

코드를 보면,

function makeAdder(x) {
  let y = 1;
  return function(z) {
    y = 100;
    return x + y + z;
  };
}

• 5번줄의 x는 1번줄에서 매개변수로 받은 값을 그대로 가진다.
• 5번줄의 y는 4번줄에서 100으로 설정한 그 값 그대로를 가진다.

makerAdder 함수는 함수를 리턴한다. 

그 함수는 x+y+z를 리턴한다. 변수 x와 y는 makeAdder함수에서 선언된 변수이다.

전에 포스팅했던 scope 규칙을 이해했다면 당연한 말이 된다. 

"블록 밖에서 선언된 변수는 블록 안에서도 사용이 가능하다." 이것만 알고 있으면 50%는 클로저를 이해했다고 생각한다.

따라서 x,y 변수는 makeAdder가 리턴하는 함수에서도 사용이 가능하다.

makeAdder함수를 실행시키면 

let add5 = makeAdder(5); 
// x = 5; 가 되면서 리턴하는 함수에 5가 들어간다.

add5 = function(z){
  return 5+100+z;
};
//add5에 실제 할당된 함수는 이렇다.

 

add5는 그 자체로 변수에 할당된 값을 머금고 있다.

(여기서 클로저의 사전적의미를 생각해보면, 왜 이것이 클로져라 불리는지 이해가 간다. )

makeAdder가 실행되면서 함수를 리턴하기 때문에 add5를 실행시키면 x,y,z 값의 합이 리턴된다.

let total = add5(10) // 5+100+10 = 115

add5를 실행시키면 add5안에 머금고 있던 값들과 인자값10이 모두 더해저 115가 나온다.

이것이 클로져를 사용한 대표적인 예제라고 할수 있겠다.

mdn에서 클로저를 설명한 문서를 보면 좀더 이해하기 쉬울것이다.

클로저

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

developer.mozilla.org

---