駆け出しのエンジニア日記

プログラミング言語勉強中の奮闘日記

スプレッド構文

配列式や文字列などの反復可能オブジェクトを0個以上の引数(関数呼び出しの場合)や要素(配列リテラルの場合)を期待された場所で「展開」したり、オブジェクト式を0個以上のキーと値のペア(オブジェクトリテラルの場合)を期待された場所で「展開」したりすることができます。(※MDNから一部抜粋)

これを見て理解できる人はなかなかいないと思います。(笑)

実際にサンプルで理解を深めましょう。

・関数呼び出しの場合

Math.max(1, 23, 4, 67, 100)
// 100
const nums = [13, 4, 5, 21, 3, 3, 1, 2, 7, 6, 4, 2, 53456];
Math.max(nums)
//NaN
Math.max(...nums)
//53456
配列を用意し、その中の最大値を求めたい場合、Math.max(~)の中に変数numsを入れます。しかし、もともと変数numsは配列なので意味がわからず「NaN」と出力されます。
「...」を配列やオブジェクトの前に記載して使用する物がスプレッド構文です。
配列やオブジェクトなどを展開したい場合に使用する事ができます。
具体的には、関数呼び出し時複数の引数を指定する際や、配列やオブジェクトの複製をしたい場合に使用できます。

・配列リテラルの場合

既存の配列から新しい配列を作成する。配列の要素を新しい配列にそれぞれ展開する。

サンプルを見てみましょう。

const cats = ['Tama', 'Tora', 'Momo'];
const dogs = ['Hachi', 'Pochi'];
const allPets = [...cats, ...dogs];
allPets
// ['Tama', 'Tora', 'Momo', 'Hachi', 'Pochi'];

ネコとイヌの名前の配列があります。

スプレッド構文を使うことで配列が結合して出力されます。

また順番は問わず、値の追加も可能です。

const allPets = [...cats, ...dogs, 'sakura'];
allPets
// ['Tama', 'Tora', 'Momo', 'Hachi', 'Pochi', 'sakura'];

・オブジェクトリテラルの場合

オブジェクトからオブジェクトにプロパティをコピーできる。

const feline = {legs: 4, family: 'ネコ科'};
const canine = {family: 'イヌ科', bark: true};
{...feline}
// {legs: 4, family: 'ネコ科'};
{...canine}
// {family: 'イヌ科', bark: true};
{...feline, color: 'black'}
//// {legs: 4, family: 'ネコ科', color: 'black'};
 
const user = {name: "太郎", age: 20 };
const userHobby = { hobby: "野球" };
const data = { ...user, ...userHobby };
// {name: '太郎', age: 20, hobby: '野球'}

「...」でオブジェクトの展開、値の追加、結合も可能です。

また、オブジェクトの中で配列をスプレッド構文で展開すると

{...[2, 4, 6, 8] };
// {0: 2, 1: 4, 2: 6, 3: 8}

インデックスのごとき、キーと値のペアになります。

文字列も同様になります。

 

スプレッド構文はかなり便利な構文で今後使うところがあるので今回紹介しました。