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

javaScript/J Query & 스크립트

mooyou 2022. 3. 16. 20:57

728x90

SMALL

래퍼 객체(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)이 존재한다.

예시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)는 아래와 같이 존재한다.

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

예시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로 나타난다.

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

728x90

LIST