자바스크립트로 숫자야구게임을 만들던 도중 '정답'과 '사용자의 입력값'을 비교하는 과정에서 number, string, array, object 등의 값의 비교에 대해 의문이 생겨 알아보던 도중 기록을 남긴다.

값의 종류

먼저 자바스크립트의 값의 종류를 알아봤다.

1. 원시값 (Primitive Value)
number, string, boolean, null, undefined
2. 참조값 (Reference Value)
array, function, object

연산자에 따른 형변환

1. num + num = num

1 + 1 = 2

2. num + string = string

1 +'1' => '1' + '1' => '11'

3. string + string = string

'1' + '1' = '11'

위 3개의 예시와 같이 +연산자에서는 같은 타입이 아니면 숫자에서 문자열로 형변환이 이루어진다.
모든 문자열이 숫자로 변환될 수는 없지만 모든 숫자는 문자열로 변환될 수 있기 때문으로 보인다.
그렇다면 +연산자가 아닌 나머지 연산자들에서는 어떨까?

1 - '1' => 1 - 1 => 0
1 * '1' => 1 * 1 => 1
1 / '1' => 1 / 1 => 1

'helloworld' - 'hello' = NaN

위와 같이 +연산자를 제외한 나머지 - * / 연산자들은 모두 문자열에서 숫자로 형변환이 이루어진다.

이제 이해가 된다..!

참조값에서의 형변환

자바스크립트에서는 각 연산자는 원시값으로만 연산이 가능하다고 한다.
그렇다면 참조값은 어떻게 연산자를 이용할 수 있을까?

[] + 1 => [].toString() + 1 => '' + 1 => '1'

위와 같이 배열도 toString이란 함수를 이용해 문자열로 변환되어 계산된다.

const obj = {};
obj + 1 => obj.toString() + 1 => '[object Object]' + 1 => '[object Object]1'

object도 toString함수를 이용해 문자열로 변환이 된다고 하는데 [object Object]의 의미는 아직 잘 모르겠다;

==연산자

위에서 정리한 형변환을 이용해 두 값을 비교해봤다.

0 == '0' => 0 == Number('0') => true

0 == [] => 0 == Number(toString([]) => 0 == Number('') => true

두 예시 모두 문자열이 숫자로 형변환되어 비교되는 것을 볼 수 있다.
타입이 다른 두 가지를 비교할 때 숫자가 포함되어 있으면 모두 숫자로 변환되었다.

0 == '0' => true
0 == [] => true
'0' == [] => ????

a=b이고 a=c이면 b=c 라는 아주 간단한 3단 논법에 의하면 위의 물음표는 true가 와야 맞다.
하지만 JavaScript에서는 아쉽게도 false가 나온다.

'0' == [] => '0' == [].toString() => '0' == '' => false

앞서 말했듯이 참조값은 연산을 위해 원시값으로 먼저 변환이 된다.
아까 숫자 0과 비교했을 땐 배열 -> 문자열 -> 숫자로 변환되었던 것이 이번엔 문자열인 '0'과 비교하기 때문에 '배열 ->문자열' 까지만 변환이 되는 것이다.

이것도 이해 완료..!

결론

0 === '0' => false
0 === [] => false
'0' === [] => false

헷갈리지 않으려면 형변환이 발생하지 않는 ===연산자를 사용하자...

[] === [] => false

이건 또 왜 그런지도 공부해야겠다.....