원시값의 메서드

자바스크립트는 원시값(문자열, 숫자 등)을 마치 객체처럼 다룰 수 있게 해준다.

원시값에서도 객체에서처럼 메서드를 호출할 수 있다. 

원시값의 메서드에 대해선 곡 학습할 예정인데, 그 전에 원시값은 객체가 아니라는 것을 상기하도록 하자.

 

원시값과 객체는 다음과 같은 차이점이 있다.

 

원시값: 

• 원시형 값이다.
• 원시형의 종류는 문자(string), 숫자(number), bigint, boolean, symbol, null, undefined 형으로 총 7가지 이다.

객체 : 

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

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

 

let john={
	name: "John",
    sayHi: function(){
    	alert("hey, nice to meet you");
    }
};

john.sayHi();   //hey, nice to meet you

 

객체 john을 만들고 거기에 메소드 sayHi를 정의했다.

자바스크립트에는 날짜, 오류, HTML요소 등을 다룰 수 있게 해주는 다양한 내장 객체를 제공한다. 

이 객체들은 고유한 프로퍼티와 메서드를 가진다. 

 

하지만, 이런 기능을 사용하면 시스템 자원이 많이 소모된다는 단점이 있다. 

 

객체는 원시값보다 '무겁고', 내부 구조를 유지하기 위해 추가 자원을 사용하기 때문이다. 

 

 

(그래서)

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

---

자바스크립트 창안자(creator)는 다음과 같은 모순적인 상황을 해결해야만했다.

 

• 문자열이나 숫자 같은 원시값을 다루어야 하는 작업이 많은데, 메서드를 사용하면 작업을 수월하게 할 수 있을 것 같다는 생각이 듦.
• 그런데 원시값은 가능한 한 빠르고 가벼워야 함. 

조금 어색해 보이지만 자스 창안자는 아래와 같은 방법을 사용해 해결책을 모색했다. 

 

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

'래퍼 객체'는 원시 타입에 따라 종류가 다양하다. 각 래퍼객체는 원시 자료형의 이름을 그대로 차용해,

String, Number, Boolean, Symbol 이라고 부른다. 래퍼 객체마다 제공하는 메서드 역시 다르다.

 

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

 

let str = "Hello";
alert(str.toUpperCase());  // HELLO

 

간단하다. 아래는 str.toUpperCase()가 호출될때 내부에서 실제로 일어나는 일이다.

 

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

이런 내부 프로세스를 통해 원시값을 가볍게 유지하면서 메서드를 호출 할 수 있는 것이다. 

자바스크립트 엔진은 위 프로세스의 최적화에 많은 신경을 쓴다. 

원시 래퍼 객체를 만들지 않고도 마치 원시 래퍼 객체를 생성한 것처럼 동작하게끔 해준다.

 

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

 

let n = 1.23456;
alert(n.toFixed(2));   // 1.23

 

 ⚠️string/number/boolea 를 생성자로는 쓰지 말자

자바 등의 몇몇 언어에서는 new Number(1) 또는 new Boolean(false)와 같은 문법을 사용해 원하는 타입의 '래퍼 객체'를 직접 만들 수 있다. 
자스 에서도 하위 호환성을 위해 이 기능을 남겨두었는데, 이런 식으로 래퍼 객체를 만드는 건 추천하지 않는다. 
몇몇 상황에서 혼동을 가져올 수 있다.

예시:

alert(typeof 0); //"number"

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

객체는 논리 평가시 항상 참을 반환하기 때문에 아래 예시에서 alert창은 무조건 열린다.

let zero = new Number(0);

if (zero) { // 변수 zero는 객체이므로, 조건문이 참이 된다.
	alert( "그런데 여러분은 zero가 참이라는 것에 동의하시나요?!" );
}

new를 붙이지 않고 string, number, boolean 을 사용하는 건 괜찮다.

new없이 사용하면 상식에 맞게 인수를 원하는 형의 원시값으로 바꾸어준다. 아주 유용하게 말이다.

let num = Number("123");  //문자열을 숫자로 바꿔줌

 

 

 

⚠️ null/ undefined에는 메서드가 없다.
특수 자료형인 null과 undefined의 원시값 (null/undefined)은 위와 같은 법칙을 따르지 않는다. 
이 자료형과 연관되는 '래퍼객체'도 없고 메서드도 제공하지 않는다. 
  두 자료형에 속한 값의 프로퍼티에 접근하려 하면 에러가 발생.

alert(null.test);  // error

 

 

출처: 자바스크립트 인포