빌트인 객체

1. 자바스크립트 객체의 분류

자바스크립트 객체는 크게 3개의 객체로 분류할 수 있다.

• 표준 빌트인 객체(standard built-in objects, navtive object, global ojbects)

  • ECMAScript 사양에 정의된 객체, 애플리케이션 전역의 공통 기능을 제공
  • 자바스크립트 실행환경과 관계없이 언제나 사용 가능
  • 표준 빌트인 객체는 전역 객체의 프로퍼티로서 제공된다.
  • 별도의 선언없이 전역 변수처럼 언제나 참조할 수 있다.
  • 호스트 객체 (host objects)
  • ECMAScript에 정의되어 있지 않음, 자바스크립트 실행환경에서 추가적으로 제공하는 객체
  • 브라우저 환경에서는 클라이언트 사이드 Web API를 호스트 객체로 제공
  • Node.js 환경에서는 Node.js 고유의 API를 호스트 객체로 제공

• 사용자 정의 객체 (user-defined objects)

  • 기본으로 제공되는 객체가 아닌 사용자가 직접 정의한 객체

2. 표준 빌트인 객체

• 자바스크립트는 Object, String, Number, Boolean, Symbol, Date, Math, REgExp, Array, FUnction 등.. 40 여개의 표준 빌트인 객체를 제공한다.
• 표준 빌트인 객체는 인스턴스를 생성할 수 있는 생성자 함수 객체이다. (Math, Reflect, JSON 제외)
• 생성자 함수 객체인 표준 빌트인 객체는 프로토타입 메소드와 정적 메소드를 제공
• 생성자 함수 객체가 아닌 표준 빌트인 객체는 정적 메소드만을 제공한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

const strObj = new String('jung');
console.log(typeof strObj);   //object
console.log(strObj);    //String {'jung'}

const numObj = new Num(123);
console.log(typeof numObj);   //object
console.log(numObj);    // Number {123}

const boolObj = new Boolean(true);
console.log(typeof boolObj);   //object
cosole.log(boolObj);     //Boolean{true}

const func = new Function('x', 'return x * x');
console.log(typeof func);   //function
console.dir(func);    //     ƒ anonymous( x )

const arr = new Array(1, 2, 3);
console.log(typeof arr);   //object
console.log(arr);    // [1, 2, 3]
``` 
- 생성자 함수인 표준 빌트인 객체가 생성한 인스턴스의 프로토타입은, 표준 빌트인 객체의 prototype 프로퍼티에 바인딩된 객체이다.
- 표준 빌트인 객체인 String을 생성자 함수로서 호출하여 생성한 String 인스턴스의 프로토타입은 String.prototype이다.
```javascript
//String 생성자 함수에 의한 String 객체 생성
const strObj = new String('jung');
console.log(typeof strObj);   // object
console.log(strObj);    //String {'jung'}

console.log(Object.getPrototypeOf(strObj) === String.prototype); //true

표준 빌트인 객체의 prototype 프로퍼티에 바인딩된 객체(String.prototype)는 다양한 기능의 메소드를 제공. 인스턴스 없이도 호출 가능한 정적 메소드도 제공한다.

3. 원시값과 래퍼 객체 (wrapper object)

원시값은 객체가 아니므로 프로퍼티나 메소드를 가질 수 없음에도 불구하고 원시값인 문자열이 마치 객체처럼 동작한다.

1
2
3
4

const str = 'hello';

console.log(str.length);   //5
console.log(str.toUpperCase());  //HELLO

