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

이름	정의	예시
표준 빌트인 객체	ECMAScript 표준에 정의된 객체로, 자바스크립트에서 기본적으로 제공	예시: Array, String, Date
호스트 객체	웹 브라우저나 Node.js 등 실행 환경에서 제공하는 객체로, 표준 빌트인 객체와 환경에 따라 다름	예시: 브라우저 환경에선 DOM , BOM , Canvas .. , Nodejs 환경에선 Node.js 고유 API 를 객체로 제공한다.
사용자 정의 객체	개발자가 직접 정의한 객체로, 필요에 따라 속성과 메서드를 가짐	예시: let person = { name: 'John', age: 30 };

표준 빌트인 객체

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

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

생성자 함수 객체인 표준 빌트인 객체는 프로토타입 메소드와 정적 메소드를 제공하고 생성자 함수 객체가 아닌 표준 빌트인 객체는 정적 메소드만 제공한다.

생성자 함수 객체가 아닌 경우엔 프로토타입 객체가 존재 할 필요가 없다.

생성자 함수인 표준 빌트인 객체로 생성한 인스턴스는 해당 빌트인 객체의 프로토타입과 바인딩 된 객체이다.

저번 정리 때 아주 징하게 했다. 객체 리터럴이 되었건 생성자 함수를 이용했건 결국 표준 빌트인 생성자 함수였던 Object 의 프로토타입을 상속 받았다.

또한 인스턴스 없이도 호출 가능한 정적 메소드 를 제공한다.

const obj = { firstName: 'lee' };

// 표준 빌트인 객체의 프로토타입 메소드
console.log(obj.hasOwnProperty('lastName')); // false

// 표준 빌트인 객체의 정적 메소드
Object.defineProperty(obj, 'lastName', {
  value: 'dongdong',
  enumerable: true,
});

console.log(obj); // { firstName: 'lee', lastName: 'dongdong' }

원시값과 원시 랩퍼

문자열이나 숫자, 불리언 등의 원시값이 있는데도 문자열,숫자, 불리언 객체를 생성하는 String , Number , Boolean 등의 표준 빌트인 생성자 함수가 필요한 이유가 뭘까 ?

const myName = 'leeDongDong';
console.log(myName.toUpperCase()); // LEEDONGDONG

leeDongDong 이란 문자열은 결국 문자 리터럴로 작성된 문자 원시값이다.

myName이란 객체는 그런 문자 리터럴을 가리키고 있는 식별자이다.

그럼에도 우린 마치 myName 식별자가 프로토타입을 가지고 있는 인스턴스처럼 toUpperCase 를 사용하는 것이 가능하다.

이는 마치 원시값을 가리키고 있는 식별자에 . 과 함께 접근하면 마치 인스턴스의 프로퍼티를 사용하려 하는 것으로 간주하여

자바스크립트 엔진 측에서 myName이 담고 있는 원시값을 생성자 함수로 생성한 연관된 객체를 생성하여 프로퍼티에 접근하거나 메소드를 호출하고 다시 원시값으로 돌린다.

const myName = 'leeDongDong';
// 1. 현재 myName 은 leeDongDong 이란 문자 리터럴을 가리키는 식별자
// . 을 찍는 순간 자바스크립트 엔진은 표준 빌트인 객체로 생성한 객체를 암묵적으로 만든다.
const StringData = new String('leeDongDong');
// 내가 만약 myName.toUpperCase 를 실행시켰다면 myName 에서 실행하는 것이 아닌
console.log(StringData.toUpperCase()); // 을 실행시키는 것과 같다.
//  2. 메소드 접근이 끝나면 임의의 객체가 가리키는 값은 undefined 로 변경되고 가비지 컬렉터에 의해 제거됨
//  3. myName 은 여전히 `leeDongDong` 이란 문자 리터럴을 가리키고 있다. 

이렇게 생성되는 임시 객체는 내부 슬롯인 [[StringData]] 에 할당된다.

이렇게 생성되는 임시 객체를 래퍼 객체(wrapper object) 라고 한다.

임시 객체는 new String() 으로 생성되었기 때문에 String 의 프로토타입을 상속 받는다.

const myName = 'leeDongDong';
myName.lastName = 'guriguri';
console.log(myName); // leeDongDong
console.log(myName.lastName); // undefined

다음처럼 원시값을 가리키는 식별자에 lastName 이란 프로퍼티에 guriguri 를 할당해주어도

기존 myName 에는 변화가 없다.

그 이유는 . 가 찍힌 후 프로퍼티를 할당한 객체는 myName 이 아니라 . 이 찍히는 순간 생성된 래퍼 객체 이기 때문이다.

래퍼 객체는 잠시나마 lastName 을 가졌었겠지만 나중에 가비지 컬렉터에 의해서 사라진다 컥

따라서 이러한 이유로 변수를 설정 할 때 표준 빌트인 함수의 프로토타입 메소드를 사용하기 위해 생성자 함수와 함께 생성 할 필요가 없다.

