【JavaScript】分割代入 - 配列・オブジェクトの値を分割して変数に代入する

JavaScriptの分割代入について解説します。

検証環境

JavaScript -

macOS

14.1

分割代入

分割代入は“配列やオブジェクトの値を分割して変数に代入すること”です。

配列

配列の値を分割し、先頭から変数に代入できます。

基本構文

[変数A, 変数B] = 配列

左オペランドの変数はカンマ（,）区切りで任意の数だけ記述できます。

サンプル

sample.js

let data = [ 3, 8, 11 ];

___ih_hl_start
let [ a, b, c, d ] = data;
___ih_hl_end

console.log(a, b, c, d);

Console

3 8 11 undefined

分割代入は配列の先頭から順番に変数に代入します。

配列の要素数を越える部分の変数は値が代入されないため、変数dはundefinedになっています。

逆に要素数より少ないと、先頭から変数の分だけ値を代入します。

オブジェクト

オブジェクトの値を分割し、変数に値を代入できます。

オブジェクトの分割代入の方法には種類があります。

変数名=キー

変数に変数名と同じキーの値を代入します。

基本構文

({変数A, 変数B} = オブジェクト)

左オペランドの変数はカンマ（,）区切りで任意の数だけ記述できます。

サンプル

sample.js

let obj = { apple: 150, orange: 120, melon: 2300};

___ih_hl_start
let { melon, apple, pineapple, orange } = obj;
___ih_hl_end

console.log( melon, apple, pineapple, orange );

Console

2300 150 undefined 120

変数名と同じキーが存在する変数のみ代入されます。

また、宣言済みの変数に分割代入する場合は丸括弧（()）で括ります。

sample.js

let obj = { apple: 150, orange: 120, melon: 2300};

let melon, apple, pineapple, orange;

___ih_hl_start
( { melon, apple, pineapple, orange } = obj );
___ih_hl_end

console.log( melon, apple, pineapple, orange );

Console

2300 150 undefined 120

キー指定

変数に指定したキーの値を代入します。

基本構文

{キーA: 変数A, キーB: 変数B} = オブジェクト;

左オペランドに変数とキーをセットで記述します。

複数ある場合はカンマ区切りで任意の数だけ増やせます。

サンプル

sample.js

let obj = { apple: 150, orange: 120, melon: 2300};

___ih_hl_start
let { melon: a, apple: b, pineapple: c = 0 ,orange: d } = obj;
___ih_hl_end

console.log( a, b, c, d );

Console

2300 150 0 120

指定キーが存在する変数のみ値を代入します。

また、pineapple: c = 0のように変数に続き、代入演算子で初期値を設定できます。