[JavaScript] toString() vs String()

자바스크립트에서 toString()과 String()은 모두 값을 문자열로 변환하는 데 사용된다.

양쪽 모두 잘 사용했지만 차이점을 알고 쓰지는 않았기에 검색해보니

1. toString()

toString()은 자바스크립트의 내장 메서드로, 원시 데이터 타입에만 사용할 수 있다. 즉, 숫자, 문자열, 불리언, null, undefined, Symbol과 같은 원시 타입에만 사용 가능하다.
객체(배열, 함수, 객체 리터럴 등)에 대해서는 toString() 메서드를 바로 사용할 수 없다.

const number = 33;
const strFromNumber = number.toString();    // "33"

const booleanValue = true;
const strFromBoolean = booleanValue.toString();    // "true"

그러나 객체가 원시 래퍼(wrapper)인 Number, String, Boolean으로 변환 가능하면 해당 원시 래퍼의 toString() 메서드를 호출할 수 있다.

☝🏼여기서 원시 래퍼란?

원시 데이터 타입을 객체처럼 다룰 수 있도록 제공되는 래퍼(wrapper) 객체를 말한다.

const stringObject = new String("Hello!"); // String 원시 래퍼 생성

const strFromStringObject = stringObject.toString(); // "Hello!"

그러나 이런 식으로 new를 붙여 String, Number, Boolean을 생성자로 사용하는 건 추천하지 않는다고 하는데, 왜 그런고 하니

typeof 0;    // "number"

typeof new Number(0);    // "object"

래퍼 객체는 말 그대로 타입이 객체이기 때문에 몇몇 상황에서 혼동을 불러일으키기 때문이다.

2. String()

String()은 전역 함수(global function)로서 원시 데이터 타입 뿐만 아니라 객체를 포함한 모든 데이터 타입에 사용할 수 있다. String() 함수는 주어진 값의 문자열 표현을 반환하며, 값이 이미 문자열인 경우에도 해당 값을 그대로 반환한다.

const number = 33;
const strFromNumber = String(number);    // "33"

const booleanValue = true;
const strFromBoolean = String(booleanValue);    // "true"

const array = [1, 2, 3];
const strFromArray = String(array);    // "1,2,3"

---

※ 참고 자료
모던 JavaScript