클로저는 실무에서 자바스크립트로 개발을 하다보면 자신도 모르게 사용했던 개념이다. 클로저는 몰라도 예제코드를 보면 "아하, 그게 클로저야?" 라고 되묻는 사람들이 꽤 많을 것이다.

아래 코드를 보자.

var closureTest = function() {
	var closureVar = "closure test";

	return function() {
		alert(closureVar);
	}
}

closureTest 라는 함수는 closure test 라는 문자열을 출력하는 익명함수를 리턴한다. 그리고 위 코드를 수행하면 정상적으로 closure test 메시지가 alert창으로 뜬다.

위 코드가 왜 이상한지 모르겠는 사람은 클로저에 대한 이해가 충분하거나, 아니면 자바스크립트에 대한 이해가 불충분한 사람일 것이다.

기본적으로 closureVar 변수는 closureTest 에 속한 지역변수 이기 때문에 다른 외부함수에서 호출하는 것이 불가능하다. 변수를 호출하기 위한 방법으로는 지역변수로 선언된 closureVar 변수를 전역변수로 바꿔 선언하는 방법이 있다. 

그런데 자바스크립트에서는 굳이 이렇게 하지 않아도, 함수에 속한 지역변수를 다른 함수가 호출하게 하는 것이 가능하다. 이게 바로 클로저다. 좀 더 정확하게 이야기 하면, 클로저란 자신이 생성된 함수의 context에 직접 접근(참조) 할 수 있는 것이다.

위 코드를 좀 더 쉽게 풀어보면 아래와 같다.

var closureTest = function() {
	var closureVar = "closure test";

	return closureTest2();
}

var closureTest2 = function() {
	alert(closureVar);
}

하지만 위 코드는 제대로 동작을 하지 않는다. closureVar 변수가 closureTest 함수에 선언되었기 때문에, closureTest2 함수에서 접근할 수 없기 때문이다. 

위 코드를 동작시키기 위해선 closureVar 변수를 전역변수로 새로 선언해야 한다.

var closureVar = "";
var closureTest = function() {
	closureVar = "closure test";

	return closureTest2();
}

var closureTest2 = function() {
	alert(closureVar);
}
하지만 변수가 많아진다면 이 모든 변수를 전역변수로 할당해야 하는데, 코드도 어려워지고(지저분해지고) 개발자도 힘이 든다. 변수를 모두 전역변수로 선언하지 말고, 클로저를 잘 이해하여 써먹어보자.


Posted by onionmen

댓글을 달아 주세요

  1. Favicon of http://coolmoo.net BlogIcon 나비오 2010.07.21 23:24 신고  댓글주소  수정/삭제  댓글쓰기

    이해하고 싶지만 당췌 봐도 모르겠다는...
    제가 정말로 무식하죠ㅜㅜ
    저도 오늘 자바 책 하나 사긴 했는데 걱정이 앞서네요

  2. Favicon of http://pam.ncity.net/wp BlogIcon pam 2010.10.24 12:42 신고  댓글주소  수정/삭제  댓글쓰기

    큰 깨닫음 얻고 갑니다. 크..

  3. 지나가던이 2010.12.02 11:21 신고  댓글주소  수정/삭제  댓글쓰기

    "함수에 속한 지역변수를 다른 함수가 호출하게 하는 것이 가능하다. 이게 바로 클로저다."
    라는 설명은 그냥 내부함수에서 외부함수의 변수를 접근할수 있다. 즉 scope, 유효범위에 대한것 같네요 ^^;
    "클로져는 자신의 외부에 선언된 변수를 참조가 아닌, 복사본으로 가지는 함수"라고 봄이 맞지않나 싶네요
    http://asrada2001.tistory.com/201 여기를 참고하시면 더 이해가 빠를듯합니다

  4. 느네 2011.04.24 10:32 신고  댓글주소  수정/삭제  댓글쓰기

    좋은정보 얻고 갑니다~
    출처 밝히고 내용좀 퍼갈께요 ㅎㅎ


블로그 이미지
손을 따뜻하게 만들어 주고 싶은 애인이 있습니다.
onionmen

달력

 « |  » 2018.04
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30          
DNS Powered by DNSEver.com

최근에 올라온 글

Yesterday122
Today17
Total1,642,727

티스토리 툴바