어차피 래퍼 객체가 해주니까 말이다.

const myName = new String('leedongdong');
const myName2 = 'leedongdong';

이렇게 보아도 문자 원시값 형태로 할당하는게 훨씬 보기 좋다.

전역 객체

전역 객체는 코드가 실행 되기 이전 단계에 자바스크립트 엔진에 의해 어떤 객체보다 먼저 생성되는 특수한 객체이다.

또한 어떤 객체의 프로토타입 체인 밑에도 속하지 않는 최상위 객체이다.

브라우저 환경에선 window , Node.Js 환경에선 global이 전역 객체를 가리킨다.

global 은 ES11 이후엔 globalThis 식별자를 이용해 사용 할 수도 있다.
ES11 이후부턴 globalThis 로 통일되었으니 이것을 쓰도록 하자

전역 객체는 표준 빌트인 객체 (Object , Nubmer , Array ... ) 와 환경에 따른 호스트 객체 (Web API or Host API) , 그리고 var 키워드로 선언한 전역 변수와 전역 함수를 프로퍼티로 갖는다.

특징

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

2. 전역객체의 프로퍼티를 참조 할 때 window 혹은 global 을 생략 할 수 있다.

console.log(globalThis.parseInt('F', 16)); // 15
console.log(parseInt('F', 16)); // 15

전역 메소드인 parseInt (문자열을 우항에 있는 비트의 이진수로 변경 후 정수 타입으로 반환) 또한

사실은 전역 객체의 프로퍼티이다.

3. 실행 환경에 따라 추가적으로 프로퍼티와 메소드를 갖는다.

4. var 키워드로 선언한 전역 변수와 선언하지 않은 변수의 값을 할당한 암묵적 전역 , 전역 함수는 전역 객체의 프로퍼티가 된다.

전역 함수도 마찬가지이다.

5. let , const 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아닌, 보이지 않는 개념적인 블록 내에 존재하게 된다. (전역 렉시컬 환경의 선언적 환경 레코드)

6. 브라우저 환경의 모든 자바스크립트 코드는 하나의 전역 객체 window 를 공유한다. 그렇기 때문에 2~3개 이상의 자바스크립트 파일이나 script 태그를 통해 분리된 공간에서 생성된 전역 객체 or 전역 함수는 모두 웹 브라우저의 window 전역 객체에 할당된다.

빌트인 프로퍼티

Property	Description	Example
undefined	전역 스코프에서 undefined 값을 가리키는 속성	console.log(undefined === window.undefined); // true
NaN	숫자가 아님을 나타내는 속성	console.log(NaN === window.NaN); // true
Infinity	양의 무한대를 나타내는 속성	console.log(Infinity === window.Infinity); // true
null	객체가 존재하지 않음을 나타내는 속성	console.log(null === window.null); // true
globalThis	현재 실행 중인 환경의 전역 객체를 참조하는 속성	console.log(globalThis === window); // 브라우저에서 true

빌트인 전역 함수

Function	Description	Example
parseInt()	문자열을 정수로 변환	parseInt("123.45") 결과: 123
parseFloat()	문자열을 부동 소수점 숫자로 변환	parseFloat("123.45") 결과: 123.45
isNaN()	값이 NaN인지 여부 판별	isNaN("hello") 결과: true
isFinite()	값이 유한한 숫자인지 여부 판별	isFinite(123) 결과: true
eval()	문자열로 표현된 JavaScript 코드 실행	eval("2 + 2") 결과: 4
decodeURI()	URI 디코딩	decodeURI("https://example.com/?name=John%20Doe") 결과: https://example.com/?name=John Doe
encodeURI()	URI 인코딩	encodeURI("https://example.com/?name=John Doe") 결과: https://example.com/?name=John%20Doe

암묵적 전역

다음 코드를 봐보자

var x = 10;

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

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

엥 함수 안에 있으면 스코프가 함수 내부에만 존재해서 종결나면 끝 아닌가요 ?

라고 생각했었으나 , 그것은 함수 레벨 스코프를 갖는 var 을 이용했을 때의 이야기다.

만약 어떤 선언문도 없이 y = 20 으로 하게되면 자바스크립트 엔진은 window.y or global.y 로 해석하여

함수 밖에 존재하는 전역 함수에 값을 저장한다.

var x = 10;

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

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

var 을 사용하면 당연히 y 를 못찾는다.

이처럼 선언문 없이 선언된 변수를 전역 변수처럼 사용하는 것을 암묵적 전역 이라고 한다.

엥 그러면 암묵적 전역도 호이스팅 되나요 ?

안됩니다

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

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

호이스팅은 자바스크립트 엔진이 선언문이 있는 코드를 먼저 실행시켜 변수 선언 , 초기화가 코드 실행 전 일어나는 것이라고 했다.

var : 선언과 초기화가 호이스팅
let , const : 선언만 호이스팅

암묵적 전역 할당은 호이스팅 되지 않는다. 선언문이 없으니까 ~!!