[ Javascript ] 암묵적 캐스팅과 산술 연산자 +의 문자열 형변환

개요

기본적으로 프로그래밍 언어에서 공통적으로 쓰이는 개념들은 제외하고 새롭게 알게된 사실들에 대해 정의한다.

 

암묵적 캐스팅과 +연산자

암묵적 캐스팅은 연산자에 의해 결과값이 자동으로 타입 변환(캐스팅) 되는 것을 뜻한다.

예를 들면 자바에서 double타입의 수와 정수를 + 연산자로 더하게 되면 결과값은 자동으로 double타입이 되는 것을 뜻한다.

Javascript에서도 이와 같이 암묵적 캐스팅이 존재한다.

그 중 눈여겨 볼 것은 + 연산자이다.

일반적으로 +연산자는 산술을 위해 사용되지만 피연산자가 문자열일 경우 얘기가 다르다.

console.log(1+'1'); // 11

 

위와 같이 1이라는 숫자를 문자열로 1로 치환한 후에 우항의 문자열 1과 합쳐져 type = string인 11이라는 값이 생성된다.

그러나 다른 연산자의 경우 다른 결과값을 불러온다.

console.log(1-'1') // 0
console.log(5 * '10') // 50
console.log(5 < '10') // true

 

또한 다음과 같이 템플릿 리터럴도 암묵적으로 결과값을 문자열로 캐스팅한다.

const str = `1 + 1 = ${1+1}`
console.log(str); // "1 + 1 = 2"

 

또한 다음과 같은 0이나 bool 타입의 변수가 자동으로 number 타입으로 캐스팅 되는 예제도 살펴보자.

console.log('0' + true) // 1
console.log(null+1) // 1

 

null은 산술연산자의 피연산자일시에는 0으로 암묵적 캐스팅 된다. 또한 true와 false는 일반적으로 비트값으로 1과 0을 뜻하기 때문에 해당값으로 변환되는 것을 알 수 있다.

 

+는 산술연산자 뿐만 아니라 단항 연산자로(ex. +1)도 사용되는데 이 때 역시 암묵적 캐스팅이 일어난다.

console.log(+'') // 0
console.log(+'0') // 0
console.log(+'1') // 1
console.log(+'str') // NaN

 

NaN은 산술 연산자로 산술이 불가능한 경우 결과값을 가질 때 나타내는 타입이다. 

여담으로 NaN끼리의 값을 비교하기 위해서는 빌트인 함수를 써야한다. 내부적으로 서로 다른 값을 가지고 있기 때문이다.

const nan = NaN
console.log(nan == NaN) // false
console.log(isNaN(nan)) // true