JavaScript

【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 を別々の変数・定数として扱うことができなくなってしまいます。


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

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

ABOUT ME
どんぶラッコ
ECコンサルタント、システムエンジニア経験を経て、ProgLearnのシステム開発を担当。

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です