[모던 자바스크립트 Deep Dive] - 21 빌트인 객체

// String 생성자 함수에 의한 String 객체 생성 const strObj = new String('Lee'); // String {"Lee"} console.log(typeof strObj); // object // Number 생성자 함수에 의한 Number 객체 생성 const numObj = new Number(123); // Number {123} console.log(typeof numObj); // object // Boolean 생성자 함수에 의한 Boolean 객체 생성 const boolObj= new Boolean(true); // Boolean {true} console.log(typeof boolObj); // object // Function 생성자 함수에 의한 Function 객체(함수) 생성 const func = new Function('x', 'return x * x'); // ƒ anonymous(x ) console.log(typeof func); // function // Array 생성자 함수에 의한 Array 객체(배열) 생성 const arr = new Array(1, 2, 3); // (3) [1, 2, 3] console.log(typeof arr); // object // RegExp 생성자 함수에 의한 RegExp 객체(정규 표현식) 생성 const regExp = new RegExp(/ab+c/i); // /ab+c/i console.log(typeof regExp); // object // Date 생성자 함수에 의한 Date 객체 생성 const date = new Date(); // Fri May 08 2020 10:43:25 GMT+0900 (대한민국 표준시) console.log(typeof date); // object

// String 생성자 함수에 의한 String 객체 생성 const strObj = new String('Lee'); // String {"Lee"} // String 생성자 함수를 통해 생성한 strObj 객체의 프로토타입은 String.prototype이다. console.log(Object.getPrototypeOf(strObj) === String.prototype); // true

// Number 생성자 함수에 의한 Number 객체 생성 const numObj = new Number(1.5); // Number {1.5} // toFixed는 Number.prototype의 프로토타입 메서드다. // Number.prototype.toFixed는 소수점 자리를 반올림하여 문자열로 반환한다. console.log(numObj.toFixed()); // 2 // isInteger는 Number의 정적 메서드다. // Number.isInteger는 인수가 정수(integer)인지 검사하여 그 결과를 Boolean으로 반환한다. console.log(Number.isInteger(0.5)); // false

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

const str = 'hi'; // 원시 타입인 문자열이 래퍼 객체인 String 인스턴스로 변환된다. console.log(str.length); // 2 console.log(str.toUpperCase()); // HI // 래퍼 객체로 프로퍼티에 접근하거나 메서드를 호출한 후, 다시 원시값으로 되돌린다. console.log(typeof str); // string

// ① 식별자 str은 문자열을 값으로 가지고 있다. const str = 'hello'; // ② 식별자 str은 암묵적으로 생성된 래퍼 객체를 가리킨다. // 식별자 str의 값 'hello'는 래퍼 객체의 [[StringData]] 내부 슬롯에 할당된다. // 래퍼 객체에 name 프로퍼티가 동적 추가된다. str.name = 'Lee'; // ③ 식별자 str은 다시 원래의 문자열, 즉 래퍼 객체의 [[StringData]] 내부 슬롯에 할당된 원시값을 갖는다. // 이때 ②에서 생성된 래퍼 객체는 아무도 참조하지 않는 상태이므로 가비지 컬렉션의 대상이 된다. // ④ 식별자 str은 새롭게 암묵적으로 생성된(②에서 생성된 래퍼 객체와는 다른) 래퍼 객체를 가리킨다. // 새롭게 생성된 래퍼 객체에는 name 프로퍼티가 존재하지 않는다. console.log(str.name); // undefined // ⑤ 식별자 str은 다시 원래의 문자열, 즉 래퍼 객체의 [[StringData]] 내부 슬롯에 할당된 원시값을 갖는다. // 이때 ④에서 생성된 래퍼 객체는 아무도 참조하지 않는 상태이므로 가비지 컬렉션의 대상이 된다. console.log(typeof str, str);

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

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

// 전역 프로퍼티는 window를 생략하고 참조할 수 있다. console.log(window.Infinity === Infinity); // true // 양의 무한대 console.log(3/0); // Infinity // 음의 무한대 console.log(-3/0); // -Infinity // Infinity는 숫자값이다. console.log(typeof Infinity); // number

