이 시리즈에서는 front-end-interview-handbook 의 질문들에 답하는 형식으로 채워나갈 예정입니다. 그리고 정확하지 않은 정보나 이건..!;…!!!!! 싶은 부분이 있다면 언제든 댓글 혹은 연락주세요 🙏
완료된 인터뷰
📍 호스트 객체와 내장 객체의 차이점은 무엇인가요?
내장 객체(Built-in object)
또는 네이티브 객체, 전역 객체는 ECMAScript 명세에 정의된 객체를 뜻하며 호스트 환경과 상관없이 구현되는 객체를 말한다. 이는 다른 모든 객체들의 기반이 되며 일반 객체, 함수, 오류를 나타내는 객체를 포함한다.
그리고 전역 객체를 다른 의미로 사용되는 경우가 있는데 다른 의미로, 호스트 객체에서의 최상위 객체를 뜻하는 말이므로 사용에 혼동이 없도록 해야 한다.
- Object
- Function
- Array
- String
- Number
- Boolean
- Date
- Math
- RegExp
- Symbol
- Error
내장 객체 중에는 객체가 아닌 원시타입을 원시타입과 관련된 객체의 프로토타입 메서드를 사용할 수 있도록 원시타입과 연관된 객체로 일시적으로 변환되어 호출하는 래퍼 객체(Wrapper Object)가 있다.
let str = 'wrapper object'console.log(str.charAt(2)) // 'a'
래퍼 객체의 종류는 String, Number, Boolean이 있다.
호스트 객체(Host object)
는 자바스크립트 엔진이 실행되는 호스트 환경에 정의된 객체를 뜻한다. 호스트 환경이 되는 브라우저 혹은 브라우저 외부(Node.js)에 따라 자바스크립트는 각기 다른 호스트 객체를 사용할 수 있다.
호스트 환경에서 모든 객체들의 최상위 임을 의미하는 전역 객체가 있으며 각 환경에 따라 부르는 명칭이 다르다.
Browser-side에서는 window, Server-side(Node.js)에서는 global객체를 의미한다.
- Global object: window, global(Node.js)
- BOM(Browser Object Model): Document, Event, HTML Element, HTMLCollection, NodeList…
- DOM(Document Object Model): Location, History, Navigator, Screen
- Ajax: XMLHttpRequest, Fetch
- HTML5 API: File, Canvas, Geolocation, Drag&Drop, Web storage…
📍 내장 객체를 확장하는 것이 좋은 생각이 아닌 이유는 무엇인가요?
내장 객체를 확장하는 것과 같이 프로그램 구조를 변경하는 기법을 Monkey patching이라고 부른다. 하지만 자바스크립트에서 내장 객체를 확장한다는 것은 prototype을 수정하는 것이기 때문에 표준 객체에 비표준 기능을 추가하는 것은 지향 할 만한 방법은 아니거니와 안티패턴이라 부를 수 있다.
그리고 내장 객체 확장의 좋은 사례를 보고자 한다면 아래 코드와 같은 폴리필이 있다.
Polyfill
includes() 메서드는 하나의 문자열이 다른 문자열에 포함되어 있는지를 판별하고, 결과를 true 또는 false 로 반환하는 메서드이지만 해당 메서드를 지원하지 않을 경우에는 다음과 같이 polyfill 할 수 있다.
if (!String.prototype.includes) {
String.prototype.includes = function(search, start) {
‘use strict’;
if (typeof start !== ‘number’) {
start = 0;
}
if (start + search.length > this.length) {
return false;
} else {
return this.indexOf(search, start) !== -1;
}
};
}