• 표준 빌트인 객체가 제공하는 프로토타입 메소드를 사용하려면 반드시 인스턴스를 생성하고 인스턴스로 프로토타입 메소드를 호출해야한다.
• 위 예제는 원시값으로 표준 빌트인 객체의 프로토타입 메소드를 호출하면 정상적으로 동작한다.
• 이는 원시값인 문자열, 숫자, 불리언 값의 경우 마치 객체처럼 이들 원시값에 대해 마침표 표기법(or 대괄호 표기법)으로 접근하면 자바스크립트 엔진이 일시적으로 원시값을 연관된 객체로 변환해 주기 때문이다.
• 원시값을 객체처럼 사용하면 자바스크립트 엔진은 암묵적으로 연관된 객체를 생성하고 생성된 객체로 프로퍼티에 접근하거나 메소드를 호출하고 다시 원시값으로 되돌린다.
• 문자열, 숫자 불리언 값에 대해 객체처럼 접근하면 생성되는 임시 객체를 래퍼 객체라 한다.
• 래퍼 객체의 처리가 종료되면 래퍼 객체의 [[StringData]] 내부 슬롯에 할당된 원시값을 되돌리고 래퍼 객체는 가비지 컬렉션의 대상이 된다. (number, boolean, Symbol도)

  1 2 3 4 5 6 7 8 9 10

  const str = 'hi'; //원시 타입인 문자열이 -> 래퍼 객체인 String 인스턴스로 변환된다. console.log(str.length); //2 console.log(str.toUpperCase()); //HI //래퍼 객체로 프로퍼티 접근이나 메소드 호출한 후, -> 다시 원시값으로 되돌린다. console.log(typeof str); //string //이 때 문자열 래퍼 객체인 String 생성자 함수의 인스턴스는 String.prototype의 메소드를 상속받아 사용할 수 있다.

1
2
3
4
5
6

const str = 'hello';

str.name = 'jung';  //래퍼 객체에 프로퍼티 추가

// 위 코드의 래퍼 객체가 아닌 새로운 래퍼 객체를 가리킨다.
console.log(str.name);  // undefined

• String, Number, Boolean, Symbol 이외의 원시값은 래퍼 객체를 생성하지 않는다.
• 원시값 null, undefined 래퍼 객체가 없다. 객체처럼 사용하면 에러발생

4. 전역 객체

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

• 자바스크립트 환경에 따라 지칭하는 이름이 다르다.

  • 브라우저 환경 - window, self, this, frames 이 전역 객체를 가리킴
  • Node.js 환경 - global

• 전역 객체는 표준 빌트인 객체들과 환경에 따른 호스트 객체, var 키워드로 선언한 전역 변수와 전역 함수를 프로퍼티로 갖는다.

• 계층적 구조 상 어떤 객체에도 속하지 않은 모든 빌트인 객체의 최상위 객체이다.

• 프로토타입 상속 관계 상에서 최상위 객체라는 의미가 아니다

• 객체의 계층적 구조 상 표준 빌트인 객체와 호스트 객체를 프로퍼티로 소유한다는 것을 말한다.

• 전역 객체의 특징

  • 전역 객체는 개발자가 의도적으로 생성할 수 없다. 전역 객체를 생성할 수 있는 생성자 함수가 제공되지 않는다.
  • 전역 객체의 프로퍼티를 참조할 때 window(global)를 생략할 수 있다.
  • 전역 객체는 모든 표준 빌트인 객체를 프로퍼티로 가지고 있다.
  • 자바스크립트 실행 환경에 따라 추가적으로 프로퍼티와 메소드를 갖는다.
  • 클라이언트 사이드 Web API, Node.js 고유의 API를 호스트 객체로 제공한다.
  • 전역 함수는 전역 객체의 프로퍼티가 된다.
  • var 키워드로 선언한 전역 변수와 선언하지 않는 변수에 값을 할당한 암묵적 전역
  • let , const 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아니다.
  • 브라우저 환경의 모든 자바스크립트 코드는 하나의 전역 객체 window를 공유한다.

    1 2 3 4 5 6 7 8 9 10

    var foo = 1; console.log(window.foo); //1 bar = 2; console.log(window.bar); //2 funciton baz() { return 3; } console.log(window.baz()); //3

• 전역 객체는 몇가지 프로퍼티와 메소드를 가지고 있다. 전역 객체의 프로퍼티와 메소드는 전역 객체를 가리키는 식별자를 생락하여 참조/호출 할 수 있으므로 전역 변수와 전역 함수처럼 사용할 수 있다.

4.1 빌트인 전역 프로퍼티 (Built-in global property)

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

4.1.1 Infinity

Infinity 프로퍼티는 양/음의 무한대를 나타내는 숫자값 Infinity를 갖는다.

