==と===の違いを✅

昨日はPF進捗報告会と技術面談を詰め込みました。つよつよな方々と話すことによってつよつよになれた気がしている勘違い野郎ことスバルです。

貴重なアドバイスをいくつかいただいたので、咀嚼するために、一つづつブログにログとして残していこうと思っています。

今回は、==と===の違いを✅していきます。

==と===の違いとは

== 等価演算子

数値と文字列を比較するとき、文字列は数値に変換されます。JavaScript は文字列の数値リテラルを Number 型の数値に変換しようと試みます。最初に、その文字列の数値リテラルから数学的な値を引き出します。次に、最も近い Number 型の値にこの値を丸めます。

等しいことを定義しているみたい。

下記のように文字列と数値を比較する際に、javascriptは文字列をNumber型の数値に変換しようとしてくれる。

console.log('12' == 12)  # true
console.log(12 == true) # true
console.log(['vue', 'angular', 'react'] == ['vue', 'angular', 'react'])  # false 参照先が等しくない
console.log('3.14e2' == 314) # true 浮動小数点により'3.14e2'→'314'

=== 厳密等価演算子

等価演算子とは異なり、厳密等価演算子オペランドの型が異なる場合、常に異なるものと判断します。

厳密に等しいことを定義しているみたい。文字列は数値と比較できない仕様になってしまった。

console.log(1 === 1);
# true

console.log('hello' === 'hello');
#  true

console.log('1' ===  1);
# false

console.log(0 === false);
# false

==は人情味溢れるおばあちゃんで、===は完全に機械になってしまったおばあちゃんと認識します。

予期せぬエラーを吐くことを防ぐために、これから文字列と数値を比較する際は厳密等価演算子を使っていきたい。

Image from Gyazo

式と演算子 - JavaScript | MDN

厳密等価 (===) - JavaScript | MDN