([] == false)がtrueなのに、([] || true)は[]を返すのはなぜ?JavaScriptの型変換の仕組みを解説
一見よく似たこの2つの式ですが、その挙動の違いは以下のポイントにあります。
- ([] == false) … 緩い等価比較(loose equality)を使用しているため、型強制(type coercion)が行われます。
- ([] || true) … 左辺の [] を真偽値(truthy / falsy)として評価するため、内部では型強制ではなく Boolean() 関数が使われます。
それでは、それぞれのケースで裏側でどのような変換が行われているのかを詳しく見ていきましょう。
ケース1:([] == false) の場合 ― 緩い等価比較による型強制
MDNのドキュメントによると、異なるデータ型同士を緩い等価演算子(==)で比較した場合、以下の手順で変換が進められます。
ステップ1:ブール値を数値に変換
まず、ブール値は Number() 関数によって数値へと変換されます。
[] == 0 // Number(false) = 0
ステップ2:オブジェクトをプリミティブ値に変換
次に、オブジェクト型である配列はプリミティブ値へと変換されます。空の配列は空文字列("")になります。
"" == 0
ステップ3:文字列を数値に変換
最後に、空文字列が数値に変換されます。
0 == 0
この結果、両辺は等しいと判定され、最終的に true が返されます。
ケース2:([] || true) の場合 ― Boolean() による真偽値評価
一方、論理OR演算子(||)の場合は、左辺の [] を組み込みの Boolean() 関数を使って真偽値へ変換し、truthy / falsy を判定します。
Boolean([]) // → true
JavaScriptでは、中身が空であっても配列やオブジェクトはすべて truthy として扱われます。そのため [] は truthy と判定され、|| 演算子の仕様により元の値である [] がそのまま返されるのです。
おまけ:falsy になる値の一覧
参考までに、JavaScriptで falsy と判定される値は次の6つだけです。
- false
- 0(および -0、0n)
- "" (空文字列)
- null
- undefined
- NaN
空の配列 [] や空のオブジェクト {} はこのリストに含まれないため、truthy になります。これが「== では false と等しいのに、if 文では真として扱われる」という一見不可解な挙動の正体です。
まとめ
([] == false) が true になるのは、緩い等価比較が段階的な型強制を行い、結果として「0 == 0」として比較するためです。一方、([] || true) は Boolean([]) が true(truthy)と評価されるため、[] 自身が返されます。
「== での比較」と「真偽値としての評価」はまったく別の処理であり、この違いを理解することが JavaScript の型変換をマスターする第一歩です。
-
JavaScriptにおけるpreventDefault()とreturn falseの違いを徹底解説
preventDefault()とreturn falseの基本的な違いpreventDefault()は、イベントが発生した際にブラウザのデフォルト動作をキャンセルするメソッドです。例えば、リンクをクリックしたときのページ遷移を防ぎたい場合などに使用します。ただし、イベント自体の伝播(バブリング)は止められず、後続の処理も通常どおり実行されます。一方、return falseは、インラインのイベントハンドラやjQueryなどの環境で使われた場合、デフォルト動作を停止するだけでなく、イベントの伝播も阻止します。また、関数内でreturn falseに到達した時点でそれ以降の処理は実行されず、即
-
JavaScriptでfalsy値(偽と評価される値)を見分ける方法
JavaScriptにおけるfalsy値とはJavaScriptでは、値をBoolean型として評価したときに「false」とみなされる値がいくつか存在します。これらは「falsy値(偽の値)」と呼ばれます。条件分岐や論理演算において、意図しない動作を防ぐために、どの値がfalseと評価されるかを正しく理解しておくことが重要です。JavaScriptでfalseと評価される主な値は以下の通りです。false — Boolean型のfalseそのもの0 — 数値のゼロ空文字列:、、または ``(テンプレートリテラル)null — 値が存在しないことを示す特殊な値undefined — 値が未定義