JavaScriptを一から理解する: 演算子について
はじめに
はじめまして、Doxperと申します。
今回はJavaScriptで利用可能な演算子について学んでいきます。
この記事でできるようになること
1.演算子とは何か理解することができる。
2. 演算子の使い方についてコードを確認しながら学ぶことができる。
対象読者
- エンジニアを目指している同士
- JavaScriptの基礎を身につけたい方
- 過去にプログラミング学習に挫折した方
- プログラミング言語は他に触ったことがない方
JavaScript 演算子
演算子とは与えられた変数、リテラルに対して何らかの処理を行うための記号です。
また、演算子によって処理される変数、リテラルのことをオペランド(被演算子)と呼びます。
例を見てみましょう
2 + 3; // => 5
ここでは+は加算を行う演算子で、2と3はオペランドになります。
JavaScriptの演算子一覧
以下が今回の記事で扱うJavaScript演算子の一覧になります。
- 算術演算子
- 代入演算子
- 比較演算子
- 論理演算子
- ビット演算子
- その他の演算子
算術演算子
算術演算子は算術計算を行うために使われます。
例えば以下のようなものがあります。
const number = 4 + 7;
console.log(number) // => 11
+以外にも算術演算子は次のようなものがあります。
| 演算子 | 概要 | 例 |
|---|---|---|
+ |
数値の加算 | x + y |
- |
数値の減算 | x - y |
* |
数値の乗算 | x * y |
/ |
数値の除算 | x / y |
% |
数値の剰余 | x % y |
++ |
数値のインクリメント(1を加える) |
++xまたはx++
|
-- |
数値のデクリメント(1を引く) |
--xまたはx--
|
** |
数値のべき乗 | x ** y |
以下はいずれも正しいコードです。
let x = 6;
let y = 3;
//数値の加算
console.log("x + y = ", x + y); // => 9
// 数値の減算
console.log("x - y = ", x - y); // => 3
// 数値の乗算
console.log("x * y = ", x * y); // => 18
// 数値の除算
console.log("x / y = ", x / y); // => 2
// 数値の剰余
console.log("x % y = ", x % y); // => 0
// 数値のインクリメント
console.log("++x = ", ++x); // => 7
console.log("x++ = ", x++); // => 7
console.log("x = ", x); // => 8
// 数値のデクリメント
console.log("--x = ", --x); // => 7
console.log("x-- = ", x--); // => 7
console.log("x = ", x); // => 6
// 数値の累乗
console.log("x ** y =", x ** y); // => 216
インクリメント演算子/デクリメント演算子
インクリメント/デクリメント演算子について少し説明します。
インクリメント演算子はオペランドに対して1を加算します。
デクリメント演算子はオペランドに対して1を減算します。
// x++ <=> x = x + 1
// x-- <=> y = y - 1
上記の記法はそれぞれ等価です。
インクリメント/デクリメント演算子で演算した結果を他の変数に代入する時は少し注意が必要です。
コードを見てみましょう。
let x = 5;
let y = x++;
console.log(x); // => 6
console.log(y); // => 5
let x = 5;
let y = ++x;
console.log(x); // => 6
console.log(y); // => 6
++オペランドとオペランド++で結果が異なることが分かると思います。
一つ目の例(x++)では変数xを変数yに代入してから変数xがインクリメントされています。
一方、二つ目の例(++x)では変数xをインクリメントしてから変数yに代入しています。
代入演算子
代入演算子は変数に値を代入するために使われます。
const x = 10;
ここでは=を使って変数xに10を代入しました。
以下がよく使われる代入演算子の一覧です。
| 演算子 | 概要 | 例 |
|---|---|---|
= |
代入 | x = 3; //3 |
+= |
加算代入 | x += 3;// x = x + 3 |
-= |
減算代入 | x -= 3; // x = x - 3 |
*= |
乗算代入 | x *= 3; // x = x * 3 |
/= |
除算代入 | x /= 2; // x = x / 2 |
%= |
剰余代入 | x %= 2; // x = x % 2 |
**= |
べき乗代入 | x **= 2; // x = a**2 |
比較演算子
比較演算子は左辺と右辺の値を比較し、真偽値(trueまたはfalse)を返します。
以下は比較演算子を使った簡単な例です
const x = 10, y = 5;
console.log(x > y); // => true
ここでは比較演算子>を使って変数xが変数yよりも大きいか比較しました。
以下がよく使われる比較演算子の一覧です。
| 演算子 | 概要 | 例 |
|---|---|---|
== |
左辺と右辺の値が等しい場合はtrue
|
x == y |
!= |
左辺と右辺の値が等しくない場合はtrue
|
x != y |
=== |
左辺と右辺の値が等しく、データ型も同じ場合はtrue
|
x === y |
!== |
左辺と右辺の値が等しくない場合、またはデータ型が異なる場合はtrue
|
x !== y |
> |
左辺が右辺よりも大きい場合はtrue
|
x > y |
>= |
左辺が右辺以上の場合はtrue
|
x >= y |
< |
左辺が右辺よりも小さい場合はtrue
|
x < y |
<= |
左辺が右辺以下の場合はtrue
|
x <= y |
以下はいずれも正しいコードです
const x = 8;
const y = 7;
console.log(x == y); // false
console.log(x != y); // true
console.log(x === y); //false
console.log(x !== y); //true
console.log(x > y); // true
console.log(x >= y); //true
console.log(x < y); // false
console.log(x <= y); // false
論理演算子
論理演算子は論理演算を行い、真偽値(trueまたはfalse)を返します。
const x = 10, y = 5;
console.log(x > 3 && y === 5); //true
ここでは&&を使いました。
左右の式(x > 3, y === 5)が共にtrueのため結果としてtrueを返しています。
以下が論理演算子の一覧です。
| 演算子 | 概要 | 例 |
|---|---|---|
&& |
オペランドの両方がtrueであればtrueを返します。そうでなければfalseを返します。 |
x && y |
|| |
オペランドのどちらかがtrueの場合はtrueを返します。両方がfalseの場合はfalseを返します。 |
x || y |
! |
オペランドがfalseの場合はtrueを返します |
!x |
// 論理積 AND
console.log(true && true); // true
console.log(true && false); // false
// 論理和 OR
console.log(true || false); // true
// 論理否定
console.log(!true); // false
論理演算子のベン図
ビット演算子
ビット演算子は、数値の二進数表現に対して演算を行います。
以下がビット演算子の一覧です。
| 演算子 | 概要 |
|---|---|
& |
ビット論理積(AND) |
| |
ビット論理和(OR) |
^ |
ビット排他的論理和(XOR) |
~ |
ビット論理否定(NOT) |
<< |
左シフト |
>> |
符号あり右シフト |
>>> |
符号なし右シフト |
その他の演算子
最後にその他の演算子をざっとご紹介します。
| 演算子 | 概要 |
|---|---|
, |
複数のオペランドを評価し、最後のオペランドの値を返します。 |
delete |
オブジェクトのプロパティ、または配列の要素を削除します。 |
void |
式の戻り値を破棄します |
in |
指定されたプロパティがオブジェクトに存在する場合、trueを返します。 |
typeof |
オペランドのデータ型を取得します。 |
上記以外にもいくつかの演算子が存在します。
もっと詳しく学びたい方は以下のページをご参照ください。
おわりに
いかがでしたでしょうか？
今回はJavaScriptで利用可能な演算子をご紹介しました。
少し長くなってしまいましたが、プログラミングを行う上で必須の項目なのでエンジニアを目指されている方は特に理解しておきたいポイントになります。（私も含めて💦）
また、記事について間違っている点やよりよい表現などの提案などありましたらご気軽にコメントいただけますと幸いです。
それではまた次回の記事でお会いしましょう👋
参考文献
式と演算子 - JavaScript | MDN
演算子 · JavaScript Primer #jsprimer
Learn JavaScript Programming
JavaScript Tutorial
山田 祥寛(2016).改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
Discussion