Object Assign Vs Spread

Object Assign Vs Spread

Sign up or log in to customize your list.

more stack exchange communities

company blog

Stack Overflow for Teams
– Start collaborating and sharing organizational knowledge.

Create a free Team
Why Teams?

Asked
6 years, 1 month ago

Modified
2 years, 7 months ago

This question already has answers here :

Object spread vs. Object.assign

(15 answers)

javascript ecmascript-6 ecmascript-next

767k 171 171 gold badges 1067 1067 silver badges 1114 1114 bronze badges

6,797 3 3 gold badges 40 40 silver badges 44 44 bronze badges

Sorted by:

Reset to default

Highest score (default)

Trending (recent votes count more)

Date modified (newest first)

Date created (oldest first)

const a = { name: 'Joe Bloggs' }
const b = { ...a, age: 27 };

console.log(a === b) //=> false

const a = { name: 'Joe Bloggs' }
const b = Object.assign(a, { age: 27 });

console.log(a === b) //=> true

const a = { name: 'Joe Bloggs' }
const b = Object.assign({}, a, { age: 27 });

console.log(a === b) //=> false

22.6k 5 5 gold badges 70 70 silver badges 87 87 bronze badges

Stack Overflow

Questions
Help

Products

Teams
Advertising
Collectives
Talent

Company

About
Press
Work Here
Legal
Privacy Policy
Terms of Service
Contact Us
Cookie Settings
Cookie Policy

Stack Exchange Network

Technology

Culture & recreation

Life & arts

Science

Professional

Business

API

Data

Accept all cookies

Customize settings

Find centralized, trusted content and collaborate around the technologies you use most.
Connect and share knowledge within a single location that is structured and easy to search.
The difference is that when using a spread you are always creating a new object:
However using Object.assign it is possible to mutate an existing object:
You still can achieve the behaviour of an object spread with Object.assign by passing an empty object literal as the first argument:

Site design / logo © 2022 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2022.9.7.42963

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy .

by Valeri Karpov @code_barbarian January 29, 2019
Found a typo or error? Open up a pull request! This post is
available as markdown on Github
The 80/20 Guide to ES2015 Generators
The Object Rest/Spread Proposal reached stage 4 in 2018, which means it will be included in a future iteration of the ECMAScript spec. It's also been included in Node.js LTS since Node.js 8, so you can safely start using it today.
The Object spread operator {...obj} is similar to Object.assign() , so which one should you use? Turns out the answer is a bit more nuanced than you might expect.
The fundamental idea of the object spread operator is to create a new plain object using the own properties of an existing object. So {...obj} creates a new object with the same properties and values as obj . For plain old JavaScript objects , you're essentially creating a copy of obj .
Like Object.assign() , the object spread operator does not copy inherited properties or class information. It does copy ES6 symbols .
You can also mix in other properties with the object spread operator. Order matters: the object spread operator will overwrite properties that are defined before it, but not after.
The Object.assign() function is essentially interchangeable with the object spread operator for the above examples. In fact, the object spread spec explicitly states that { ...obj } is equivalent to Object.assign({}, obj) .
So why would you use one or the other? One key difference is that the object spread operator always gives you a POJO back. The Object.assign() function modifies its first parameter in place:
In other words, Object.assign() modifies an object in place, and so it can trigger ES6 setters . If you prefer using immutable techniques, the object spread operator is a clear winner. With Object.assign() , you would have to ensure you always pass an empty object {} as the first argument.
Another related difference is that spread defines new properties, whereas Object.assign() sets them . For example, Object.assign() calls setters that are defined on Object.prototype , whereas the spread operator does not.
This is a fairly minor difference, because it is generally bad practice to
define a custom setter on Object.prototype . But, you should note that
Object.assign() calls setters on the target object.
What about performance? Here's a couple simple benchmarks. It looks like object spread is faster if you pass an empty object as the first parameter to Object.assign() , but otherwise they're interchangeable.
Here's a benchmark using Object.assign() with in-place assignment:
However, once you throw in an empty object parameter to Object.assign() , the object spread operator is consistently faster:
By default, ESLint disallows the object rest/spread operator at the parser level. You need to set parserOptions.ecmaVersion option to at least 9 in .eslintrc.yml , otherwise you'll get a parsing error.
ESLint added a new rule prefer-object-spread that allows you to enforce using object spread instead of Object.assign() . To enable this rule, use:
Now ESLint will report an error if you use Object.assign() instead of object spread.
The object rest/spread operators are both syntactically neat and offer performance benefits over Object.assign() . If you're running Node.js 8 or higher, try these new operators out and make your code more concise.

