Object.assign() vs Object spread operator

Written byPhuoc Nguyen

#Object.assign()

`Object.assign()` is a handy method that lets you merge two or more objects into a single one. Here's the scoop:

const obj1 = { foo: 1 };
const obj2 = { bar: 2 };
const obj3 = Object.assign(obj1, obj2);

console.log(obj3);  // { foo: 1, bar: 2 }

In the example above, `Object.assign()` creates a new object by copying the properties from `obj1` and `obj2` into it, and the result is stored in `obj3`.

But here's something to keep in mind about `Object.assign()`: it changes the first argument, which is the target object.

console.log(obj1);  // { foo: 1, bar: 2 }

If you don't want to change the target object, you can pass an empty object as the first argument instead.

const obj1 = { foo: 1 };
const obj2 = { bar: 2 };
const obj3 = Object.assign({}, obj1, obj2);

console.log(obj1);  // { foo: 1 }
console.log(obj2);  // { bar: 2 }
console.log(obj3);  // { foo: 1, bar: 2 }

#Object spread operator

The object spread operator is a fresh addition to ECMAScript 2018. It's a handy tool that lets you copy an object's properties into a new object.

Let's take another look at the example mentioned earlier, but this time, we'll use the spread operator.

const obj1 = { foo: 1 };
const obj2 = { bar: 2 };
const obj3 = { ...obj1, ...obj2 };

console.log(obj3);  // { foo: 1, bar: 2 }

In the example above, we use the object spread operator to create a new object, which contains all the properties from `obj1` and `obj2`. This new object is called `obj3`.

The cool thing about the object spread operator is that it creates a new object without changing any of the objects it copies from. This is different from the `Object.assign` function, which mutates the original objects.

So, if you want to create a new object without changing the original ones, the object spread operator is the way to go.

const obj1 = { foo: 1 };
const obj2 = { bar: 2 };
const obj3 = { ...obj1, ...obj2 };

console.log(obj1);  // { foo: 1 }
console.log(obj2);  // { bar: 2 }
console.log(obj3);  // { foo: 1, bar: 2 }

Good to know

The spread operator works with `null` values in arrays.
const x = ['foo', null, 'bar'];
const y = ['baz'];
const z = [...x, ...y];   // ['foo', null, 'bar', 'baz']
However, it doesn't include `null` values when spreading objects.
const x = null;
const y = { foo: 'bar' };
const z = {...x, ...y};   // { foo: 'bar' }

#Conclusion

JavaScript offers two methods for merging objects: `Object.assign()` and the object spread operator. While `Object.assign()` is the older and more widely used method, it has one drawback: it modifies the target object. On the other hand, the object spread operator is newer, shorter, and more concise. However, it's not compatible with older browsers.

Questions? 🙋

Do you have any questions? Not just about this specific post, but about any topic in front-end development that you'd like to learn more about? If so, feel free to send me a message on Twitter or send me an email. You can find them at the bottom of this page.

I have a long list of upcoming posts, but your questions or ideas for the next one will be my top priority. Let's learn together! Sharing knowledge is the best way to grow 🥷.

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.