はじめに
スプレッド構文を使用すると簡単に配列の中身を参照することができます。
スプレッド構文を使用した配列の展開
const arr1 = [1, 2];
console.log(arr1);
console.log(...arr1);
console
[1, 2]
1 2
スプレッド構文を使用すると配列の中身を順番に処理して展開します。
上記では変数として呼び出す方法と、スプレッド構文を用いた展開方法を比較しています。
const arr1 = [1, 2];
const sumFunc = (num1, num2) => console.log(num1 + num2);
sumFunc(arr1[0], arr1[1]);
console
3
上記は配列の中身を処理する記述方法になります。下記はスプレッド構文を使用した記述方法です。
const sumFunc = (num1, num2) => console.log(num1 + num2);
sumFunc(...arr1);
console
3
配列の中身を順番に処理していくときはスプレッド構文が役立つことがわかります。
変数をまとめて代入するスプレッド構文
const arr2 = [1, 2, 3, 4, 5];
const [num1, num2, ...arr3] = arr2;
console.log(num1);
console.log(num2);
console.log(arr3);
console
1
2
[3,4,5]
まとめて変数に格納することも可能となっています。
配列のコピー
const arr4 = [10, 20];
const arr5 = [...arr4];
console.log(arr5);
console
[10, 20]
スプレッド構文を使用してarr4の変数をarr5に格納していることが確認できます。
配列の結合
const arr6 = [1,2];
const arr7 = [3,4];
const arr8 = [...arr6,...arr7];
console.log(arr8);
console
[1, 2, 3, 4]
スプレッド構文を使用して配列の中身が結合されていることが確認できます。
下記はスプレッド構文の間に値を追加した記述方法です。
const arr6 = [1,2];
const arr7 = [3,4];
const arr8 = [...arr6,1000,...arr7];
console.log(arr8);
console
[1, 2, 1000, 3, 4]
オブジェクトの結合、コピー
オブジェクトでもスプレッド構文を用いて、結合やコピーをすることができます。
const obj1 = { name: "takaki", age: 26 };
const obj2 = { ...obj1 };//オブジェクトのコピー
console.log(obj2);
console
{name: 'takaki', age: 26}
const obj3 = { name: "takaki" };
const obj4 = { age: 26 };
const obj5 = { ...obj3, ...obj4 };//オブジェクトの結合
console.log(obj5);
console
{name: 'takaki', age: 26}
プロパティの上書き
const obj6 = { name: "takaki", age: 26 };
const obj7 = { ...obj6, age: 27 };//上書き
console.log(obj7);
console
{name: 'takaki', age: 27}
プロパティの値を上書きして表示させることも可能です。
関数の引数で使う
const nums = [2, 5, 10];
function sum(a, b, c) {
return a * b * c;
}
console.log(sum(...nums));
console
100
スプレッド構文は配列をまとめて関数に渡すときも便利です。
もしスプレッド構文(...)がなければsum(nums[0],nums[1],nums[2])と書かなければいけません。
おわりに
スプレッド構文は配列やオブジェクトの要素を展開して扱える、とてもよくつかわれる構文です。プログラムを組む際に間違えることを抑え、コードも短くわかりやすく使えるので是非扱えるようにしましょう。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！