Javascript 문자열의 숫자변환

Front-End 개발을 하면서 Javascript를 사용하여 사칙연산을 하다보면 원하던 결과와 다른 결과가 나오는 경우가 가끔있다.

ex) 예를들면 1 + 2를 했을때 원하는 결과는 3이 나와야 하는데, 문자열로 연결되어 12가 된다던가 하는..

물론 자바스크립트에서 문자열을 숫자로 바꾸는 방법은 예전부터 알고 있었지만, 여러가지 방법이 있어서 정리도 할겸 글을 작성해본다. 

여기서부턴 코드를 이용해서 설명..

// Number을 이용하는 방법 
const str1 = '5';
const str2 = '15';
 
console.log(str1 + str2); // 515
 
let result = Number(str1) + Number(str2);
 
console.log(result); // 20
console.log(typeof result); // number
 
// + 연산자를이용한 방법
result = +str1 + +str2;
console.log(result) // 20
console.log(typeof result); // number
 
// 흔히들 사용하는 parseInt를 사용한 방법
result = parseInt(str1) + parseInt(str2);
console.log(result) // 20
console.log(typeof result); // number
 
// 숫자 *1을 사용하는 방법
result = str1 * 1 + str2 * 1;
console.log(result) // 20
console.log(typeof result); // number

보통 Number이나 parseInt함수를 이용했었는데, 특이한건 문자열 앞에 "+" 연산자를 붙이면 숫자로 변환되는게 편하기도 하고 신기해서 따로 글을 작성했다.

개인적으로 가독성은 떨어지지만 타이핑을 적게할 수 있으니까 나름 괜찮은 방법이 아닐까라고 생각한다.

아직도 개발은 내가 모르는것들이 많은 것 같다..