제로베이스 네카라쿠배 온라인스쿨 1기 과정(2021. 11 ~ 2021. 12)에서 공부했던 Javascript Deepdive 교재의 내용 요약 및 필자의 생각을 정리한 내용입니다. 원서의 내용 챕터의 일부를 요약한 내용으로 보다 자세한 내용은 원서를 참조 바랍니다.

21장 빌트인 객체

21.1 자바스크립트 객체의 분류

표준 빌트인 객체

• ECMAScript 사양에 정의된 객체를 말하며, 애플리케이션 전역 공통 기능을 제공한다.
• 자바스크립트 실행 환경에 관계없이 언제나 사용 가능하다.
• 전역 객체의 프로퍼티로서 제공된다. (별도 선언 없이 전역 변수처럼 언제나 참조 할 수 있다)

호스트 객체

• 호스트 객체는 ECMAScript 사양에 정의되어 있지 않지만 자바스크립트 실행 환경에서 추가로 제공하는 객체를 말한다.
• 브라우저 환경에서는 DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker와 같은 클라이언트 사이드 Web API를 제공한다.
• Node.js 환경에서는 Node.js 고유의 API를 제공한다.

사용자 정의 객체

• 표준 빌트인 객체와 호스트 객체처럼 기본 제공되는 객체가 아닌 사용자가 직접 정의한 객체를 말한다.

21.2 표준 빌트인 객체

• Object, String, Number, Boolean, Symbol, Date, Math, RegExp, Array, Map/Set, WeakMap/WeakSet, Function, Promise, Reflect, Proxy, JSON, Error 등 40여개 표준 빌트인 객체가 있다.
• Math, Reflect, JSON을 제외한 표준 빌트인 객체는 모두 인스턴스를 생성할 수 있는 생성자 함수 객체다.
• 생성자 함수 객체는 프로토타입 메서드와 정적 메서드를, 아닌 객체는 정적 메서드만 제공한다.
• 생성자 함수인 표준 빌트인 객체가 생성한 인스턴스의 프로토타입은 표준 빌트인 객체의 prototype 프로퍼티에 바인딩된 객체다.
• 표준 빌트인 객체의 prototype 프로퍼티에 바인딩된 객체는 다양한 기능의 빌트인 프로토타입 메서드를 제공한다.
• 표준 빌트인 객체는 인스턴스 없어도 호출 가능한 빌트인 정적 메서드를 제공한다.

21.3 원시값과 래퍼 객체

• 원시값은 객체가 아니라 프로퍼티나 메서드를 가질 수 없는데도 원시값인 문자열이 객체처럼 동작하는데 그 이유는 원시값에 대해 마치 객체처럼 마침표 표기법으로 접근하면 자바스크립트 엔진이 일시적으로 원시값을 연관된 객체로 변환해주기 때문이다.
  • 원시값을 객체처럼 사용하면 자바스크립트 엔진은 암묵적으로 연관된 객체를 생성하여 생성된 객체로 프로퍼티에 접근하거나 메서드를 호출하고 다시 원시값으로 되돌린다.
• 문자열, 숫자, 불리언 값에 대해 객체처럼 접근하면 생성되는 임시 객체를 래퍼 객체(wrapper object)라 한다.
• 래퍼 객체의 처리가 종료되면 래퍼 객체의 내부 슬롯에 할당된 원시값으로 원래 상태로 되돌리고, 래퍼 객체는 가비지 컬렉션 대상이 된다.
• 예시 코드 책 참조 (p324 ~ 325)
• ES6에서 새로 도입된 원시값인 심벌도 래퍼 객체를 생성한다.
• null, undefined는 래퍼 객체를 생성하지 않는다. (오류가 발생한다.)

21.4 전역 객체

• 전역 객체는 코드가 실행되기 이전 단계에 자바스크립트 엔진에 의해 어떤 객체보다도 먼저 생성되는 특수한 객체이며, 어떤 객체에도 속하지 않은 최상위 객체이다.
• 브라우저 환경에선 window, Node.js 환경에서는 global이 전역 객체를 가리킨다.

globalThis

• ES11(ECMAScript 11)에서 도입된 globalThis는 브라우저 환경, Node.js 환경에서 전역 객체를 가리키던 다양한 식별자를 통일한 식별자다. globalThis는 표준 사양이므로 ECMAScript를 준수하는 모든 환경에서 사용할 수 있다.

//브라우저 환경
globalThis === this // true
globalThis === window // true
globalThis === self // true
globalThis === frames // true

//Node.js(12.0.0 이상)
globalThis === this // true
globalThis === global //  true

• 전역 객체는 모든 빌트인 객체(표준 빌트인, 호스트 객체)의 최상위 객체다.

  • 전역 객체는 개발자가 의도적으로 생성할 수 없다. (생성자 함수가 제공되지 않는다.)
  • 전역 객체의 프로퍼티를 참조할 때 window(또는 global)을 생략할 수 있다.

• let, const 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아니다.

  • 보이지 않는 개념적 블록(전역 렉시컬 환경의 선언적 환경 레코드)내에 존재하게 된다.

21.4.1 빌트인 전역 프로퍼티

• 빌트인 전역 프로퍼티는 전역 객체의 프로퍼티를 의미한다.

Infinity

• Infinity 프로퍼티는 무한대를 나타내는 숫자값 Infinity를 갖는다.

NaN

