JavaScriptのスプレッド構文まとめ

JavaScriptで使うスプレッド構文について、初心者なりに勉強したので使用方法をまとめました。
ES2015(ES6)を利用しています
これ、使いこなせたらとても便利なんだろうなあ。。。（初心者）

スプレッド構文とは

「...」を使用し、配列やオブジェクトを展開できる便利な構文
配列に使用する場合の用途としては主に以下の2点があります

1. 配列の展開
2. 配列の結合

配列の展開

以下例に示すように、「...」の後に配列変数を記述することで、配列を展開してくれます

例

const array1  = [1,2]
console.log(array1) //=>[1,2]
console.log(...array1) //=>1 2

また配列をコピーして利用したい際にも、スプレッド構文は利用できます
例えば以下のように「=」で代入してしまうと、代入先の変数の内容を変更した場合、代入元の内容も変更されてしまいます

例

const array2  = [3,4]
const array3 = array2
array3[0] = 100
console.log(array2) //=>[100,4]

ここで使えるのがスプレッド構文です！以下例をみてみましょう
スプレッド構文を利用してコピーした変数は、修正を行ってもコピー元の変数に影響しないんですね。とっても便利。

例

const array2  = [3,4]
const array3 = [...array2]
array3[0] = 100
console.log(array2) //=>[3,4]

配列の結合

続いては配列の結合です。
以下例では、分割代入とスプレッド構文を利用して配列内の3つの要素を新たに1つの配列にまとめています

例

const array4  = [1,2,3,4,5]
const [num1,num2,...array5] = array4
console.log(array5) //=>[3,4,5]

こんな感じで、配列利用するときに色々便利なのがスプレッド構文と初心者なりに理解しました
まだまだ勉強は続く