KnP House for Daily

간단 예제로 간단 Closure 개념 이해하기 본문

Web/JavaScript

간단 예제로 간단 Closure 개념 이해하기

K.ung 2015.05.13 01:12

최근 'javascript'로 'html' 동적생성하여 웹을 그리는 작업을 하고 있다. 

코드 리뷰중 가장 이해가 안됬던 함수가 있었다.


이해 안됬던 부분이 ' javascript' 의 꽃이라고 생각하는 'Closure' 였다.

그래서 가르침을 받았던 적이 있는데 아래 코드는 그때 바로 이해 할수 있게 도와준 코드이다.

 

(function(){
			for(var i=0 ; i<3 ; i++){
				setTimeout(
					(function(){
						return function(){
							console.log(i);
						};
					})()
					,1000);
			}
		})();


위 함수는 1초 뒤 i 변수가 출력이 되는 함수 이다.  for문이 3번 도는 시간은 1초도 안되기 때문에 출력 결과는


3

3

3


이다.


이건 당연히 return 되는 함수 객체가 마지막 i 값을 가지고 있기 때문이다.


하지만 Closure 를 도입하면!!!


		(function(){
			for(var i=0 ; i<3 ; i++){
				setTimeout(
					(function(){
						//변수를 두어 i값을 return전에 저장하여 보자.
						var cls = i;
						return function(){
							console.log(cls);
						};
					})()
					,1000);
			}
		})();

변수 'cls' 를 두어 i값을 저장 시킨 후 cls를 출력하면!!


0

1

2


가 나온다. 왜냐!?!??~?~?~?~??!?!


여기서 중요한 것이 나온다.


일단  for문이 시작되면 setTimeout의 '(function{})()' 이 실행이 되며, 1초 후에 return 함수가 실행되 'cls'가 출력이 되는 과정이다.


그렇기 때문에 cls에 for문이 돌면서 변화된 i값을 저장하게 되고 , 그 cls값을 return 함수가 가질 수 있다.!


Closure는 상태, 그 현상 자체를 저장 하게 한다.(쉽게 메모리에 cls값을 각각 저장 한 i출력 함수가 3개가 생성되어 스케쥴러에 저장되어진다.)


두 함수의 비교로 Closure 를 쉽게 이해 할 수 있었다. 물론, 좀더 많은 기능과 개념이 있지만 이정도만 알아도,


jquery에 html 동적생성에서 .on('click', function()) 을 쉽게 사용하여 이벤트를 잘 활용 할 수 가 있을 것 같다.


p.s. 개인 공부용으로 아는것과 다른 내용일 수 도 잇는 점 주의 바랍니다.

저작자 표시 비영리 변경 금지
신고
0 Comments
댓글쓰기 폼