JavaScript

원시값의 메서드

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

원시 값에서도 객체처럼 메서드를 호출 해 줄수 있습니다.

 

원시값 : 

원시형 값입니다.

원시형의 종류는 문자(string), 숫자(number), bigint, 불린(boolean), 심볼(symbol), null, undefined형으로 총 7가지입니다.

 

객체 : 

프로퍼티에 다양한 종류의 값을 저장할 수 있습니다.

대괄호{}를 사용하여 만들 수 있는데 자바스크립트에는 여러 종류의 객체가 있는데 함수도 객체의 일종입니다.

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

 

하지만 객체는 원시값보다 무겁고 내부 구조를 유지하기 위해 추가 자원을 많이 사용한다는 단점이 있습니다.

 

---

원시값을 객체로 사용하기

객체와 원시값의 모순적인 상황

1. 문자열이나 숫자와 같은 원시값을 다루어야 하는 작업이 많은데 메서드가 이를 수월하게 해줄 수 있다.

2. 원ㅅ히값은 가능한 한 빠르고 가벼워야 한다.

 

해결책

1. 원시값은 원시값 그대로 남겨둬 단일 값 형태를 유지한다.

2. 문자열, 숫자, 불린, 심볼의 메서드와 프로퍼티에 접근 할 수 있도록 언어 차원에서 허용해 준다.

3. 이를 가능하게 하기 위해 원시값이 메서드나 프로퍼티에 접근하려 하면 추가 기능을 제공해주는 특수한 객체 

   "원시 래퍼 객체 (Object Wrapper: 포장지, 래퍼)를 만들어 준다. 이는 곧 삭제 된다!

 

원시 래퍼 객체 (Object Wrapper)

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

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

// toLocalUpperCase() 메서드는 어디서 왔는가?
const str = "Hello";

console.log(str); // Hello
console.log(str.toLocaleUpperCase()); // HELLO

1. str.toUpperCase()가 호출 될 때 내부에서 일어나는 일

1. 문자열 str은 원시값이므로 원시값의 프로퍼티(toUpperCase)에 접근하는 순간 특별한 객체가 만들어 진다. 

   이 객체는 문자열의 값을 알고 있고, toUpperCase()와 같은 유용한 메서드를 가지고 있다.

2. 메서드가 실행되고 새로운 문자열이 반환됩니다.

3. 특별한 객체는 파괴되고 원시값 str만 남게 됩니다!!

 

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

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

원시 래퍼 객체를 만들지 않고도 마치 원시 래퍼 객체를 생성(명세에 언급됨)한 것처럼 동작하게끔 도와줍니다.

 

let str_test = "Hello";
str_test.test = 5;
console.log(str_test); // Hello
console.log(str_test.test); // undefined

/**
 * 엄격 모드 : An Error
 * 비엄격 모드 : undefined
 *
 * str의 프로퍼티에 접근하려 하면 래퍼 객체가 만들어 진다
 * 엄격 모드에선 래퍼 객체를 수정하려 하면 에러가 발생한다.
 * 비 엄격 모드에서는 에러가 발생하지 않고 래퍼 객체 프로퍼티에 test가 추가 된다. 하지만 래퍼 객체는 바로 삭제되기 때문에 마지막 줄이 실행 될 때에는 str_test의 test 프로퍼티를 찾을 수가 없다.
 */

---

결론
1. null과 undefined를 제외한 원시값에 다양한 메서드를 호출 할 수 있다.
2. 원시값에 메서드를 호출하려 하면 임시 객체가 만들어 진다. 
     -> 자바스크립트 엔진은 내부 최적화가 잘 되어있어 메서드를 호출해도 많은 리소스를 쓰지 않는다!!
3. 원시 값은 추가 데이터를 저장 할 수 없다.

---

 

원시값의 메서드