🚦 본론

자바스크립트 객체의 분류

자바스크립트의 객체는 크게 3가지로 분류된다고 해요!

뭔가 헉! 할수도 있는데, 걱정 마세요. 우리 이미 다 개발하다가 마주한 친구들이에요. 😉

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

가 그 주인공인데요!
사용자 정의 객체는 우리가 직접 정의한 객체이니, 위의 2가지만 탐색해볼까요~? 💪🏻

표준 빌트인 객체

우리 빌트인 가구가 뭐죠? 이미 건물에 내장된 가구죠?
마찬가지로, 객체도 이미 내장된 객체가 있다! 이거에요 :)

이런 것이 가능한 이유는, ECMAScript 덕분이에요.
ECMAScript가 각 엔진에 대해 이러한 빌트인 객체에 대한 사양을 이미 정의해놨기 때문에, 마치 표준처럼 이용할 수 있는 거죠!

이러한 표준 빌트인 객체는 이미 전역 객체의 프로퍼티로 인정되었기 때문에, 전역 변수처럼 편하게 이용하면 된답니다! 🥰

그러니까, 이 파트는 이미 내장된 객체들을 탐색하자는 의미인 것 같군요!

대표적으로 다음과 같은 친구들이 있어요.
Object String Number Boolean Symbol Date Math RegExp Array Map/Set WeakMap WeakSet Function Promise Proxy Reflect JSON Error

음... 굳이 예제는 보지 않더라도, 뻔한 것들이니 생략하도록 하죠. 🙆🏻

Proxy와 Reflect가 구미가 당기네요. 나중에 이는 블로그 글로 한 번 써보려 합니다!

호스트 객체

음... 이 친구는 뭐라고 할까요. 엔진에 내장되어 있지는 않은데, 환경에 의존하는 객체라고 할까요?

대표적으로 Window와 Global 객체가 있을 수 있겠어요.
Window는 Node 환경에서 동작하지 않지만, Browser 환경에서는 동작하는 것처럼 말이지요!
(이는 가끔, SPA를 SSR로 웹에서 동작시킬 때 나오는 대표적인 오류기도 합니다!)

이 친구들은, ECMAScript에 정의되어 있지 않아요. 따라서 항상 우리는 실행 환경을 꼭 살펴보고, 사용할 수 있는 객체인지 고려해야 한다는 점! 유념해야겠어요! 🙇🏻‍♂️

원시값과 래퍼 객체

이건 정말 많은 친구들이 궁금한 주제인 것 같아요.

😮 왜 내 값은... 프로퍼티와 메서드를 갖고 있지?!
"123".length // 3

저도 이에 대한 이 책의 내용을 보니, 반쪽만 알고 있더라구요.

책에 따르면, 원시값은 객체로 사용할 때, 자바스크립트 엔진이 빌트인 객체를 mapping하여, 해당 객체의 프로퍼티나 메서드를 사용할 수 있게 해준다고 하네요!

그리고 이러한 객체는 호출한 이후에 사라지고, 다시 원시값으로 되돌려준다고 합니다.
이러한 임시적으로 생성되는 객체를 래퍼 객체라고 부른다고 하네요. 이러한 래퍼 객체들은 원시값으로 되돌린 이후 가비지 컬렉션의 대상이 됩니다!

사실 저는, 추상연산에 의해 constructor에 의해 영향을 받아 프로토타입 프로퍼티처럼 상속 받는 것만 알고 있었어요.
그런데 이는 확실히 답변이 될 수 없는 게, 그렇다면 객체로 표현되어야 하는데 왜 원시 값으로 결국에 생성되는지를 설명할 수 없더라구요.

이에 대한 답변은, 결국 "래퍼 객체에서 호출 후 원시값으로 되돌리는 과정을 거친다"가 되겠군요! 🥰

전역 객체

최상위 객체이자 호스트 객체이군요!

브라우저에서는 Window, Node.js에서는 Global이 이 전역 객체 파트의 주인공입니다!
쉽게 말하자면, 코드의 전반적인 실행 환경을 조성해주는 객체라고 보면 되겠어요.

이해를 돕기 위해 좀 더 설명해볼까요?
Node.js에서는 모듈을 많이 합치기 때문에, require을 지원해주는데, Browser에는 없습니다.
마찬가지로 fetch 등 서버 통신에 관한 함수가 Node.js에서는 없죠.

결국, 각자가 추구하는 특성에 맞게 태어나고, 진화한 것이죠!
그것이 환경마다 객체가 다른 이유입니다 🥰

대안 - globalThis

대신 이러한 전역 객체가 큰 혼동을 줄 수 있겠죠?
따라서 globalThis라는 친구가 ECMAScript11에 도입되었어요 :)

// Window
globalThis === this;
globalThis === window;
globalThis === self; // self는 웹 워커에서의 전역 객체입니다!
globalThis === frames; // 각 창들의 각 자식 프레임들의 목록을 의미한다고 합니다!

// Node.js
globalThis === global; // true

오, 저도 이거 처음 알았는데, 굉장히 자주 쓸 거 같아요! 🙆🏻

빌트인 전역 프로퍼티

• Infinity: 무한대를 의미하며, number 타입이에요.
• NaN: Not-a-Number을 의미하며, number 타입이에요.
• undefined: undefined 역시 전역 프로퍼티라고 하네요! 값은 역시 undefined입니다 :)

빌트인 전역 함수

• eval: 보안상 좋지 않고, 느려서 쓰지 않을 것을 권장해요! 코드를 인자로 받아서, 이를 런타임에 실행시킵니다 :)
• isFinite: 값이 유한한지를 확인할 수 있어요! 만약 number 타입으로 암묵적 변환이 되지 않는다면 false를 반환합니다! boolean 타입을 반환해요.
• isNaN: 값이 NaN인지를 판단하는 거죠! boolean 타입을 반환해요.
• parseInt, parseFloat: 문자열 인수를 정수, 실수인 number 타입으로 반환해요. 만약 변환할 수 없다면 NaN을 반환해요.
• encodeURI / decodeURI: 완전한 URI를 문자열로 받아서, 이스케이프 처리를 위해 인코딩/디코딩해줘요. (실제로 주소 처리할 때 써봤었네요.)
• encodeURIComponent / decodeURIComponent: 이 역시 써봤는데, =, &, ?등의 문자들은 사실 쿼리스트링의 구분자로 사용해요. 이들 역시 모두 인코딩/디코딩함으로써 오류가 발생하지 않도록 하는 겁니다!
  `

암묵적 전역

20장 때 우리 배웠죠?
선언하지 않았는데, 전역 프로퍼티로 할당되어 마치 전역 변수처럼 되는 친구들이에요!

따라서 꼭 예약어를 통해서 호출해주세요 🥰

🌈마치며

어휴, 뭔가 간단한 파트였는데, 제게는 간단하지 않았네요.
마치 절친의 정체를 알게 되는 때의 충격이라고 할까요? 뭔가 몰랐던 세세한 내용을 알고 나니, 자바스크립트의 원리를 좀 더 이해하게 된 것 같네요.

특히 래퍼 객체 쪽은 정말 인상이 깊었고, globalThis는 생각보다 정말 많이 쓸 여지가 있네요!

그럼, 다들 즐거운 공부하시길 바라며. 이상! 🌈