最新！JavaScript入門講座ー演算子をわかりやすく解説！

演算子は数値を引いたり足したりなどを意味する記号群のことの総称です。演算子はプログラミングでは必ず使われる文法です。
例えば、変数を定義するときに使用する=(イコール)も演算子の一つです。演算子は実は結構種類が多いです。ただ、一気に覚える必要はありません。

ひとつひとつでいいのでゆっくり覚えていきましょう。演算子はこのあとの記事にも必ず出てくるので、しっかりと理解しましょう。

JavaScriptの演算子を解説

算術演算子

まず最初に算術演算について軽く触れます。
前回の記事で解説しましたが、数学、算数的な計算をすることができる記号を算術演算子といいます。

console.log(11+13); // 加算
console.log(820-10); // 減算
console.log(81 * 10); // 乗算
console.log(100 / 10); // 除算
console.log(3**4); // べき乗
console.log(11 % 5); //剰余

$ node arithmetic.js

//実行結果
24
810
810
10
81
1

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

続いて、インクリメント、デクリメント演算子について解説していきます。この２つは名前の通り、+(加算演算子)と、–(減算演算子)を二つ並べた演算子差します。では、まず普通の+や–を使った例を見てみましょう。

let x = 5;
let y = 7;

x = x + 1;
y = y - 1;

console.log(x);
console.log(y);

$ node math.js

//実行結果
6
6

結果のようになるはずです。
これを、インクリメント演算子、デクリメント演算子を使って同じ結果が得られるコードを書いてみます。

let x = 5;
let y = 7;

x++;//インクリメント
y--;//デクリメント

console.log(x);
console.log(y);

実行すると、先ほどと同じ結果が得られます。
サンプルのコードのように、変数に対して、++または—を付けることで、１を加える、１を減らすといった命令をすることが出来ます。
ちなみに、インクリメント、デクリメント演算子は変数の後ろ、前どちらにつけても同じです。

代入演算子

続いて代入演算子について解説していきます。
代入演算子は=や、それと算術演算子を組み合わせたものが代入演算子となります。さっそくサンプルを見てみましょう。

let x = 10;
let y = 5;

x += y; // 加算して代入
console.log(x);

//初期化
x = 10;
y = 5;
x -= y; // 減算して代入

console.log(x);

//初期化
x = 10;
y = 5;
x *= y; // 乗算して代入

console.log(x);

//初期化
x = 10;
y = 5;
x /= y; // 除算して代入

console.log(x);

//初期化
x = 10;
y = 5;
x %= y; // 剰余して代入

console.log(x);

$ node operator.js

//実行結果

15
5
50
2
0

実行するとこのようになるはずです。普通の算術演算子と違うのは、計算すると、変数に値が代入され、内容が書き換わるのが特徴です。

関係演算子

関係演算子は二つの値の大小を比較する場合に良く用いられる演算子になります。関係演算子には全部で４種類あります。

x < y // yがxより大きい
x <= y //yはｘ以上
x > y // yはxより小さい
x >= y //yはx以下 

このように二つの値を比較します。ちなみに、関係演算子の返り値はtrueもしくはfalseのどちらかが出力されます。例を見てみましょう。

let x = 5;
let y = 6;

console.log(x < y);
console.log(x <= y);
console.log(x > y);
console.log(x >= y);

$ node relat.js

//実行結果
true
true
false
false

このように、関係演算子を使ってconsoleを使用すると、x,yの値ではなく、TrueかFalseの二値のみが返されます。ちなみに、関係演算子は条件文で必ず使用するので、そのあたりを押さえておきましょう。

等価演算子

等価演算子は先ほどの関係演算子と似ており、今度は２つの値が一致しているかいないかを判定する演算子となります。
等価演算子も４種類ありますが、最も使われるのはうち２つです。

等価演算子はこの４つです。厳密が付く等価演算子と、つかない演算子がありますが、基本的に同じ機能です。みなさんは、厳密が付く演算子を使うようにしましょう。
これも返される値はtrueもしくはfalseの二値になります。

let x = "JavaScript";
let y = "TypeScript";

console.log(x === y);
console.log(x !== y);
console.log(x == y);
console.log(x != y);

$ node eql.js

//実行結果
false
true
false
true

実行結果はこのようになるはずです。

