21장. 빌트인 객체

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

- 표준 빌트인 객체 : ECMAScript 사양에 정의된 객체로 실행환경(브라우저 또는 Node.js)과 관계없이 사용 가능, 전역객체의 프로퍼티로서 제공, 별도의 선언없이 전역 변수처럼 언제나 참조 가능

- 호스트 객체 : ECMAScript 사양에 정의되어 있지않지만 JS 실행횐경에서 추가로 제공하는 객체

브라우저 : COM, 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, Crror 등이 있음

//String 생성자 함수에 의한 String 객체 생성
const strObj = new String('Lee');	//String {"Lee"}
consnole.log(typeof strObj);	//object

//Number 생성자 함수에 의한 Number 객체 생성
const numObj = new Number(123);	//Number {123}
console.log(typeof numObj);	//object

//Function 생성자 함수에 의한 Function 객체(함수) 생성
const func = new Function ('x', 'return x * x');	//f anonymous(x)
console.log(typeof func);

//Array 생성자 함수에 의한 Array 객체(배열) 생성
const arr = new Array(1,2,3);	//(3) [1,2,3]
console.log(typeof arr);	//object

//RegExp 생성자 함수에 의한 RegExp 객체(정규표현식) 생성
const regExp = new RegExp(/ab+c/i);	// //ab+c/i
console.log(typeof regExp);	//object

//Date 생성자 함수에 의한 Date 객체 생성
const date = new Date();	//Fri May 08 2020 10:43:25 GMT+0900(대한민국 표준시)
console.log(typeof date);	//object

 

생성자 함수인 표준 빌트인 객체가 생성한 인스턴스의 프로토타입은 표준 빌트인 객체의 prototype 프로퍼티에 바인딩된 객체로 string을 생성자 함수로 호출하여 생성한 String 인스턴스의 프로토 타입은 String.prototype

//String 생성자 함수에 의한 String 객체 생성
const strObj = new String('Lee');	//String {'Lee'}

//String 생성자 함수를 통해 생성한 strObj 객체의 프로토타입은 String.prototype
console.log(Object.getPrototypeOf(strObj) === String.prototype);	//true

 

표준 빌트인 객체의 prototype 프로퍼티에 바인딩된 객체(String.prototype)는 다양한 기능의 빌트인 프로토타입 메서드 제공, 표준 빌트인 객체는 인스터스 없이 호출 가능한 빌트인 정적 메서드 제공

//Number 생성자 함수에 의한 Number 객체 생성
const numObj = new Number(1.5);	//Number {1.5}

//toFixed는 Number.prototype의 프로토타입 메서드
//Number.prototype.toFixed는 소수점 자리에서 반올림하여 문자열로 반환
console.log(numObj.toFixed());	//2

//isInteger는 Number의 정적 메서드
//Number.isInteger는 인수가 정수인지 검사하여 그 결과를 Boolean으로 반호나
console.log(Number.isInteger(0.5));	//false

 

21.3 원시값과 래퍼객체

문자열, 숫자 등의 원시값이 있는데도 문자열, 숫자 객체를 생성하는 String, Number 등의 표준 빌트인 생성자 함수가 존재하는 이유?

원시값은 객체가 아니므로 프로퍼티나 메서드를 가질수 없지만 원시값에 대해 객체처럼 마침표 표기법으로 접근시 JS엔진이 일시적으로 원시값을 연관된 객체로 변환해주기 때문에 원시값인 문자열이 객체처럼 동작,
즉 원시값을 객체처럼 사용하면 JS엔진은 암묵적으로 연관된 객체를 생성하여 생성된 객체로 프로퍼티에 접근하거나 메서드를 호출하고 다시 원시값으로 되돌림

const str = 'hello';

//원시 타입인 문자열이 프로퍼티와 메서드를 갖고있는 객체처럼 동작
console.log(str.length);	//5
console.log(str.toUpperCase());	//HELLO

 

이처럼 문자열, 숫자, 불린값에 대해 객체처럼 접근하면 생성되는 임시 객체를 래퍼 객체라 함

문자열에 대해 마침표 표기법으로 접근시 래퍼 객체인 String 생성자 함수의 인스턴스가 생성되고 문자열은 래퍼 객체의 [[StringData]] 내부 슬롯에 할당

