What does { …obj1, obj2 } do exactly


April 2019


26 time


Let's say we have two objects:

const state = {
  fishes: { /* some obj data },
  animals: { /* some obj data }

const animals = { /* some NEW data }

In Vuex there is a method replaceState(), which according to the documentation takes one argument and replaces the state with that object.

What will be the result of the following:

replaceState({ ...state, animals })

More specifically, what does { ...state, animals } do exactly?

To bring some context, I took this example from the answer of this question. In that question, the user wanted to replace the animals property of the state with the new object animals.

I'm not sure if this is relevant to Vuex / Vue.js, or is it a pure JS question, but I'll tag it with vue.js anyway.

2 answers


This is actually from ES6's spread syntax and object destructuring.

{ ...state, animals } creates a shallow copy of the state object, with a new property called animals


It means Object.assign({}, state, { animals: animals} }.