はじめに
先日Twitterで、@TaneoKoyamaさんが面白いツイートをしていたので、今回はこれを一歩深入りして調べてみます。
今日のコード
console.log(2==1==0); // => true
これ、実際にやってみると本当にtrueになります。
面白い。
解説
1つずつ分解して、調べていきましょう。
console.log(2==1); // => false
↑この段階では、falseになりますが…
console.log(false==0); // => true
↑これがtrueになるのが、このコードのキモですね。
JavaScriptの仕様では、「数字の0」はfalseになります。
その結果、2==1==0
がtrueになるという事態がおきます。
順番を変えて、0==1==2にしたら?
console.log(0==1==2); // => false
結果はfalseです。
分解してみると…
console.log(0==1); // => false
console.log(false==2); // => false
という処理を行なっています。処理が左から行われていることが、確認できますね。
厳密等価演算子で、2===1===0にしたら?
console.log(2===1===0); // => false
はい、無事falseになってくれました。
等価演算子(==)と厳密等価演算子(===)の違い
普段、何気なく使っている等価演算子「==」ですが、型変換をして判断してくれる特性がありました。
これにより、false(ブーリアン型)は「0」に型変換されるので、0=0
という判断になってしまうんですね。
一方、厳密等価演算子(===)は、型変換を行いません。
なので、falseはfalse、0は0なのです。
つまり判断しても、これは等価にはなりません。
よく似た例
console.log(null == undefined); // => true
console.log(null === undefined); // => false
console.log(0 == ''); // => true
console.log(0 === ''); // => false
結論
-
x==y==z
といった形の場合、左から潤に処理される - 「==」と「===」は明確に違う演算子である
- 「==」の型変換に注意する
- JSでは、0(数値)やnull、undefined、''(空文字)はfalseとして扱われる
以上です。
最後までありがとうございました。