원시값의 메서드

양주영·2021년 8월 23일
0

javascript

목록 보기
5/42

원시값의 메서드


자바스크립트는 원시값을 마치 객체처럼 다룰 수 있게 해준다.
하지만, 원시값은 객체가 아니라는 것을 기억하자.

원시값과 객체의 차이점

원시값 :

  • 원시형 값이다.
  • 추가 데이터를 저장할 수 없다.
  • 원시형 종류는  문자(string), 숫자(number), bigint, 불린(boolean), 심볼(symbol), null, undefined형으로 총 일곱 가지이다.

객체 :

  • 프로퍼티에 다양한 종류의 값을 저장할 수 있다.
  • {name: ‘John’, age:30}와 같이 대괄호 {}를 사용해 만들 수 있다. 자바스크립트에는 여러 종류의 객체가 있는데, 함수도 객체의 일종이다.

객체의 장점 중 하나는 함수를 프로퍼티로 저장할 수 있다는 점이다.

let john = {
  name: "John",
  sayHi: function() {
    alert("친구야 반갑다!");
  }
};

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

하지만, 이런 기능을 사용하면 시스템 자원이 많이 소모된다는 단점이 있다.
객체는 원시값보다 ‘무겁고’, 내부 구조를 유지하기 위해 추가 자원을 사용하기 때문이다.



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


자바스크립트를 만든 사람은 다음과 같은 모순적인 상황을 해결해야만 했다.

- 원시값을 다루어야 하는 작업이 많은데, 객체와 같이 메서드를 사용하면 편할 것 같다. 
- 원시값은 가능한 한 빠르고 가벼워야 하는데, 객체로 사용하려니 너무 무겁다. 

때문에, 아래와 같은 방법을 사용해 해결책을 모색했다.

1. 원시값은 원시값 그대로 남겨둬 단일 값 형태 유지 
2. 문자열, 숫자, 불린, 심볼의 메서드와 프로퍼티에 접근할 수 있도록 언어 차원에서 허용
3. 원시값이 메서드나 프로퍼티에 접근하려 하면 추가 기능을 제공해주는 특수한 객체`래퍼 객체(object wrapper)`를 만들어 준다. 

숫자, 문자열, 불리언 등 원시 타입의 프로퍼티에 접근하려고 할 때 생성되는 임시 객체를 래퍼 객체라고 한다.
이 객체는 원시자료형의 이름을 그대로 이용하고 앞을 대문자로 바꾼 Number, String, Boolean, Symbol이라고 부른다. 각 래퍼 객체마다 제공되는 메서드(기능)이 다르다.


인수로 받은 문자열의 모든 글자를 대문자로 바꿔주는 메서드 str.toUpperCase()를 예로 들어보자.

let str = "Hello";

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


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

이런 내부 프로세스를 통해 원시값을 가볍게 유지하면서 메서드를 호출할 수 있다.
원시 래퍼 객체를 만들지 않고도 마치 원시 래퍼 객체를 생성한 것처럼 동작하게끔 해준다.

숫자형도 고유한 메서드를 지원한다. 메서드 toFixed(n)를 이용하면 원하는 자리에서 소수점 아래 숫자를 반올림할 수 있다.

let n = 1.23456;

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


null / undefined도 래퍼객체가 있나?


래퍼 객체도 없을 뿐더러 메서드도 제공하지 않는다.
어떤 의미에서는 두 자료형이 가장 “원시적” 이라고 할 수 있을 것 같다.

두 자료형에 속한 값의 프로퍼티에 접근하려 하면 에러가 발생한다.


alert(null.test); // error


정리


  • 객체는 무겁고 느리다.

  • 원시값에 메서드를 호출하려 하면 임시 객체가 만들어진다.

  • 래퍼 객체 :
    - 원시값이 메서드나 프로퍼티에 접근하려 하면 추가 기능을 제공해주는 특수한 객체래퍼 객체(object wrapper)
    - 숫자, 문자열, 불리언 등 원시 타입의 프로퍼티에 접근하려고 할 때 생성되는 임시 객체



참조 : https://ko.javascript.info/primitives-methods

profile
뚜벅뚜벅

0개의 댓글