const str = 'hi';

//원시타입인 문자열이 래퍼 객체인 String 인스턴스로 변환
console.log(str.length);	//2
console.log(str.toUpperCase);	//HI

//래퍼 객체로 프로퍼티에 접근하거나 메서드를 호출한 후 다시 원시값으로 되돌림
console.log(typeof str);	//string

 

문자열 래퍼객체인 String 생성자 함수의 인스턴스는 String.prototype의 메서드를 상속받아 사용가능

래퍼객체의 처리가 종료되면 래퍼 객체의 [[StringData]] 내부 슬록에 할당된 원시값으로 원래의 상태인 식별자가 원시값을 갖도록 되돌리고 래퍼객체는 가비지 컬렉션의 대상이 됨

//1. 식별자 str은 문자열을 값으로 가짐
const str = 'hello';

//2. 식별자 str은 암묵적으로 생성된 래퍼객체를 가리킴
//식별자 str의 값 'hello'는 래퍼객체의 [[StringData]] 내부 슬롯에 할당됨
//래퍼 객체에 name 프로퍼티가 동적으로 추가됨
str.name = 'Lee';

//3. 식별자 str은 다시 원래의 문자열인 래퍼객체의 [[StringData]] 내부 슬록에 할당된 원시값을 가짐
//이때 2에서 생성된 래퍼객체는 아무도 참조하지 않는 상태이므로 가비지 컬렉션의 대상이 됨

//4. 식별자 str은 새롭게 암묵적으로 생성된(2의 래퍼객체와 다른) 래퍼객체를 가리킴
//새롭게 생성된 래퍼객체에는 name프로퍼티가 존재하지 않음
console.log(str.name);	//undefined

//5. 식별자 str은 다시 원래의 문자열인 래퍼객체의 [[StringData]]내부 슬록에 할당된 원시값을 가짐
//이때 4에서 생성된 래퍼 객체는 아무도 참조하지 않는 상태이므로 가비지 컬렉션의 대상이 됨
console.log(typeof str, str);	//string hello

const num = 1.5;

//원시타입인 숫자가 래퍼 객체인 Number 객체로 변환
console.log(num.toFixed());	//2

//래퍼 객체로 프로퍼티에 접근하거나 메서드를 호출한 후 다시 원시값으로 되돌림
console.log(typeof num, num);	//number 1.5

문자열, 불리언, 심벌로 래퍼객체를 생성함

이처럼 문자열, 숫자, 불리언, 심벌은 암묵적으로 생성되는 래퍼객체에 의해 객체처럼 사용가능하므로 표준 빌트인 객체인 String, Number, Boolean, Symbol의 프로토타입 메서드 또는 프로퍼티 참조가 가능하므로 new 연산자와 함께 사용하여 인스턴스를 생성할 필요가 없음

이외의 원시값인 null, undefined는 래퍼객체를 생성하지않으므로 객체처럼 사용시 에러 발생

 

21.4 전역객체 : 코드 실행전 JS엔진에 의해 어떤 객체보다도 먼저 생성되는 최상위 객체 (브라우저 : window, self, this, frames / Node.js : global)

*globalThis : ES11에서 도입, 전역 객체를 가리키는 다양한 식별자를 통일, 표준 사양

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

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

 

전역객체는 표준 빌트인 객체(Object, String, Number, Function, Array 등)와 환경에 따른 호스트 객체(클라이언트 Web API, Node.js의 호스트 API), var 키워드로 선언한 전역변수와 전역함수를 프로퍼티로 가짐

전역객체는 모든 빌트인 객체의 최상위 객체로 어떤 객체의 프로퍼티도 아니며 표준 빌트인 객체와 호스트 객체를 프로퍼티로 소유함

 

전역 객체의 특징

- 전역 객체는 개발자가 의도적으로 생성할 수 없음(전역 객체를 생성할 수 있는 생성자 함수가 제공되지 않음)

- 전역 객체의 프로퍼티 참조시 window(또는 global) 생략 가능

//문자열 'F'를 16진수로 해석하여 10진수로 변환하여 반환
window.parseInt('F', 16);	//15

