21장 빌트인객체

박찬미·2024년 1월 27일

자바스크립트 딥다이브

목록 보기

19/23

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 등 40여 개의 표준 빌트인 객체를 제공
Math, Reflect, JSON을 제외한 표준 빌트인 객체는 모두 인스턴스를 생성할 수 있는 생성자 함수 객체
생성자 함수 객체인 표준 빌트인 객체는 프로토타입 메서드와 정적메서드를 제공
생성자 함수 객체가 아닌 표준 빌트인 객체는 정적 메서드만 제공
생성자 함수인 표준 빌트이 객체가 생성한 인스턴스의 프로토타입은 표준 빌트인 객체의
prototype 프로퍼티에 바인딩된 객체

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

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

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

21.3 원시값과 래퍼 객체

원시값은 객체가 아니라 프로퍼티나 메서드를 가질 수 없는데도 원시값인 문자열이 객체처럼 동작
-> 원시값에 대해 마치 객체처럼 마침표 표기법으로 접근하면 자바스크립트 엔진이 일시적으로 원시값을 연관된 객체로 변환
문자열, 숫자, 불리언 값에 대해 객체처럼 접근하면 생성되는 임시 객체를 래퍼 객체라함
래퍼 객체의 처리가 종료되면 래퍼 객체의 내부 슬롯에 할당된 원시값으로 원래 상태로 되돌리고, 래퍼 객체는 가비지 컬렉션 대상이 된다.

//1.식별자 str은 문자열을 값으로 가지고 있음.
const str = 'Hi'

//2.식별자 str은 암묵적으로 래퍼 객체를 가리킨다. 
식별자 str의 값 'Hi'는 래퍼 객체의 [[StringData]]내부 슬롯에 할당된 원시값가짐
//래패 객체에 name 프로퍼티가 동적 추가
str.name = 'lee';

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

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

// 식별자 str은 다시 원래의 문자열, 즉 래퍼 객체의 [[StringData]] 내부 슬롯에 할당된 원시값을 갖는다.
console.log(typeof str,str); //string Hi

21.4 전역 객체

전역 객체는 코드가 실행되기 이전 단계에 자바스크립트 엔진에 의해 어떤 객체보다도 먼저 생성되는 특수한 객체
브라우저 환경에서는 window가 전역 객체를 가리키지만 Node.js 환경에서는 global이 전역 객체를 가리킴

globalThis

ECMAScript 11에서 도입된 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

전역 객체는 계층적 구조상 어떤 객체에도 속하지 않는 모든 빌트인 객체의 최상위 객체
->전역 객체는 개발자가 의도적으로 생성x
->전역 객체의 프로퍼티를 참조할 때 windew,global 생략가능
let, const 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아님
->보이지 않는 개념적인 블록내에 존재하게 된다.

21.4.1 빌트인 전역 프로퍼티

->전역 객체의 프로퍼티를 의미

Infinity : 프로퍼티는 무한대를 나타내는 숫자값 Infinity를 갖는다.
NaN : 숫자가 아님 Not a Number, Number.NaN 프로퍼티와 같음
undefined : 원시 타입 undefiend를 값으로 갖음

21.4.2 빌트인 전역 함수

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

eval함수는 보안 및 최적화 문제가 있어 사용을 금지한다

eval 함수는 자바스크립트 코드를 나타내는 문자열을 인수로 전달받음
전달받은 문자열 코드가 표현식이라면 eval 함수는 문자열 코드를 런타임에 평가하여 값을 생성함
표현식문이 아니라면 런타임에 실행한다.

isFinite

전달받은 인수가 정상적인 유한수이면 true 무한수이면 false를 반환
전달받은 인수의 타입이 숫자가 아닌 경우 숫자로 타입을 변환한 후 검사를 수행
(이때 인수가 NaN으로 평가되는 값이라면 false를 반환)

isNaN

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

parseFloat

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

parseInt

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

encodeURI / decodeURI

encodeURI 함수는 완전한 URI(Uniform Resource Identifier)를 문자열로 전달받아 이스케이프 처리를 위해 인코딩
URI는 인터넷에 있는 자원을 나타내는 유일한 주소를 말하며, 하위 개념으로 URL, URN이 있음
인코딩이란 URI 문자들을 이스케이프 처리하는 것
URL은 아스키 문자 셋으로만 구성되어야 하며 한글을 포함한 대부분 외국어나 아스키 문자 셋에 정의되지 않은 특수 문자는 URL에 포함될 수 없음
decodeURI는 인코딩된 URI를 인수로 전달받아 이스케이프 처리 이전으로 디코딩함

21.4.3 암묵적 전역

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