Javascript_ closure

Javascript_ closure

어떤 함수 A에서 선언한 변수 a를 참조하는 내부함수 B를 외부로 전달할 경우 A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상.

함수의 실행 결과값을 리턴할 때

let outer = function () {
 let a = 1;
 let inner = function () {
   return ++a;
 };
 return inner(); //inner()함수의 실행 결과값을 리턴
};
var outer2 = outer();
console.log(outer2); // 2
console.log(outer2); // 2

inner()함수이 결과값을 리턴하기 때문에 inner()함수 내부의 a변수를 참조하는 대상이 없음.
그래서 해당 함수가 종료되면 inner()의 변수 a는 소멸됨


함수 자체를 리턴할 때

let outer = function () {
 let a = 1;
 let inner = function () {
   return ++a;
 };
 return inner; //inner함수를 리턴
};

var outer2 = outer();
console.log(outer2); // 2
console.log(outer2); // 3

inner 함수 자체를 리턴하기 때문에 a라는 변수가 여전히 실행 컨텍스트에 존재함.
a가 소멸되지 않음.


(window의 메서드인 setTimeout, addEventListner도 외부에 전달되기 때문에 클로저임)