//window.parseInt는 parseInt로 호출할 수 있음
parseInt('F', 16);	//15

window.parseInt === parseInt;	//true

- 전역 객체는 Object, String, Number, Boolean, Function, Array, RegExp, Date, Math, Promise 같은 모든 표준 빌트인 객체를 프로퍼티로 가짐

- 자바스크립트 실행환경에 따라 추가적인 프로퍼티와 메서드를 가짐, 브라우저 : DOM, BOM, Canvas,XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker 같은 클라이언트 사이드 Web API를 호스트 객체로 제공, Node.js : Node.js 고유의 API를 호스트 객체로 제공

- var 키워드로 선언한 전역변수와 선언하지 않은 변수에 값을 할당한 암묵적 전역, 전역함수는 전역 객체의 프로퍼티가 됨

//var 키워드로 선언한 전역변수
var foo = 1;
console.log(window.foo);	//1

//선언하지 않은 변수에 값을 암묵적 전역, bar는 전역 변수가 아니라 전역 객체의 프로퍼티
var = 2;	//window.bar = 2
console.log(window.bar);	//2

//전역 함수
function baz() {return:3;}
console.log(window.baz());	//3

- let이나 const 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아니므로 window.foo와 같이 접근불가, let이나 const키워드로 선언한 전역변수는 보이지 않는 개념적인 블록(전역 렉시컬 환경의 선언적 환경 레코드)내에 존재

let foo = 123;
console.log(window.foo);	//undefined

- 브라우저 환경의 모든 자바스크립트 코드는 하나의 전역객체 window를 공유, 여러개의 script태그로 분리해도 하나의 전역객체인 window를 공유

 

21.4.1 빌트인 전역 프로퍼티 : 전역객체의 프로퍼티, 주로 애플리케이션 전역에서 사용하는 값 제공

- Infinity 프로퍼티 : 무한대를 나타내는 숫자값 Infinity을 가짐

//전역 프로퍼티는 window 생략, 참조 가능
console.log(window.Infinity === Infinity);	//true

//양의 무한대
console.log(3/0);	//Infinity

//음의 무한대
console.log(-3/0);	//-Infinity

//Infinity는 숫자값
console.log(typeof Infinity);	//number

 

- NaN 프로퍼티 : 숫자가 아님을 나타내는 숫자값 NaN을 가짐

console.log(window.NaN);	//NaN
console.log(Number('xyz');	//NaN
console.log(1 * 'string');	//NaN
console.log(typeof NaN);	//number

 

- undefined 프로퍼티 : 원시타입 undefined를 값으로 가짐

console.log(window.undefined);	//undefined
var foo;
console.log(foo);	//undefined
console.log(typeof undefined);	//undefined

 

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

- eval 함수 : JS코드를 나타내는 문자열을 인수로 전달받고 문자열 코드가 표현식인 경우 eval 함수는 문자열 코드를 런타임에 평가하여 값생성, 표현식이 아닌 문인 경우 문자열코드를 런타임에 실행, 문자열 코드가 여러개의 문일 경우 모든 문을 실행함

/**
 주어진 문자열 코드를 런타임에 평가 또는 실행
 @param {string} code - 코드를 나타내는 문자열
 @returns {*} 문자열 코드를 평가/실행한 결과값
*/
eval(code)

//표현식인 문
eval('1+2;');	//3
//표현식이 아닌 문
eval('var x = 5;')	//undefined

//eval 함수에 의해 런타임에 변수 선언문이 실행되어 x변수가 선언됨
console.log(x);	//5

//객체 리터럴은 반드시 괄호로 둘러쌈
const o = eval('({ a:1 })');
console.log(o);	//{a:1}

//함수 리터럴은 반드시 괄호로 둘러쌈
const f = eval('(function() {return 1;})');
console.log(f());	//1

//인수로 전달받은 문자열 코드가 여러개의 문으로 이러우진 경우 모든 문을 실행한 후 마지막 결과값 반환
eval('1+2; 3+4;');	//7

 

eval 함수는 자신이 호출된 위치에 해당하는 기존의 스코프를 런타임에 동적으로 수정

const x = 1;

function foo(){
  //eval 함수는 런타임에 foo함수의 스코프를 동적으로 수정
  eval('var x =2;');
  console.log(x);	//2
}

foo();
console.log(x);	//1

const x = 1;

function foo(){
  'use strict';
  
  //strict mode에서 eval 함수는 기존의 스코프를 수정하지않고 
  //eval 함수 자신의 자체적인 스코프를 생성함
  eval('var x =2; console.log(x););	//2
  console.log(x);	//1
}

foo();
console.log(x);	//1

 

인수로 전달받은 문자열 코드가 let, const 키워드를 사용한 변수 선언문이라면 암묵적으로 strict mode가 적용됨

const x = 1;

function foo(){
  eval('var x =2; console.log(x);');	//2
  
  //let, const 키워드를 사용한 변수 선언문은 strict mode 적용
  eval('const x =3; console.log(x);');	//3
  console.log(x);	//2
}
foo();
console.log(x);	//1

 

eval함수를 통해 사용자에게 입력받은 콘테츠를 실행하는 것은 보안에 매우 취약하며 최적화가 수행되지않아 처리속도가 느리므로 사용x

 

- isFinite : 전달받은 인수를 검사하여 정상적인 유한수이면 true, 무한수이면 false 반환, 숫자타입이 아닐 경우 숫자로 타입 변환후 검사하여 NaN인 인수는 false 반환

/**
  전달받은 인수가 유한수인지 확인후 결과 반환
  @param {number} testValue - 검사 대상 값
  @returns {boolean} 유한수 여부 확인 결과
*/
isFinite(testValue)

//인수가 유한수일 경우 true 반환
isFinite(0);	//true
isFinite(2e64);	//true
isFinite('10');	//true '10' -> 10
isFinite(null);	//true null -> 0

//인수가 무한수 또는 NaN으로 평가되는 경우 false 반환
isFinite(Infinity);	//false
isFinite(-Infinity);	//false
isFinite(NaN);	//false
isFinite('Hello');	//false
isFinite('2005/12/12');	//false

//숫자가 아닌 경우 숫자로 타입변환하여 수행
console.log(+null);	//0

 

- isNaN : 전달받은 인수를 검사하여 불리언타입으로 반환, 숫자타입이 아닐경우 숫자로 타입 변환후 검사 수행

/**
  주어진 숫자가 NaN인지 확인후 결과 반호나
  @param {number} testValue - 검사대상값
  @returns {boolean} NaN 여부 확인 결과
*/
isNaN(testValue)

//숫자
isNaN(NaN);	//true
isNaN(10);	//false

//문자열
isNaN('blabla');	//true 'blabla' -> NaN
isNaN('10');	//false '10' -> 10
isNaN('10.12');	//false '10.12' -> 10.12
isNaN('');	//false ''-> 0
isNaN(' ');	//false ' '-> 0

//불리언
isNaN(true);	//false true -> 1			??????????
isNaN(null);	//false null -> 0

//undefined
isNaN(undefined);	//true undefined -> NaN

//객체
isNaN({});	//true {} -> NaN

//date
isNaN(new Date());	//false new Date() -> number
isNaN(new Date().toString());	//true String -> NaN

 

- parseFloat : 문자열 인수를 부동 소수점 숫자인 실수로 해석하여 반환

 

- parseInt : 문자열 인수를 정수로 해석하여 반환

 

- encodeURI : 완전한 URI(인터넷에 있는 자원을 나타내는 유일한 주소, > URL, URN)를 문자열로 전달받아 이스케이프 처리를 위해 인코딩

- decodeURI : 인코딩된 URI를 인수로 전달받아 이스케이프 처리 이전으로 디코딩

 

- encodeURIComponent : URI 구성요소를 인수로 전달받아 인코딩(URI의 문자들을 이스케이프 처리하는 것, 0~9, -_~!*'() 제외)

- decodeURIComponent : 매개변수로 전달된 URI 구성요소를 디코딩

 

21.4.3 암묵적 전역

var x =10;	//전역 변수
function foo(){
  //선언하지 않은 식별자에 값 할당
  y = 20;	//window.y = 20;
}
foo();

//선언하지 않은 식별자 y를 전역에서 참조
console.log(x+y);	//30