console.log(window.NaN); // NaN console.log(Number('xyz')); // NaN console.log(1 * 'string'); // NaN console.log(typeof NaN); // number

console.log(window.undefined); // undefined var foo; console.log(foo); // undefined console.log(typeof undefined); // undefined

// 표현식인 문 eval('1 + 2;'); // -> 3 // 표현식이 아닌 문 eval('var x = 5;'); // -> undefined // eval 함수에 의해 런타임에 변수 선언문이 실행되어 x 변수가 선언되었다. console.log(x); // 5 // 객체 리터럴은 반드시 괄호로 둘러싼다. const o = eval('({ a: 1 })'); console.log(o); // {a: 1} // 함수 리터럴은 반드시 괄호로 둘러싼다. const f = eval('(function() { return 1; })'); console.log(f()); // 1

// 인수가 유한수이면 true를 반환한다. isFinite(0); // -> true isFinite(2e64); // -> 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 isFinite('2005/12/12'); // -> false

// 숫자 isNaN(NaN); // -> true isNaN(10); // -> false // 문자열 isNaN('blabla'); // -> true: 'blabla' => NaN isNaN('10'); // -> false: '10' => 10 isNaN('10.12'); // -> false: '10.12' => 10.12 isNaN(''); // -> false: '' => 0 isNaN(' '); // -> false: ' ' => 0 // 불리언 isNaN(true); // -> false: true → 1 isNaN(null); // -> false: null → 0 // undefined isNaN(undefined); // -> true: undefined => NaN // 객체 isNaN({}); // -> true: {} => NaN // date isNaN(new Date()); // -> false: new Date() => Number isNaN(new Date().toString()); // -> true: String => NaN

// 문자열을 실수로 해석하여 반환한다. parseFloat('3.14'); // -> 3.14 parseFloat('10.00'); // -> 10 // 공백으로 구분된 문자열은 첫 번째 문자열만 변환한다. parseFloat('34 45 66'); // -> 34 parseFloat('40 years'); // -> 40 // 첫 번째 문자열을 숫자로 변환할 수 없다면 NaN을 반환한다. parseFloat('He was 40'); // -> NaN // 앞뒤 공백은 무시된다. parseFloat(' 60 '); // -> 60

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

// 완전한 URI const uri = 'http://example.com?name=이웅모&job=programmer&teacher'; // encodeURI 함수는 완전한 URI를 전달받아 이스케이프 처리를 위해 인코딩한다. const enc = encodeURI(uri); console.log(enc); // http://example.com?name=%EC%9D%B4%EC%9B%85%EB%AA%A8&job=programmer&teacher // decodeURI 함수는 인코딩된 완전한 URI를 전달받아 이스케이프 처리 이전으로 디코딩한다. const dec = decodeURI(enc); console.log(dec); // http://example.com?name=이웅모&job=programmer&teacher

// URI의 쿼리 스트링 const uriComp = 'name=이웅모&job=programmer&teacher'; // encodeURIComponent 함수는 인수로 전달받은 문자열을 URI의 구성요소인 쿼리 스트링의 일부로 간주한다. // 따라서 쿼리 스트링 구분자로 사용되는 =, ?, &까지 인코딩한다. let enc = encodeURIComponent(uriComp); console.log(enc); // name%3D%EC%9D%B4%EC%9B%85%EB%AA%A8%26job%3Dprogrammer%26teacher let dec = decodeURIComponent(enc); console.log(dec); // 이웅모&job=programmer&teacher // encodeURI 함수는 인수로 전달받은 문자열을 완전한 URI로 간주한다. // 따라서 쿼리 스트링 구분자로 사용되는 =, ?, &를 인코딩하지 않는다. enc = encodeURI(uriComp); console.log(enc); // name=%EC%9D%B4%EC%9B%85%EB%AA%A8&job=programmer&teacher dec = decodeURI(enc); console.log(dec); // name=이웅모&job=programmer&teacher

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