JavaScript 速習チュートリアル

JavaScript の代入

1. JavaScript 代入オペレータ

代入オペレータ(Assignment operators)は、JavaScript のバリアブル(変数)に値をアサインするために使用されます。

x = 10 および y = 5 と仮定した場合、以下の表は各代入オペレータの動作を説明しています。

オペレータ同等の式結果
=x = yx = yx = 5
+=x += yx = x + yx = 15
-=x -= yx = x - yx = 5
*=x *= yx = x * yx = 50
**=x **= yx = x ** yx = 100000
/=x /= yx = x / yx = 2
%=x %= yx = x % yx = 0

       注記:x: 45 のようなオブジェクト内での指定や、size.x = 45 といったプロパティへのアサインも代入の一種です。

2. ロジカルアサインメントオペレータ

オペレータ結果
&&=true &&= 10x = 10
||=false ||= 10x = 10
??=null ??= 10x = 10

3. = オペレータ

シンプルアサインメントオペレータ(Simple Assignment Operator)は、バリアブルに単純な値を代入します。

シンプルアサインメントの例

let x = 10;
let x = 10 + y;

4. += オペレータ

加算代入オペレータ(Addition Assignment Operator)は、バリアブルに値を加算して再代入します。

加算代入の例

let x = 10;
x += 5;

5. -= オペレータ

減算代入オペレータ(Subtraction Assignment Operator)は、バリアブルから値を減算して再代入します。

減算代入の例

let x = 10;
x -= 5;

6. *= オペレータ

乗算代入オペレータ(Multiplication Assignment Operator)は、バリアブルに値を乗算して再代入します。

乗算代入の例

let x = 10;
x *= 5;

7. **= オペレータ

べき乗代入オペレータ(Exponentiation Assignment Operator)は、バリアブルの値をオペランドの数値でべき乗した結果を代入します。

べき乗代入の例

let x = 10;
x **= 5;

8. /= オペレータ

除算代入オペレータ(Division Assignment Operator)は、バリアブルの値を演算し、その商を再代入します。

除算代入の例

let x = 10;
x /= 5;

9. %= オペレータ

剰余代入オペレータ(Remainder Assignment Operator)は、バリアブルを演算した際の余り(剰余)を代入します。

剰余代入の例

let x = 10;
x %= 5;

10. ストリング(文字列)の代入

ストリングに対しても、2 つの代入オペレータを使用できます。

  1. シンプルアサインメントオペレータ: ストリングに値を代入します。
  2. 加算代入オペレータ: ストリングに別の値を連結します。

10.1 = オペレータ

バリアブルに値を代入します。

ストリング代入の例

let text = "こんにちは";

10.2 += オペレータ

ストリングを連結するために使用することも可能です。

加算代入による連結の例

let text = "Hello"; 
text += " World";

11. &&= オペレータ

ロジカル AND 代入オペレータ(Logical AND assignment operator)は、2 つの値の間で使用されます。
最初の値が true(Truthy)である場合にのみ、2 番目の値が代入されます。

ロジカル AND 代入の例

let x = true;
let y = x &&= 10; // 結果: 10
let x = false;
let y = x &&= 10; // 結果: false
let x = 1;
let y = x &&= 10; // 結果: 10
let x = 0;
let y = x &&= 10; // 結果: 0
let x = undefined;
let y = x &&= 10; // 結果: undefined
let x = null;
let y = x &&= 10; // 結果: null

&&= オペレータは ES2020 で導入された機能です。

12. ||= オペレータ

ロジカル OR 代入オペレータ(Logical OR assignment operator)は、最初の値が false(Falsy)である場合に、2 番目の値を代入します。

ロジカル OR 代入の例

let x = false;
let y = x ||= 10; // 結果: 10
let x = true;
let y = x ||= 10; // 結果: true
let x = null;
let y = x ||= 10; // 結果: 10
let x = undefined;
let y = x ||= 10; // 結果: 10

||= オペレータは ES2020 で導入された機能です。

13. ??= オペレータ

Null 合体代入オペレータ(Nullish coalescing assignment operator)は、最初の値が undefined または null である場合にのみ、2 番目の値を代入します。

Null 合体代入の例

let x;
x ??= 10; // 結果: 10
let x = 0;
x ??= 10; // 結果: 0 (0はnull/undefinedではないため)
let x = null;
x ??= 10; // 結果: 10
let x = undefined;
x ??= 10; // 結果: 10
let x = 10;
let y = 5;
x ??= 10; // 結果: 10

??= オペレータは ES2020 で導入された機能です。

14. クイックリファレンス

オペレータ結果
x &&= yx が Truthy な場合にのみ y を代入
x ||= yx が偽値の場合に限り、y を x に代入する
x ??= yx が null または undefined の場合にのみ y を代入

15. 8 つの Falsy な値

JavaScript において、以下の値は論理コンテキストで false とみなされます。

  • false: boolean キーワードそのもの
  • 0: 数値のゼロ
  • -0: マイナスゼロ
  • 0n: BigInt のゼロ
  • "", '', ``: 空のストリング
  • null: 値が欠落している状態
  • undefined: 値がアサインされていないバリアブル
  • NaN: "Not-a-Number"(不正な計算結果など)

16. Truthy な値

これらは Falsy と勘違いされやすいですが、実際には true と評価されます。

  • "0": ゼロを含むストリング(空ではないため Truthy)
  • "false": "false" という文字列
  • []: 空の配列
  • {}: 空のオブジェクト

17. スプレッド演算子 (...)

スプレッドオペレータ(Spread operator)は、反復可能なオブジェクト(イテラブル)を個々の要素に展開します。

let text = "12345";

// 文字列を展開して、その中の最小値と最大値を取得
let min = Math.min(...text);
let max = Math.max(...text);