【JavaScript】if文で使う比較演算子は「===(トリプルイコール)」厳密等価演算子を使うことが推奨

Web開発

JavaScriptでif文を書く時の比較演算子は、「==(ダブルイコール)」と「===(トリプルイコール)」どっちを使えばいいの?

JavaScriptでif文を書くときに、比較演算子を使用しますが、「==(ダブルイコール)」と「===(トリプルイコール)」どっちを使えばいいのか迷うことはありませんか?

推奨されるのは「===(トリプルイコール)」なんですが、なぜ「===(トリプルイコール)」が推奨されているのか、「==(ダブルイコール)」と「===(トリプルイコール)」の特徴や推奨される理由を解説します。

記事のポイント
  • 「==(ダブルイコール)」の特徴が分かる
  • 「===(トリプルイコール)」の特徴が分かる
  • どちらを優先して使えばいいかが分かる

==(ダブルイコール)の特徴

  • 値が等しいかチェックするが、型が等しいかまではチェックしない
  • 値の型が異なる場合は、自動で型の変換をしてから比較を行う
  • 型を自動で変換してくれるため、意図しない結果になる可能性がある

ダブルイコールの判定例は次の通りです。

5 == 5 // true
'b' == 'c'; // false
7 == '7'; // true
0 == ''; // true
true == false; // false
0 == false; // true
null == undefind; // true

ダブルイコール(==)は、値が等しいことを表す演算子です。
2つの値が同じであることを示すために使用します。

== 演算子は、データ型が異なっても値が等しければtrueを返します。
例えば、1 == ‘1’ はtrueを返します。
なぜなら、1と’1’の値は等しいからです。
しかし、 === 演算子(3つの等号)は、データ型も値も等しければtrueを返します。 1 === ‘1’ はfalseを返します。なぜなら、1は数値で、’1’は文字列なので、データ型が異なるからです。

===(トリプルイコール)の特徴

  • 値が等しいかに加え、データの型も等しいかまで厳密にチェックする

トリプルイコールの判定例は、次の通りです。

5 === 5 // true
'b' === 'c'; // false
7 === '7'; // false
0 === ''; // false
true === false; // false
0 === false; // false
null === undefind; // false

値の等しさを判定するために使用する演算子の1つです。
通常の等しさを判定する=とは異なり、===は型(データ型)の等しさも考慮して等しさを判定します。
したがって、値は等しいが型が異なる2つのデータに対して===を用いると等しくない(false)と判定されます。
プログラミング言語によって===の挙動は少しずつ異なりますが、等しさの判定をより厳密に行う演算子として利用されています。

===(トリプルイコール)が推奨されている理由

JavaScriptのif構文で===トリプルイコールを使うことが推奨される理由は、主に以下の2つです。

  1. 厳密等価演算子 ===は、厳密等価演算子と呼ばれ、比較する値のデータ型と値の両方を比較します。
    一方、==等価演算子は、値のみを比較し、データ型が異なる場合には型変換が行われます。
    このため、===を使うことで、値だけでなく、データ型まで厳密に比較することができます。
    これにより、思わぬバグを防ぐことができます。

例えば、以下のコードを考えてみましょう。

arduinoCopy codeif ("1" == 1) {
  console.log("等しい");
} else {
  console.log("等しくない");
}

この場合、==演算子が値のみを比較するため、"1"1は等しいと判断され、“等しい”が出力されます。
しかし、これは本来の意図とは異なる結果です。
これを===演算子を使って書き換えると、以下のようになります。

arduinoCopy codeif ("1" === 1) {
  console.log("等しい");
} else {
  console.log("等しくない");
}

この場合、===演算子が値とデータ型の両方を厳密に比較するため、"1"1はデータ型が異なるために等しくないと判断され、“等しくない”が出力されます。

  1. コーディングのベストプラクティス ===演算子を使うことで、コードの可読性を高めることができます。
    コードの中で、===演算子を使うことで、そのコードが厳密な比較を行っていることが明確になり、バグを防ぐことができます。
    また、コードの可読性が高まることで、後からコードを修正する場合にも、修正箇所を見つけることが容易になります。

以上のような理由から、JavaScriptのif構文で===トリプルイコールを使うことが推奨されています。

まとめ

  • ==(ダブルイコール)は、値が等しいかチェックするが、型が等しいかまではチェックしない
  • ===(トリプルイコール)は、値が等しいかに加え、データの型も等しいかまで厳密にチェックする
  • バグを発生させないために、厳密等価演算子である===演算子を使用する
  • コーディングのベストプラクティスは、 ===演算子を使うこと
タイトルとURLをコピーしました