【JavaScript】”…”ドットが3つ…？これ、どうやって使うの？スプレッド構文の挙動と活用方法

...hoge ←これ何？

みなさん、こんにちは。どんぶラッコです。

先日、スプレッド構文についてTwitterに画像を投稿してみました。

最初、このドット3つが何をしてくれるやつなのか、迷った人も多いのではないでしょうか？

そこで今回は、この...の概念と、その活用方法についてご紹介します！

配列やオブジェクトの括弧を外してくれる

スプレッド構文の説明は、一言で言うと「[ ] や { }を外してくれるやつ」です。

折角なので、↑のプログラム例も貼り付けておきますね。

const items = ['a', 'b', 'c']

console.log(items) // ['a', 'b', 'c']
console.log(...items) // a b c
console.log('a', 'b', 'c') // a b c

...['a', 'b', 'c'] は 'a', 'b', 'c' と同じ出力結果になっているのがわかると思います！

どんぶラッコ

配列としてまとまっていたものをバラバラにするから”スプレッド”構文なんだね！

活用方法

このスプレッド構文の活用方法は調べるとたくさん出てきます。

しかし、「括弧をどかしてくれる」という原則さえ覚えておけば、もう怖いものはありません！

配列をマージする

例えば、こんな使い方です。

const a = [1, 2, 3]
const b = [...a, 4, 5, 6]
console.log(b) // [1, 2, 3, 4, 5, 6]

みなさんはもうお分かりですよね？

const b = [...a, 4, 5, 6]

の ...a がスプレッド構文です。

つまり、

...a とは 配列が格納されている定数aの括弧を外してね！

と言うことです。

なので、

const b = [...a, 4, 5, 6]
// [...[1,2,3], 4, 5, 6]
// [1, 2, 3, 4, 5, 6]

となるわけです。理解してしまえば簡単ですね！

新しい配列として宣言する(ディープコピーする)

こんな用例も見たことがある方もいるかもしれません。

const a = [1, 2, 3]
let c = [...a] // [...[1,2,3]] → [1,2,3]
c.push(4)
console.log(a, c)
// [1, 2, 3] [1, 2, 3, 4]

let c = […a] がスプレッド構文でしたね。

もしスプレッド構文を使わなかった場合は、

const a = [1, 2, 3]
let c = a // 参照渡しになってしまう！
c.push(4)
console.log(a, c)
// [1, 2, 3, 4] [1, 2, 3, 4]

このように、a と c を別々の変数・定数として扱うことができなくなってしまいます。

より体系的にインプットしたい方は、こちらの書籍がおすすめです。周りの初学者には必ず勧めている書籍です！
解説が下記のように丁寧なので、視覚的に理解できます。

以上、スプレッド構文の説明でした。

慣れたらめちゃめちゃ便利な文法なので、この機会に覚えちゃいましょう♪