[JavaScript] 빌트인 객체

자바스크립트 객체의 분류

자바스크립트 객체는 다음과 같이 크게 3개의 객체로 분류할 수 있습니다.

 

종류	설명
표준 빌트인 객체	- ESMAScript 사양에 정의된 객체 - 애플리케이션 전역의 공통 기능을 제공 - 자바스크립트 실행 환경과 관계없이 언제나 사용 가능 - 전역 객체의 프로퍼티로서 제공됨 - 별도의 선언 없이 전역 변수처럼 언제나 참조 가능
호스트 객체	- 자바스크립트 실행 환경에서 추가로 제공하는 객체 (ESMAScript 사양에 정의된 객체X) - 브라우저 환경 : *클라이언트 사이드 Web API를 호스트 객체로 제공 - Node.js 환경 : 고유의 API를 호스트 객체로 제공
사용자 정의 객체	- 사용자가 직접 정의한 객체 (표준 빌트인 객체와 호스트 객체처럼 기본 제공되는 객체X)

 

*클라이언트 사이드 Web API : DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Strorage, Web Component, Web Worker 

---

표준 빌트인 객체

자바스크립트는 40여 개의 표준 빌트인 객체를 제공합니다.

• Object, String, Number, Boolean, Symbol, Date, Math, RegExp, Array, Map/Set, WeakMap/WeakSet, Function, Promise, Reflect, Proxy, Json, Error 등

이중 Math, Reflect, Json을 제외한 모든 표준 빌드인 객체는 생성자 함수 객체이기 때문에 프로토타입 메서드와 정적 메소드를 제공합니다. (Math, Reflect, Json은 정적 메서드만 제공)

 

예를 들어, 표준 빌트인 객체인 String과 Number는 생성자 함수로 호출하여 인스턴스를 생성할 수 있습니다.

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

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

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

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

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

• 생성자 함수인 표준 빌트인 객체(String, Number)가 생성한 인스턴스의 프로토타입은 표준 빌트인 객체의 prototype 프로퍼티에 바인딩되어 다양한 기능의 빌트인 프로포타입 메서드를 제공
• 표준 빌트인 객체는 인스턴스 없이도 호출 가능한 빌트인 정적 메서드를 제공(Number.isInteger)

---

원시값과 래퍼 객체

원시값을 객체처럼 사용하면 자바스크립트 엔진은 암묵적으로 연관된 객체인 *래퍼 객체를 생성하여 생성된 객체로 프로퍼티에 접근하거나 메서드를 호출하고 다시 원시값으로 되돌립니다.

 

*래퍼 객체 : 문자열, 숫자, 불리언 값에 대해 객체처럼 접근하면 생성되는 임시 객체

 

const str = 'hi';

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

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

• 문자열에 대해 마침표 표기법으로 접근하면 그 순간 래퍼 객체인 String 생성자 함수의 인스턴스가 생성되고 문자열은 래퍼 객체의 [[StringData]] 내부 슬롯에 할당됨
• 문자열 래퍼 객체인 String 생성자 함수의 인스턴스는 String.prototype의 메서드를 상속받아 사용할 수 있음
• 래퍼 객체의 처리가 종료되면 래퍼 객체의 [[StringData]] 내부 슬롯에 할당된 원시값인 원래의 상태로 되돌리고 래퍼 객체는 가비지 컬렉션 대상이됨

 

이러한 이유 때문에 문자열, 숫자, 불리언 등의 원시값이 있는데도 자열, 숫자, 불리언 객체를 생성하는 String, Number, Boolean 등의 표준 빌트인 생성자 함수가 존재합니다.

 

** null과 undefined는 래퍼 객체를 생성하지 않음

---

전역 객체

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

 

전역 객체	설명
window	브라우저 환경의 전역 객체
global	Node.js 환경의 전역 객체
globalThis	ES11에서 도입된 브라우저 환경과 Node.js 환경의 통합 전역 객체

 

전역 객체의 특징

• 전역 객체는 개발자가 의도적으로 생성할 수 없음 (전역 객체를 생성할 수 있는 생성자 함수 제공X)
• 전역 객체의 프로퍼티를 참조할 때 window(또는 global)를 생략할 수 있음
• 표준 빌트인 객체와 호스트 객체를 프로퍼티로 소유함
• var 키워드로 선언한 전역 변수, 암묵적 전역, 전역함수는 전역 객체의 프로퍼티

 

빌트인 전역 프로퍼티

주로 애플리케이션 전역에서 사용하는 값을 제공하는 전역 객체의 프로퍼티를 의미합니다.

• Infinity : 무한대를 나타내는 숫자값 Infinity를 갖는 프로퍼티
• NaN : 숫자가 아님을 나타내는 숫자값 NaN을 갖는 프로퍼티
• undefined : 원시 타입 undefined를 값으로 갖는 프로퍼티

 

빌트인 전역 함수

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

• eval
  • 자바스크립트 코드를 나태내는 문자열을 인수로 전달받아 표현식이라면 값을 생성하고 표현식이 아닌 문이라면 코드를 실행 (런타임에 평가하여 생성/실행)
  • 인수로 전달받은 문자열 코드가 여러 개의 문으로 이루어져 있다면 모든 문을 실행한 다음 마지막 결과값을 반환
  • 자신의 호출된 위치에 해당하는 기존의 스코프를 런타임에 동적으로 수정 (strict mode에서는 수정하지 않고 자체적인 스코프를 생성. let, const 키워드를 사용하면 암묵적으로 strict mode가됨)
  • 보안에 취약하고 처리 속도가 느리다는 단점이 있어서 사용 X

