JavaScript初心者の勘違い
JavaScriptを学ぶ中で、「なんとなくこうだろう」と思っていたことについて、仕様や実際の挙動をもとに整理し基礎を固めていくシリーズです。
「自分も同じ勘違いをしていた！」という方の参考になれば嬉しいです。
はじめに
JavaScriptの == を学習している中で、0 == falseがなぜtrueになるのかを
理解できませんでした。
この記事では、その間違った自分の解釈と正しい考え方についてまとめます。
0 == false
自分の解釈（間違い）
0 == false
-
0はFalsyな値なので、0はfalse -
==は抽象的な比較なので、型変換が行われて0→false - false == false なので結果はtrueが返る
Truthy/Falsyかを考える状況と、型変換が発生する状況を
混ぜて考えてしまっていました。
正しい考え方
-
==では両辺の値の型を確認し、異なる型であれば型変換する - 型変換は、型の組み合わせによって仕様が決まっている
- Truthy/Falsyかを考えるのは条件式やBoolean型での話
→Truthy/Falsyと型変換は別もの！
==の評価イメージ
==は、両辺の型が異なる場合にルールに従い型変換をし評価する比較演算子です。
以下の流れで評価します。
(1) 両辺の値のデータ型を確認する
(2) 型が異なる場合は、仕様で決められたルールに従い型変換する
(3) 両辺を比較し、評価する
順に説明します。
(1) 両辺の値のデータ型を確認する
0 == false
左辺：0 → Number型
右辺：false → Boolean型
データ型が異なるため(2)の型変換へ進みます。
(2) 型が異なる場合は、仕様で決められたルールに従い型変換する
型変換の方法は、型の組み合わせによりJavaScriptの仕様で決まっています。
※参考：ECMASctiptの仕様
例：
| 組み合わせ | 変換方法 |
|---|---|
| Number・Boolean | Boolean→Number |
| String・Boolean | String→Number |
今回はNumberとBooleanの組み合わせなので、BooleanであるfalseをNumberに型に
変換すると0になります。
(3) 両辺を比較して評価する
型変換により0 == 0の状態になっているため、評価はtrueとなります。
===での比較（厳格な等価性）
==は型の確認は行わず等価かどうかを評価します。
それに対し、===は型の確認まで行い等価かどうかを評価します。
そのため、前述した「(1)両辺の値のデータ型を確認する」の手順でデータ型が異なる
時点で評価を終了し、falseを返却します。
意図せず型変換が発生して本来の分岐とは違う処理に流れてしまわないよう、
基本的には===を利用して厳格に値を評価することが推奨されています。
まとめ
今回勘違いしていたポイントは「0はFalsyな値だからfalseになる」という解釈を
==にも当てはめていたことでした。
しかし、
- Truthy/Falsyは条件式での話
-
==は仕様で決められたルールに従い型変換して比較する
という違いがあります。
==が現れたら、「Truthy/Falsyかどうか」をみるのではなく「型の組み合わせを見る」
という考え方を意識していきたいと思います！
おわりに
実務経験はありますが、産休・育休を経て復職し忘れてしまっている部分も多いため、
改めて基礎を学び直しています。
仕事・家事・育児と両立の中での学習になり更新ペースはゆっくりになることも
あると思いますが、少しずつでも続けていきたいと思います。
同じように学び直している方や、仕事・家事・育児と両立しながら頑張っている方の
励みになれば嬉しいです。
次回
次回は"false" == falseについて、「なぜfalseになるのか」を型変換を用いて
整理したいと思います。
次回記事はこちら
参考