演算子

算術演算子とは

演算子 は値や変数などに対して、処理を行うための記号です。
演算子にはいくつか種類があり、そのうちのひとつの 算術演算子 は、四則演算子など計算を行うための演算子です。
下記にJavaScriptで一般的に使用する算術演算子をまとめています。

演算子 概要 使用例
+ 数値の加算または文字列の連結 1 + 2, ‘a’ + ‘bc’
- 数値の減算または符号の反転 3 - 1, -(-1)
* 数値の乗算 10 * 2
/ 数値の徐算 10 / 2
% 数値の剰余 11 % 3 
function outputCalculate_1() {
  var x = 11;
  var y = 4;
  console.log(x + y); // 15
  console.log(x - y); // 7
  console.log(x * y); // 44
  console.log(x / y); // 2.75
  console.log(x % y); // 3
  console.log(-x);    // -11
}

式の中に複数の演算が含まれている場合、数学での演算と同様に加減よりも乗除の方が優先して処理されます。
優先順位が同列である場合は左に記述されている順に処理されます。
また、この優先順位は丸括弧を使用することで任意で変えることができます。各演算子の優先順位は下記の通りです。

演算子 優先順位 処理の内容
() 1 丸括弧
- 2 符号を反転
* 3 乗算
/ 3 徐算
% 3 剰余
+ 4 数値の加算
+ 4 文字列の連結
- 4 減算

「+」による演算は、演算対象の値が どちらか一方が文字列である場合は文字列の連結 を行い、共に数値である場合は加算 を行います。
この処理がどの段階で行われるかは下記のサンプルを実行して確認してみましょう。

function outputCalculate_2() {
  console.log(1 + 2);       // 3
  console.log(1 + '2');     // 12
  console.log(1 + 2 + '3'); // 33
  console.log(1 + '2' + 3); // 123
}

インクリメント演算子とデクリメント演算子

JavaScriptには数値を1だけ加算する インクリメント演算子 と 数値を1だけ減算する デクリメント演算子 があります。

演算子 処理の内容
++ インクリメント（1だけ加算）
– デクリメント（1だけ減算）

インクリメント演算子とデクリメント演算子は 演算対象となる変数の値自体を変更します。
そのため、下記の表の通りこの演算子を使用することで省略して書くことができます。

省略後の書き方 省略前の書き方
x++ x = x + 1
x– x = x - 1

下記のサンプルを記述したのち実行して確認してみましょう。

function outputCalculate_3() {
  var x = 10;
  x++; // インクリメント
  console.log(x); // 11
  x--; // デクリメント
  console.log(x); // 10
}

インクリメント演算子やデクリメント演算子は「++x」のように変数の前に演算子を書く方法と、
「x++」のように変数の後に演算子を書く方法の2つがあります。
実はこの2つの書き方ではそれぞれ値を返すタイミングが異なります。

  • ++xと–xの場合：変数をインクリメント・デクリメントした値を返す。
  • x++とx–の場合：変数の値を返したのち、インクリメント・デクリメントをする。

それぞれの違いについては下記のサンプルで確認をしてみましょう。

function outputCalculate_4() {
  var x = 1;
  var y = 10;
  console.log(++x); // 2
  console.log(x);   // 2
  console.log(y++); // 10
  console.log(y);   // 11
}

「++x」のログ出力はインクリメントされた後の値が出力されます。
一方、「y++」のログ出力はインクリメントされる前の値が出力され、その後にインクリメントされていることが確認できます。

代入演算子

代入演算子 とは、変数に値を代入する演算子です。ここまで登場してきました「=」も代入演算子です。
また、代入演算子には代入と同時に処理を行う複合代入演算子が存在しています。

代入演算子 概要 使用例
= 左辺の変数に値を代入 x = 10
+= 左辺の変数に右辺の値を加算して代入 x += 10
-= 左辺の変数に右辺の値を減算して代入 x -= 10
*= 左辺の変数に右辺の値を乗算して代入 x *= 10
/= 左辺の変数に右辺の値を徐算して代入 x /= 10
%= 左辺の変数に右辺の値で徐算した剰余を代入 x %= 10

複合代入演算子はそれぞれ下記の記法で表現することができ、使用することでスクリプトをシンプルに記述することができます。

省略後の書き方 省略前の書き方
x += 1 x = x + 1
x -= 1 x = x - 1
x *= 1 x = x * 1
x /= 1 x = x / 1
x %= 1 x = x % 1

下記のサンプルを記述し、実行して確認してみましょう。

function outputCalculate_5() {
  var x = 1;
  var y = 10;
  x += 5;
  console.log(x); // 6
  y *= 5;
  console.log(y); // 50
}

演算子には算術演算子や代入演算子の他にも存在し、比較演算子や論理演算子があります。