By Delicious Insights • Published on May 18, 2020
Home Articles and videos Object spread vs. Object.assign
Last updated on September 5, 2022, 11:05am
This post is also available in French .
Let’s get started with our fifteenth post in our daily series “19 nuggets of vanilla JS,” this time to clear things up on the roles and respective specificities of the object spread syntax that became official with ES2018, as opposed to the Object.assign(…) API formalized in ES2015. As you’ll see, these are not quite the same thing.
Check out surrounding posts from the series:
In JavaScript, we’ve always needed to copy properties (and their values) from one object to another . Whether we’re trying to build an options hash, create a descriptor or something else, this is a common scenario.
Considering that it is rather tedious to do manually ( for…in loop, hasOwnProperty(…) safeguard, and more), we quickly saw the emergence of utility functions from third-party libraries, and ultimately in the language’s standard library.
The story of Object.assign(…) goes way back already:
Here are a few quick call examples:
When the React team designed the JSX syntax, it proposed an extension that quickly grew popular: the spread of props , that lets us use an object’s properties as a sort of dynamic bag of props :
ES2015 featured a spread on iterables (e.g. Array and String ), but not on any plain object: we had to wait for ES2018 to get Rest/Spread Properties . The syntax can be used exclusively inside an object literal , thus in the creation of a new object. Just like the spread on iterables, we can use multiple object spreads in a literal. The order only matters when several spread properties share the same name: the last relevant spread wins.
With object spreads, it becomes easy to quickly derive an object from another, which makes it a particularly popular syntax when writing immutable reducers , as with Redux:
You might think that the two bits of code below are equivalent:
In this specific example, the two results will indeed end up the same. The target of Object.assign(…) is a new empty object of type Object , with no existing writer accessors.
However, when code using Object.assign(…) writes to a more advanced object, perhaps one with writer accessors, things start to differ: the second version creates a new object of type Object , it doesn’t write in the original result . This means that not only might you change the underlying type of the object ( result might have been an instance of a custom class of yours), but you’re killing any guarantees or built-in behaviors its writer accessors ensured.
So there you have it. It’s not quite the same thing , but that’s rarely an issue in practice. Just remember that an object spread always returns a new object, of type Object , and will therefore blissfully ignore the type and writer accessors of the original object(s).
Incidentally, this means that when you must alter the original object , perhaps for object identity purposes, you can only go with assign(…) .
Depending on the specifics of your situation and need, you’ll either go with assign(…) or an object spread. Choose wisely.
As for Object.assign(…) , it’s been natively supported since Chrome 45, Firefox 34, Opera 32, Edge 12, Safari 9 and Node 4.
Object spreads showed up more recently but a while ago still: in Chrome 60, Firefox 55, Opera 47, Edge 79, Safari 11.1 and Node 8.3.
As always, for older platforms core-js and polyfill.io provide the former, and Babel can transpile the latter.
Get in-depth understanding of how this works in JavaScript, from core ground rules to API overrides to arrow functions, binding and much, much more!
19 rue François Mauriac 92700 Colombes
© 2011–2022 Delicious Insights SAS All rights reserved La certification qualité a été délivrée pour la catégorie d'actions « Actions de formation ».

Was this page helpful?
Yes
No

Performance & security by Cloudflare

You cannot access medium.com. Refresh the page or contact the site owner to request access.
Copy and paste the Ray ID when you contact the site owner.

Ray ID:

74722a7c9c2f162e

74722a7c9c2f162e Copy

For help visit Troubleshooting guide

Ethereum Private
Tickle Sleep Girl Porn
Private Credit

Object Assign Vs Spread

Report Page