JavaScript入門として基礎的な内容を扱って、ここまで実行環境の構築から変数とデータ型を扱ってきました。
ここまでの内容の中でも処理としては少し出てきたのですが、ここでは演算子（Operator：オペレーター）について触れていきます。
演算子は「＝」や「+」、「-」といったもので、何らかの処理を行うための記号です。一方、演算子によって処理される変数などのことをオペラント（Operand：オペランド）と呼びます。
MDNのページに式と演算子について次のようにまとめられています。
では、演算子について順に見ていきましょう。
算術演算子
まずは算術演算子から見ていきましょう。これは直感的にも理解できると思いますが、四則演算をはじめとした数学的な演算です。
主な算術演算子はこちらになります。
| 演算子 | 概要 | 計算例 |
| + | 加算 | 1 + 2 （3） |
| – | 減算 | 2 – 1 （1） |
| * | 乗算 | 3 * 4 （12） |
| / | 除算 | 10 / 5 （2） |
| % | 剰余 | 10 % 3 （1） |
| ++x | 前置加算 | x = 2; a = ++x; （3） |
| x++ | 後置加算 | x = 2; a = x++; （2） |
| –x | 前置減算 | x = 2; a = –x; （1） |
| x– | 後置減算 | x = 2; a = x–; （2） |
これまでと同じ実行環境で次のコードを書いてみましょう。
var yearTaro, yearHanako;
var yearThis = 2019;
var ageTaro = 30;
var ageHanako = 33;
yearTaro = yearThis - ageTaro;
yearHanako = yearThis - ageHanako;
console.log(yearTaro);
console.log(yearHanako);
console.log(yearThis + 5);
console.log(yearThis * 2);
console.log(yearThis / 6);まず、varで変数を宣言しています。一応、太郎と花子の生まれ年のつもりです。次に今年と太郎と花子の年齢を変数を宣言して代入しています。
これらを使って計算しています。
今年から年齢を引いて、それぞれの生まれ年を求めています。
あとは足し算、掛け算、割り算を行なっています。このあたりは通常の計算と同じですから意味はわかりますね。
ブラウザから実行してみましょう。
JavaScriptコンソールに結果が表示されているのがわかります。特に難しいことはないですね。
論理演算子
次は論理演算子を簡単に見ていきましょう。論理演算子は条件式（論理値）を結合して、その結果をture/falseで返します。
var ageTaro = 30;
var ageHanako = 33;
var olderHanako = ageHanako > ageTaro;
console.log(olderHanako);上手いコードではありませんが、二人の年齢を比較して、花子が歳上かどうかを判定しています。
花子の方が歳上で不等号記号が成立しているのでtrueが返っています。これが逆の不等号記号であれば、falseが返ってきます。
この論理演算子については、こちらの項目でブール論理として詳しく扱います。
ただ、理屈としてはここまでの例でもわかると思います。
typeof演算子
ちょっと違った演算子のtypeof演算子を見てみましょう。typeof演算子は、変数のデータ型を返す演算子です。
上の例を使って次のようなコードで見てみましょう。
var ageTaro = 30;
var ageHanako = 33;
var olderHanako = ageHanako > ageTaro;
// console.log(olderHanako);
console.log(typeof olderHanako);
console.log(typeof ageTaro);
console.log(typeof '花子は太郎より歳上です。');
var x;
console.log(typeof x);
cosole.log()を使ってtypeofに続けて、変数などを入れて表示してみます。
これを実行すると次のようにJavaScriptコンソールに表示されます。
コンソール部分だけ表示しています。
最初のものは論理演算子のところで扱ったものですから、真偽型のbooleanと表示されています。2つ目は、数字が入っている変数でしたので、数値型のnumberが表示されています。3つ目は文章を入れてみました。これは文字列型のstringと表示されています。最後は、変数xを宣言しましたが、何も代入していないので未定義のundefinedが表示されています。
演算子の優先順位
四則演算には計算の優先順位があるように、演算子にも優先順位があります。複数の演算子の組み合わせでどうなるのか見てみましょう。
var yearThis = 2019;
var yearTaro = 1989;
var adultAge = 18;
var isAdultAge = yearThis - yearTaro >= adultAge;
console.log(isAdultAge);今年から太郎さんの生まれ年を引くと太郎さんの年齢になります。その年齢が成人年齢の18歳（と、選挙の投票年齢が変わったのこうします）以上であるかどうかの判定をしています。
実行すると、コンソールにはtrueと表示されますが、こうなるのは自明ではあると思います。
「yearThis – yearTaro >= adultAge」の部分が右からの計算の「yearThis – (yearTaro >= adultAge)」ではなく、左からの「(yearThis – yearTaro) >= adultAge」で計算されているということです。
このように、演算子には組み合わせによって計算の優先順位が変わって来ます。
今、説明でカッコ()を使ってグループ化しましたが、このグループ化が一番優先されます。グループ化の例を一つ見ておきましょう。
var yearThis = 2019;
var yearTaro = 1989;
var ageTaro = yearThis - yearTaro;
var ageHanako = 33;
var average = (ageTaro + ageHanako) / 2; // 31.5
console.log(average);同じような内容のコードですが、最後に太郎と花子の平均年齢を表示するようになっています。二人の年齢を加えるのにグループ化しています。通常の計算と同じように、こちらを先に計算して２で割っています。このカッコがなければ、花子の年齢を２で割った後に、太郎の年齢を足してしまうというおかしな計算になってしまいます。
実行結果は表示させませんが、31.5になるはずです。
では、次のように複数に割り当てるとどうなるでしょうか。
var x, y;
x = y = (3 + 7) * 5 - 9;
console.log(x, y); // 41 41変数を2つ宣言しています。xにyを代入し、さらに「(3 + 7) * 5 – 9」を代入しています。
これの計算の流れを示すならば、まず「10 * 5 – 9」となり、「50 – 9」となり、「41」となってyに代入し、そしてxに代入されるということになります。
実行結果は表示させませんが、JavaScriptコンソールには「41 41」と表示されるはずです。
このコードに、次のように加えてみましょう。
var x, y;
x = y = (3 + 7) * 5 - 9;
console.log(x, y);
x *= 3;
console.log(x);
x += 5;
console.log(x);
x--;
console.log(x);変数xについて、他の演算子を試しています。
それぞれ、右側に示したものと同じ意味です。
x *= 3 <=> x = x * 3
x += 5 <=> x = x + 5
x– <=> x = x-1
上二つは代入演算子に含まれるものです。3つ目はデクリメントで1を減算したものを代入する処理になっています。1を加算したものを代入する「x++」をインクリメントといいます。
実行するとこうなります。
上から順に計算されているのがわかります。
演算の優先順位については、MDNのサイトにまとめの表があります。
様々な演算子と共に２０段階に分類されています。経験的にわかるものも多いと思いますが、一度見ておくのもいいでしょう。
まとめ
JavaScriptの演算子について、全てに触れてはいませんが概要を見て来ました。
日常の計算と同じものも多いので直感的にわかる部分も多いはずです。
変わった演算子なども他にありますが、それらは今後その都度出てきたところで扱おうと思います。
演算子の優先順位にも注意しておきましょう。
