모던 JavaScript 튜토리얼 내용 일부를 정리 요약한 내용입니다. 더 자세한 설명은 원문 링크를 참고하세요.
생각
문자열에 배열처럼 메서드가 적용된다고 신나서 쓰기만 했지 그 원리를 고민해본 적이 없었다. 아래 내용을 정리하며 문자열 같은 원시값에 객체 메서드를 사용할 때 원시 래퍼 객체가 임시로 만들어 진다는 것을 새롭게 알았다. 역시 그냥 되는 것은 없다.
정리
객체는 함수를 프로퍼티로 저장해서 메소드로 사용할 수 있습니다. 자바스크립트는 날짜, 오류, HTML 요소 등을 다룰 수 있는 다양한 내장 객체를 제공하는데, 이런 기능을 사용하면 시스템 자원이 많이 소모되는 단점이 있습니다. 객체는 원시값보다 무겁고, 내부 구조를 유지하기 위해 추가 자원을 사용합니다.
그래서 원시값(문자열, 숫자, 불린 등)이 메서드나 프로퍼티에 접근할 때 무거운 객체를 다시 만들기 보다는 원시 래퍼 객체(object wrapper)를 만들어 해당 메서드를 사용할 수 있게 합니다. 래퍼 객체는 기능만 제공하고 바로 삭제됩니다.
let str = "Hello";
str.toUpperCase(); // HELLO문자열 str 은 원시값이므로 원시값의 프로퍼티(toUpperCase)에 접근하는 순간 원시 래퍼 객체가 만들어지고, 이 객체는 문자열의 값을 알고 있고, toUpperCase() 라는 메서드도 가지고 있으므로 이 메서드를 실행해 새로운 문자열을 반환합니다. 이후 래퍼 객체는 삭제되고 원시값인 str 만 남습니다.
이런 프로세스를 통해 원시값을 가볍게 유지하면서 메서드를 호출할 수 있습니다. 자바스크립트 엔진은 원시 래퍼 객체를 만들지 않고도 마치 원시 래퍼 객체를 생성한 것처럼 동작하게 합니다.
아래와 같은 경우 비 엄격모드는 undefined, 업격모드는 error 가 발생합니다. 래퍼 객체에 프로퍼티 test 가 추가되지만 래퍼 객체는 바로 삭제되므로 이후 실행 시 test 를 찾을 수 없습니다.
let str = "Hello";
str.test = 5;
alert(str.test);