JavaScript/모던 자바스크립트 Deep Dive

16. 빌트인 객체

sandwe 2022. 8. 2. 15:54

자바스크립트 객체의 분류

자바스크립트 객체는 다음과 같이 3개의 객체로 분류한다.
  1. 표준 빌트인 객체 (네이티브 객체)
    • ECMAScript 사양에 정의된 객체
    • 자바스크립트 실행 환경(브라우저 또는 Node.js)과 상관없이 언제나 사용
    • 전역 객체의 프로퍼티로 제공, 별도의 선언 없이 전역 변수를 언제나 참조 가능
    • 애플리케이션 전역의 공통 기능을 제공
  2. 호스트 객체
    • ECMAScript 사양에 정의되어 있진 않지만 자바스크립트 실행 환경에서 추가로 제공하는 객체
    • 브라우저 환경 ➡️ DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker와 같은 클라이언트 사이드 Wep API를 호스트 객체로 제공
    • Node.js ➡️ Node.js 고유 API를 호스트객체로 제공
  3. 사용자 정의 객체
    • 사용자가 직접 정의한 객체

 

표준 빌트인 객체

Math, Reflect, JSON을 제외한 표준 빌트인 객체는 모두 인스턴스를 생성하는 생성자 함수 객체이다.
  • 생성자 함수 객체인 표준 빌트인 객체 ➡️ 프로토타입 메서드와 정적 메서드 제공
  • 생성자 함수 객체가 아닌 표준 빌트인 객체 ➡️ 정적 메서드만 제공
 

표준 내장 객체 - JavaScript | MDN

이 장은 JavaScript의 모든 표준 내장 객체와 그 메서드 및 속성을 나열합니다.

developer.mozilla.org

 

원시값과 래퍼 객체

래퍼 객체란 문자열, 숫자, 불리언 값을 마치 객체처럼 접근했을 때 생성되는 임시 객체이다.
  • 원시값 중 문자열, 숫자, 불리언 값은 마치 객체처럼 마침표 표기법(대괄호 표기법)으로 접근하면 자바스크립트 엔진은 암묵적으로 연관된 객체를 생성한다.
  • 생성된 연관된 객체로 프로퍼티에 접근하거나 메서드를 호출하고 다시 원시값으로 되돌린다.
  • 래퍼 객체에 의해 문자열, 숫자, 불리언 값을 마치 객체처럼 사용할 수 있으므로 String, Number, Boolean 생성자 함수를 new와 함께 호출하는 방법은 권장되지 않는다.
const str = 'hi';

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

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

 

전역 객체 (Global Object)

코드가 실행되기 이전에 자바스크립트 엔진에 의해 어떤 객체보다도 먼저 생성되는 특수한 객체, 최상위 객체
브라우저 환경에서 전역 객체 ➡️ window
Node.js 환경에서 전역 객체 ➡️ global
  • 표준 빌트인 객체, 환경에 따른 호스트 객체, var 키워드로 선언한 전역 변수와 전역 함수를 프로퍼티로 갖는다.
  • 최상위 객체라는 것은 프로토타입 상속 관계상에서 최상위 객체라는 의미가 아니다.
  • 전역 객체는 어떤 객체의 프로퍼티도 아니며 객체의 계층적 구조상 표준 빌트인 객체와 호스트 객체를 프로퍼티로 소유한다.

 

전역 객체의 프로퍼티를 참조할 때 window(global)를 생략할 수 있다.

window.parseInt('F', 16); // 15
// 전역 객체의 프로퍼티 참조 시 window(global)을 생략할 수 있다.
parseInt('F', 16); // 15

window.parseInt === parseInt; // true

 

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

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

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

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

 

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

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

 

브라우저 환경의 모든 자바스크립트 코드는 하나의 window 전역 객체를 공유한다.

script 태그를 여러번 써서 자바스크립트 코드를 분리해도 하나의 전역 객체 window를 공유한다.

 

빌트인 전역 프로퍼티

전역 객체의 프로퍼티

Infinity

  • 양/음의 무한대를 나타내는 숫자값 Infinity를 갖는다.
console.log(window.Infinity); // Infinity

console.log(3/0);  // Infinity
console.log(-3/0); // -Infinity
console.log(Number.MAX_VALUE * 2); // 1.7976931348623157e+308 * 2
console.log(typeof Infinity); // number

NaN

  • 숫자가 아님(Not-a-Number)을 나타내는 숫자값 NaN을 갖는다.
  • NaN 프로퍼티는 Number.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

 

빌트인 전역 함수

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

 

isFinite

  • 전달된 인수가 유한수인지 검사한다.
  • 유한수이면 true, 무한수나 NaN이면 false를 반환한다.
  • 전달된 인수의 타입이 숫자가 아니면 숫자로 타입 변환 후 검사한다.
isFinite(null); // true: null -> 0
isFinite(Infinity); // false
isFinite(NaN); // false

 

isNaN

  • 전달된 인수가 NaN인지 검사한다.
  • NaN이면 true, 아니면 false를 반환한다.
  • 전달된 인수의 타입이 숫자가 아니면 타입 변환 후 검사한다.
isNaN(NaN); // true
isNaN(10); // false
isNaN('blabla'); // true

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

 

