[자바스크립트] 원시값의 메서드, 래퍼 객체(object wrapper)

 

원시값의 메서드

원시값이란?

• 원시형 값.
  • 문자
  • 숫자
  • bigint
  • 불린
  • 심볼
  • null
  • undefined

 

객체

• 프로퍼티에 다양한 값을 저장할 수 있다.
• {name : "John", age : 30}와 같이 대괄호를 사용해 만든다.
• JS에는 여러 종류의 객체가 있는데, 함수도 객체의 일종이다.
• 객체의 장점 중 하나는 함수를 프로퍼티로 저장할 수 있다는 것

let john = {
    name: "John",
    sayHi: function() { //객체 john을 만들고 메서드 sayHi를 정의
        alert("친구야 반갑다!!!")
    }
}

john.satHi(); // 친구야 반갑다!!

• 자바스크립트는 날짜, 오류, html 등을 다룰 수 있게 해주는 다양한 내장 객체를 제공하는데, 이 객체들은 고유한 프로퍼티와 메서드를 가진다.
• 이런 기능을 사용하면 시스템 자원이 많이 소모된다는 단점이 있다.
• 객체는 원시값 보다 무겁고, 내부 구조를 유지하기 위해 추가 자원을 사용하기 때문이다.

 

 

원시값을 객체처럼 사용하기

• 원시값 그대로 남겨두고 문자열, 숫자, 불린, 심볼의 메서드와 프로퍼티에 접근할 수 있도록 하기 위해 원시 래퍼 객체(object wrapper)를 만들어 주고 이 객체는 곧 삭제된다.

let str = "Hello";

alert( str.toUpperCase() ); // HELLO

 

str.toUpperCase() 내부 프로세스

1. 문자열 str은 원시값이므로 원시값 프로퍼티(toUpperCase)애 접근하는 순간 특별한 객체가 만들어진다. 이 객체는 문자열 값을 알고 있고, toUpperCase()와 같은 유용한 메서드를 가지고 있다.
2. 메서드가 실행되고, 새로운 문자열이 반환
3. 특별한 객체는 파괴되고, 원시값 str만 남는다.

• 이렇게 사용하면 원시값을 가볍게 유지하면서 메서드를 호출할 수 있다.
• JS는 프로세스 최적화에 신경 쓰기 때문에 원시 래퍼 객체를 만들지 않고도 원시 래퍼 객체를 생성한 것처럼 동작하게 해 준다.

//숫자형도 고유한 메서드를 지원한다.
// toFixed(n)를 이용하면 원하는 자리에서 반올림

let n = 1.23456;

alert( n.toFixed(2) ); // 1.23

 

⚠️ 주의 : String/Number/Boolean를 생성자로 쓰지 말자!

• Java 등 몇몇 언어에서는 new Number(1) 또는 new Boolean(false)와 같이 원하는 타입의 '래퍼 객체'를 직접 만들 수 있다.
• 자바스크립트도 하위 호환성을 위해 가능하지만 이런 식으로 래퍼 객체를 만드는 건 추천하지 않는다.

alert( typeof 0 ); // "number"

alert( typeof new Number(0) ); // "object"!

 

⚠️ 주의 : null/undefined는 메서드가 없다.

• 둘 다 특수 자료형이므로 위와 같은 법칙을 따르지 않는다.
• 래퍼 객체도 없고 메서드도 제공하지 않는다.

 

 

정리

• 객체는 무겁고 느리다
• 원시 객체는 가볍고 빠르지만 값이 하나뿐이라는 단점
• 이 두 개를 합친 것이 원시 객체이다. 메서드를 호출할 때만 잠깐 객체로 바꾸고 삭제
• 즉, 가벼움을 유지하면서 객체의 유요함도 함께 쓰기 위함

 

 

📌 참고

• 모던 JavaScript 튜토리얼