まとめて広げる

01 / 06

元を変えずに増やしたい

配列に要素を足すときは push を使ってきた。でも push は元の配列そのものを書きかえる。

元のデータをあとで使いたいときには困るよね。「増やす前」と「増やしたあと」の両方が欲しい、という場面は意外と多いんだ。

const fruits = ["りんご", "みかん"];fruits.push("もも");console.log(fruits);

実行結果

["りんご", "みかん", "もも"]

02 / 06

配列の前に ... と3つの点を書くと、その場で中身をばらばらに並べる。この書き方をスプレッドと呼ぶよ。

[...fruits, "もも"] は「fruits の中身を全部並べて、そのうしろに "もも" を足した配列」という意味になる。

const fruits = ["りんご", "みかん"];const added = [...fruits, "もも"];console.log(added);

実行結果

["りんご", "みかん", "もも"]

03 / 06

ここがいちばん大事なところ。できたのは新しい配列で、元の配列は何も変わっていないよ。

元を書きかえないので、「あとから元のデータを見たら変わっていた」という事故が起きない。map や filter が新しい配列を返していたのと同じ考え方だね。

const fruits = ["りんご", "みかん"];const added = [...fruits, "もも"];console.log(fruits);console.log(added);

実行結果

["りんご", "みかん"]
["りんご", "みかん", "もも"]

04 / 06

... はいくつ書いてもいい。並べて書けば、2つの配列をつないだ1つの配列が作れるよ。

for を回して片方に push していく必要はもう無い。やりたいことがそのまま1行になるね。

const spring = ["さくら", "たんぽぽ"];const summer = ["ひまわり"];const flowers = [...spring, ...summer];console.log(flowers);

実行結果

["さくら", "たんぽぽ", "ひまわり"]

05 / 06

{ } の中に ... を書けば、オブジェクトの項目を全部広げられる。

広げたあとに同じ名前を書くと、そちらで上書きされる。「1項目だけ違うオブジェクトを作る」ときの定番の形だよ。

const user = {  name: "ゆい",  age: 20,};const next = { ...user, age: 21 };console.log(user);console.log(next);

実行結果

{ name: "ゆい", age: 20 }
{ name: "ゆい", age: 21 }

06 / 06

ここまでを整理しておこう。

それじゃあ、実際に広げてみよう。