21장: 빌트인 객체

원시값인 String, Number, Boolean 값의 경우, 점을 찍을 경우, 이들 원시값에 대해 마치 객체처럼 JS 엔진이 일시적으로 원시값을 연관된 객체로 변환해준다 (=Wrapper object). 사용후 다시 원시값으로 복구해두고 래퍼객체는 GC가 처리한다. (궁금, 성능 문제 있으려나?)

const str = 'hello';

// 원시 타입인 문자열이 프로퍼티와 메서드를 갖고 있는 객체처럼 동작한다.
console.log(str.length); // 5
console.log(str.toUpperCase()); // HELLO
// ------------------------------------------
const str = 'hello';
str.name = 'Lee';
// 새로운 래퍼 객체 생성 해서 name을 찾는다.
console.log(str.name); // undefined

따라서 String, Number, Boolean 생성자 함수를 new 연산자와 함께 호출하여 인스턴스를 생성할 필요가 없으며 권장하지도 않는다.

전역 객체 (window)

전역 객체는 코드가 실행되기 이전 단계에 자바스크립트 엔진에 의해 어떤 객체보다도 먼저 생성되는 특수한 객체이며, 어떤 객체에도 속하지 않은 최상위 객체다. (예, 브라우저 환경에서는 window)

표준 빌트인 객체(object, string, Number, Function, Array 등)와 환경에 따른 호스트 객체(클라이언트 Web API 또는 Node.is의 호스트 APT), 그리고 var로 선언한 전역 변수와 전역 함수를 프로퍼티로 갖는다.

• 전역 객체 특징

  • 개발자가 의도적으로 생성할 수 없다. 즉, 전역 객체를 생성할 수 있는 생성자 함수가 제공되지 않는다.

  • 프로퍼티를 참조할 때 window를 생략할 수 있다.

  • 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를 호스트 객체로 제공한다.

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

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

    • 궁금, 그럼 한 탭에 있는 것만 해당되겠지??

      • ES6 부터는 스크립트 별로 독립된 환경을 만들어주는것 같다.

globalThis === this // true
globalThis === window // true 
globalThis === self // true
globalThis === frames // true
// ------------------------------------------
window.parseInt('F', 16); // 15 - F의 16진수 값
// ------------------------------------------
// 선언하지 않은 변수에 값을 암묵적 전역. bar는 전역 변수가 아니라 전역 객체의 프로퍼티다.
bar = 2; // window.bar = 2

빌트인 전역 프로퍼티 (Infinity, NaN, undefined)

console.log(window.Infinity === Infinity); // true
console.log(3/0);  // Infinity -> 양의 무한대
console.log(-3/0); // -Infinity -> 음의 무한대
console.log(typeof Infinity); // number -> Infinity는 숫자값이다.
// ------------------------------------------
console.log(window.NaN); // NaN
console.log(Number('xyz')); // NaN
console.log(1 * 'string');  // NaN
console.log(typeof NaN);    // number
// ------------------------------------------
var foo;
console.log(foo); // undefined

빌트인 전역 함수 (eval, isFinite, isNaN, parseFloat)

parseInt() decodeURI() decodeURIComponent() encodeURI() encodeURIComponent()

eval('1 + 2;'); // -> 3

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

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

const x = 1;
function foo() {
  // 런타임에 foo 함수의 스코프를 동적으로 수정한다.
  eval('var x = 2;');
  console.log(x); // 2
}
function foo() {
  'use strict';
  // strict mode에서 eval 함수는 기존의 스코프를 수정하지 않고 eval 함수 자신의 자체적인 스코프를 생성한다.
  eval('var x = 2; console.log(x);'); // 2
  console.log(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
}
// ------------------------------------------
// 인수가 유한수이면 true를 반환한다.
isFinite(0);    // -> true
isFinite('10'); // -> true: '10' → 10
isFinite(null); // -> true: null → 0

// 인수가 무한수 또는 NaN으로 평가되는 값이라면 false를 반환한다.
isFinite(Infinity);  // -> false
isFinite(-Infinity); // -> false

// 인수가 NaN으로 평가되는 값이라면 false를 반환한다.
isFinite(NaN);     // -> false
isFinite('Hello'); // -> false
// ------------------------------------------
isNaN(true); // false: true → 1
isNaN(null); // false: null → 0
isNaN(undefined); // true
isNaN(new Date()); // false: new Date() => Number
// ------------------------------------------
// 공백으로 구분된 문자열은 첫 번째 문자열만 변환한다.
parseFloat('34 45 66'); // -> 34
parseFloat('40 years'); // -> 40
parseFloat('He was 40'); // -> NaN
// ------------------------------------------
parseInt('10.123'); // -> 10
parseInt('10', 2); // -> 2: 2진수를 10진수로
parseInt('110', 2); // -> 6
parseInt('20', 2); // -> NaN
// ------------------------------------------
const x = 15;
// 10진수 15를 2진수로 변환하여 그 결과를 문자열로 반환한다.
x.toString(2); // '1111'
Number(15).toString(2); // '1111'
// ------------------------------------------
const uri = 'https://www.google.com/search?q=오늘은+뭐먹지';
// URI를 전달받아 이스케이프 처리를 위해 인코딩한다.
const enc = encodeURI(uri);
console.log(enc);
const dec = decodeURI(enc);
console.log(dec);

const uriComp = 'search?q=오늘은+뭐먹지';
let enc = encodeURIComponent(uriComp);
console.log(enc);
let dec = decodeURIComponent(enc);
console.log(dec);

전역 객체의 프로퍼티는 호이스팅이 되지 않는다.

// 전역 변수 x는 호이스팅이 발생한다.
console.log(x); // undefined
// 전역 변수가 아니라 단지 전역 객체의 프로퍼티인 y는 호이스팅이 발생하지 않는다.
console.log(y); // ReferenceError: y is not defined

var x = 10; 

function foo () {
  y = 20; // window.y = 20;
}
foo();

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

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

foo(); // 30

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

delete x; // 전역 변수는 삭제되지 않는다.
delete y; // 프로퍼티는 삭제된다.

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