こんにちは、Ryohei(@ityryohei)です!

本記事では、JavaScriptの複合代入演算子の一覧と使い方をご紹介しています。

演算結果を求めるときに+=に省略できるのは便利だけれど、他にはどんな演算子があるの?

上記の疑問にお答えできればと思います。

では、解説していきます。

複合代入演算子とは

複合代入演算子は、左辺と右辺の値を演算して、その結果を左辺に代入する演算子です。下記は書き方が異なる式ですが同じ結果を返します。

//通常の代入式
x = 10;
x = x + 5;

//複合代入演算子
x = 10;
x += 5;

複合代入演算子を使えば式を短く記述することができます。式が短くなることでソースコードの可読性が向上するため、JavaScriptはもちろん、様々なプログラミング言語に組み込まれています。

では、実際にJavaScriptで使用することができる複合代入演算子を見てみましょう。

複合代入演算子一覧

下記はJavaScriptで使用することができる複合代入演算子一覧です。加算、減算などの四則演算から論理演算まで用意されています。それぞれの意味や実行例を記載していますので、参考にしていただければ幸いです。

= 左辺の値を右辺に代入
例)x = 10; //演算結果:10
+= 左辺と右辺の値を加算した結果を代入
例)x = 10; x += 5; //演算結果: 15
-= 左辺と右辺の値を減算した結果を代入
例)x = 10; x -= 5; //演算結果: 5
*= 左辺と右辺の値を乗算した結果を代入
例)x = 10; x *= 5; //演算結果: 50
/= 左辺と右辺の値を除算した結果を代入
例)x = 10; x /= 5; //演算結果: 2
%= 左辺と右辺の値を除算した余りを代入
例)x = 10; x %= 5; //演算結果: 0
**= 左辺と右辺の値をべき乗した結果を代入
例)x = 10; x **= 5; //演算結果: 100000
<<= 左辺を右辺の値だけ左シフトした結果を代入
例)x = 10; x <<= 1; //演算結果: 20
>>= 左辺を右辺の値だけ右シフトした結果を代入
例)x = -10; x >>= 1; //演算結果: -5
>>>= 左辺を右辺の値だけ符号なし右シフトした結果を代入
例)x = -10; x >>>= 1; //演算結果: 2147483643
&= 左辺と右辺の値をビットAND演算した結果を代入
例)x = 10; x &= 2; //演算結果: 2
^= 左辺と右辺の値をビットXOR演算した結果を代入
例)x = 10; x &= 2; //演算結果: 8
|= 左辺と右辺の値をビットOR演算した結果を代入
例)x = 10; x &= 2; //演算結果: 10
&&= xが真値であれば左辺と右辺を論理積演算した結果を代入
例)x = 10; x &&= 4; //演算結果: 4
||= xが偽値であれば左辺と右辺の論理和演算した結果を代入
例)x = 0; x ||= 1; //演算結果: 1
??= xがnullまたはundefinedであれば左辺と右辺のNull合体演算した結果を代入
例)x; x ??== 1; //演算結果: 1

最後に

複合代入演算子はほとんどのプログラミング言語に組み込まれている演算子です。JavaScriptだけでなく他言語を習得する際にも役に立つ知識です。演算時に積極的に使用して覚えていくと良いかもしれませんね!

以上、JavaScriptの複合代入演算子の一覧と使い方のご紹介でした!

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。