JavaScript Closure

외부함수의 실행이 끝나고 소멸된 후에도, 내부함수에서 외부함수의 변수에 접근할 수 있는 것이다.

 

function f() {
	var a = [];
	var i;
	
	for (i = 0; i < 3; i++) {
		a[i] = function() {
			return i;
		};
	}
	
	return a;
}

var a = f();

console.log(a[0]());
console.log(a[1]());
console.log(a[2]());

 

위 코드는 0, 1, 2가 아닌 3, 3, 3을 출력한다. 

 

실행 과정이다.

 

1. f 함수 안에서 for문을 돌며 a[i] 에 함수를 아래와 같은 형태로 저장한다.

 

a[i] = function() {
	return i;
}

 

2. for문이 끝난 시점에 i는 3이고, f는 a를 리턴하고 종료된다. 

 

3. a[0](), a[1](), a[2]()에서 함수를 호출할 때에 i 값을 사용하게 되고, 그 때의 i 값은 3이다.

 

이것이 외부함수 f의 실행이 끝나고 소멸된 후에, a[i]에 저장된 내부함수에서 외부함수의 변수인 i에 접근하는 예이다.

 

 

 

function f() {
	var a = [];
	var i;
	
	for (i = 0; i < 3; i++) {
		a[i] = function(x) {
			return function() {
				return x;
			}
		}(i);
	}
	
	return a;
}

var a = f();

console.log(a[0]());
console.log(a[1]());
console.log(a[2]());

 

위의 코드는 0, 1, 2를 출력한다. 

 

실행 과정이다.

 

1. f 함수에서 for문을 돌며 function(x) ... 를 실행하여 리턴값을 a[i]에 저장한다.

a[i] = function(x) { ... } (i); 문장의 의미가 i를 인자값으로 넘겨주며 function(x)를 실행한 결과를 저장한다는 것이다.

 

a[0]의 경우라면 저장되는 함수는 아래와 같을 것이다.

 

a[0] = function() {
	return 0;
}

 

2. f 는 a 를 리턴하고 종료된다.

 

3. a[0](), a[1](), a[2]()에서 함수가 호출되고, 각각의 함수는 0, 1, 2를 리턴한다.