var outer = function () {
var a = 1;
var inner = function() {
return ++a;
};
return inner;
}
var outer2 = outer();
console.log(outer2()); // 2
console.log(outer2()); // 3
var outer = (function () {
var a = 1;
var inner = function() {
return ++a;
};
return inner;
})();
console.log(outer());
console.log(outer());
outer = null; // outer 식별자의 inner 함수 참조를 끊음
<방법>
1. 콜백 함수를 내부함수로 선언해서 외부변수를 직접 참조하는 방법
2. bind 메서드로 값을 직접 넘겨 클로저는 발생하지 않으나 제약사항이 있는 방법
3. 콜백함수를 고차함수로 바꿔 클로저를 적극 활용한 방법
// 콜백함수를 고차함수로 바꿔 클로저 활용 방법 예시
var fruits = ['apple', 'banana', 'peach'];
var $ul = document.createElement('ul');
var alertFruitBuilder = function(fruit) {
return function() {
alert('your choice is ' + fruit);
};
};
fruits.forEach(function(fruit) {
var $li = document.createElement('li');
$li.innerText = fruit;
$li.addEventListener('click', alertFruitBuilder(fruit));
$ul.appendChild($li);
});
document.body.appendChild($ul);
var outer = function() {
var a = 1;
var inner = function() {
return ++a;
};
return inner;
};
var outer2 = outer();
console.log(outer2());
console.log(outer2());
=> return 값이 외부에 정볼르 제공하는 유일한 수단
var debounce = function(eventName, func, wait) {
var timeoutId = null;
return function(event) {
var self = this;
console.log(eventName, 'event 발생');
clearTimeout(timeoutId);
timeoutId = setTimeout(func.bind(self, event), wait)
};
};
var moveHandler = function(e) {
console.log('move event 처리');
};
var wheelHandler = function(e) {
console.log('wheel event 처리');
};
document.body.addEventListener('mousemove', debounce('move', moveHandler, 500))
document.body.addEventListener('mousewheel', debounce('move', wheelHandler, 500))
var curry5 = function (func) {
return function(a) {
return function(b) {
return function (c) {
return function (d) {
return function (e) {
return func(a, b, c, d, e);
}
}
}
}
}
}
var getMax = curry5(Math.max);
console.log(getMax(1)(2)(3)(4)(5)); // 5
var curry6 = func => a => b => c => d => e => func(a,b,c,d,e);
getMax2 = curry6(Math.max);
console.log(getMax2(1)(2)(3)(4)(5)); // 5
var getInformation = function(baseUrl) {
return function(path) {
return function(id) {
return fetch(baseUrl + path + '/' + id);
};
};
};
// ES6
var getInformation = baseUrl => path => id => fetch(baseUrl + path + '/' + id);