자바스크립트(1-1) - 클로저(closure) 에 대한 이해.

관련글 : 자바스크립트(1-2) - 클로저(closure) 에 대한 이해

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

아래 코드를 보자.

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);
}

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