1

console.log(window.Infinity === Infinity); //true

4.1.2 NaN

NaN 프로퍼티는 숫자가 아님을 나타내는 숫자값 NaN을 갖는다.
NaN 프로퍼티는 Number.NaN 프로퍼티와 같다.

4.1.3 undifined

undifined 프로퍼티는 원시 타입 undifined를 값으로 갖는다.

4.2 빌트인 전역 함수

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

4.2.1 eval

문자열 형태로 매개변수에 전달된 코드를 런타임에 동적으로 평가하고 실행하여 결과값을 반환한다. 전달된 문자열 코드가 여러 개의 문으로 이루어져 있다면 모든 문을 실행 후 마지막 결과 값을 반환한다.
eval 함수는 런타임에 자신이 호출된 기존의 스코프를 동적으로 수정한다.

4.2.2 isFinite

매개변수에 전달된 값이 정상적인 유한수인지 검사하여 그 결과를 불리언 타입으로 반환한다.
매개변수에 전달된 값이 숫자가 아닌 경우, 숫자로 타입을 변환한 후 검사를 수행한다.

4.2.3 isNaN

매개변수에 전달된 값이 NaN인지 검사하여 그 결과를 불리언 타입으로 반환한다.
매개변수에 전달된 값이 숫자가 아닌 경우, 숫자로 변환한 후 검사를 수행한다.

4.2.4 parseFloat

매개변수에 전달된 문자열을 부동소수점 숫자로 변환하여 반환한다.

4.2.5 parseInt

매개변수에 전달된 문자열을 정수형 숫자로 해석하여 반환한다. 반환값은 언제나 10진수

4.2.6 encodeURI / decodeURI

encodeURI 함수는 매개변수로 전달된 URI(Uniform Resource Identifier)를 인코딩한다. URI는 인터넷에 있는 자원을 나타내는 유일한 주소를 말함
URI의 하위 개념으로 URL, URN이 있다.

• 인코딩이란 URI의 문자들을 이스케이프 처리하는 것을 의미

4.2.7 encodeURIComponent / decodeURIComponent

encodeURIComponent 함수은 매개변수로 전달된 URI(Uniform Resource Identifier) 구성 요소 (component)를 인코딩한다.
decodeURIComponent 함수는 매개변수로 전달된 URI 구성 요소를 디코딩한다.

4.3 암묵적 전역

1
2
3
4
5
6
7
8

var x = 10;

function foo () {
  y = 20;
}
foo();

console.log(x + y);   // 30

foo 함수 내의 y는 선언하지 않은 식별자여서 y = 20이 실행되면 참조 에러가 발생할 것처럼 보인다. 하지만 선언하지 않는 식별자 y는 선언된 전역 변수처럼 동작한다.
선언하지 않은 식별자에 값을 할당하면 전역 객체의 프로퍼티가 되기 때문이다.

foo 함수가 호출되면 자바스크립트 엔진은 변수 y에 값을 할당하기 위해 먼저 스코프체인을 통해 선언된 변수인지 확인한다. foo 함수의 스코프, 전역 스코프 어디에서도 변수 y의 선언을 찾을 수 없으므로 참조에러가 발생햐아한다.
하지만 자바스크립트엔진은 y = 20을 window.y = 20 으로 해석하여 전역 객체에 프로퍼티를 동적 생성한다. y는 전역 객체의 프로퍼티가 되어 마치 전역 변수가 동작한다.
이러한 현상을 암묵적 전역이라 한다.
y는 변수 없이 전역 객체의 프로퍼티로 추가 되었을 뿐, y는 변수가 아니다.
따라서 y는 변수 호이스팅이 발생하지 않는다.
delete 연산자로 삭제할 수 있다. (변수가 아니기 때문) ,
전역 변수는 프로퍼티이지만 delete 연산자로 삭제할 수 없다.

1
2
3
4
5
6
7
8
9
10
11

console.log(x);  undifined

console.log(y); ReferenceError: y is not defined

var x = 10;

funciton foo () {
  y = 20;
}
foo();
console.log( x + y);