javascript Closure

	(function(){
		var j=0;
		for(var i=0;i<10;i++){
			++j;
			(function(){
				var idx = j;
				$("",{
							text:idx,
							style:"padding:2px;",
							click:function(){
									alert(idx);
								}					
				}).appendTo($("#closureTest"));			
			})();
		}		
	})();

javascript 의 모든 함수는 Closure 이다. 

최소한 내가 이해하고 있는 Closure 란 함수가 호출될 당시에 접근 할 수 있는 코드블럭이다.

위의 코드를 약간 수정해 보면


        (function(){
		var j=0;
		for(var i=0;i<10;i++){
			++j;
			
				var idx = j;
				$("",{
							text:idx,
							style:"padding:2px;",
							click:function(){
									alert(idx);
								}					
				}).appendTo($("#closureTest"));			
			
		}		
	})();




익명 함수를 제거해보았다.

언뜻 보면 의도대로 동작할 거 같지만 

click 이벤트가 발생되서 함수가 호출될 시점과 선언된 시점의 idx 값이 다르게 된다.

즉, 함수가 사용하는 변수는 내부적으로 계속 참조하고 있다는 말이 된다.

이는 전역변수를 생각해보면 이해가 될것이다.

그래서 익명함수를 사용하여 스코프를 분리하고 참조블럭을 변경시켜주는 작업을 통해 해결 할 수 있다.