parseFloat

  • 전달받은 문자열 인수를 실수(부동 소수점 숫자)로 해석해 반환한다.
parseFloat('3.14'); // 3.14
parseFloat('10.00'); // 10

// 공백으로 구분된 문자열은 첫 번째 문자열만 변환한다.
parseFloat('34 45 66'); // 34

// 첫 번째 문자열을 숫자로 변환할 수 없다면 NaN을 반환한다.
parseFloat('He was 40'); // NaN

// 앞뒤 공백은 무시된다.
parseFloat(' 60 '); // 60

 

parseInt

  • 전달받은 문자열 인수를 정수로 해석해 반환한다.
  • 전달받은 인수가 문자열이 아니면 문자열로 변환한 다음, 정수로 해석해 반환한다.
  • 두 번째 인수로 진법을 나타내는 기수(2 ~ 36)을 전달할 수 있다. 
  • 기수를 지정하면 첫 번째 인수로 전달된 문자열을 해당 기수의 숫자로 해석하여 반환한다.
  • 두 번째 인수로 진법을 나타내는 기수를 지정하지 않더라도 첫 번째 인수로 전달된 문자열이 "0x" 또는 '0X"로 시작하는 16진수 리터럴이라면 16진수로 해석해 10진수 정수로 반환한다.
// '10'을 10진수로 해석하고, 그 결과를 10진수 정수로 반환한다.
parseInt('10'); // 10
parseInt(10); // 10

// '10'을 2진수로 해석하고, 그 결과를 10진수 정수로 반환한다.
parseInt('10', 2); // 2
// '10'을 8진수로 해석하고, 그 결과를 10진수 정수로 반환한다.
parseInt('10', 8); // 8
// '10'을 16진수로 해석하고, 그 결과를 10진수 정수로 반환한다.
parseInt('10', 16); // 16

parseInt('0xf'); // 15
parseInt('f', 16); // 15
  • 기수를 지정하여 10진수 숫자를 해당 기수의 문자열로 변환하여 반환할 때는 Number.prototype.toString 메서드를 사용한다.

 

encodeURI / decodeURI

  • encodeURI 메서드는 완전한 URI를 문자열로 전달받아 이스케이프 처리를 위해 인코딩한다.
  • decodeURI 메서드는 인코딩된 URI를 인수로 전달받아 이스케이프 처리 이전으로 디코딩한다.

encodeURI(URI)
// URI: 완전한 URI
decodeURI(encodedURI)
// encodedURI: 인코딩된 완전한 URI
const uri = 'http://example.com?name=이웅모&job=programmer&teacher';
const enc = encodeURI(uri);
const dec = decodeURI(enc);
console.log(enc);
// http://example.com?name=%EC%9D%B4%EC%9B%85%EB%AA%A8&job=programmer&teacher
console.log(dec);
// http://example.com?name=이웅모&job=programmer&teacher
🤚 URI: 인터넷에 있는 자원을 나타내는 유일한 주소

🤚 인코딩: URI의 문자들을 이스케이프 처리하는 것
🤚 이스케이프 처리: 네트워크에서 정보 공유 시 어떤 시스템에서든지 읽을 수 있는 아스키 문자 셋으로 변환하는 것
     UTF-8 특수 문자의 경우 1문자당 1~3바이트, UTF-8 한글 표현의 경우 1문자당 3바이트다.

🤚 이스케이프 처리 이유?
URL은 아스키 문자 셋으로만 구성되어야 하며 한글을 포함한 대부분의 외국어나 아스키 문자 셋에 정의되지 않은 특수 문자의 경우 URL에 포함될 수 없다. 

🤚 이스케이프 처리해야 하는 것
    1️⃣ URL내에서 의미를 갖고 있는 문자(%,  ?, #)
    2️⃣ URL에 올 수 없는 문자(한글, 공백 등) 
    3️⃣ 시스템에 의해 해석될 수 있는 문자(<, >)

🤚 이스케이프 처리에서 제외되는 것 ➡️ 알파벳, 0 ~ 9 숫자, - _ . ! ~ * ' ( ) 문자

 

encodeURIComponent/ decodeURIComponent

  • encodeURIComponent 메서드는 URI 구성요소를 인수로 전달받아 인코딩한다.
  • decodeURIComponent 메서드는 매개변수로 전달된 URI 구성요소를 디코딩한다.

❗️ encodeURIComponent 메서드는 인수로 전달된 문자열을 URI의 구성요소인 쿼리 스트링의 일부로 간주한다. 따라서 쿼리 스트링 구분자로 사용되는 =, ?, &까지 인코딩한다.

var uriComp = '이웅모&job=programmer&teacher';

// encodeURI / decodeURI
var enc = encodeURI(uriComp);
var dec = decodeURI(enc);
console.log(enc);
// %EC%9D%B4%EC%9B%85%EB%AA%A8&job=programmer&teacher
console.log(dec);
// 이웅모&job=programmer&teacher

// encodeURIComponent / decodeURIComponent
enc = encodeURIComponent(uriComp);
dec = decodeURIComponent(enc);
console.log(enc);
// %EC%9D%B4%EC%9B%85%EB%AA%A8%26job%3Dprogrammer%26teacher
console.log(dec);
// 이웅모&job=programmer&teacher

 

참고

https://poiemaweb.com/js-global-object