[모던 JavaScript 튜토리얼] - [5.1 원시값의 메서드]

IRISH·2024년 1월 30일
0

JS

목록 보기
49/80


학습 내용

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

  2. 원시타입에서 객체처럼 메소드를 가지기에는 기존의 가벼운 특징이 사라지게 된다.

  3. 원시타입에서 메소드 프로퍼티에 접근할 때 원시 래퍼 객체(object wrapper)가 생성되어 처리하는 식으로 해결하였다.

  4. 래퍼객체를 직접 만들어서 사용하는 것은 추천하지 않는다.

  • 래퍼객체는 원시값을 나타내지만, 객체의 특성을 가지고 있게 된다.
  • typeof로 체크할 때 객체로 판단한다.
  • 조건문에서 결국 객체이기 떄문에 원시값과 다르게 조건이 무조건 참이 되어버린다.
  • 원시타입에서 메소드를 사용하게하기 위해서 있는 것인데, 하위 호환성을 위해 직접 생성을 할 수 있도록 하게 냅둔거지 너가 쓰라는 뜻은 아니다.
  1. null과 undefined는 메소드가 없다.

실습 내용

코딩 복습

/* 프로퍼티 : name / sayHi */
let pcy = {
    name: "pcy",
    sayHi: function() {
      console.log("PCY야 반갑다!");
    }
};
  
pcy.sayHi(); // 친구야 반갑다!

// --------------------------------------

let str = "Nice to Meet You";
/* 출력 후 str 객체가 해제되어 str의 원시값만 존재 */
console.log( str.toLowerCase() ); // nice to meet you

let n = 1.23456;
/* 출력 후 n 객체가 해제되어 n 원시값만 존재 */
console.log( n.toFixed(2) ); // 1.23

과제

let str = "Hello";

str.test = 5;

// alert(str.test);
console.log(str.test); // undefined -> 원시값은 추가 데이터를 저장할 수 없음

나는 당연히 출력할 때 숫자 5가 나올 줄 알았다.

그러나, 5가 아니라 “undefined ”가 출력되었다.

그 이유는 원시값은 추가 데이터를 저장할 수 없기 때문이다.

이러한 사실은 처음 알게 됐다. (정확히는, 이런 것을 해본적도 없고 실무에서도 본 적이 없기 때문….)

느낀점

자바스크립트 안에 존재하는 원시형 타입들이 어떻게 처리되는지에 대한 것을 알게 됐다. 난, 여태껏 원시형의 메소드가 자바스크립트 엔진을 통해 어떻게 움직이는지는 커녕 자바스크립트 엔진을 통해 처리된다는 것도 몰랐다. (그냥, 개념 공부라기보다는 닥치고 코딩을 했으니…)

이것을 안다고 해서 내 코딩 실력에 엄청난 영향을 끼치는 것은 아니라 생각한다. 알든 모르든 상관없이 어찌됐든 원시형의 메소드 처리가 자바스크립트 엔진의 규칙에 따라 처리되기 때문이다.

다만, 어떻게 내부적으로 원시형의 메소드 처리가 어떻게 되는지 알았다는 것. 이것 하나를 알게 된 것만으로 한 걸음 나간 것에 만족한다.

profile
#Software Engineer #IRISH

0개의 댓글