【JavaScriptの入門】比較演算子

JavaScriptでは、2つの値を比較して、その結果を元に処理を行いたい場合が良くあります。
今回は、値の関係性を調べるための比較演算子について解説していきます。

比較演算子

比較演算子は、オペランド同士の値を比較し、trueまたはfalseで返す演算子です。

オペランド 比較演算子 オペランド

比較演算子には、以下の種類があります。

>、>=、<、<=は、値の大きさを比べます。このような比較演算子は、関係演算子と呼ばれることもあります。

また、===、!==、==、!=は、値を比較し値が互いに等しいかそうでないかを調べます。このような比較演算子は、等価（等値）演算子と呼ばれることもあります。

比較演算子の使い方

では、比較演算子の使い方と得られる結果を見ていきましょう。

大なり演算子（>）

大なり演算子は、前のオペランドが後ろのオペランドより大きい場合trueを返し、そうでない場合falseを返します。

console.log(10 > 5); // true
console.log(10 > 10); // false

大なりイコール演算子（>=）

大なりイコール演算子は、前のオペランドが後ろのオペランドより大きい、または等しい場合trueを返し、そうでない場合falseを返します。

console.log(10 >= 5); // true
console.log(10 >= 10); // true
console.log(5 >= 10); // false

慣れないうちは、大なり記号とイコールのどちらを先に記述したら良いか迷ってしまうかもしれません。
大なりイコール演算子の名前の通り、> → =の順番で覚えましょう。

小なり演算子（<）

小なり演算子は、前のオペランドが後ろのオペランドより小さい場合trueを返し、そうでない場合falseを返します。

console.log(5 < 10); // true
console.log(10 < 10); // false

小なりイコール演算子（<=）

小なりイコール演算子は、前のオペランドが後ろのオペランドより小さい、または等しい場合trueを返し、そうでない場合falseを返します。

console.log(5 <= 10); // true
console.log(10 <= 10); // true
console.log(10 <= 5); // false

小なりイコール演算子も、大なりイコール演算子と同様に、< → =の順番で記述します。

厳密等価演算子（===）

厳密等価演算子は、3重イコール===を使って、前後のオペランドを比較します。
同じ値、かつ同じ型である場合trueを返し、そうでない場合falseを返します。

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

同じ値を求めるだけでなく、同じ型であることも条件とする点が特徴です。

また、オペランドがどちらもオブジェクトの場合、2つのオペランドが同じオブジェクトを参照している場合にtrueを返します。
参照しているオブジェクトが異なればfalseとなります。

const obj1 = {};
const obj2 = {};

// 同じ参照を比較
console.log(obj1 === obj1); // true 
// 異なる参照を比較
console.log(obj1 === obj2); // false

厳密不等価演算子（!==）

厳密不等価演算子は、!と2重イコール==を使って、前後のオペランドを比較します。
異なる値、または異なる型である場合trueを返し、そうでない場合falseを返します。

console.log(5 !== 5); // false 
console.log(5 !== '5'); // true　

厳密不等価演算子は、厳密等価演算子と反対の結果を得ます。

等価演算子（==）

等価演算子は、2重イコール==を使って、前後のオペランドを比較し、同じ値であればtrueを返し、そうでない場合falseを返します。
同じデータ型の値を比較する場合には、厳密等価演算子と同じ結果となります。

console.log(5 == 5); // true
console.log('hello' == 'hello'); // true
console.log('hello' == 'hi'); // false

等価演算子は、値が等しいかを判定しますが、データ型が等しいかどうかは判定しません。
以下は、数値の5と文字列の’5’を比較していますが、互いに等しいと判断されています。

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

内部ではオペランド同士が異なる型であった場合、同じ型になるように暗黙的に変換してから比較します。

以下は、異なる型の値が比較された場合の例です。
型がどのように変換されるか確認してみましょう。

// 文字列は数値に変換される
console.log(5 == '5'); // true

// '01'は'1'に変換される
console.log(1 == '01'); // true

// trueは1に変換される
console.log(1 == true); // true
console.log(1 == false); // false

// falseは0に変換される
console.log(0 == true); // false
console.log(0 == false); // true

// nullとundefinedを比較するとtrueと返す
console.log(null == undefined); // true
console.log(null == 0); // false
console.log(null == 1); // false

このように、見た感じでは結果が予測できない挙動となることに注意が必要です。
そのため、厳密等価演算子ではなく、なるべく厳密等価演算子を使うことが推奨され、異なる型を比較したい場合には、はじめに型を揃えて比較を行います。

不等価演算子（!=）

不等価演算子は、!とイコール=を使って、前後のオペランドを比較し、異なる値であればtrueを返し、そうでない場合falseを返します。

console.log(5 != 5); // false
console.log('hello' != 'hello'); // false
console.log('hello' != 'hi'); // true

不等価演算子も等価演算子と同様に、異なる型のオペランドを比較する場合には、暗黙的に型変換が行われます。

console.log(5 != '5'); // false
console.log(1 != '01'); // false
console.log(1 != true); // false
console.log(0 != true); // true
console.log(null != 0); // true

この場合も、なるべく不等価演算子の使用を避け、代わりに型変換を行わない厳密不等価演算子を使用することが推奨されます。

まとめ

今回は、比較演算子について解説しました。

// ポイント
* 比較演算子は、2つの値を比較し真偽値で返す演算子
*「>」「>=」「<」「<=」は、値の大きさを比較する
*「===」「!==」「==」「!=」は、値が互いに等しいか比較する
* 等価（不等価）演算子で異なる型の値を比較する場合、同じ型になるように暗黙的に型変換される

比較演算子は、if文やfor文など、さまざまな文の中で取り入れられています。
ここでポイントをおさえて理解を深めていきましょう。

合わせて読みたい演算子入門シリーズ

第1回：演算子の優先順位
第2回：演算子の種類と役割
第3回：算術演算子
第4回：代入演算子
第5回：比較演算子（当記事）
第6回：論理演算子