Object.assign() vs Object spread operator

Written byPhuoc Nguyen

Created

28 Aug, 2023

Last updated

30 Aug, 2023

#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.
js
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.
js
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.

If you found this post helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

Questions? 🙋

Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.

While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.

Ask me questions

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.

Phước Nguyễn