// 1. 표현식인 문
eval('1 + 2;'); // 3

// 2. 표현식이 아닌 문
eval('var x = 5;'); // undefined

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

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

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

// 5. 마지막 결과값을 반환
eval('1 + 2; 3 + 4;'); // 7

// 6. 기존의 스코프를 런타임에 동적으로 수정
const x = 1;

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

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

 

• isFinite : 전달받은 인수가 정상적인 유한수인지 검사하여 유한수면 true를, 무한수면 false를 반환

isFinite(0); // true
isFinite(2e64); // true
isFinite('10'); // true : '10' -> 10
isFinite(null); // true : null -> 0

isFinite(Infinity); // false
isFinite(-Infinity); // false
isFinite(NaN); // false

 

• isNaN : 전달받은 인수가 NaN인지 검사하여 그 결과를 불리언 타입으로 반환

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

isNaN('blabla'); // true : 'blabla' -> NaN
isNaN('10'); // false : '10' -> 10
isNaN(''); // false : '' -> 0
isNaN(' '); // false : ' ' -> 0

isNaN(true); // false : true -> 1
isNaN(null); // false : null -> 0

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

isNaN({}); // true : {} -> NaN

isNaN(new Date()); // false : new Date() -> Number
isNaN(new Date().toString()); // true : String -> NaN

 

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

parseFloat('3.14'); // 4.14
parseFloat('10.00'); // 10

parseFloat('34 45 56'); // 34
parseFloat('40 years'); // 40

parseFloat('He was 40'); // NaN

parseFloat(' 70 '); // 70

 

• parseInt : 전달받은 문자열 인수를 정수로 해석하여 반환 

parseInt('10'); // 10
parseInt('10.12'); // 10

parseInt(10); // 10
parseInt(10.12); // 10

// 2진수로 해석해서 10진수 정수로 반환 
parseInt('10', 2); // 2

// 8진수로 해석해서 10진수 정수로 반환 
parseInt('10', 8); // 8

// 16진수 리터럴 '0xf'를 16진수로 해석해서 10진수 정수로 반환 (2, 8진수는 불가능)
parseInt('0xf'); // 15
parseInt('f', 16); // 15

parseInt('A0'); // NaN
parseInt('1A0'); // 1

parseInt('10 20'); // 10

 

• encodeURI / decodeURI 
  • encodeURI : 완전한 URI(Unifom Resource Identifier)를 문자로 전달받아 이스케이프 처리를 위해 인코딩
  • decodeURI : 인코딩된 URI를 인수로 전달받아 이스케이프 처리 이전으로 디코딩
  • encodeURI는 매개변수로 전달된 문자열을 완전한 URI 전체라고 간주하여 =, ?, &은 인코딩X

// 완전한 URI
const uri = 'http://example.com?name=이름&job=programmer&teacher';

const enc = encodeURI(uri);
console.log(enc);
// http://example.com?name=%EC%9D%B4%EB%A6%84&job=programmer&teacher

const dec = decodeURI(enc);
console.log(dec);
// http://example.com?name=이름&job=programmer&teacher

 

 

• encodeURIComponent / decodeURIComponent
  • encodeURIComponent  : URI 구성 요소를 인수로 전달받아 인코딩
  • decodeURIComponent : 매개변수로 전달된 URI 구성 요소를 디코딩
  • encodeURIComponent는 인수로 전달된 문자열을 URI 구성요소인 쿼리 스트링의 일부로 간주해서 =, ?, &까지 인코딩

const uriComp = 'name=이름&jop=programmer&teacher';

let enc = encodeURIComponent(uriComp);
console.log(enc);
// name%3D%EC%9D%B4%EB%A6%84%26jop%3Dprogrammer%26teacher

let dec = decodeURIComponent(enc);
console.log(dec);
// name=이름&jop=programmer&teacher

enc = encodeURI(uriComp);
console.log(enc);
// name=%EC%9D%B4%EB%A6%84&jop=programmer&teacher

dec = encodeURI(enc);
console.log(dec);
// name=이름&jop=programmer&teacher

---

암묵적 전역

선언하지 않은 식별자가 마치 선언된 전역 변수처럼 동작하는 것을 의미합니다.

 

console.log(x); // 10
console.log(y); // ReferenceError

var x = 10; // 전역 변수

function foo () {
    // 선언하지 않은 식별자에 값을 할당
    y = 20; // window.y = 20;
}
foo();

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

console.log(window.x); // 10
console.log(window.y); // 20

delete x; // 전역 변수는 삭제X
delete y; // 프로퍼티는 삭제O

console.log(window.x); // 10
console.log(window.y); // undefined

• foo 함수가 호출되면 자바스크립트 엔진은 y 변수에 값을 할당하기 위해 스코프 체인을 통해 선언된 변수인지 확인
• 자바스크립트 엔즌은 y = 20을 window.y = 20으로 해석하여 전역 객체에 프로퍼티를 동적으로 생성
• y는 변수 선언 없이 단지 전역 객체의 프로퍼티로 추가되었을 뿐이라 y는 변수가 아니므로 호이스팅이 발생X
• 프로퍼티인 y는 delete연산자로 삭제가 가능

---

[출처] 모던 자바스크립트 Deep Dive

https://wikibook.co.kr/mjs/

모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리