[JS] 래퍼 객체(warpper object)

 

let str = "abcde"

console.log(str.length)  //5

 

 

 

str.length라는 표현식을 뜯어보자.

 

  .  은 프로퍼티 참조 연산자라고 한다.

 

이   .   앞에는 객체를 가리키는 식별자가 와야하고, 뒤에는 프로퍼티 이름이 와야한다.

 

그런데 str은 문자열 타입으로 원시 타입이다. 그렇다면 어떻게 이와같은 것이 가능한 것일까?

 

이에 대해 알기 위해서 래퍼 객체에 대해서 알아보자.

 

 

 

 

래퍼 객체

---

래퍼 객체란 이름처럼 원시 타입의 값을 감싸는 형태의 객체이다. 

number, string, boolean, symbol 데이터 타입에 각각 대응하는 Number, String, Boolean, Symbol이 제공된다.

 

자바스크립트의 문자열은 원시 타입으로 존재한다.

 

우리가 문자열의 프로퍼티에 접근하려고 할 때(위의 str.length 예제처럼) 자바스크립트는 new String을 호출한 것처럼 문자열 값을 객체로 변환한다.

이 객체를 래퍼 객체라고 한다. 래퍼 객체는 프로퍼티를 참조할 때 생성되며 프로퍼티 참조가 끝나면 사라진다.

 

 

let str = 'abcde';
str.len = 5; // new String(str).len = 5

console.log(str.len); // undefined

console.log(new String(str) === new String(str)) // false

두번째 줄에서 str.len에 5의 값을 할당했다. 하지만 console.log를 찍으면 undefined라고 출력된다. 

그 이유는 console.log안에 있는 str.len역시 new String(str).len이기 때문에 즉, 서로 다른 객체를 참조하고 있기 때문이다. 

 

숫자와 불리언 타입도 문자열과 같은 방식으로 동작한다.

 

 

변수의 프로퍼티에 접근할 때 래퍼 객체가 임시로 생성된다. 프로퍼티의 값을 할당하는 것은 임시로 생성된 래퍼 객체에서 수행되며 지속되지 않는다. 이 때문에 원시 타입의 프로퍼티(실제로는 래퍼 객체의 프로퍼티)가 마치 읽기 전용 값처럼 존재하는 것이다.

 

 

 

 

 

 

 

또한 String()은 생성자 함수로서 사용할 수도 그냥 함수로도 사용 할 수도 있다.(Number(), Boolean()도 사용가능)

 

let num = 1557

console.log(String(num)) // 함수로 사용시 =>  리턴값으로 문자열 '1557'이 출력

console.log(String(num) === new String(num)) //String === Object이기 때문에 false

 

 

 

 

 

 

reference:

https://velog.io/@kim-jaemin420/Wrapper-Object%EB%9E%98%ED%8D%BC-%EA%B0%9D%EC%B2%B4-jyt19oms