유효범위: scope - OOP JavaScript

from 프로자바스크립트테그닉

자바스크립트에서 유효범위(scope)라는 개념은 이해하기가 조금 까다롭다. 모든 객체지향 프로그램 언어에는 어떤 형태로든 유효범위가 존재한다. 중요한 것은 유효범위가 지켜지는 문맥이다. 자바스크립트에서는 유효범위가 블록(while, if, for 문장 같은)안에 존재하지 않고 함수 안에 존재한다. 이로 인해 여러분이 작성한 코드의 결과가 이상해 보일 수도 있다(여러분이 이전에 블럭 유효범위를 가지는 언어를 사용했다면). 아래의 코드는 함수 유효범위를 가지는 코드가 어떤 결과를 만드는지 보여주는 예이다.



자바스크립트에서 변수 유효범위가 어떻게 작동하는지 보여주는 예

						// 전역 변수 foo를 test로 설정
						var foo = "test";

						// if 블럭 안
						if (true) {
							// foo를 'new test'로 설정
							// 주목: 이곳은 여전히 전역 유효범위 안이다.
							var foo = 'new test';
						}

						// 다음에서 볼 수 있듯이 foo도 역시 'new test'가 되었다.
						alert(foo == 'new test');

						// 변수 foo를 수정하는 함수를 만든다.
						function test () {
							var foo = "old test";
						}

						// 함수가 호출될 때 'foo'는 함수 유효범위 안에 있다.
						// (함수가 return 되면서 지역변수 foo는 사라진다.)
						test();

						// 여기서 확인할 수 있다. foo의 값은 여전히 'new test'이다.
						alert(foo == "new test");
						

상기 코드에서 볼 수 있듯이 기본적으로 변수들은 전역 유효범위 안에 존재한다. 브라우저에서 돌아가는 자바스크립트에서 흥미로운 부분 중 하나는, 전역 유효범위에 속하는 모든 변수들이 실제로는 그저 window 객체의 프로퍼티라는 점이다. 오페라나 사파리의 옛 버전 중에는 이렇지 않은 브라우저도 있지만, 경험상 모든 브라우저가 이렇게 작동한다고 봐도 된다. 아래의 코드는 이런 식으로 전역 유효범위가 적용되는 예이다.

자바스크립트에서 전역 유효범위와 Window 객체

						// 문자열 "test"를 담은 전역 유효범위에 속하는 변수
						var test = "test";

						// 앞의 '전역'변수와 window 객체의 test 프로퍼티가 
						// 같음을 알 수 있다.
						alert(window.test = test);  // true
						

마지막으로 변수를 선언하지 않으면 무슨 일이 벌어지는지 보자. 아래 코드에서는 test() 함수의 유효범위 안에서 변수 foo에 어떤 값을 할당한다. 그렇지만 아래 코드에서도 foo 변수의 유효범위를 선언한 적이 없다. foo 변수를 직접 정의하지 않으면, 비록 이 변수를 함수 유효범위 안에서만 사용했더라도 foo 변수는 전역 유효범위에 속하게 된다.

함축적인 전역 유효범위 변수 선언의 예

							// foo의 값을 설정하는 함수
							function test () {
								foo = "test";
							}

							// foo 값을 설정하기 위해 다음 함수를 호출한다.
							test();

							// foo는 이제 전역 유효범위를 가진다.
							alert(window.foo == "test");
						

이제 자바스크립트 유효범위가 블록 유효범위를 가지는 다른 언어만큼 엄격하지는 않지만 충분히 강력하고 유용함을 알았을 것이다. 특히 유효범위라는 개념이 다음 절에서 논의할 클로저(closure)라는 개념과 결합하면 자바스크립트는 강력한 스크립트 언어의 면모를 드러낸다.