[JS] 자바스크립트 전역 변수, window 객체와 document 객체

전역변수

코드 내에서 항상 사용할 수 있는 변수.
브라우저가 자바스크립트 코드로 제공해주는 대표적인 built-in 전역변수로 window와 document 변수가 있다.

window

객체를 포함하고 있는, 전역적으로 사용 가능한 변수.
활성화된 브라우저 윈도우(탭)와 관련된 정보와 기능, 이벤트 정보 등이 저장되어 있다.

웹사이트에서 코드를 실행할 때 윈도우 객체를 사용하면 '현재 열려 있는' 웹사이트 브라우저 탭에 액세스하고, 관련 정보를 가져올 수 있다. 무슨 값이 들어있는지는 객체 자체를 콘솔에 찍어보면 확인 가능 (`console.log(window);`)

윈도우 객체에 내장되어있는 모든 속성과 메소드는 실제 브라우저에서 전역변수나 함수로 사용할 수 있다.
→ `window.` 으로 접근하지 않아도 액세스 가능. (브라우저에서 중요한 역할을 하는 윈도우 객체를 위한 예외사항!)
ex) `alert();` 와 `window.alert()`는 같은 함수를 호출한다.

document

윈도우 객체 내부에 존재하는 document 속성.
다른 객체 안의 객체이기 때문에 "중첩 객체" 라고 불린다.

저장된 웹사이트 콘텐츠와 관련된 함수와 정보들이 포함되어 있으며, 이 document 객체를 통해 HTML 요소에 접근하고 내용을 분석할 수 있다.

쉽게 말해 document 객체 = HTML 코드를 표준 자바스크립트 객체로 번역한 것
웹사이트의 정보와 관련된 수많은 속성과 메소드를 담고 있으며, 개중에는 HTML 코드를 분석하여 만든 `head` 속성과 `body` 속성도 포함된다. HTML 코드를 자바스크립트 객체 코드로 변환시킨 것을 DOM(Document Object Model)이라고 하며, DOM은 중첩 객체로써 웹페이지의 구조를 설명한다.

자바스크립트는 document 객체를 통해서 DOM에 접근, 상호작용이 가능하며 이를 통해 HTML 코드를 직접 건드리지 않고도 브라우저 화면 상에 보여지는 HTML 내부 요소에 대한 삽입/삭제/수정이 가능하게 되는 것이다.

document에 저장된 객체 정보는 `console.dir(document)` 로 출력해볼 수 있다.