【JavaScript入門】比較演算子について！サンプルコード6選！

JavaScriptの比較演算子について書いています。
最初に比較演算子について解説して、下記の比較演算子を使用したサンプルコードを書きました。

JavaScriptの比較演算子について

比較演算子は2つの値を比較するための演算子です。
if文などで2つの値を比較して、trueかfalseの論理値を受け取って処理を分岐したりするときに使います。

例えば、下記のように使うことができます。

let text = 'hello'

if (text === 'hello') {
    console.log('textはhelloです。');
}

最初にtext変数に「hello」という文字列を代入しました。
次の処理で、if文の条件で比較演算子「===」を使っています。

これでtext変数の値が文字列の「hello」と同じか比較しています。
同じだったときにはtrueが返ってきて、違うときにはfalseが返ってきます。

今回は同じ文字列の「hello」が、text変数に代入されているのでtrueが返ってきます。
結果、プログラムを実行すると、if文の中の処理が実行されて「textはhelloです。」が出力されて処理が終了します。

型まで比較するか、自動変換後に比較するか

先ほどのプログラムで使った、イコール3つの比較演算子「===」を使ったときには、値の型まで参照して比較します。
ですが、イコール2つの比較演算子を使ったときには、型が違う場合には変換して比較するようになります。

例えば、下記のようなときです。
まずは、イコール3つで、数値の「100」と文字列の「100」を比べました。

if (100 === '100') {
    console.log('同じです。');
} else {
    console.log('違います。');
}

上記のコードでは型が違うので、違うと判定されてfalseが返ってきます。
結果、「違います。」が出力されます。

比較演算子の箇所を、イコール2つに変えて比較してみます。

if (100 == '100') {
    console.log('同じです。');
} else {
    console.log('違います。');
}

上記のコードではイコール2つの比較演算子を使いました。
型が違うときには型を変換して、同じかを比べます。

数値を文字列に変換すると同じ値になります。
結果、「同じです。」が出力されます。

このように、イコール2つの比較演算子「==」のときには、型を確認して違ったら変換して比較します。
他にイコール2つの比較演算子「==」で、左辺と右辺が違うのにtrueになるパターンは下記です。

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

意図した動作にならない可能性があるので、コードを書くときには、気をつけて使うようにしましょう。

JavaScriptの比較演算子を使ったサンプルコード6選

イコールを含めた、比較演算子を使ったサンプルコードを書いてみました。

両方の値が同じ(==, ===)

イコール2つ「==」とイコール3つ「===」の比較演算子で比較したときには、右辺と左辺の値が同じかどうかを比較します。

先ほど書いたように、イコール2つのときには値が違う場合には型変換して比較されます。
イコール3つの場合には型まで比較してくれます。

両方の演算子を使って、比較するサンプルを書いてみました。

if (8 == '8') {
    console.log('8 == "8"は同じ')
} else {
    console.log('8 == "8"は違う')
}

if (8 === '8') {
    console.log('8 === "8"は同じ')
} else {
    console.log('8 === "8"は違う')
}

最初に数値の「8」と文字列の「'8'」を比較しています。
イコール2つのときには、型変換して比較するので、trueが返ってきます。
結果、「8 == "8"は同じ」が出力されます。

次のif文では、同じ値をイコール3つで比較しています。
イコール3つのときには、型まで確認して比較するので、falseが返ってきます。
結果、「8 === "8"は違う」が出力されます。

両方の値が同じでない(!=, !==)

左辺と右辺の両方の値が同じではないときにtrueを返したいときには、比較演算子の「!=」か「!==」を使います。

イコールが1つだけ(!=)の方は、型変換して比較して、違う場合にはtrueになります。
イコールが2つのとき(!==)には、型まで確認して比較します。

例えば、下記のように使います。

if (8 != '8') {
    console.log('8 != "8"はtrue')
} else {
    console.log('8 != "8"はfalse')
}

if (8 !== '8') {
    console.log('8 !== "8"はtrue')
} else {
    console.log('8 !== "8"はfalse')
}

最初に数値の「8」と文字列の「'8'」を比較しました。

ふたつの値は型変換すると、同じ値になります。
「!=」を使っているので、両方の値が違うときにtrueが返ってきます。
そのため、ここではfalseが返ってきて、「8 != "8"はfalse」が出力されます。

その次のif文では「!==」を使って、同じ値を比較しました。
「!==」は同じでないときにtrueが返ってきます。

イコール2つのときには型まで確認するので、2つの値は同じではないです。
そのため、trueになって「8 !== "8"はtrue」が出力されます。

右より左が少ない(‘<‘)

左側の値が、右側の値より少ないことを比較したいときには「<」演算子を使います。

例えば、下記のように使うことができます。

if (7 < 8) {
    console.log('8より7は少ない');
}

if文で数値の「7」と「8」を比べています。

今回は「<」で比較しています、条件に合うのでtrueが返ってきます。
条件に合わないときにはfalseが返ってきます。

結果、「8より7は少ない」が出力されて処理が終了します。

右より左が少ないか等しい(‘<=’)

左側の値が、右側の値より少ないか等しいことを比較したいときには「<=」演算子を使います。
先ほどの演算子と違うのは「等しい」ときにもtrueが返ってくることです。

例えば、下記のように使うことができます。

if (7 <= 8) {
    console.log('8より7は少ない');
}

if (7 <= 7) {
    console.log('7と7は同じ');
}

最初に先ほどと同じように、if文で数値の「7」と「8」を比べています。
「<=」で比較しています、「7」より「8」の方が少ないのでtrueが返ってきます。

次の処理のif文で、数値の「7」と「7」を比べています。
「<=」で比較しているので、等しい値のときには、こちらもtrueが返ってきます。

結果、console.logで下記のように出力されて、どちらもtrueになったことが確認できました。

8より7は少ない
7と7は同じ

右より左が大きい(‘>’)

左側の値が、右側の値より大きいことを比較したいときには「>」演算子を使います。

例えば、下記のように使うことができます。

if (7 > 6) {
    console.log('6より7は大きい');
}

if文で数値の「7」と「6」を比べています。

今回は「>」で比較しています、条件に合うのでtrueが返ってきます。
条件に合わないときにはfalseが返ってきます。

結果、「6より7は大きい」が出力されて処理が終了します。

右より左が大きいか等しい(‘>=’)

左側の値が、右側の値より大きいか等しいことを比較したいときには「>=」演算子を使います。
先ほどの演算子と違うのは「等しい」ときにもtrueが返ってくることです。

例えば、下記のように使うことができます。

if (7 >= 6) {
    console.log('6より7は大きい');
}

if (6 >= 6) {
    console.log('6より6は同じ');
}

最初に先ほどと同じように、if文で数値の「7」と「6」を比べています。
「>=」で比較しています、「6」より「7」の方が大きいのでtrueが返ってきます。

次の処理のif文で、数値の「6」と「6」を比べています。
「>=」で比較しているので、等しい値のときには、こちらもtrueが返ってきます。

結果、console.logで下記のように出力されて、どちらもtrueになったことが確認できました。

6より7は大きい
6より6は同じ

JavaScriptの比較演算子のまとめ

今回紹介した比較演算子を表にまとめてみました。

終わりに

今回はJavaScriptの比較演算子について解説した後に、サンプルコードを紹介してみました。

同じか比較するイコール2つ「==」のパターンと、イコール3つ「===」のパターンで挙動が違いました。
また、同じでないことを比較するときにも、イコールが2つ・3つで挙動が変わってきました。
この辺りの挙動が間違えやすそうなので、気をつけて使っていくようにしましょう。