ES2015 const and object expansion

So i’ve been fighting with this problem this morning. I’m relatively new to ES2015 and still learning a lot of things regarding the very nice constructs you can use in there.

One that threw me off this morning is this:

export const someDefaultReduxStateObject = {
    property1: null,
    property2: []
}

myArray = []
myArray.push({...someDefaultReduxStateObject})
myArray.push({...someDefaultReduxStateObject})

Now you would expect that this simple piece of code would just create 2 objects that are completely different but sadly no, at least, not entirely.

The two objects will be a copy of “someDefaultReduxStateObject” but the property2 will be shared between the two. If you:

myArray[0].property2.push({newObject: 2})

You will end up with the new object in both instances. To this end, you either have to override the const in object spread like so:

myArray.push({...someDefaultReduxStateObject, property2: []})
myArray.push({...someDefaultReduxStateObject, property2: []})

Or create a function instead that would return a completely independent copy each time.