[코어 JS] 5.1 - 원시값의 메서드

5.1 원시값의 메서드

JS는 원시값(문자열, 숫자 등)을 객체처럼 다룰 수 있게 함 (ex. 메서드 호출)

 

원시값 vs 객체

원시값 - 원시형 값

          - 문자(string), 숫자(number), bigint, 불린(boolean), 심볼(symbol), null, undefined 총 7가지

객체 - 프로퍼티에 다양한 종류의 값 저장 가능

       - 대괄호{}를 사용해 생성, 함수도 객체의 일종

함수를 프로퍼티로 저장할 수 있다는 객체의 장점

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

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

//객체 John
//메서드 sayHi

JS는 날짜, 오류, HTML 요소 등을 다룰 수 있게 하는 다양한 내장객체 제공, 각 개체는 고유한 프로퍼티와 메서드를 가짐

but, 객체는 원시값보다 '무겁고', 내부 구조 유지를 위해 추가 자원을 사용하므로 시스템 자원이 많이 소요된다는 단점

 

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

문제

- 문자열이나 숫자와 같은 원시값을 다루어야하는 작업시  메서드를 사용하면 작업이 수월할 것 같다

- 원시값은 가능한 빠르고 가벼워야 한다

해결

1. 원시값은 그대로 남겨두고 단일값 형태를 유지

2. 문자열, 숫자, 불린, 심볼의 메서드와 프로퍼티에 접근가능하도록 언어차원에서 허용

3. 이를 가능하게 하기위해, 원시값이 메서드나 프로퍼티에 접근하려하면 추가 기능을 제공하는 특수한 객체인 "원시 래퍼 객체(object wrapper)"를 생성, 이 객체는 곧 삭제

이해못함......

"래퍼 객체"는 원시 타입에 따라 종류가 다양, 각 래퍼 객체는 원시 자료형의 이름을 차용해 String, Number, Boolean, Symbol로 부름, 래퍼 객체마다 제공하는 메서드도 다름

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

let str = "Hello";

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

1. 문자열 str은 원시값이므로 원시값의 프로퍼티(toUpperCase)에 접근하는 순간 특별한 객체 생성, 이 객체는 문자열의 값을 알고있고 , toUpperCase()와 같은 유용한 메서드를 가짐

2. 메서드가 실행되고 새로운 문자열 반환 (alert 창에 문자열 출력)

3. 특별한 객체는 파괴되고 원시값 str만 남음

-> 원시값을 가볍게 유지하면서 메서드 호출

JS엔진은 프로세스의 최적화를 위해 원시 래퍼 객체를 만들지 않고도 원시 래퍼 객체를 생성한 것처럼 동작하게 함, 숫자형도 고유한 메서드 지원

ex) toFixed(n) _  원하는 자리에서 소숫점 아래 숫자 반올림 

let n = 1.23456;

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

 

! String/Number/Boolean 을 생성자로 사용x

타 언어에서는 new Number(1)형식의 문법으로 "래퍼객체" 생성이 가능하나 JS에서 권장x

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

let zero = new Number(0);
//객체는 논리 평가시 항상 참을 반환

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

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

 

! null / undefined는 메서드가 없음

특수 자료형인 null과 undefined의 원시값(null/undefined)는 "래퍼객체" 생성x, 메서드 제공x / 가장 원시적인 자료형

alert(null.test); // error

 

요약

- 'null'과 'undefined'를 제외한 원시값에 다양한 메서드 호출

- 원시값에 메서드 호출시 임시 객체가 생성되나 JS엔진은 내부 최적화가 잘되어있어 메서드를 호출해도 많은 리소스를 사용하지 않음