2.5 算術演算子と式

JavaScriptの主な算術演算子

JavaScriptでは、+、-、*、/ を使って四則演算を行う。さらに、余りを求める % と、べき乗を求める ** がある。本稿では、これらの算術演算子、値を変数へ入れる代入演算子、式の計算順序を、実行できる例とともに説明する。

サンプル・プログラム

算術演算子と式

JavaScriptには四則演算を含む算術演算子が備わっている。
たとえば 1 + 2 という加算式では、1と2をオペランド（operand）、+を演算子（operator）と呼ぶ。値や変数と演算子を組み合わせ、評価すると値になるまとまりが式（expression）である。オペランドを2つ取る演算子を2項演算子、1つ取る演算子を単項演算子と呼ぶ。

+ と - は、オペランドを1つだけ取る単項演算子としても使える。-x は符号を反転し、+x は値を数値へ変換する。++x と --x は変数の値を1ずつ増減するが、値を書き換えるため、数値そのものには使えない。

2項算術演算子
演算子	意味
+	加算
-	減算
*	乗算
/	除算
%	剰余（割り算の余り）
**	べき乗 a ** b は a の b乗を計算する

arith1.html を実行

arith1.html

  19: <script>
  20: //ページのロード時に実行
  21: window.onload = function() {
  22:     let a = 3, b = 2;
  23:     let c;
  24:     document.getElementById('ret1').textContent = 'a = ' + a.toString();
  25:     document.getElementById('ret2').textContent = 'b = ' + b.toString();
  26:
  27:     //加算
  28:     c = a + b;
  29:     document.getElementById('ret3').textContent = 'a + b = ' + c.toString();
  30:
  31:     //減算
  32:     c = a - b;
  33:     document.getElementById('ret4').textContent = 'a - b = ' + c.toString();
  34:
  35:     //乗算
  36:     c = a * b;
  37:     document.getElementById('ret5').textContent = 'a * b = ' + c.toString();
  38:
  39:     //除算
  40:     c = a / b;
  41:     document.getElementById('ret6').textContent = 'a / b = ' + c.toString();
  42:
  43:     //剰余算
  44:     c = a % b;
  45:     document.getElementById('ret7').textContent = 'a % b = ' + c.toString();
  46:
  47:     //べき乗演算
  48:     c = a ** b;
  49:     document.getElementById('ret8').textContent = 'a ** b = ' + c.toString();
  50:
  51:     //ゼロ除算
  52:     c = a / 0;
  53:     document.getElementById('ret9').textContent = 'a / 0 = ' + c.toString();
  54:
  55:     //ゼロをゼロで除算
  56:     c = 0 / 0;
  57:     document.getElementById('ret10').textContent = '0 / 0 = ' + c.toString();
  58: }
  59: </script>

Number型のゼロ除算は例外を投げない。正の数を 0 で割ると Infinity、負の数を 0 で割ると -Infinity、0 / 0 は NaN になる。BigInt型のゼロ除算は RangeError になるため、型による違いに注意が必要である。

代入演算子

JavaScriptでイコール = は「等しいか」を調べる記号ではなく、代入演算子である。op1 = op2 のように書き、右辺 op2 の評価結果を左辺 op1 に代入する。たとえば x = 1 + 2 なら、1 + 2 の計算結果である3を変数 x に代入する。

算術演算子と組み合わせた代入演算子も存在する。
たとえば x += 2 は x = x + 2 と同じ働きをし、変数 x に2を加えた結果を再び x に代入する。

代入演算子
演算子	意味
=	代入
+=	加算代入
-=	減算代入
*=	乗算代入
/=	除算代入
%=	剰余代入
**=	べき乗代入

assig1.html を実行

