[JS로 코테 준비하기] 13. 자릿수 더하기 (feat. 숫자 <-> 문자열)

https://school.programmers.co.kr/learn/courses/30/lessons/12931

프로그래머스

 

이번 문제에서는 숫자와 문자열 간의 형 변환이 필요했다.

각각을 변환하는 방식들을 알아보고, 그래서 무엇을 쓰는 것이 좋을지에 대해 알아보고자 한다.

 

Number to String

1. num.toString()

• 숫자 객체를 문자열로 반환하는 내장 메서드이다.

const num = 10;
const str = num.toString(); //'10'

const num2 = -10;
const str2 = num.toString(); //'-10'

 

2. String(num)

• 매개변수로 넣은 값을 문자열로 변환해주는 생성자이다.

const num = 10;
const str = String(num); //'10'

const num2 = -10;
const str2 = String(num2); //'-10'

 

3. num + ""

• 자바스크립트의 자동 형변환을 이용하는 방식이다.
• 숫자와 빈 문자열을 더하면 문자열이 된다.

const num = 10;
const str = num + "" //'10'

const num2 = -10;
const str2 = num2 + ""; //'-10'

 

 

String to Number

1. parseInt(str)

• 문자열을 파싱하여 특정 진수의 정수를 반환한다.

const str = "10";
const num = parseInt(str); //10

const str2 = "-10";
const num2 = parseInt(str2); //-10

 

2. Number(str)

• 매개변수로 넣은 값을 숫자로 변환해주는 생성자이다.

const str = "10";
const num = Number(str); //10

const str2 = "-10";
const num2 = Number(str2); //-10

 

3. str * 1

• 자바스크립트의 자동 형변환을 이용하는 방식이다.
• 문자열에 1을 곱하면 숫자가 된다.

const str = "10";
const num = str * 1; //10

const str2 = "-10";
const num2 = str2 * 1; //-10

 

 

세 방식 모두 형변환의 측면에서는 동일한 결과를 낸다. 

다만, 직관성의 측면에서 String()과 Number()를 통한 형변환을 주로 사용할 예정이다.

 

성능 측면에서 차이가 있을까 싶었지만, 프로그래머스 채점을 통해 나오는 시간을 각각 비교해보면 오차가 0.02ms 이내로 그렇게 큰 차이는 없었다. 

 

그리고 자동 형변환은 너무 알고리즘만을 위한 트릭같아 뭔가 끌리지 않는다. 

우선은 개인적인 취향에 따라 쓰면 될 것 같다.

 

 

기타 참고 사항

1. toString과 parseInt (진법 변환)

2. String과 toString

• 변환하고자 하는 값이 null이거나 undefinded일 때, 두 방식에 차이점이 있다.
• String은 "null" 또는 "undefined"로 정상 변환하는 반면, toString은 에러가 발생한다.

3. String/ Number으로 생성한 값과 new 키워드로 생성한 값의 차이

• new String(), new Number()로 생성한 문자열은 참조 타입(reference type)이다.
• String(), Number()로 생성한 문자열은 원시 타입 (primitive type)이다.

//String
const num = 123;

const a = new String(num);
const b = String(num);

console.log(typeof a); //'object'
console.log(typeof b); //'string'

//Number
const str = "123";

const a = new Number(str);
const b = Number(str);

console.log(typeof a); //'object'
console.log(typeof b); //'number'