원시값의 메서드

JY KIM·2020년 6월 8일
0

vanilla javascript

목록 보기
4/8

자바스크립트는 원시값객체, 두 가지 형태의 형이 있다.

이 두가지의 차이는 다음과 같다.
원시값:문자(string), 숫자(number), 불린(boolean), 심볼(Symbol), bigint, null, undefined - 총 7가지가 존재한다.
객체 :다양한 종류의 값들을 key-value 쌍으로 저장할 수 있다.
음.. 차이를 한 문장으로 하자면, 원시값은 값 하나만 저장하는 경우이고, 객체는 여러가지 값들을 주제에 따라 저장할 수 있게 한 구조. 라고 할 수 있겠다..!

자 그럼, 객체를 사용하면 다양한 값들을 저장할 수 있고 객체 자체에서 제공해주는 다양한 내장 객체들을 사용할 수 있는데, 원시값을 쓸 필요가 있을까?

생각도 안해봤었는데, 한번 생각해보자..

안그래도 자바스크립트는 다양한 내장 객체의 함수들을 제공해줘서 우리는 편리하게 코드를 작성할 수 있다.

예를들면 영어 문자열을 변수에 저장하고, 그 영어 문자열을 모두 대문자로 변환하고 싶을 때는 다음과 같이 쓴다.

let str = 'abc';
console.log(str.toUpperCase());
// 결과는? -> ABC

그런데 str은 string이고 string는 '원시값' 이다. 근데 어디서 toUpperCase함수가 튀어나왔을까..?

결론부터 얘기하자면 toUpperCase함수는 자바스크립트의 string에서 제공하는 내장 객체 함수이다.

하지만 이런 내장 객체를 사용하기 위해서는 항상 내장 객체 함수를 달고 있어야 되는데, 이는 프로그램을 무겁게 하는 원인이 되는 상황이었다. 이를 위해 자바스크립트를 만든 사람은 다음과 같은 해결책을 내놨는데,


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

이런 식이다.

이를 토대로 위의 소스를 다시 보면?

let str = 'Hello';
console.log(str.toUpperCase()); // HELLO
  1. 문자열 변수 str은 원시값이므로 원시값의 프로퍼티(toUpperCase)에 접근하는 순간 특별한 객체가 만들어진다. --> 이 객체는 문자열의 값을 알고 있고 toUpperCase()와 같은 유용한 메서드를 가지고 있다.
  2. 메서드가 실행되고, 새로운 문자열이 반환된다.
  3. console.log 함수가 실행된다.
  4. 특별한 객체가 삭제되고, str만 남는다.

이 과정을 기억하고 다음으로 넘어간다!

  • 참고
    null / undefined는 메서드가 없음!
profile
알파카머리닮음

0개의 댓글