16. 빌트인 객체

자바스크립트 객체는 크게 3개의 객체로 분류할 수 있다.

• 표준 빌트인 객체 ( standard built-in objects / native objects / global objects )
  ECMAScript 사양에 정의된 객체를 말하며 자바스크립트 실행 환경과 관계없이 언제나 사용할 수 있다. 표준 빌트인 객체는 전역 객체의 프로퍼티로 별도의 선언없이 전역 변수처럼 언제나 참조할 수 있다.

• 호스트 객체 ( host objects )
  호스트 객체는 자바스크립트 실행 환경에서 추가로 제공하는 객체를 말한다.
  브라우저 환경 - Web API
  Node.js - Node.js 고유의 API 제공

• 사용자 정의 객체 ( user-defined objects )
  사용자가 직접 정의한 객체

🔅 표준 빌트인 객체

Object, Math, String, Boolean.. 등 40여 개의 표준 빌트인 객체를 제공한다. Math, JSON, Reflect를 제외한 표준 빌트인 객체는 모두 인스턴스를 생성할 수 있는 생성자 함수 객체이다.

생성자 함수 객체에 해당하는 표준 빌트인 객체는 프로토타입 메서드와 정적 메서드를 제공하고,
생성자 함수 객체가 아닌 표준 빌트인 객체는 정적 메서드만 제공한다.

// 생성자 함수 객체에 해당하는 표준 빌트인 객체로
// 인스턴스 생성
const strObj = new String('1')
console.log(typeof strObj) //object

const intObj = new Number(1)
console.log(typeof intObj) //object

생성자 함수인 표준 빌트인 객체에 의해 생성된 인스턴스들은 표준 빌트인 객체의 prototype 프로퍼티에 바인딩된 객체이다.

const strObj = new String('1')
console.log(Object.getPrototypeOf(strObj)) 
//String {'', constructor: ƒ, anchor: ƒ, big: ƒ, blink: ƒ, …}

console.log(Object.getPrototypeOf(strObj) === String.prototype) // true

즉, strObj 인스턴스는 String의 prototype인 String.prototype 과 바인딩된 객체이며 String.prototype에서 제공하는 프로토타입 메서드를 상속을 통해 사용할 수 있다.

이에 반면, 생성자 함수가 아닌 표준 빌트인 객체인 Math의 경우

//Uncaught TypeError: Math is not a constructor
const mathObj = new Math('something')

// Math의 정적 메서드 중 하나인 random 이용
const random = Math.random()

인스턴스를 생성할 수 없으며, 생성자 함수에서만 이용할 수 있는 정적 메서드만 제공한다.
Math.random()이외에도 여러 메서드가 존재한다.

🔅 원시값과 래퍼 객체

하지만 우리는 보통 문자열, 숫자, 불리언을 사용할 때 생성자 함수를 통해 생성하지는 않는다.

즉, 원시값을 이용하여 사용할 수 있는데 이 경우에는 우리가 어떻게 각 생성자 함수에서 제공하는 메서드를 사용할 수 있을까?

//원시값으로 생성
const hello = 'hello'
//하지만 생성자 함수의 메서드를 사용
console.log(hello.toUpperCase()) //HELLO

이는 자바스크립트 엔진이 일시적으로 원시값을 관련된 객체로 변환해주기 때문이다.

암묵적으로 연관된 객체를 생성하여 프로퍼티에 접근하거나 메서드를 호출하고 다시 원시값으로 반환한다.

이렇게 문자열, 숫자, 불리언 값에 대해 객체처럼 접근하면 생성되는 임시 객체를 래퍼 객체 ( wrapper object )라 한다.

위의 소스코드의 동작 순서를 살펴보자면,

1. hello 변수에 문자열 원시값 할당 => hello 타입은 string

2. 마침표 표기법을 이용하여 접근 시, 래퍼 객체인 String 인스턴스가 생성된다.

3. 래퍼 객체의 내부슬롯인 [[StringData]] 에 문자열이 할당된다.

4. String.prototype에서 상속받은 메서드 toUpperCase를 사용

5. [[StringData]]에 할당된 값을 다시 hello가 원시값을 갖도록 되돌린다.

// 원시값으로 생성
const hello = 'hello'
console.log(typeof hello) // string

// 래퍼 객체인 String 인스턴스 생성
// [[StringData]] 할당
console.log(hello.toUpperCase()) //HELLO
// 처리 후 다시 원시값을 갖도록 반환
console.log(hello)

🔅 전역 객체

전역 객체 ( global object )은 코드가 실행되기 이전 단계에 자바스크립트 엔진에 의해 어떤 객체보다 먼저 생성되는 특수한 객체이며, 어떤 객체에도 속하지 않는 최상위 객체이다.

전역 객체의 이름은 자바스크립트 환경에 따라 다르다.
브라우저 환경 => window
Node.js 환경 => global

직접 console.log(window) 찍어보면 무수히 많은 프로퍼티를 확인할 수 있다.

전역객체의 특징

• 개발자가 의도적으로 생성할 수 없으며, 전역 객체를 생성하는 생성자 함수가 제공되지 않는다.
• 전역 객체의 프로퍼티를 참조할 때, window나global을 생략할 수 있다.
• 전역 객체는 표준 빌트인 객체, 호스트 객체, var로 선언한 전역 변수, 전역 함수를 프로퍼티로 갖는다.

var foo = 1
console.log(foo) // 1
console.log(window.foo) // 1
console.log(foo === window.foo) // true