자바스크립트 기초를 제대로 알고 있나요?

※ 자료형과 비교 연산에 관한 글

 

다음의 답을 생각해보기

console.log(null == undefined); // (1)
console.log(null === undefined); // (2)
console.log(null > 0); // (3)
console.log(null == 0); // (4)
console.log(null >= 0); // (5)

정답

 

(1) true

(2) false

(3) false

(4) false

(5) true

 

※ (1)과 (2)의 결과, 왜?

동등 연산자 == 를 사용하여 null과 undefined를 비교하면 true가 반환된다.

두 값은 서로끼리만 어울린다.

그러나 자료형이 달라서 일치 연산자 === 를 쓰면 false 가 리턴됨. 

 

※ (3), (4), (5)의 결과, 왜?

(5)가 참인데 (3)과 (4) 모두가 false인 것은 논리적으로 이상해보인다.
같은 것도 큰 것도 참이 아닌데 같거나 큰 것이 참이라니.
이 결과는 동등 연산자와 비교 연산자의 동작 방식이 달라서이다.
비교 연산자 >, <, >=, <= 는 null을 숫자형으로 변환하여 0으로 만든다.
동등 연산자는 형변환을 하지 않는다.
null이나 undefined를 동등 연산자 ==로 다른 값과 비교하면 무조건 false.
서로를 비교했을 때만 true!

 

자바스크립트의 이런 괴상한 특징은 많은 개발자들을 괴롭게 한다.

null과 undefined가 될 확률이 있는 변수가 > 또는 <의 피연산자로 올 때 주의 기울이기.

 

 

다른 언어엔 이런 일이 없기 때문에 관련한 밈이 있을 정도...

https://brunch.co.kr/@swimjiy/37

밈으로 알아보는 개발: 0 = '0' = [] ?

 

아래 연산의 결과는?

console.log(" \t \n" - 2);

정답

 

-2

 

※ 왜?

공백 문자열은 0으로 간주됨.

 

이런 특징을 우습게 봤다가는 의문의 에러를 만날 수 있다.

웬만하면 동등연산자를 쓰는 게 정신 건강에 이롭다.

 

 

재밌는 영상이라 가져왔다.

자바스크립트 연산의 마스터가 되어보자.

 

https://www.youtube.com/watch?v=qW1V-o2RwKw&t=163s