プログラマーの80%が知らない？JavaScriptの摩訶不思議な演算子6選

Mastering the Mysteries of JavaScript Syntax: Discover the Secrets Behind These Symbols

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。

---

JavaScriptには、強力で多様な演算子の豊富なセットがあります。これらの演算子の中には、よく知られているものもあれば、新しいまたは使用頻度の低いものもあります。それらが何であるか、どのように使用するか、そしてなぜ重要であるかを説明します。

1. ?= (安全な代入演算子)

何であるか？

安全な代入演算子 ?= は、変数がnullまたはundefinedの場合にのみ値を代入します。

どのように使用するか？

let x;
x ?= 10;
console.log(x); // 出力: 10 (xがundefinedだったため)

なぜ使用するのか？

この演算子は、すでに有効な値を持つ変数に不必要に上書きすることを避けます。

ベストプラクティス

既存の値を上書きせずにデフォルト値を安全に代入したい場合に ?= を使用します。

2. ??= (Null合体代入演算子)

何であるか？

代入演算子 = は、変数に値を代入します。

どのように使用するか？

let z = null;
z ??= 15;
console.log(z); // 出力: 15 (zがnullだったため)

なぜ使用するのか？

0や""などのfalsy値の落とし穴を避けながら、変数がnullishの場合にのみ値を代入することを保証します。

ベストプラクティス

null、またはundefinedの可能性のある変数のフォールバック値を設定する場合に ??= を使用します。

3. &= (ビットごとのAND代入演算子)

何であるか？

&= 演算子はビットごとのAND演算を実行し、結果を変数に代入します。

どのように使用するか？

let num = 5;  // (2進数で 101)
num &= 3;     // (2進数で 011)
console.log(num); // 出力: 1 (ビットごとのAND演算の結果)

なぜ使用するのか？

ビット演算は高速で、フラグ管理やバイナリデータの操作など、低レベルのプログラミングに役立ちます。

ベストプラクティス

パフォーマンスに敏感な環境で必要な場合にのみ、&= をビット演算に使用します。

4. ~~ (ダブルNOTビット演算子)

何であるか？

~~ 演算子は、浮動小数点数を整数に変換するためのショートハンドです。

どのように使用するか？

let decimal = 4.8;
let integer = ~~decimal;
console.log(integer); // 出力: 4

なぜ使用するのか？

数値を丸めることなく切り捨てる必要がある場合、Math.floor()よりも高速な代替手段です。

ベストプラクティス

特にパフォーマンスクリティカルなコードで、数値を素早く効率的に切り捨てる必要がある場合に ~~ を使用します。

5. |= (ビットごとのOR代入演算子)

何であるか？

|= 演算子はビットごとのOR演算を実行し、結果を変数に代入します。

どのように使用するか？

let a = 5;  // (2進数で 101)
a |= 3;     // (2進数で 011)
console.log(a); // 出力: 7 (ビットごとのOR演算の結果)

なぜ使用するのか？

フラグ管理などの低レベルタスクでビットを操作する際に役立ちます。

ベストプラクティス

バイナリ演算を必要とするパフォーマンスクリティカルなアプリケーションで |= を使用します。

6. ||= (論理的OR代入演算子)

何であるか？

||= 演算子は、既存の値がfalsy（null、0、falseなど）の場合にのみ変数に値を代入します。

どのように使用するか？

let b = 0;
b ||= 10;
console.log(b); // 出力: 10 (bがfalsyだったため)

なぜ使用するのか？

長いif文を使用せずにフォールバック値の代入を簡素化します。

ベストプラクティス

falsyな値を持つ可能性のある変数にデフォルト値を代入する際、可読性を高めるために ||= を使用します。