자바스크립트는 최상위에 1개의 전역객체(Global Object)를 가진다.

자바스크립트는 소스코드를 실행하기 전에, 최상위에 위치한 전역객체(Global Object)를 만듭니다. (Math나 Date를 비롯한 몇몇 특별한 객체를 제외한다면) 자바스크립트의 모든 객체와 값들은 이 전역객체의 아래에 자손(descendants)으로 위치하게 됩니다. 전역객체는 전체 코드에서 단 1개만 존재할 수 있으며, new 연산자를 이용하는 등의 방법으로 새롭게 만들 수 없습니다.

이 전역객체의 이름은 자바스크립트를 사용하는 환경에 따라 얼마든지 달라질 수 있습니다. 이를테면 웹 브라우저에서 사용되는 자바스크립트의 전역객체는 우리가 잘 아는 window라는 이름의 객체입니다. 한편 자바스크립트를 사용하는 서버인 Node.js에서는 global이라는 이름의 전역객체가 있습니다.

 

자바스크립트에서는 코딩할 때 전역객체를 생략할 수 있다.

자바스크립트를 이용한 웹 개발 중에 숱하게 만나게 되는 객체들이 있습니다. BOM으로 만들어진 screen, navigator, history, location 객체나 document 객체가 바로 그것입니다. 그런데 많은 자바스크립트 예제코드에서는 이들 객체 앞에는 아무런 부모객체도 쓰여있지 않은 것을 발견하게 됩니다.

document.getElementById('test_id').style.display = 'none';
location.href = 'http://dev.epiloum.net';
history.back();

이 코드가 정상적으로 작동하는 것은 바로 자바스크립트에서 코딩을 할 때 전역객체를 생략할 수 있기 때문에 가능한 것입니다. screen, navigator, history, location, document 등의 객체들은, 사실 모두 전역객체 window의 하위에 위치하고 있습니다. 따라서 위 코드는 아래처럼 전역객체인 window를 밝혀 적는다고 하더라도 동일하게 작동합니다.

window.document.getElementById('test_id').style.display = 'none';
window.location.href = 'http://dev.epiloum.net';
window.history.back();

마찬가지로 웹 개발을 하게 되면 수시로 만나게 되는 setInterval(), setTimeout(), alert(), confirm() 등도 대체로 그 앞에 아무 이름을 적지 않는 경우가 많은데요. 사실 많은 분들이 전역함수로 알고 있는 이들도 실은 전역객체인 window 아래에 있는 메서드들입니다. 따라서 아래와 같이 사용하여도 동일하게 작동할 것입니다.

window.setInterval("window.alert('test')", 1000);
window.setTimeout("window.confirm('test')", 500);

반대로 많은 예제코드에서 관행적으로 window 객체를 밝혀서 사용하는 함수들도 있습니다. 팝업을 띄우는 window.open() 함수나 창을 닫는 window.close() 함수인데요. 이들은 역으로 전역객체인 window를 생략해도 잘 작동합니다.

open('http://dev.epiloum.net');
close();

 

퀴즈

위 성질을 이해하고 있다면, 아래의 문제도 해결할 수 있습니다. 함수 안에 브라우저의 주소에 관련된 정보를 가지고 있는 location 객체와 똑같은 이름의 지역변수가 선언되어 있습니다. 이 함수를 실행시켰을 때, “이동합니다”라는 경고창이 표시된 후, 함수의 인자로 입력된 URL 주소로 웹 브라우저가 이동하게 하고 싶습니다. 이 상황에서 여러분이 생각하는 해답은 무엇인가요?

function foo(url)
{
	var location = {'href':'이동합니다'};
	alert(location.href);
	location.href = url;
}
foo('http://dev.epiloum.net');

이 문제에 대한 최선의 답은 물론 이렇게 코드를 작성한 개발자를 두들기면서 책망하는 것이겠지요. 그러나 우리가 익히 경험해왔던 바대로, 이런 코드를 발견했을 때는 이미 작성했던 개발자가 퇴사를 하여 두들길 수가 없는 경우가 많습니다. 이 때는 결국 차선책으로, 문제를 발견한 우리가 직접 코드를 수정하는 수 밖에 없습니다.

레거시 코드를 그대로 유지하면서 문제를 해결하고자 한다면, 함수 안의 3번째 줄을 window.location.href = url; 로 변경하여 문제를 해결할 수 있습니다. 전역객체 window를 밝혀적음으로써, 자바스크립트는 더이상 이 3번째 줄에서 지역변수 location을 참조하지 않게 될 것입니다.