分割代入
分割代入とは、配列やオブジェクトから値を取り出し、それを個別の変数に代入すること。
デストラクチャリング、Destructuring assignment
とも呼ばれる。
まずは配列を分割代入する方法から見ていく。
let [a,b] = [1,9]; console.log(a,b); // 1 9 let x, y; let array = ['hoge', 'fuga']; [x, y] = array; console.log(x); // hoge console.log(y); // fuga
左オペランドに変数を配列形式で記述し、右オペランドに配列を記述する。
そうすると右オペランドの配列から1つずつ要素を取り出し、左オペランドの変数に代入していく。
なお、特定の要素をスキップすることも出来る。
let array = [1,2,3,4]; let [a, , ,b] = array; console.log(a,b); // 1 4
オブジェクトの分割代入も、配列とほぼ同じ。
let obj = { a: 'foo', b: 'boo', c: 'hoge', d: 'fuga' }; let {a,b} = obj; console.log(a); // foo console.log(b); // boo let c,d; ({c,d} = obj); console.log(c); // hoge console.log(d); // fuga
上記の方法ではオブジェクトのキーと同名の変数に代入しているが、任意の名称の変数に代入することも可能。
let obj = { a: 'foo', b: 'boo', c: 'hoge', d: 'fuga' }; let {a:x,b:y} = obj; console.log(x); // foo console.log(y); // boo
変数の入れ替え
分割代入を使えば、変数を入れ替える処理も簡単に行える。
let [a,b] = [1,9]; console.log(a,b); // 1 9 [a,b] = [b,a]; console.log(a,b); // 9 1
デフォルト値
分割代入ではデフォルト値を設定することも出来る。
対応する要素が存在しない(undefined
である)場合、そのデフォルト値が変数に代入される。
let a, b, c, d; [a=5, b=6, c=7, d=8] = [1, undefined, 2]; console.log(a); // 1 console.log(b); // 6 console.log(c); // 2 console.log(d); // 8
let obj = { a: 'foo', b: 'boo' }; let {a=1,c=2} = obj; console.log(a); // foo console.log(c); // 2
関数の戻り値の代入
従来は、戻り値として配列やオブジェクトを返す関数に対しては、そのまま配列やオブジェクトとして受け取るしかなく、その後で個別の要素を取り出していく必要があった。
だが分割代入を使えば、個別の要素をそのまま受け取ることが出来る。
function myFunc(x,y){ const sum = x+y; const product = x*y; return [sum, product]; }; // 従来の方法 const answer = myFunc(4,5); console.log('和は' + answer[0] + ', 積は' + answer[1]); // 和は9, 積は20 // 分割代入 const [sum, product] = myFunc(4,5); console.log('和は' + sum + ', 積は' + product); // 和は9, 積は20
スプレッド演算子
スプレッド演算子は、...
で表現される。
値を渡す際、スプレッド演算子を使って配列を渡すと、受け取った先で自動的にその配列が展開される。
具体的なケースとしては、関数の引数や、配列リテラルが考えられる。
スプレッド演算子を使わないケースと比較すると、理解しやすい。
function myFunc(a,b){ console.log(a); console.log(b); console.log(arguments[2]); console.log(arguments.length); }; let array = [1,2,3,4,5]; myFunc(array); // [ 1, 2, 3, 4, 5 ] // undefined // undefined // 1 myFunc(...array); // 1 // 2 // 3 // 5
let array = [1,2,3]; let array2 = [4,5,6]; let array3 = [7,8,9]; console.log( [55,56,57,array] ); // [ 55, 56, 57, [ 1, 2, 3 ] ] console.log( [55,56,57,...array] ); // [ 55, 56, 57, 1, 2, 3 ] array2.push(array); console.log(array2); // [ 4, 5, 6, [ 1, 2, 3 ] ] array3.push(...array); console.log(array3); // [ 7, 8, 9, 1, 2, 3 ]
通常は配列は配列のままで渡されるが、スプレッド演算子を使うことで、配列としてではなく、その個々の中身を渡すことが可能になる。
これとは逆に、値を受け取る側でスプレッド演算子を使うことも出来る。
この場合は、該当する複数の値を、一つの配列として受け取ることが出来る。
具体的なケースとしては、分割代入での使用。
let [a,b,...spread] = [1,2,97,98,99]; console.log(a); // 1 console.log(b); // 2 console.log(spread); // [ 97, 98, 99 ]