MDN: 클로저는 독립적인 (자유) 변수를 가리키는 함수이다. 또는, 클로저 안에 정의된 함수는 만들어진 환경을 ‘기억한다’.
간략히: 내부 함수가 외부 함수의 변수를 접근하는 것
function getClosure() {
let freeVar = 'independent'
return function() {
return freeVar;
}
}
let closure = getClosure();
console.log(closure());
변수 숨기기
// 자바스크립트 객체지향 프로그래밍에서 변수를 숨기고 싶지만 외부에서 변수 접근이 가능
function Person(name) {
this._name = name;
}
Person.prototype.sayHi = function() {
console.log('hi!, my name is ' + this._name);
}
var david = new Person('david');
david.sayHi(); // 'hi! my name is david' 출력
david._name = 'philip';
david.sayHi(); // 'hi! my name is Philip' 출력
// closure를 통한 변수 private
function sayHi(name) {
let _name = name;
return function() {
console.log('he!, my name is ' + _name);
}
}
let david = sayHi('david');
david(); // 'hi! my name is david' 출력
david._name = 'philip';
david(); // 'hi! my name is david' 출력
반복문 변수값
let i;
for (i = 0; i < 10; i++) {
setTimeout(function() {
console.log(i);
}, 100)
}
// 10, 10, 10, 10 ... 10 출력
let i;
for (i = 0; i < 10; i++) {
(function(j) {
setTimeout(function() {
console.log(j);
}, 100)
})(i)
}