[JavaScript] ドット3つの意味 {...foo}みたいなやつ

ドット3つで{...foo}みたいに表しているものがあったので意味を調べました。

スプレッド構文

スプレッド構文というみたいです。

使い方は

const foo = [1, 2, 3]
const bar = [...foo, 4, 5]
console.log(bar)
// => [1, 2, 3, 4, 5]

って感じです。オブジェクトでも使えます。

const foo = {a: "A", b: "B"}
const bar = {...foo, c: "C"}
console.log(bar)
// => {a: "A", b: "B", c: "C"}

結構便利です。

調べるきっかけになったコード

Nuxtの記事見ていてこの記述があったので調べました。

async addTodo(todo){
  const { data } = await axios.post('/v1/todos', { todo });
  this.$store.commit("setUser", {
    ...this.user,
    todos: [...this.user.todos, data],
  })
}

全部載せると長くなるので載せませんが、mutationのsetUserにuserオブジェクトの情報とuserの持つtodoオブジェクトを一つのオブジェクトにして渡しているようです。

最初見たときはびっくりしました。

まとめ

JSの構文は難しいですね。