などの疑問や悩みを解決してまいります。
スプレッド構文は配列やオブジェクトを操作する上でとても便利な機能です。
とはいえJavaScriptの初学者や、これから学ぼうとしている初心者の方には難しい内容かもしれません。
この記事ではそのような方達に向けて、わかりやすくスプレッド構文について解説していきたいと思います。
本記事の目次
スプレッド構文とは
冒頭でも簡単に説明しましたが、スプレッド構文とは配列やオブジェクトの要素を展開することができる構文で、記述方は配列やオブジェクトの前に「...」を付けます。
// スプレッド構文は配列やオブジェクトの前に「...」を付ける
console.log(...array);配列の場合
それでは配列を例にスプレッド構文について説明していきたいと思います。
配列についてまだそこまで理解できていない方は以下の記事を参考にしてみてください。
-
-
【JavaScript】初心者向け！配列とは？配列の使い方と配列操作についてわかりやすく解説していきます。
続きを見る
配列のコピー
配列arrayの中身を別の定数・変数に同じ値をコピーする場合、スプレッド構文を用いることで以下のように記述ができます。
const array1 = [1, 2];
// 配列の値をコピー
const array2 = [...array1];
console.log(array2);
// [1, 2]配列の結合
またスプレッド構文は好きな位置に挿入することもできます。
例えば以下のように別の配列と組み合わせることもできます。
const array1 = [1, 2];
// 配列に値に挿入
const array2 = [0, ...array1, 3];
console.log(array2);
// [0, 1, 2, 3]複数の配列を結合する場合も、スプレッド構文が便利です。
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = [...array1, ...array2];
console.log(array3);
// [1, 2, 3, 4, 5, 6]これにより、concatメソッドなどを使わずに直感的に配列を結合できます。
concatメソッドは現在の配列に他の配列や要素を結合するメソッドです。オブジェクトの場合
次にオブジェクトでスプレッド構文を使用した場合について解説していきます。
オブジェクトについてまだそこまで理解できていない方は以下の記事を参考にしてみてください。
-
-
【JavaScript】初心者向け！オブジェクトとは？オブジェクトの使い方について分かりやすく解説します。
続きを見る
オブジェクトの展開
オブジェクトを展開する場合は以下のように記述します。
const array1 = { a: 1, b: 2 };
// オブジェクトの値をコピー
const array2 = { ...array1 };
console.log(array2);
// { a: 1, b: 2 }オブジェクトの結合
以下のように別のプロパティに挿入することもできます。
const array1 = { a: 1, b: 2 };
// 別のオブジェクトの値と組み合わせる
const array2 = { ...array1, c: 3 };
console.log(array2);
// {a: 1, b: 2, c: 3}プロパティだけでなく、オブジェクトそのものと組み合わせることも可能です。
const array1 = { a: 0, b: 1 };
const array2 = { d: 3, e: 4 };
// オブジェクトの値をコピー
const array3 = { ...array1, c: 2, ...array2 };
console.log(array3);
// {a: 0, b: 1, c: 2, d: 3, e: 4}shallow copyによるコピーの値に対する影響
スプレッド構文で値をコピーすると、階層の浅い要素のコピー（shallow copy）であればコピー元の配列、オブジェクトの値が変更されてもコピーした方の値には影響がありません。
const array1= [1, 2, 3];
const shallowCopy = [...array1];
// 元の配列を変更
array1[0] = 100;
console.log(array1);
// [100, 2, 3] 元の配列が変更されている
console.log(shallowCopy);
// [1, 2, 3] コピーには影響がないスプレッド構文を使用せずに単純に配列array1をshallowCopyに代入した場合、array1の値に変更があればshallowCopyの値も変更されます。
const array2 = [1, 2, 3];
const shallowCopy2 = array2;
// 元の配列を変更
array2[0] = 100;
console.log(array2);
// [100, 2, 3] 元の配列が変更されている
console.log(shallowCopy2);
// [100, 2, 3] コピーも影響を受けるdeep copyによるコピーの値に対する影響
先程shallowCopyでは、コピー元の値が変更されたとしても、コピー側の値には影響がないことが分かったかと思います。
しかし階層の深い要素のコピー（deep copy）では、コピー元の配列と値を共有することになる点に注意しましょう。
以下のコード例ではarray1にさらに配列の値が追加されています。
2層目以降の値に変更があった場合は、コピー先の値にも変更があることが分かります。
// 2層目の値を追加
const array1 = [1, [2, 3]];
const array2 = [...array1];
array1[1].push(4);
console.log(array1[1]);
// [2, 3, 4]
console.log(array2[1]);
// [2, 3, 4] コピーも影響を受ける