What is {…obj} in JS?

What is {…obj} in JS?

I remember first encountering this syntax several years ago when I started using Redux:

ES2018 object spread operator

This is the object spread operator, first introduced to JS in ES2018. As of this writing it’s available in Chrome, Node and a handful of mobile browsers.

Before object spread

Here’s how updated objects before spread in an immutable manner:

example using Object.assign({}, oldObj, newProps)

That’s how you replace an object in an immutable manner. I’ll speak more on immutability later.

With object spread

example using {…oldObj, newProps}

These 2 lines are roughly equivalent:

Object spread is shorter, and is thus preferred by some folks.

Any questions?

Published 19 Aug 2018