Web/[JS] Common

Wrapper Object

ihl 2021. 11. 21. 18:04

1. Access Property of Primitive Type

  JS은 객체(Object) 값(Reference Type)과 그렇지 않은 값(Primiteve Type)으로 나뉜다. 여기서 객체란 key-value로 구성된 프로퍼티들의 정렬되지 않은 집합이라 말할 수 있으며, 이때 value가 함수라면 해당 프로퍼티는 메서드라 부른다. 

 

// primitive Type의 메서드 사용
'abc'.toUpperCase(); // 'ABC'
1 .toString(); // '1'

// primitive Type의 프로퍼티 접근
'123'.length; // 3
1 .x; // undefined

  그런데 JS에선 Primitive Type도 메서드를 사용하거나 프로퍼티에 접근가능하다 이것이 가능한 이유는 Primiteve Type의 프로퍼티에 접근하려 할 때 Wrapper Object라는 임시 객체가 생성되어, 생성된 임시 객체의 프로퍼티에 접근하게 되기 때문이다. 

 

2. Life Cycle

const str = 'abc'; // 1
str.toUpperCase(); // 2
// 3

  위 코드는 다음과 같은 과정을 거친다.

  1. 문자열 str을 만든다. 이 때 문자열은 Primitive Type이다.
  2. str에 대해 toUpperCase()라는 프로퍼티에 접근한다. 
    1) new String('abc'); 을 호출한 것과 동일한 임시 객체가 생성된다.
    2) 생성된 객체의 toUpperCase() 메서드를 호출하여 리턴 값을 받는다.
  3. 프로퍼티 참조가 끝난다.
    1) 새로 생성된 임시 객체는 메모리에서 회수된다.
        - 정확히는 임시 객체를 생성하고 삭제하는 것처럼 보인다. 혹은 동작한다 이다.
          JS 구현체에 따라서 회수가 아닌, 재사용이 될 수도 있기 때문이다.

  문자열 뿐만 아니라, 숫자, 불리언의 프로퍼티에 접근할 때도 이와 같은 과정을 거친다.

 

3. 특징

var s = 'ihl';
s.x = 4; // s에 x프라퍼티를 생성했으나, 참조가 끝나면 바로 임시객체가 해제된다.

var x = s.x; // 따라서 s.x === undefined가 된다.

  Wrapper 객체를 통해 접근한 프로퍼티는 읽기 전용이다. Wrapper 객체는 임시 객체이므로, 프로퍼티를 생성하거나 수정해도 참조가 끝나면 객체가 해제되기 때문이다.

 

4. Create Primitive Value By Wrapper Object

const str = new String('abc'); // Wrapper Object로 생성
str.x = 0;

var x = str.x; // Wrapper Object가 유지되므로 x = 0 이 된다.

str.length = 4;
console.log(str.length); // 원래 존재하던 프로퍼티는 수정되지 않으므로 3이다.

  new String('abc') 처럼 명시적으로 Wrapper 객체를 생성할 수 있다. 생성된 Wrapper 객체는 필요에 따라 Primiteve Type으로 변환되므로, Primiteve Type과 똑같이 동작한다. 단, Wrapper 객체가 유지되므로 프로퍼티를 새롭게 추가하고 유지할 수 있다. 그러나, 원래 존재하는 프로퍼티의 경우는 수정되지 않는다.

 

// Wrapper Object인 str
const str = new String('abc');

// 일치 연산자와 동치 연산자
str === 'abc';  // false
str == 'abc';  // true

// typeof 연산자
typeof str;  // 'object'
typeof 'abc'; // 'string'

  일치 연산자(===)는 기본 타입과 Wrapper 객체를 다르게 취급한다. 반면, 동치 연산자(==)는 기본 타입과 Wrapper 객체를 동일하게 취급한다. typeof 연산자는 기본 타입과 Wrapper 객체를 다르게 취급한다.

 

5. null & undefined

null.toString(); // Type Error : Cannot read properties of null
undefined.toString(); // Type Error : Cannot read properties of undefined

  null과 undefined의 경우 Wrapper 객체가 없으므로 프로퍼티 접근 시 Type Error가 발생한다.

 


원시값의 메서드 : https://ko.javascript.info/primitives-methods

자바스크립트 완벽 가이드 : https://book.naver.com/bookdb/book_detail.naver?bid=10338797