.net column
.NET開発者のためのブログメディア

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

 

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

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

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))

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

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

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

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

演算子を使いこなそう

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

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


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags