FrontEnd/JavaScript

[JS] 원시값의 메서드

728x90

 

자바스크립트에선 원시값 (문자열,숫자 등등)을 객체처럼 다룰 수 있다.

 

문자열에 내장된 substring,toUpperCase 와 같은 내장 메서드를 활용할 수 있다.

 

 

그렇다면 자바스크립트에서는 원시형들을 객체로 보고 있는 것일까??

 

 

 

결론부터 말하면 조금 다르다. 원시값은 

 

string , number , bigInt , boolean , symbol , null , undefined 총 7가지가 있는데, 이런 원시형들은 하나의 값으로써 이를 다루는 작업이 많기 때문에 가볍고 빨라야한다.

 

 

그렇다면 어떻게 우리는 원시형의 내장 메서드들을 활용할 수 있을까?

 

 

 

 

자바스크립트는 아래와 같은 방식으로 이를 해결하였다.

 

 

1. 원시값은 단일값 형태를 유지한다.

2. 각 원시값의 메서드에 접근할 때 오류가 나지 않도록 처리해준다.

3. 원시값에 메서드에 접근한다면 "원시 래퍼 객체(object wrapper)" 라는 객체를 생성한다. 해당 객체는 사용 이후에 바로 사라진다는 특성이 있다.

 

예전에 자바 문법을 공부했을때 봤던 개념과 유사한 것 같다. 이런 객체들은 원시형과는 다르게 대문자로 시작한다.

String , Number , Boolean , Symbol

 

 

4. 메서드가 실행된 이후 객체는 파괴된다.

 

 

 

 

이런과정때문에 재미있는 현상을 하나 찾아볼 수 있다.

 

 

아래와 같이 원시형에 프로퍼티를 추가하면 어떻게 될까?

let str = "Hello";

str.test = 5;

alert(str.test);

 

 

JS에서는 strict 모드와 비 strict모드가 존재한다. strict모드라면 원시 래퍼 객체에 없는 프로퍼티에 접근하려 하면 오류를 내보내고, 비 strict 모드에서는 프로퍼티에 추가된다.

 

단, 비 strict 모드에서도 str.test를 출력해보면 undefined가 나온다. 원시래퍼 객체는 메서드가 실행되고 바로 파괴되기 때문이다.

728x90

'FrontEnd > JavaScript' 카테고리의 다른 글

[JS] fill 2차원배열 주의점  (0) 2023.06.25
[JS] Symbol  (0) 2023.06.09
[JS] 옵셔널 체이닝 ?.  (1) 2023.06.08
가비지 컬렉션  (2) 2023.06.03
[JS] 폴리-필(Polyfill) , 바벨  (0) 2023.05.26