JavaScriptではイコール2つによる等価性の比較は、意図しない型の変換が起こるので使わないほうがよいと言われています
TwitterでJavaScriptで[] == ![]
の挙動がおもしろい、という話を見かけたので調べてみました
というわけで突然ですが問題です。以下の比較について結果がどうなるか一瞬考えてみてください
[] == ![]
[0] == false
[1] == true
[1] == [1]
[1, 2] == true
[1, 2] == false
ヒント: ==
の挙動は以下の表のような動きをします
MDNのドキュメントの表を拝借
等価性の比較とその使いどころ - JavaScript | MDN
正解
解説
MDNのドキュメントを読んだなんとなくの理解で解説しますが、間違ってたらコメントなどで指摘してください
[] == ![]
まず![]
の部分ですがBoolean([])
はtrue
になるので、![]
はfalse
になります
配列はオブジェクトなので、表を見るとToPrimitive([]) == ToNumber(false)
という比較になります
[].toString()
は空文字列に変換されるので、つまりだいたい'' == false
→0 == 0
と同じことになります
[0] == false
, [1] == true
上のと同様に[0].toString()
は'0'
、[1].toString()
は'1'
になるので、それぞれの比較結果はtrue
になります
[1] == [1]
オブジェクト同士の比較の場合、完全に同じオブジェクトを指しているかどうかで判定されるので、内容が同じでもこの比較の結果はfalse
になります
[1, 2] == true
, [1, 2] == false
まず左辺が文字列に変換されて'1,2'
になります
次に数値への変換が起こってNaN == 1
の比較になるので、比較結果はfalse
になります
まとめ
Boolean([])
はtrue
==
の左辺か右辺に[]
が来るとだいたいfalse
と同じ==
による比較は難しい