parseInt()와 '+' 연산자의 차이

코딩테스트 문제를 풀고 난 후, 다른 사람들의 코드를 보면 어떤 사람은 parseInt()를, 어떤 사람은 '+' 연사자를 사용했다. 문득 둘의 차이가 궁금하여 찾아보게 되었다.

 

1. parseInt()

parseInt() 함수는 문자열 인자를 파싱하여 특정 진수(수의 진법 체계에서 기준이 되는 값)의 정수를 반환합니다.
- "mdn"

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/parseInt

mdn 에서 알려주고 있는 parseInt() 함수에 대한 설명이다. 간단한 예시 코드를 보자.

cosnt numString = '10';

console.log(parseInt(numString)); // 10

const abcString = 'abc';
console.log(parseInt(abcString)); // NaN;

'10' 이라는 문자열 형태의 변수를 숫자로 변환한다.  하지만 'abc' 라는 문자열 변수는 숫자로 변환할 수 없기 때문에 'NaN'을 반환한다.

 

2. '+' 연산자

단항 더하기 연산자(+)는 피연산자 앞에 위치하며 피연산자를 평가하지만, 만약 피연산자가 숫자가 아니라면 숫자로 변환을 시도합니다.
- "mdn 단항 더하기(+)"

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Unary_plus

위의 설명도 mdn 에서 가져왔다. 간단한 예시 코드를 보면

const x = 1;
const y = -1;

console.log(+x);
// Expected output: 1

console.log(+y);
// Expected output: -1

console.log(+'');
// Expected output: 0

console.log(+true);
// Expected output: 1

console.log(+false);
// Expected output: 0

console.log(+'hello');
// Expected output: NaN

숫자로 변환할 수 있는 문자열의 경우 숫자로 변환하고, 변환할 수 없다면 'NaN'을 반환한다.

 

???? 둘다 똑같은 거 아닌가??? 뭐가 다른건데?

 

3. 아니... 차이점이 없잖아?

parseInt() 함수와 '+' 연산자 모두 문자열을 숫자로 변환할 수 있다면 숫자로 반환하고, 없다면 NaN을 반환한다. 차이점이 없는 것 같다. 하지만 아래의 코드를 보자.

 

const numericStringWithExtraText = '10abc';

const parsedIntResult = parseInt(numericStringWithExtraText);
const plusOperatorResult = +numericStringWithExtraText;

console.log(parsedIntResult); // 10
console.log(plusOperatorResult); // NaN

....? 뭣?

 

parseInt()는 왼쪽부터 숫자로 변환한다.

 

parseInt() 함수는 왼쪽부터 숫자로 변환하고, 변환 가능한 숫자 이후의 문자열은 무시된다. 따라서 '10abc' 문자열은 'abc' 부분을 제외하고 '10'을 숫자로 변환하여 10을 반환하게 된다.

반면 '+' 연산자는 문자열의 숫자 이후에 숫자가 아닌 문자열이 따라오게 되면 'NaN'을 반환하게 된다.

 

4. 정리

가끔씩 parseInt()를 사용하면 에러가 나곤 했었는데 그 때를 생각해보니 숫자와 문자가 섞여있었던 기억이 난다.

앞으론 구분해서 사용할 수 있을 것 같다...... 찾아보고 나니 조금 충격적인 내용이었다.