「==」（等価演算子）と「===」（厳密等価演算子）の違いを解説してみた

こんにちは。この記事ではjavaScriptにおける等価演算子（==）と厳密等価演算子（===）の違いについて解説していきます。実際の現場では、等価演算子は非推奨としているところが多い印象です。その理由も以下の解説を読むことで理解できるかと思います。

等価演算子（==）と厳密等価演算子（===）の違い

まず初めにMDNを見てみましょう。
MDNには、等価演算子と厳密等価演算子の説明が以下のようにされています。

等価演算子(==)

等価演算子 (==) は、二つのオペランドが等しいことを検査し、論理値で結果を返します。厳密等価演算子とは異なり、オペランドの型が異なる場合には型の変換を試みてから比較を行います。

厳密等価演算子(===)

厳密等価演算子 (===) は、二つのオペランドが等しいことを検査し、論理値で結果を返します。等価演算子とは異なり、厳密等価演算子はオペランドの型が異なる場合、常に異なるものと判断します。

コンソールで試してみた

実際の挙動を見ることで等価演算子と厳密等価演算子の違いが分かるかと思います。

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


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


console.log('1' ==  1);
// true
console.log('1' ===  1);
// false


console.log(0 == false);
// true
console.log(0 === false);
// false

まとめ

等価演算子と厳密等価演算子の違いを理解せず利用していると、思わぬバグを生むことがあります。この記事で理解が深まれば良いなと思っております。

参考

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Equality
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality