JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptの演算子とは？比較演算子の基本をわかりやすく解説

JavaScriptの演算子とは？

「10 + 20 は 30 に等しい」というシンプルな式を例に考えてみましょう。この式において、10 と 20 は「オペランド（被演算数）」と呼ばれ、「+」は「演算子」と呼ばれます。JavaScriptでは、主に以下の種類の演算子がサポートされています。

  • 算術演算子
  • 比較演算子
  • 論理演算子（関係演算子とも呼ばれます）
  • 代入演算子
  • 条件演算子（三項演算子）

この記事では、中でも頻繁に使われる「比較演算子」について詳しく解説していきます。

比較演算子の一覧

JavaScriptで使える主な比較演算子は次の通りです。ここでは、変数 A に 10、変数 B に 20 が格納されているものとして説明します。

No. 演算子と説明
1

==（等しい）

2つのオペランドの値が等しいかどうかを判定します。値が等しければ、条件は true になります。

例：(A == B) は false（成立しない）。
2

!=（等しくない）

2つのオペランドの値が等しくないかどうかを判定します。値が等しくなければ、条件は true になります。

例：(A != B) は true（成立する）。
3

>（より大きい）

左側のオペランドの値が右側のオペランドの値より大きいかどうかを判定します。大きければ、条件は true になります。

例：(A > B) は false（成立しない）。
4

<（より小さい）

左側のオペランドの値が右側のオペランドの値より小さいかどうかを判定します。小さければ、条件は true になります。

例：(A < B) は true（成立する）。
5

>=（以上）

左側のオペランドの値が右側のオペランドの値以上であるかどうかを判定します。以上であれば、条件は true になります。

例：(A >= B) は false（成立しない）。
6

<=（以下）

左側のオペランドの値が右側のオペランドの値以下であるかどうかを判定します。以下であれば、条件は true になります。

例：(A <= B) は true（成立する）。

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

次のコードは、JavaScriptで比較演算子を実際に使用する方法を示したものです。

実行例

<html>
   <body>
      <script>
         var a = 10;
         var b = 20;
         var linebreak = "<br />";
    
         document.write("(a == b) => ");
         result = (a == b);
         document.write(result);
         document.write(linebreak);

         document.write("(a < b) => ");
         result = (a < b);
         document.write(result);
         document.write(linebreak);
          
         document.write("(a > b) => ");
         result = (a > b);
         document.write(result);
         document.write(linebreak);

         document.write("(a != b) => ");
         result = (a != b);
         document.write(result);
         document.write(linebreak);

         document.write("(a >= b) => ");
         result = (a >= b);
         document.write(result);
         document.write(linebreak);

         document.write("(a <= b) => ");
         result = (a <= b);
         document.write(result);
         document.write(linebreak);
      </script>
      
   </body>
</html>

補足：厳密等価演算子（=== / !==）について

現代のJavaScriptでは、== や != の代わりに、データ型まで厳密に比較する===（厳密等価演算子）および!==（厳密不等価演算子）の使用が推奨されています。== は比較前に暗黙的な型変換を行うため、"5" == 5 が true になるなど、意図しない結果を招く可能性があります。予期せぬバグを防ぐためにも、基本的には === と !== を使うようにしましょう。


  1. JavaScriptのモジュールとは？基本の仕組みと使い方を実例付きで解説

    JavaScriptのモジュールとはモジュール（Module）は、ES2015（ES6）で導入された機能で、大きなコードを小さな部品ごとのファイルに分割して管理するための仕組みです。モジュールの中には、クラスや関数など必要な処理をまとめて定義できます。モジュールでは、「export」と「import」という2つのキーワードが中心となります。exportを使って変数・関数・オブジェクトを外部に公開し、importを使って別のファイルからそれらを読み込んで利用します。従来のJavaScriptでは、読み込んだすべてのスクリプトがグローバルスコープを共有していたため、変数名の衝突などの問題が発生しや

  2. JavaScriptのPromiseとは？非同期処理の基本をわかりやすく解説

    JavaScriptのPromiseとは？Promise（プロミス）は、JavaScriptで非同期処理を扱うためのオブジェクトです。Promiseが生成された時点では、最終的な結果の値はまだ確定していません。処理が完了した将来のタイミングで、成功または失敗の結果を受け取ることができます。これにより、APIからのデータ取得やファイル読み込みなど、時間のかかる処理を効率的に記述できます。Promiseの3つの状態Promiseは、必ず以下の3つの状態のいずれかを持ちます。pending（待機）：初期状態。処理がまだ完了していない状態です。fulfilled（履行）：処理が正常に完了し、結果の値が