assig1.html

  19: <script>
  20: //ページのロード時に実行
  21: window.onload = function() {
  22:     let a = 3, b = 2;
  23:     document.getElementById('ret1').textContent = 'a = ' + a.toString();
  24:     document.getElementById('ret2').textContent = 'b = ' + b.toString();
  25:
  26:     //加算代入
  27:     b += a;
  28:     document.getElementById('ret3').textContent = 'b += a, b = ' + b.toString();
  29:
  30:     //減算代入
  31:     b -= a;
  32:     document.getElementById('ret4').textContent = 'b -= a, b = ' + b.toString();
  33:
  34:     //乗算代入
  35:     b *= a;
  36:     document.getElementById('ret5').textContent = 'b *= a, b = ' + b.toString();
  37:
  38:     //除算代入
  39:     b /= a;
  40:     document.getElementById('ret6').textContent = 'b /= a, b = ' + b.toString();
  41:
  42:     //剰余算代入
  43:     b %= a;
  44:     document.getElementById('ret7').textContent = 'b %= a, b = ' + b.toString();
  45:
  46:     //べき乗算代入
  47:     b **= a;
  48:     document.getElementById('ret8').textContent = 'b **= a, b = ' + b.toString();
  49: }
  50: </script>

assig2.html を実行

assig2.html

  20: <script>
  21: //ページのロード時に実行
  22: window.onload = function() {
  23:     let a = 3, b = 2;
  24:     let c, d, e;
  25:     document.getElementById('ret1').textContent = 'a = ' + a.toString();
  26:     document.getElementById('ret2').textContent = 'b = ' + b.toString();
  27:
  28:     //加算して代入
  29:     c = a + b;
  30:     document.getElementById('ret3').textContent = 'c = a + b = ' + c.toString();
  31:
  32:     //代入結果を代入(1)
  33:     d = c = a + b;
  34:     document.getElementById('ret4').textContent = 'c = a + b = ' + c.toString();
  35:     document.getElementById('ret5').textContent = 'd = c = a + b = ' + d.toString();
  36:
  37:     //代入結果を代入(2)
  38:     e = (c = a + b) * 2;
  39:     document.getElementById('ret6').textContent = 'c = a + b = ' + c.toString();
  40:     document.getElementById('ret7').textContent = 'e = (c = a + b) * 2 = ' + e.toString();
  41: }
  42: </script>

結合性

サンプルでは a が3、b が2なので、式 a + b の評価結果は5である。c = a + b は、その5を左辺の変数 c に代入する。

代入式そのものの評価結果は、右辺から代入された値である。代入演算子は右から左へ結び付くため、d = c = a + b は d = (c = (a + b)) と解釈される。その結果、c と d の両方に5が入る。この向きを演算子の結合性という。

演算子の優先順位は、種類が異なる演算子をどの順番で計算するかを決める。算術演算では、おおむね「括弧、べき乗、乗算・除算・剰余、加算・減算」の順であり、代入はそれらより後である。サンプルの e = (c = a + b) * 2 では、まず括弧内で c に5を代入し、次に5と2を掛け、最後に10を e へ代入する。

演算子と結合性
演算子	意味	結合性
+	加算	左から右
-	減算
*	乗算
/	除算
%	剰余（余り）
**	べき乗	右から左
=	代入	右から左
+=	加算代入
-=	減算代入
*=	乗算代入
/=	除算代入
%=	剰余算代入
**=	べき乗算代入

文字列演算子

JavaScriptでは + の左右の少なくとも一方が文字列なら、もう一方も文字列へ変換して結合する。
たとえば s = 'abc' + 'def' では変数 s に 'abcdef' が代入される。1 + '2' の結果も数値の3ではなく文字列の '12' になる。数値計算をしたいときは、入力を Number() などで明示的に数値へ変換すると安全である。

文字列演算子
演算子	意味
+	結合

コラム：代入演算子

Intel 8080

a += b のような複合代入演算子は、同じ左辺を繰り返さずに更新処理を書ける。JavaScriptが文法の多くを受け継いだC言語にも同様の記法があり、アキュムレータへ計算結果を書き戻す古いCPUの命令を連想すると、その働きを理解しやすい。

1974年（昭和49年）4月に発表されたインテルの8ビットCPU 8080 と、8080との互換性を意識して開発された Z80 は、初期のパソコンで広く使われた。
8080の ADD r 命令は、明示したレジスタ r の値をアキュムレータAへ加え、結果をAへ書き戻す。命令の表記は引数が1つだが、計算には暗黙のAと r という2つの値を使う。この働きは、高水準言語の a += b に似ている。
アキュムレータとは、CPUの中で演算結果を主に受け取るレジスタであり、変数に近い役割を持つ。8080 ではAレジスタがアキュムレータである。

8080 にはB、C、D、E、H、Lなどのレジスタもある。BとCの値を加えてAへ入れる処理は、8080のニーモニックでは次の2命令になる。