자바스크립트 객체의 분류

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

• 표준 빌트인 객체
• 호스트 객체
• 사용자 정의 객체

표준 빌트인 객체

자바스크립트는 Object, String, Number, Boolean, Date 등
40여 개의 표준 빌트인 객체를 제공한다.

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

// Date 생성자 함수에 의해 생성된 Date 객체 생성
const date = new Date(); // Thu May 18 2023 22:03:24 GMT+0900 (한국 표준시)
console.log(typeof date); // Object

---

const strObj = new String('lee'); //strObj 객체의 프로토타입은 String.prototype

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

생성자 함수인 표준 빌트인 객체가 생성한 인스턴스의 프로토타입 프로퍼티는
표준 빌트인 객체의 프로토타입 이다.

또한 표준 빌트인 객체 prototype 프로퍼티에 바인딩된 객체는 다양한 기능의 프로토타입 메서드를 제공하며 인스턴스가 없어도 정적 메서드를 제공한다.

const numbObj = new Number(1.5);


// toFixed는 Number.prototype의 프로토타입 메서드다.
// toFixed > 소수점 자리를 반올림하여 문자열로 반환.
console.log(numObj.toFixed()); // 2

원시값과 래퍼 객체

문자열, 숫자 등 원시값이 있는데도 string, number등의 표준 빌트인 생성자 함수가 존재하는 이유가 있는데 그 이유는 아래와 같다.

원시값은 객체가 아니므로 프로퍼티 및 메서드를 가질순 없지만,
객체처럼 마침표 표기법으로 접근할시 자바스크립트 엔진이 일시적으로 원시값을 객체로 변환 해주기 때문이다.
이때 자바스크립트 엔진은 암묵적으로 연관된 객체를 생성 후
생성된 객체 프로퍼티에 접근하거나 메서드를 호출하고 다시 원시값으로 되돌린다

이때 생성되는 임시 객체를 "래퍼 객체" 라고 한다.

문자열에 마침표 표기법으로 접근 시 래퍼 객체인 String 생성자 함수의 인스턴가 생성 되고
문자열은 래퍼 객체의 [[StringData]] 내부 슬롯에 할당되고 해당 생성자 함수에 의해 생성된
인스턴스는 String.prototype의 메서드를 상속 받아 사용할 수 있다.

const str = 'hello';

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

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

그 후 래퍼 객체의 처리가 종료되면 래퍼 객체의 [[StringData]] 내부 슬롯에 할당된 원시값으로 원래의 상태, (식별자가 원시값을 갖도록 되돌림) 그 이후 래퍼 객체는 가비지 컬렉션의 대상이 된다.

// 1. 식별자 str은 문자열인 hello 값을 가지고 있음
const str = 'hello';

// 2. 식별자 str은 암묵적으로 생성된 래퍼 객체를 가리키고
// str 식별자에 할당된 문자열 'hello'값은 래퍼 객체의 [[StringData]] 내부 슬롯에 할당된다.
// 래퍼 객체에 name 프로퍼티 동적 추가.
str.name = 'Lee';

// 3. 식별자 str은 다시 원래의 문자열인 래퍼 객체의 [[StringData]] 내부 슬롯에 할당된 원시값을 갖는다.
// 이때 2에서 생성된 래퍼 객체는 아무도 참조하지 않으므로 가비지 컬렉션 대상이 된다.


// 4. 식별자 str은 새롭게 암묵적으로 생성된(2에서 생성된 래퍼 객체가 아닌) 다른 객체를 가리킨다.
// 새럽게 생성된 래퍼 객체에는 name 프로퍼티가 존재하지 않는다.
console.log(str.name); // undefined

참고로 원시값중 null, undefined는 래퍼 객체를 생성하지 않으므로
객체처럼 사용시 에러가 발생하니 참고하자.

전역 객체

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

자바스크립트 환경에 따라 전역 객체는 지칭하는 이름이 제각각 이다

• 브라우저 환경 > window(또는 self, this, frames)
• Node.js 환경 > global

또한 전역 객체의 특징은 아래와 같다.

• 전역 객체는 개발자가 의도적으로 생성할 수 없으며 생성할 수 있는 생성자 함수가 제공되지 않음
• 전약 객체의 프로퍼티를 참조할 때 window(또는 global)을 생략할 수 있음

var test = 1;
console.log(window.test) // 1
console.log(test) // 1

// let or const 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아니다.
// 두 키워드는 보이지 않는 개념적인 블록(전역 렉시컬 환경의 선언적 환경 레코드) 내에 존재한다.
let foo = 123;
console.log(window.foo) // undefined

전역 객체는 몇 가지의 프로퍼티와 메서드를 가지고 있으며
window나 global을 생략하여 참조 및 호출이 가능하고 전역 변수 및 전역 함수처럼 사용할 수 있다.

빌트인 전역 프로퍼티

프로퍼티	설명
Infinity	무한대를 나타내는 숫자값 Infinity 갖는다.
NaN	숫자가 아님을 나타냄 (Not a Number)
Undefined	원시 타입 undefined를 값으로 갖는다.

빌트인 전역 함수

함수	설명
eval	자바스크립트 코드를 나타내는 문자열을 인수로 전달받는다.
isFinite	전달받은 인수가 정상적인 유한수 및 무한수인지 검사한다.
isNaN	전달받은 인수가 NaN인지 검사하여 그 결과를 불리언 타입으로 반환한다.
parseFloat	전달받은 문자열 인수를 부동 소수점 숫자인 실수로 해석하여 반환한다.
parseInt	전달받은 문자열 인수를 정수로 해석하여 반환한다.
encodeURI	완전한 URI를 문자열로 전달받아 이스케이프 처리를 위해 인코딩 한다.
decodeURI	인코딩된 URI를 인수로 전달받아 이스케이프 처리 이전으로 디코딩 한다.
encodeURIComponent	URI 구성 요소를 인수로 전달받아 인코딩 한다.
decodeURIComponent	매개변수로 전달된 URI 구성 요소를 디코딩 한다.