JS Deep Dive - 빌트인 객체

자바스크립트 객체의 분류

• 표준 빌트인 객체
  ECMAScript 사양에 정의된 객체를 말하며, 애플리케이션 전역의 공통 기능을 제공한다. => 자바스크립트 실행 환경(브라우저 또는 Node.js)과 관계없이 언제나 사용할 수 있다. 전역 객체의 프로퍼티이기 때문에 별도의 선언 없이 언제나 참조할 수 있다.

• 호스트 객체
  ECMAScript 사양에 정의되어 있지 않지만 자바스크립트 실행 환경에서 추가로 제공하는 객체를 말한다.브라우저 환경에서는 DOM, BOM과 같은 클라이언트 사이드 Web API를 호스트 객체로 제공하고, Node.js 환경에서는 Node.js 고유의 API를 호스트 객체로 제공한다.

• 사용자 정의 객체
  사용자가 직접 정의한 객체

표준 빌트인 객체

Math, Reflect, JSON을 제외한 표준 빌트인 객체는 모두 인스턴스를 생성할 수 있는 생성자 함수 객체다.

// 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

원시값과 래퍼 객체

문자열이나 숫자 등 원시값이 있는데도 불구하고 해당 객체를 생성하는 String, Number등의 표준 빌트인 생성자 함수가 존재하는 이유는 다음과 같다.

const str = 'hello';

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

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

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

이와 같은 래퍼 객체는 객체의 형태로 할당이 가능하나, 다시 호출은 불가능하다.

const num = 1.5;

// 원시 타입인 숫자가 래퍼 객체인 Number 객체로 변환된다.(해당 값은 가비지 컬렉션의 대상이 된다.)
console.log(num.toFixed()); // 2

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

전역 객체

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

• 전역 객체는 개발자가 의도적으로 생성할 수 없다.
• 전역 객체의 프로퍼티를 참조할 때 window(또는 global)를 생략할 수 있다.

// 문자열 'F'를 16진수로 해석하여 10진수로 변환하여 반환한다.
window.parseInt('F', 16); // 15
// window.parseInt는 parseInt로 호출할 수 있다.
parseInt('F', 16); // 15

• 전역 객체는 Object, String, Number, Boolean, Function, Array, RegExp, Date, Math, Promise 같은 모든 표준 빌트인 객체를 프로퍼티로 가지고 있다.
• 자바스크립트 실행 환경에 따라 추가적으로 프로퍼티와 메서드를 갖는다.
• var 키워드로 선언한 전역 변수와 선언하지 않은 변수에 값을 할당한 암묵적 전역, 그리고 전역 함수는 전역 객체의 프로퍼티가 된다.

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

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

• let이나 const 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아니다. 즉, window.foo와 같이 접근할 수 없다. let이나 const 키워드로 선언한 전역 변수는 보이지 않는 개념적인 블록내에 존재하게 된다.

빌트인 전역 프로퍼티

---

Infinity

// 무한대를 나타내는 숫자값 Infinity를 갖는다.
// 전역 프로퍼티는 window를 생략하고 참조할 수 있다.
console.log(window.Infinity === Infinity); // true;

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

NaN

// Not a Number
console.log(Number('xyz')); // NaN

undefined

var foo;
conosle.log(foo); // undefined

빌트인 전역 함수

---

eval

자바스크립트 코드를 나타내는 문자열을 인수로 전달받는다.

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

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

const x = 1;

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

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

isFinite

// 인수가 유한수이면 true를 반환한다.
isFinite(0); // true
isFinite('10'); // true
isFinite(null); // true: null -> 0
isFinite(NaN); // false

isNaN

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

parse Float, Int

// 문자열을 실수로 해석하여 반환한다.
parseFloat('3.14'); // 3.14
parseFloat('10.00'); // 10

// 문자열을 정수로 해석하여 반환한다.
parseInt('10.123'); // 10

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

encodeURI/ decodeURI

// 완전한 URI
const uri = 'http://example.com?name=이웅모';
// encodeURI 함수는 완전한 URI를 전달받아 이스케이프 처리를 위해 인코딩한다.
const enc = encodeURI(uri);
console.log(enc);
// http://example.com?name=%EC%9...

// decodeURI 함수는 인코딩된 완전한 URI를 전달받아 이스케이프 처리 이전으로 디코딩한다.
const dec = decodeURI(enc);
console.log(dec);
// http://example.com?name=이웅모