[Js] "" == 0 return true. js에서 ""과 0은 같다.

1 + 0 이 10이 되는 기적. (feat. typescript가 필요한 이유)

 

js의 특성을 생각하면 간단한 일인데, 가끔 얻어걸리는 버그 아닌 버그에 당황스러울 때가 종종있었다.

 

java를 쓰다보면 그놈의 타입때문에 parse 하느라고 귀찮을 떄가 많았다.

 

하지만 js는 그런걸 안하다 보니 편하다고 생각했었는데

 

명시되지 않은 타입의 변수는 의도치 않은 에러를 종종 야기한다.

 

var로 정의하면 js가 적절히 알아서 타입을 지정하는 것은 분명 편해 보이지만,

 

나중에 뜻하지 않은 에러나 버그를 수정 하다보면 도찐 개찐인것 같다. 

 

숫자와 숫자끼리 더했을 때, 설령 0일지라도 

 

둘다 number + number 를 했음에도 불구하고 가끔 0이 String이 되어있는 경우가 많다. 

 

정확하진 않지만 특히 해당 변수선언시 var를 사용할 경우 더더욱 버그가 발생하기 쉬운 것으로 보인다.

 

예를 들자면

 

var foo =  1;
var boo = 0;
var result = foo + boo;
console.log(result)

답이 무엇이라고 생각하는가? 당연히 1이다. 

 

하지만 그렇지 않을 경우 ( 대부분 10이 나온경우다)

이유를 몰라서 당황스럽기까지 하다.

위의 코드와 정확히 같진 않지만 Jquery, querySelector 등을 통해서 가져온 값을 저렇게 변수 지정을 해주었다. 

 

var foo = 1;  var boo = 0; 일때,

 

var result = foo + boo; 라는 수식을 지정하면 분명 최초 선언을 Number(int)로 0이라고 선언했다. 

 

당연한 1을 기대했건만. 그러나 result가 "10" 이었다. String 타입으로 변환된 것이었다.

 

'+' 연산에서 boo = 0 이었던 Number값이 String "0" 으로 변환 되었던 것이다.

 

Number(foo + boo) 인경우에도 마찬가지 였다. 이미 String 값이 더해진 경우

 

결과는 Number 타입 10이라는 충격적인 값이 나온다.  (하나에 아무것도 안 더했는데 열이 되는 기적)

 

이유가 무엇인가?

 

이 심히 버그스러운 결과는 나의 무지에서 비롯됨을 깨달았다.

 

https://stackoverflow.com/questions/7605011/why-is-0-true-in-javascript

javascript는 0과 ""(빈칸)을 같다고 생각한다. 

지금 당장 개발자 도구를 켜서 콘솔창에 다음을 쳐보자. 

"" == 0
<- true

return 값이 true다!

그렇다면 이것도 놀랄 것이다. 

Numbe("")
<-0

 빈칸이 들어간 "" String 값을 넘버로 치환해봤다. 

빈칸은 0으로 치환된다. 

 

NaN을 내심 기대했을 것이다. 참고로 isNaN("")  은 false다. 

 

 

이유를 알아보자. 

 

0 == ""

이 경우 왼쪽은 Number type. 오른쪽은 String type이다. 

이런 경우 오른쪽은 Number("")로 치환된다. 

0 == Number("")

Number 와  String 을 비교할때 String은 늘 Number로 치환을 강요받는다고 한다. 

따라서 오른쪽이든 왼쪽이든 관계 없다. 

 

그렇다면 반대의 경우는 어떠한가? 

var foo = 0;
foo.toString();
<- "0"

이런 경우는 0이 잘 나온다. 

 

무엇이 문제인가. 

 

이것은 연산자에 따른 형변환이 다르게 일어난다는 이유 때문이었다. 

 

아래 블로그를 통해 깨달았다. 

 

https://velog.io/@cada/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%97%90%EC%84%9C-0%EC%9D%B4-true%EC%9D%B8-%EC%9D%B4%EC%9C%A0

자바스크립트에서 ([] == 0)이 true인 이유

 

이것은 + 연산자의 특별함 때문이었다.

수학 연산자의 + 외에 다른 기능은 다른 두 문자열을 합치는 기능을 하는 것이다. 

 

+ 연산자 일때 모든 문자열이 숫자로 변환될 수 있는 것은 아니지만,
모든 숫자는 문자열로 변환될 수 있기 때문이다. 

오직 + 연산자만이 특별한 기능을 한다!

1 + true
<- 2
1 + false
<- 1
1 + 'true'
<- '1true'
//여기서 true는 1 false는 0 이라는 사실도 깨달았다. 


//기타 연산자(-,*,/,%)는 수학적인 연산만을 한다. 

1 - true
<-  0
1 * false
<- 0
1 - 'true'
< NaN

'1true' 와 NaN의 사례에서 보듯이 + 연산자는 다르다. 

 

따라서 중간 결론을 내릴 수 있었다.

 

Number 0은  '+' 연산자와 함께라면  String '0' 이 될 수 있다. 

이것만 기억하면 해당 버그가 일어났을 때 무엇을 해줘야 할지 금방 파악할 것이다. 

 

정확한 이유는 형변환 때문인데 다음 문서에서 추가적으로 다뤄보겠다.