-
Object 정리 - window, 객체, object, DOM프론트엔드/프론트엔드 이론 2020. 9. 20. 21:04
정리하게 된 이유
자바 스크립트를 공부하다보면 생각나는게 있다.
"자바스크립트는 객체에서 시작해서 객체로 끝난다."
객체를 상속하고 객체를 만들고 객체를 복사하고 객체를 구조화한다.
객체를 모르고선 자바 스크립트는 알 수가 없다.
하지만 자바스크립트에서 객체는 햇갈린다.
이미 블로그에서 객체를 여러번 정리했지만 정리할 때마다 객체가 조금씩 달라진다는 것을 느꼈다.
자료의 형태로서 객체, 구조적인 상황에서의 객체 모든 것이 미세하게 차이가 있었다.
그래서 물론 100% 맞지 않을지 모르지만 여기선 가급적 한 페이지 내에서 객체에 대해 정리하려고 한다.
객체(Object)란?
객체가 뭐냐하면 한마디로 정의할 수 없다. 왜냐면 상황에 따라 달라지기 때문이다.
1. Data Type으로서 객체
자바 스크립트에서는 다루는 자료형은 크게 원시 타입(primitive type)과 객체(Object) 두 분류로 나뉜다.
자료형
종류
원시 타입
(primitive type)boolean, null, undefined, number, string, symbol
객체
(Object)Object
원시 타입 자료는 변수에 데이터 자체를 저장할 수 있는 immutable(변경할 수 없는)한 자료들을 말한다.
객체 타입의 자료 그러니까 객체는 이 원시 타입을 제외한 mutable(변경할 수 있는)한 자료들을 말한다.
당연히 타입이 다르니까 원시 타입과 객체는 구조적으로도 다르다.
<body> <script> var num = 5; // 원시타입 Number 자료 var string = "스트링"; // 원시타입 String 자료 var obj = { a: "스트링", b: "num", c: true } // 객체타입의 객체 자료 var array = [1,2,3,4,5] // 객체타입의 객체 자료, array </script> </body>위와 같이 원시 타입은 변수에 단순 대입하는 경우가 대부분이다.
반면 객체 타입의 자료들은 대괄호({ })를 쓰거나 중괄호([ ]) 등을 써서 나타낸다.
저장 가능 데이터도 차이가 있다.
원시 타입은 단순한 한 가지 종류의 데이터만 변수에 저장가능하다.
반면 객체 자료형은 다양한 타입의 데이터를 하나로 모아서 취급할 수 있도록 만들어졌다.
정리하자면 Data Type로서 객체(Object)는 원시 자료와는 다른 여러 데이터를 하나로 묶어서 취급해줄 수 있는 하나의 데이터 타입을 말한다.
2. 객체 이름으로서의 객체
자바스크립트의 구조를 보면 알겠지만 자바 스크립트는 객체로 이뤄져있다.
참고로 이건 다른 언어와 합쳐진 브라우저상이 아닌 순수 자바 스크립트일때 이야기다.
순수 자바스크립트 코드를 작성하다보면 모든 객체는 어느 한 객체를 바라보는 것을 알 수 있다.
바로 'Object'라는 이름의 객체다.
한글로 해석하면 '객체'라는 이름을 가진 '객체'를 바라본다는 것을 알고 있다.
'Object'라는 객체는 자바스크립트 내에서 최상위에 있는 객체이며 모든 객체는 이 객체를 상속 받아서 이용한다.
중간 과정 생략하면 대략 이렇다.
배열이든 리터럴 객체든 자바스크립트의 객체 시스템의 최상위에 있는 'Object'이름을 가진 객체를 상속한다.
그래서 아래와 같이 배열, 리터럴 객체 등 모두 Object가 가진 메서드를 사용할 수 있는 것이다.
<body> <script> var arr = [1,2,3,4]; var obj = { a:1, b:2 } console.log(arr.toString()); // "1,2,3,4" 출력 console.log(obj.a.toString()); // "1" 출력 console.log(obj.b.toString()); // "2" 출력 </script> </body>3. 브라우저 상태일 때 객체의 변화
앞서 말했듯 'Object'라는 이름의 객체가 자바스크립트 객체의 최상위에 있다고 말했다.
하지만 이건 자바스크립트 실행 환경에 따라 맞는 말이 되기도하고 틀린 말이 되기도 하다.
우선 여기선 자바스크립트를 브라우저 내에서 실행할때만을 상정하고 이야기하자.
우리가 컴퓨터를 켜고 인터넷을 켜고 주소를 입력하면 다음과 같은 일이 일어난다.
브라우저는 서버를 통해 자료를 받아서 이것을 화면에 띄우는 역할을 한다.
이때 HTML은 문서의 구조와 내용, CSS는 스타일, 자바스크립트는 동적 기능을 맡는다.
그런데 여기서 의문이 생긴다. HTML, CSS, 자바스크립트는 전부 다른 언어다. 형식도 다르다.
일반적으로 다른 언어끼리 막 동시에 간접하고 엮이는걸 생각하는 건 쉽지 않다.
이때 일어나는 일을 간단히 말하면 다음과 같다.
브라우저는 자체 엔진을 돌려서 HTML은 DOM의 형태로, CSS는 CSSOM의 형태로 만들고 자바스크립트를 적용해서 화면에 띄우게 된다.
그리고 이 과정에서 일어나는 것이 바로 window 객체다.
렌더 엔진이 HTML과 JavaScript를 결합하면 위와 같이 된다.
이 과정을 간단히 말하면 다음과 같다.
"HTML과 브라우저의 각종 요소들의 객체화"
이게 무슨 이야기냐면 앞서 말했듯 자바스크립트는 객체에서 시작해서 객체로 끝난다.
모든 자료를 객체로 처리할 수 있고 (원시타입마저도 래퍼객체로 가능) 객체가 구조화되어있다.
그렇다면 자바스크립트가 HTML와 다른 요소들을 이용하려면 어떻게 해야할까? 바로 객체화다.
이 과정은 자바스크립트가 다른 언어의 요소들을 객체화하여 이용할 수 있도록 만들어주는 과정이다.
즉 자바스크립트가 쓰기 쉽게 이 요소들을 결합해 브라우저의 구조를 빌려 하나의 객체 모델 구조를 만들어낸 것이다.
window는 우리가 사용하는 브라우저 전체를 말하고 자바스크립트, HTML 모두 이 안에서 돌아가기 때문에 모델 구조에서 최상위에 위치해있다.
아래 코드를 보면 window 객체가 가진 메서드들을 이용하면 브라우저 창을 조절할 수 있다.
<body> <script> window.alert("윈도우 객체"); // 브라우저에 경고창 표시 window.open(); // 브라우저 새페이지 열기 window.alert("윈도우 새창열림"); // 브라우저에 경고창 표시 window.close(); // 브라우저 새페이지 닫기 </script> </body>그외 중요한 요소는 DOM이 있다.
DOM은 "Document Object Model"의 약자다.
DOM은 브라우저의 웹페이지 부분을 컨트롤할 수 있는 Document를 객체화한 모델이다.
즉 브라우저의 화면 부분을 컨트롤 할 수 있는 요소들을 객체화한 것이다.
그렇다면 이 화면을 구성하고 내용을 넣는 것은 무엇인가 생각해보면 HTML이다.
즉 DOM은 HTML 구조를 객체화하여 자바스크립트가 조절할 수 있도록 만들어주는 모델인 것이다.
그리고 DOM은 그 뿐 아니라 객체화된 요소(Tag, text 등)을 조절하기 쉽게 도와주는 메서드를 제공한다.
아래 코드는 자바스크립트로 HTML의 요소를 선택하고 그 안에 텍스트를 입력하는 코드다.
<body> <h1 id="title"></h1> <p></p> <p></p> <p></p> <script> document.getElementById('title').innerHTML = "제목입니다"; for (var i = 0; i<3; i++){ document.getElementsByTagName('p')[i].innerHTML = i+"번입니다."; } </script> </body>
처음에 스크립트를 적용하지 않으면 아무 내용도 없던 페이지다.
자바 스크립트를 이용해 HTML 태그를 조종해서 텍스트를 입력하자 웹페이지 상으로도 내용이 출력된다.
이런식으로 자바스크립트가 HTML 요소들을 조종할 수 있게 객체화하고 메서드를 제공하는 것이 DOM의 목적이다.
'프론트엔드 > 프론트엔드 이론' 카테고리의 다른 글
자바스크립트엔진의 런타임(runtime) (0) 2020.09.18 자바스크립트 엔진(JavaScript Engine) (0) 2020.09.18 렌더 트리 (Render Tree) (0) 2020.09.18 CSSOM(CSS Object Model) (0) 2020.09.18 DOM(Document Object Model) (0) 2020.09.18