자바스크립트 래퍼 객체(Wrapper Object) 이해하기

 

래퍼 객체(Wrapper Object)란?

 

래퍼 객체에 대해 이해하기 전에 객체지향 언어에서의 객체와 원시타입의 차이에 대해서 먼저 짚고 넘어가도록 하자

객체는 프로퍼티와 메서드를 가질 수 있지만 원시 타입은 가질 수 없다.

 

 

예시1 배열객체 프로퍼티와 메서드 접근

예를 들어서 배열 같은 경우는 객체 이기기 때문에 메서드와 프로퍼티가 존재하며 다음 예시 같이 length 프로퍼티와 sort 메서드에 접근할 수 있다.

var data = [1, 2, 3, 4, 5];

console.log(data.length); // 5
console.log(data.sort((a,b)=>a-b)); // [1, 2, 3, 4, 5]

 

그렇다면 객체가 아닌 원시 타입은 어떨까?

 

자바스크립트는 총 6개의 원시 타입(primitive type)이 존재한다.

• String
• number
• boolean
• null
• undefined
• symbol

 

예시2 원시타입에 프로퍼티와 메서드 접근

원시 타입은 객체가 아니기 때문에 프로퍼티와 메서드에 접근할 수 없어야 하지만

다음의 예시를 보면 객체가 아닌 원시 타입도 length프로퍼티와 toUpperCase메서드에 접근할 수 있는 걸 확인할 수 있다.

var str = 'JavaScript';

console.log(str.length); // 10
console.log(str.toUpperCase()); // JAVASCRIPT

 

이게 어떻게 가능한 것인가?

 

아래 예시를 확인해 보자

예시3 원시타입 변수에 프로퍼티 값을 대입

var str = "JavaScript";
str.shorten = "JS"; //str 변수에 shorten 이라는 프로퍼티에 값을 대입

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

문자열과 같은 원시 타입을 객체처럼 사용하여 프로퍼티에 값을 대입했을 경우 가능한 이유는 자바스크립트에서 표준으로 제공하는 임베디드 객체가 임시로 생성이 되기 때문이다. 이 객체를 래퍼 객체라고 한다.

Wrapper라는 이름에서 알 수 있듯이 단순한 값인 기본 원시 데이터를 감싸서 객체로서 동작을 제공하기 위한 객체를 말한다.

이는 임시 객체 이기 때문에 한 번 사용 후에는 소멸하게 된다. 따라서 콘솔로 출력하면 찾을 수 없다는 무구가 뜨게 되는 것이다.

 

 

그래서 위의 예시와 같이 원시 타입에 대응하는 래퍼 객체(Wrapper object)는 아래와 같이 존재한다.

• String
• Number
• Boolean
• Symble

 

만약 생성자를 통해 명시적으로 래퍼 객체를 생성을 해본다면

예시4 생성자를 통해 명시적으로 래퍼 객체 생성

var str1 = new String("JavaScript");
str1.shorten = "JS";

console.log(str1.shorten); //JS

생성자(new 연산자가 붙어있는 호출)를 이용해서 진짜 개별 객체가 만들어지게 되고 콘솔에도 프로퍼티 값이 문제없이 출력하는 걸 확인할 수 있다.

 

그렇다면 JavaScript에서 자동으로 변환된 래퍼 객체와 생성자를 이용한 객체 간의 차이는 무엇일까?

자동으로 변환된 래퍼 객체와 생성자를 이용한 객체 간의 차이

console.log(typeof String('JavaScript'));// string
console.log(typeof new String('JavaScript'));// object

typeof를 이용해서 확인해 보면 금방 알 수 있다.

자동으로 변환된 경우 원시 타입 그대로 string 타입을 나타내지만 생성자를 이용한 경우 object로 나타난다.

그렇기 때문에 굳이 생성자를 호출할 경우 이런 부분들을 고려해서 작업해야 문제가 발생하지 않는다.