JavaScript（ES6〜）演算子と分割代入

演算子とは

演算処理を記号やキーワードで表したもの

被演算子(オペランド)

演算子によって処理される値
例）5 + 3の5、3の部分
+は演算子

二項演算子

2つの被演算子を持つ演算子
例）5 + 3

二項演算子には下記のようなものがあります

• プラス演算子 ( + )
  • 1 + 1 =>2
• 文字列結合演算子 ( + )
  • "文字列" + "結合" =>"文字列結合"
• マイナス演算子 ( - )
  • 2 - 1 =>1
• 乗算演算子 ( * )
  • 1 * 1 =>1
• 除算演算子 ( / )
  • 2 / 2 =>1
• 剰余演算子 ( % )
  • 8 % 2 =>0
• べき乗演算子 ( ** )
  • 2 ** 3 =>8

単項演算子

1つの被演算子だけを持つ演算子
例）x = -x;
被演算子(オペランド)を数値に変換します。ただし、真偽値などを数値のデータ型に変換することはわかりにくいコードになるので、現場では使われないです

単項演算子には下記のようなものがあります

• 単項プラス演算子（ + ）
• 単項マイナス演算子 ( - )

比較演算子

値を比較し、trueまたはfalseを返す演算子
現場では厳密等価演算子や厳密不等価演算子がよく使われます
一方、等価演算子や不等価演算子は意図しない挙動をすることがあり、不具合の温床なので、基本的に使われないです
例）5 == "5" => true

• 厳密等価演算子 ( === )
• 厳密不等価演算子 ( !== )
• 等価演算子 ( == )
• 不等価演算子 ( != )
• 大なり演算子 ( > )
• 大なりイコール演算子 ( >= )
• 小なり演算子 ( < )
• 小なりイコール演算子 ( <= )

厳密等価演算子 ( === )

同じ型かつ同じ値である場合にtrueを返す演算子

console.log(5 === 5);    // true
console.log(5 === "5");  // false

厳密不等価演算子 ( !== )

同じ型かつ同じ値である場合にfalseを返す演算子

console.log(5 !== 5);    // false
console.log(5 !== "5");  // true

ビット演算子

値を2進数で処理する演算子

• ビット論理積（ & ）
  • 「両方が1のとき1になる」AND演算
  • マスク処理やフラグ判定 でよく使われます
• ビット論理和（ | ）
  • 「どちらかが1なら1になる」OR演算
  • ビットをセットする（ONにする）処理で使われます
• ビット排他的論理和（ ^ ）
  • 「異なるビットなら1になる」XOR演算
  • 特定のビットを反転させることに使えます
• ビット否定（ ~ ）
  • すべてのビットを反転（NOT演算）
• 左シフト演算子（ << ）
  • ビットを左にnビット移動する演算子
• 右シフト演算子（ >> ）
  • ビットを右に n ビット移動する演算子（符号あり）
• ゼロ埋め右シフト演算子（ >>> ）
  • 符号なしの右シフト演算子（0 で埋める）

代入演算子

変数に値を代入する演算子

論理演算子

真偽値（true/false）を扱う演算子

AND演算子 ( && )

• 左辺がfalseの場合：右辺を評価せず、左辺の値を返します
• 左辺がtrueで、右辺がfalseの場合：右辺の値を返します
• 左辺と右辺が両方trueの場合：右辺の値を返します

左辺を評価する際に、真偽値へと暗黙的な変換をしてから判定しています

• falsyな値はfalse
• falsyでない値はtrue
• falsyな値の一覧
  • null
  • undefined
  • false
  • NaN
  • 0
  • 0n
  • “” (空文字列)

// 左辺がfalsyな値の時
console.log(0 && "Hello");    // 0
console.log(false && "Bye");  // false

// 右辺がfalsyな値の時
console.log(true && 0);          // 0
console.log(true && null);       // null

// 左辺、右辺両方がtrueの時
console.log(true && 1);         // 1
console.log(true && "Hello");   // "Hello"

短絡評価

左辺がfalseの場合、右辺を評価をしないのような値が決まった時点でそれ以上評価しないこと

• 処理効率が向上します

OR演算子 ( || )

• 左辺の評価結果がtrueの場合：左辺の値を返します
• 左辺の評価結果がfalseの場合：右辺の値を返します

NOT演算子 ( ! )

真偽値を反転して返す演算子

三項演算子

条件 ? 真の場合 : 偽の場合のように書ける、簡潔な条件分岐
constを使った変数宣言時によく使われます

グループ演算子

()で式をグループ化し、優先順位を変更する演算子

const a = 4;
const b = 5;
const c = 6;

console.log(a + b * c); // 34
console.log((a + b) * c); // 54

カンマ演算子

複数の式を評価し、最後の式の値を返す演算子

const a = 1;
const b = 2;
const c = (a = a + 1, b = b + 2, a + b); // 複数の式を評価して、最後の式 `a + b` の結果が返される
console.log(c); // 5

分割代入

配列やオブジェクトの要素を個別の変数に同時に代入する構文

const arr = [1, 2, 3];

// 通常の代入
const a = arr[0];
const b = arr[1];
const c = arr[2];

// 分割代入
const [x, y, z] = arr;

console.log(x); // 1
console.log(y); // 2
console.log(z); // 3

まとめ

上記の中からよく使われるものは分割代入、三項演算子、厳密比較、論理演算子です。分割代入や三項演算子は、コードを簡潔にし可読性を高めるため、特に短いコードを書く際に便利です。