JavaScriptの演算子一覧｜各演算子を具体例とともに解説

システム
エンジニア

JavaScriptの演算子の一覧があれば便利に利用できそうですね。

プロジェクト
マネージャー

各演算子を具体例と一緒に解説していくので、理解を深めておきましょう。

JavaScriptの演算子とは

JavaScriptの演算子とは、計算をするために用いられる記号のことです。

JavaScriptにはいくつか演算子が存在します。ここからはそれぞれの演算子を具体例を挙げて解説していきます。

加減乗除

JavaScriptの加減乗除の演算子一覧

加算：+
減算：-
乗算：*
除算：/

です。

a=2,b=3
とすると
a+b → 5
a-b →-1
a*b →6
b/a→1.5

他に、割る数を整数として、剰余を求める
%
があります。
a=2,b=3で
b%a→1
です。

インクリメント・デクリメント

JavaScriptのインクリメント、デクリメントの演算子一覧

インクリメント：++
デクリメント：–

インクリメントは1加算する、デクリメントは1減算します。
左に書くか、右に書くかで動作が異なってきます。

x=1として
y=++x → y=2,x=2（xをインクリメントしてから代入）
y=x++ → y=1,x=2（代入してからxをインクリメント）
y=–x → y=0,x=0（xをデクリメントしてから代入）
y=x– → y=1,x=0（代入してからxをデクリメント）
となります。

符号反転

JavaScriptの符号反転の演算子一覧

符号反転：-

x=1
として
-x → -1
です

論理演算

JavaScriptの論理演算の演算子一覧

論理積：&
論理和：|
排他的論理和：^

x=9,y=15
とすると
2進数表現では
x→1001
y→1111
だから
x&y → 1001 → 9
x|y → 1111 → 15
x^y → 0110 → 6
となります。

論理式の論理積：&&
論理式の論理和：||
論理式の否定：!

x=9,y=15
とすると
(x==9)&&(y==15) → true
(x==9)&&(y==0) → false
ですが
(x==9)||(y==15) → true
(x==9)||(y==0) → true
です。

!(x==9) → false
です。

シフト

JavaScriptのシフト演算子一覧

符号付き左シフト：<<
符号付き右シフト：>>
符号なし右シフト：>>>

シフトは2進数で考えて、1ビットずつ、ずらす演算です。

9 << 2 → 36
です。
9は1001
2ビット左シフトすると100100
36
です。

9>>2 → 2
です。
1001を2ビット右シフトすると0010（右にはみ出たビットは捨てられます）
2
です。

プラスのときは
>>
も
>>>
も演算結果が変わりません。

符号あり、なし
というのは
2の補数で表現した時の最上位ビットを符号と見做すか否か、です。

-9
は、2の補数表現で（JavaScriptは32ビットで2の補数表現をします）
11111111111111111111111111110111
です。

-9 << 2
は
11111111111111111111111111011100
になって
-36
となります。

-9 >> 2
は
11111111111111111111111111111101
になって
-3
となります。1が付け足されるということです。

-9 >>> 2
は
00111111111111111111111111111101
となって
1073741821
となります。0が付け足されるということです。

代入演算子

JavaScriptの代入演算子一覧

x = y
でxにyを代入します。

この代入の時に、「演算してから代入する」というのを一気に書くことができます。書けるのは以下です。

x += y：x = x + y
x -= y：x = x – y
x *= y：x = x * y
x /= y：x = x / y
x %= y：x = x % y
x <<= y：x = x << y
x >>= y：x = x >> y
x >>>= y：x = x >>> y
x &= y：x = x & y
x |= y：x = x | y
x ^= y：x = x ^ y

x=1,y=2のとき

x += y → x=3
x -= y → x=-1
x *= y → x=2
x /= y → x=0.5
x %= y → x=1
x <<= y → x=4
x >>=y →：x=0
x >>>= y → x=0
x &= y → x=0
x |= y → x =3
x ^= y → x =3

となります。

比較演算子

JavaScriptの比較演算子一覧

比較演算子はtrueかfalseを返します。

==：式が等しい
!=：式が等しくない

1==2→false
1!=2→true

>：左が大きい
>=：左が等しいか大きい
<：右が大きい
<=：右が等しいか大きい

1>2 → false
1>=2 → false
1<2 → true
1<=2 → true

最後に、
===
というのがあります。これは「式が等しくて、型も等しい」という演算子です。

===
は、クラスの型をチェックするときなどに使います。最初のうちは気にしなくて結構です。

三項演算子

JavaScriptの三項演算子一覧

たとえば
b = (a==1) ? 0 : 1;
とすると
aが1と等しい場合0を
aが1と等しくない場合1を
bに代入します。

if文を使って書くと
if (a == 1) {
b = 0;
} else {
b = 1;
}
ということです。これを短く書くことができます。

文字列演算子

JavaScriptの文字列演算子一覧

+
で文字列を結合できます。これは加算とは違います。

console.log(“abc” + “de”);

で

abcde

が出力されます。

注意しなければいけないのは、数を文字列として結合するときには、
String
を使って文字列型に変換しなければならない、ということです。
例えば、

a = 0;
b = “test” + a;

はエラーになります。

b = “test” + String(a);

としないといけません。

演算子の一覧と優先順位

演算子の優先順位を紹介します。下に行くほど低くなっています。

かっこ：() [] .
符号反転、インクリメント、デクリメント：! ~ – ++ —
乗除算：* / %
加減算：+ –
ビットシフト：<< >> >>>
比較：< <= > >=
等価、不等価：=== == !=
ビット演算の論理積：&
ビット演算の排他的論理和：^
ビット演算の論理和：|
論理積：&&
論理和：||
三項演算：?:
代入演算子：= += -= *= /= %= <<= >>= >>>= &= ^= |=

演算子を使ってプログラムを書くときの「コツ」

最後に、演算子を使ってプログラムを書くときの「コツ」を紹介します。

演算子には優先順位があります。
だから、

1 + 2 * 3

と書いても、答えは9ではなく7です（これは数学と一緒です）。

これくらいならいいでしょう。この程度なら、まだプログラムの可読性を損なわない範囲です。

しかし、長い式になったり、複雑に入り組んだ式を書くと、途端に可読性が下がります。可読性の低いプログラムは保守性に欠け、後から保守する人がそのプログラムで何をしているのか、つかみづらくなり、長い目で見ればバグが混入しやすくなります。

演算子は、優先順位にあまり頼らず、積極的にかっこを使って書くようにした方が可読性が上がります。

例えば、

if(a==1 && b==2)

でも間違いではありません。==は&&より優先順位が高いからです。
しかし、一般的には

if( (a==1) && (b==2))

と書きます。優先順位に頼らなくても、かっこで演算の順番が一目瞭然だからです。このようにして、プログラムの可読性をわざと上げてやることは、よく行われていることです。

実際の開発では、プロジェクトの他のメンバーや、後から保守する人のことも考えて、可読性の高いプログラムを書くようにしましょう。それが、演算子を使いこなす「コツ」です。

システム
エンジニア

これなら演算子を使いこなせそうですね。

プロジェクト
マネージャー

そうですね。基本を理解したら、さらに難易度を上げていきましょう！

演算子を使いこなそう

JavaScriptの演算子を一覧で紹介してきました。

それぞれの具体例を参考に演算子を使ってみましょう。基本的な演算子を使うことに慣れてきたら、可読性を追求したり、難易度の高い演算を使ったりしてみましょう。