JavaScriptのスプレッド構文(...)についてざっとまとめる

ドットドットドットとかトリプルドットとか、ググる場合の初見殺しであるスプレッド構文に関してまとめる

スプレッド構文とは

変数名の前にドット3つで表現する構文 ... というものをスプレッド構文という。なお、functionの引数に...を付けて表現するものは残余引数なので、それは後述。

使い方

配列のコピー

配列を複製するのに使うことができる。JSで変数を扱う場合イミュータブルにしたいケースが多いので、配列操作をするときに重宝する。

let target = [1,2,3]
// [1, 2, 3]
let new_array = [...target,10]
// [1, 2, 3, 10]
let long_array = [100,...new_array,1000]
// [100, 1, 2, 3, 10, 1000]

ただし、多次元配列には適さないので注意。

オブジェクトのコピー、改変

スプレッド演算子を使うとオブジェクトの値として代入が可能。いろいろなパターンの応用ができる。

純粋に複製する

let obj = { name: "taro" , age: 20 }
// {name: 'taro', age: 20}

let copy_obj = {...obj}
// {name: 'taro', age: 20}

キーと値を追加する

let obj = { name: "taro" , age: 20 }
// {name: 'taro', age: 20}

let new_obj = { ...obj, skill: "運転免許" } 
// {name: 'taro', age: 20, skill: '運転免許'}

こちらに関しては変数名だけ書くとその変数のキーの値を入れるということもできる。設定したキー名と変数名が一致した場合は後述の上書きの挙動とおなじになる。

let obj = { name: "taro" , age: 20 }
// {name: 'taro', age: 20}

let power = 20
let power_obj = {...obj , power} 
// {name: 'taro', age: 20, power: 20}

既存要素を上書きする

let obj = { name: "taro" , age: 20 }
// {name: 'taro', age: 20}

let ziro_obj = { ...obj, name: "jiro" }
// {name: 'jiro', age: 20}

let age = 35
let feature_obj = { ...obj , age}
// {name: 'taro', age: 35}

残余引数とは

functionの引数に...を3つつけることで実現する数に縛られない引数。いわゆる可変長引数。下記の moreArgs のように記述する。

function test(mustArg1, mustArg2, ...moreArgs) {
  console.log("Arg1 is ", mustArg1)
  console.log("Arg2 is ", mustArg2)
  console.log("moreArgs is ", moreArgs)
}

上記のfunctionを利用すると以下のようになる。

// 引数として指定しないと空の配列となる

test("1" , "2")
// Arg1 is  1
// Arg2 is  2
// moreArgs is  []

// 複数指定するとその分配列で値が入る

test("1" , "2" , "3" , "4")
// Arg1 is  1
// Arg2 is  2
// moreArgs is  (2)['3', '4']

ちなみに残余引数のあとに、通常の引数を記述することはできない

// 下記のように定義するとエラーになる

function test(firstArg , ...args , lastArg){
}

参考リンク

• スプレッド構文 - JavaScript | MDN

Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス