◆当ページにはプロモーションが含まれています

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

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


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

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

エンジニアにおすすめ転職サイト

マイナビIT AGENT
迷ったらまずはココ。求人数が多いため希望や条件にマッチする求人が見つかる!

レバテックキャリア
担当者のレベルが高い。エンジニア特化で15年の実績がある実績で初回提案での内定率驚異の90%!

JOIN
副業やフリーランスとして高額報酬案件を見つけるならJOIN。未経験者でも案件獲得実績豊富が強み!

\面白いと思ったら/

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

@proglearn
一緒によく読まれている記事

チャットルームの作成【Vue.js】 | いせぶろぐ へ返信する コメントをキャンセル

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