論理演算子

論理演算子は関係演算子や等価演算子などと組み合わせて使う演算子になります。論理演算子は以下の３つです。

論理積や論理和という言葉は聞きなれない人が多いかもしれません。なので、これらについて詳しく解説していきます。

AND演算子

AND演算子は論理積に基づいている演算子になります。論理積というのは数学の真偽値というものがもとになっています。次の表を見てみてください

２つ値が入力されたときどちらともtrueである場合のみ、trueを返すのがAND演算子となります。実際にサンプルコードを見てみましょう。

let x = 5;
let y = 6;

console.log(x > 0 && y < 10);
console.log(x === 5 && y === 10);
console.log(x < 4 && y !== 5);

$ node and.js

//実行結果
true
false
false

実行すると、このようになります。１行ずつ解説していきます。
１行目はxは0より大きいのでtrue、yは10より小さいのでtrueです。結果、どちらもtrueが返っているので出力されるのはtrue、となります。

２行目はｘは５であるのでtrue、yは10ではないのでfalseです。結果、片方がfalseになっているため、論理積の表のとおり、出力はfalseになります。

３行目はxは４より大きいのでfalse、yは５ではないのでtrueです。結果、こちらも片方がfalseになっているため、論理積の表のとおり、出力はfalseとなります。
これがAND演算子になります。これによって、より複雑な判定もできるようになります。

OR演算子

OR演算子は論理和と呼ばれる計算をする演算子になります。論理和も数学の真偽値をもとにしています。

論理和では、どちらか一方がtrueであったときに返される値がtrueとなります。実際にサンプルコードを見てみましょう。

let x = 10;
let y = 12;

console.log(x > 10 || y <= 12);
console.log(x !== 10 || y > 10);
console.log(x <= 9 || y === 3 );

$ node or.js

//実行結果
true
true
false

実行するとこのようになります。１行ずつ見ていきましょう。
１行目のxは10より大きくはないのでfalse、yは12以下であるのでtrueになります。よって結果として片方がtrueであるので論理和の表のとおり、出力はtrueとなります。

２行目のxは10であるのでfalse、yは10より大きいのでtrueとなります。片方がtrueでありますので、結果は論理和の表の通り、trueが出力されます。

３行目のxは10であるのでfalse、yは3ではないのでfalseとなります。両方ともfalseであるので、結果は論理和の表の通り、falseが出力されます。
これが論理和になります。

カンマ演算子

カンマ演算子は複数の式を書くときに使います。これを使うと、例えば次のようなことが出来ます。

let x = 10,y = 11,z = 14,str = "JSライブラリ";

サンプルコードのように、変数を宣言するときに予約語を１つ書くだけで複数の変数を宣言初期化するといった書き方ができるようになります。

グループ化演算子

最後に紹介するのはグループ演算子です。グループ演算子は他の演算子が組み合わせて複雑になった場合、どちらが最初に適応されるかという優先順位を決定する演算子となります。

分かりやすい例で表現すると、数学の分配法則にあたります。サンプルコードを見てみましょう。

let x = 3;
let y = 5;
let z = 7;

console.log((x+y)*z);
console.log(x+y*z);

$ node group.js

//実行結果
56
38

実行すると、上と下で計算結果が異なるはずです。
数学と同様で、プログラミングにおいても、乗算と除算が加算や減算よりも優先度が高いのです。なので、下の計算結果では先にy*zの計算がされます。

上の計算結果ではx+yが先に計算されます。そのあとにzが掛けられるので結果が異なるのです。

まとめ

では、今回のまとめに入ります。

本日はこのようなことを勉強しました。
今回はここまでとなります。お疲れさまでした。

参考文献

式と演算子 - JavaScript | MDN

この章では JavaScript の式 (expression) や演算子 (operator) について、代入、比較、算術、ビット、論理、文字列、三項演算子などを説明しています。

developer.mozilla.org

演算子 · JavaScript Primer #jsprimer

JavaScriptにおける演算子についてを紹介します。演算子は記号で表現されるため、検索しにくいです。この章では主要な演算子をまとめて紹介しています。知らない演算子が出てきたときに読み直せばよいため、すべてを1つずつ読む必要はありません。

jsprimer.net

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/

www.freecodecamp.org