brunch

매거진 코드 품질을 높이기 위한 TIL

라이킷 13 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by zwoo Sep 07. 2021

자바스크립트 null이 가진 타입 버그

null 의 타입은 null 이 아니다

null 은 비어있음을 뜻하는 자바스크립트의 객체이다. boolean 으로 타입 치환(type coercion)을 하면 거짓 값을 갖고, number 로 타입치환을 하면 0이 된다. 타입 치환이란 자바스크립트 엔진의 기능으로, 특정한 조건과 문맥 속에서 자바스크립트 엔진이 타입을 강제로 바꾸어 적용해주는 기능이다. 명시적으로 프로그래머가 타입을 지정하는 타입 캐스팅과는 달리, 암묵적인 변형이다. 타입 치환에 따라, string 타입인 '3' 에서 number 타입인 2 를 - 연산으로 빼면 결과는 number 타입인 1이 된다. 더하기를 제외한 빼기, 곱하기, 나누기의 사칙연산 조건 하에서 string 타입은 number 타입으로 취급되어, number 타입의 결과값을 내보낸다.

더하기 연산의 특별한 기능, 문자열 합치기

그런데, + 연산은 숫자타입의 덧셈뿐 아니라 문자열 두개를 붙이는 데에도 사용하는 연산자이다.

https://gist.github.com/yeonwooz/b5ad613d7b4dfae05afc0eb14ece0b86

+연산의 조건에서는 피연산자가 하나라도 string 타입이면 문자열을 합치는 상황이라고 판단되어 피연산자들을 나열한 string 타입의 결과값이 도출된다. 자바스크립트의 모든 객체들은 Object 를 상속받는데, 내장메소드인 toString() 도 함께 상속받기 때문에 문자열 치환이 발생하는 것이다.

https://gist.github.com/yeonwooz/44eebb65c909116f97cc1cd971631562

null 의 타입은 object

앞서 null 이 숫자타입으로 치환될 때 0이 된다고 했다. null 이 아무것도 없음을 뜻하는 객체이므로 이는 자연스러운 것 같다. 그러면 문자타입으로 치환될 때에는 빈 문자열 ('') 이 되어야 하지 않을까?

https://gist.github.com/yeonwooz/e3b26922952cf449cdf69483f52c49a6

예상과 달리 null 은 문자열과의 + 연산 조건 하에서 강제로 문자열로 타입치환되었다. 그 원인에 대해 추측도 해보고 구글링도 해봤지만 명쾌한 확답을 찾지는 못했다. null 의 타입이 null 이 아니라 object 라서 그런것인가, 하고 추측했었는데, 결과적으로 이 추측은 틀린 추측이었다.

타입을 찍어보면 undefined 가 독립적인 타입을 가지고 있는 반면 null 은 놀랍게도 object 타입이었다. 그러나 독립적인 타입을 가지고 있는 undefined 도 문자열과 +연산이 되면 문자열로 치환되는 건 마찬가지였다. 이것도 이것대로 신기했다.

https://gist.github.com/yeonwooz/b21914b3c5b0b6234fc1cf44425ece94