원시값과 래퍼객체

문자열, 숫자, 불리언 값에 대해 객체처럼 접근하면 생성되는 임시 객체를 래퍼객체(wrapper object)라 한다.

💡 원시값인 문자열, 숫자, 불리언 값의 경우 이들 원시값에 대해 마치 객체처럼 마침표 표기법(또는 대괄호 표기법)으로 접근하면 자바스크립트 엔진이 일시적으로 원시값을 연관된 객체로 변환해 준다.

💡 연관된 객체를 생성하여 생성된 객체로 프로퍼티에 접근하거나 메서드를 호출하고 다시 원시값으로 되돌린다.

ex

👾# 문자열 래퍼객체로 변환

const str = 'hi';
console.log(str.length); // 2
console.log(str.toUpperCase()); // HI

👉🏻 문자열 래퍼 객체인 String 생성자 함수의 인스턴스 String.prototype의 메서드를 상속받아 사용할 수 있음!

👾# 원시값 문자열로 변환

const str = 'hi';
console.log(str.length); // 2

console.log(typeof str); // string

👉🏻 래퍼 객체로 프로퍼티에 접근하거나 메서드 호출 후, 다시 원시값으로 되돌린다!!
👉🏻 이때 래퍼 객체는 가비지 컬렉션의 대상이 된다.

👾# 래퍼 객체에 동적으로 프로퍼티 추가

const str = 'hi';
str.name = 'zooyaho'; // error 안남 1️⃣
console.log(str.name); // undefined 2️⃣

👉🏻 1️⃣ 래퍼 객체에 동적으로 프로퍼티 추가 후 식별자 str은 다시 원래의 원시값 문자열로 돌아온다.
👉🏻 1️⃣에서 생성된 래퍼 객체는 아무도 참조하지 않으므로 가비지 컬렉션의 대상이 된다.
👉🏻 2️⃣ 새로운 래퍼객체가 암묵적으로 생성되고 가리키므로 undefined를 반환한다!

[참고] 모던 자바스크립트 Deep Dive