• Not a Number을 나타내는 숫자값
• Number.NaN 프로퍼티와 같다.

undefined

• undefined 프로퍼티는 원시 타입 undefiend를 값으로 갖는다.

21.4.2 빌트인 전역 함수

• 애플리케이션 전역에서 호출할 수 있는 빌트인 함수로서 전역 객체의 메서드다.

eval

• 자바스크립트 코드를 나타내는 문자열을 인수로 전달받는다.
• 전달받은 문자열 코드가 표현식이라면 런타임에 평가하여 값을 생성한다.
• 표현식이 아닌 문이라면 런타임에 실행한다.
• eval 함수는 기존의 스코프를 런타임에 동적으로 수정한다.
• eval 함수는 보안 및 최적화 문제가 있어 사용을 금지해야 한다.

isFinite

• 전달받은 인수가 정상적인 유한수인지 검사하여 유한수이면 true를, 무한수이면 false를 반환한다.
• 전달받은 인수가 숫자가 아닌 경우 숫자로 타입 변환하고 검사를 수행한다.
  • NaN으로 평가되는 값이면 false를 반환한다.
• isFinite(null)은 true를 반환한다. (숫자로 변환하여 검사를 수행했기 때문)

isNaN

• 전달 받은 인수가 NaN인지 검사하여 그 결과를 불리언 타입으로 반환한다.
• 전달 받은 인수 타입이 숫자가 아닌 경우 숫자로 타입을 변환한 후 검사를 수행한다.

parseFloat

• 전달받은 문자열 인수를 부동 소수점 숫자(실수)로 해석하여 반환한다.

parseInt

• 전달받은 문자열 인수를 정수(integer)로 해석(parsing)하여 반환한다.
• 두번째 인수로 진법을 나타내는 기수를 전달할 수 있다.
• 기수를 생략하면 첫 번째 인수로 전달된 문자열을 10진수로 해석하여 반환한다.
• 기수를 지정하여 10진수 숫자를 해당 기수의 문자열로 변환하여 반환하고 싶을 때는 Number.prototype.toString메서드를 사용한다.
• ES5 이전까지는 ‘0’으로 시작하는 숫자를 8진수로 해석했다.(사용도 금지했다.)
• ES6 부터는 0으로 시작하는 숫자를 10진수로 해석한다. 8진수 해석을 위해서는 지수를 지정해야 한다.
• 첫 번째 인수로 전달한 문자열의 두 번째 문자부터 해당 진수를 나타내는 숫자가 아닌 문자와 마주치면 이 무시되며 해석된 정수값만 반환한다.
• 공백이 있으면 첫 번째 문자열만 해석하여 반환하며 앞뒤 공백은 무시된다.

encodeURI / decodeURI

• encodeURI 함수는 완전한 URI(Uniform Resource Identifier)를 문자열로 전달받아 이스케이프 처리를 위해 인코딩한다.
• URI는 인터넷에 있는 자원을 나타내는 유일한 주소를 말하며, 하위 개념으로 URL, URN이 있다.
• 인코딩이란 URI 문자들을 이스케이프 처리하는 것을 의미한다.
  • 이스케이프 처리는 네트워크를 통해 정보를 공유할 때 어떤 시스템에서도 읽을 수 있는 아스키 문자 셋으로 변환하는 것이다.
  • UTF-8 한글 표현 경우 1문자당 3바이트다.
  • 특수 문자인 공백 문자는 %20, 한글 ‘가’는 %EC%9E%90으로 인코딩 된다.
• URL은 아스키 문자 셋으로만 구성되어야 하며 한글을 포함한 대부분 외국어나 아스키 문자 셋에 정의되지 않은 특수 문자는 URL에 포함될 수 없다.
  • 따라서 URL 내에 의미를 갖고 있는 문자(%, ? #)나 URL에 올 수 없는 문자(한글, 공백) 또는 시스템에 의해 해석될 수 있는 문자(<, >)를 이스케이프 처리하여 야기될 수 있는 문제를 예방하기 위해 이스케이프 처리가 필요하다.
  • 알파벳, 09 숫자, -_.!*’() 문자는 이스케이프 처리에서 제외된다.
• decodeURI는 인코딩된 URI를 인수로 전달받아 이스케이프 처리 이전으로 디코딩 한다.

encodeURIComponent / decodeURIComponent

• encodeURIComponent 함수는 URI 구성 요소를 인수로 전달받아 인코딩한다. (이스케이프 처리)
• decodeURIComponent 함수는 매개변수로 전달된 URI 구성 요소를 디코딩한다.
• encodeURIComponent 함수는 인수로 전달된 문자열을 URI 구성요소인 쿼리 스트링의 일부로 간주한다. 따라서 쿼리 스트링 구분자로 사용되는 =, ?, &까지 인코딩한다.
• 반면 encodeURI 함수는 쿼리 스트링을 구분하므로 =, ?, &은 인코딩하지 않는다.

21.4.3 암묵적 전역

• 선언하지 않은 식별자에 값을 할당하면 전역 객체의 프로퍼티가 된다. 이러한 현상을 암묵적 전역(implicit global)이라 한다.
• 이때의 식별자는 단지 전역 객체의 프로퍼티로 추가되었을 뿐 변수가 아니므로 호이스팅이 발생하지 않는다.
• 또한 단순 프로퍼티는 delete 연산자로 삭제할 수 있다.
  • 전역 변수는 불가능하다.