[브라우저와 자바스크립트] 01. 브라우저도 객체다?

JavaScript는 원래 웹 브라우저를 다루기 위해서 등장한 프로그래밍 언어입니다.

우리가 사용하는 이 웹 브라우저를 JavaScript의 윈도우라는 객체로 다룰 수가 있는데요.

일단 콘솔에 윈도우 객체를 한번 출력해보겠습니다.

저장하고 실행해보면 윈도우라는 객체가 하나 나오는데 삼각형을 눌러서 펼쳐보면 스크롤을 계속해도 끝나지 않을 정도로 많은 프로퍼티들이 있습니다.

 

윈도우 객체는 말 그대로 이 브라우저의 창을 대변하는데요.

그래서 이 객체 안에 있는 프로퍼티들을 활용하면 JavaScript로 브라우저가 가지고 있는 다양한 정보들을 얻거나 혹은 브라우저를 자유롭게 제어를 할 수가 있습니다.

예를 들어서 innerwidth나 innerHeight라는 프로퍼티에 접근하게 되면 탭 내부의 너비와 높이 값을 얻을 수 있어서 창 크기를 조금 조절하고 다시 새로 고침 해보면 값이 변하는 것을 볼 수 있습니다. 그리고 그냥 여기 콘솔에서 윈도우 객체의 open이라는 메소드를 활용하면 제목없음으로 새로운 창이 열리고 다시 개발자 도구에 들어가서 윈도우의 close라는 메소드를 호출해 주게 되면 이렇게 방금 close 메소드를 호출한 탭이 닫히는 것도 확인할 수가 있습니다.

 

그런데 다시 윈도우 객체의 프로퍼티를 조금 살펴보면 검색했을 때 document라는 프로퍼티도 있고 console이라는 프로퍼티도 있습니다. 이 두 프로퍼티 모두 그동안 사용했던 document 객체와 console 객체 인데요.

사실 이 window 객체는 브라우저의 창을 대변하면서 JavaScript에서는 최상단에 존재하는 객체이기도 합니다.

최상단이라는 말을 다르게 표현하면 윈도우 객체가 JavaScript의 다른 모든 객체를 포함하고 있다는 뜻입니다. 그래서 우리가 알고 있는 내장 객체, 내장 함수들이 사실 이 윈도우 객체에 속해 있는 것입니다.

이 윈도우 객체는 JavaScript 코드의 어느 곳에서나 항상 접근할 수 있는 객체입니다. 그래서 이 윈도우 객체를 전역 객체 영어로는 Global Object라고 부른다는 것도 기억해두면 좋을 것 같습니다. 

아무튼 모든 내장 객체, 내장 함수들이 이 윈도우 객체 안에 있기 때문에 사실은 우리가 그냥 사용하고 있는 이 console.log도 window.를 붙여야 하지만 윈도우 객체의 경우에는 무엇을 사용하든 결국은 이 윈도우 객체 내부의 것이기 때문에 window.을 붙이지 않아도 된다는 규칙이 있습니다.