클로져에 대한 개념을 알아야 한다고 했을 때 이름부터 어려워보여 위축됐던 기억이 있다. 하지만 살펴보면 너무 좋은 자바스크립트의 장점으로써 역할을 하고 있다는 것을 알 수 있다.
스코프는 함수를 어디에서 선언했는지로 결정된다.
function outerFunc() {
var x = 10;
var innerFunc = function () { console.log(x); };
innerFunc();
}
outerFunc(); // 10
function outerFunc() {
var x = 10;
var innerFunc = function () { console.log(x); };
return innerFunc;
}
/**
* 함수 outerFunc를 호출하면 내부 함수 innerFunc가 반환된다.
* 그리고 함수 outerFunc의 실행 컨텍스트는 소멸한다.
*/
var inner = outerFunc();
inner(); // 10
function outerFunc() {
var boolean = true
var innerFunc = function () {
boolean = !boolean
console.log(boolean);
};
return innerFunc;
}
/**
* 함수 outerFunc를 호출하면 내부 함수 innerFunc가 반환된다.
* 그리고 함수 outerFunc의 실행 컨텍스트는 소멸한다.
*/
var inner = outerFunc();
inner(); // true
inner(); // false
inner(); // true
var count = 0
function addCount() {
return ++count;
}
addCount();
addCount();
addCount();
console.log(count); // 3
function addCount() {
var count = 0;
return ++count;
}
addCount();
addCount();
addCount();
var addCount = (function() {
var count = 0;
return function() {
return ++count;
};
}());
addCount();
addCount();
addCount();
function Counter() {
// 카운트를 유지하기 위한 자유 변수
var counter = 0;
// 클로저
this.increase = function () {
return ++counter;
};
// 클로저
this.decrease = function () {
return --counter;
};
}
const counter = new Counter();
console.log(counter.increase()); // 1
console.log(counter.decrease()); // 0