안녕하세요. 김용성입니다.
최근에 아는 사람이 프론트엔드 면접에서 네이티브 객체와 호스트 객체의 차이점에 대해 설명하라는 질문을 받았다고 하길래 이에 대해서 알아보았는데요.
오늘은 짤막하게 네이티브 객체와 호스트 객체의 차이점에 대해서 설명드리도록 하겠습니다.
네이티브 객체
혹시 EscmaScript에 대해 알고계신가요? 이는 자바스크립트 언어규약을 뜻하는데요.
우리가 ES6 ES5 등으로 말하는 것도 EscmaScript의 줄임말입니다.
네이티브 객체란 이 EscmaScript에서 정의된 내장 객체를 말합니다.
다음과 같은 특성을 가집니다.
-
native object, built-in object라고 부릅니다.
-
전역의 공통 기능을 제공하며 특정 환경(브라우저 등의 클라이언트 프로그램, 또는 Node.js 등의 런타임)에 종속되지 않습니다.
-
네이티브 객체는 모든 내장 객체(built-in object)를 포함하며 내장 네이티브 생성자는 각자의 .prototype객체를 가집니다.
-
프로토타입 객체에는 해당 객체의 하위 타입별로 고유한 로직이 담겨있습니다.
네이티브 객체 종류
-
Value properties : Infinity, NaN, undefined, globalThis
-
Function properties : eval(), uneval(), isFinite(), isNaN(), parseFloat(), parseInt(), encodeURI(), encodeURIComponent(), decodeURI(), decodeURIComponent()
-
Fundamental objects: Object, Function, Boolean, Symbol
간단하게 설명해서 실행환경에 구애받지 않고, 우리가 예상한 방향으로 실행되는 객체들을 바로 네이티브 객체라고 말합니다.
호스트 객체
실행 환경을 만들기위해 window, XMLHTTPRequest 등 런타임환경(브라우저, Nodejs)에 의해 제공되는 객체를 말합니다. 한마디로 말해서 네이티브 객체가 아닌 모든 것은 호스트 객체라고 할 수 있어요.
우리가 많이 쓰는 console 같은 경우에도 호스트 객체입니다:)
종류
- *window (BOM, browser object model)
- document (DOM, document object model)
- location
- history
- XMLHttpRequest
- setTimeout
- getElementsByTagName
- querySelectorAll
*BOM과 DOM의 차이는?
간단하게 설명하자면 다음과 같습니다.
BOM은
location.href = "www.google.com";
과 같이 지금 보고있는 웹 브라우저 자체 창의 기능을 아주 쉽게 조작할수 있는 방법을 알려주는 것들을 일컫는다고 보시면 됩니다.
그리고 Dom은,
html 문서상의 요소들을 자바스크립트가 접근하여 쉽게 조작하고 정보를 가져올수 있게 하는 것을 말해요.
예를들면,
<p id="name">yongseong</p>위와 같은, html 내부의 태그 요소를,
var name = Document.getElementById("name");
이렇게 가져오는 것을 말하죠.
마무리
간단하게 종류에 대해서 나와있는 것이 있어서 첨부합니다 :)
해당 사진이 이해하시는 데에 도움이 되실겁니다!
포스팅 읽어주셔서 감사합니다:)
