Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Spread operator vs Object.assign vs Object.create
(version: 0)
Comparing performance of:
Test Spread operator vs Test Object.create vs Test Object.assign
Created:
5 years ago
by:
Guest
Jump to the latest result
Script Preparation code:
for (i = 0; i < 10; i++) {}
Tests:
Test Spread operator
const firstObject = { sampleData: 'Hello world', sampleMethod: () => { return true; } }; const secondObject = {...firstObject};
Test Object.create
const firstObject = { sampleData: 'Hello world', sampleMethod: () => { return true; } }; const secondObject = Object.create(Object.getPrototypeOf(firstObject), Object.getOwnPropertyDescriptors(firstObject));
Test Object.assign
const firstObject = { sampleData: 'Hello world', sampleMethod: () => { return true; } }; const secondObject = Object.assign({}, firstObject); Object.setPrototypeOf(secondObject, Object.getPrototypeOf(firstObject));
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Test Spread operator
Test Object.create
Test Object.assign
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
5 months ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 YaBrowser/25.10.0.0 Safari/537.36
Browser/OS:
Yandex Browser 25 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
Test Spread operator
90694368.0 Ops/sec
Test Object.create
1974650.1 Ops/sec
Test Object.assign
26061110.0 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and its individual test cases. **Benchmark Overview** The benchmark compares three approaches to create a shallow copy of an object: 1. **Spread operator (`...`)**: Creates a new object with the same properties as the original object, without modifying it. 2. **`Object.assign()`**: Copies all enumerable own properties from one or more source objects to a target object. 3. **`Object.create()`**: Creates a new object that inherits properties from an existing object (the prototype). **Options Compared** The benchmark tests each approach with the same input object: ```javascript const firstObject = { sampleData: 'Hello world', sampleMethod: () => { return true; } }; ``` The objective is to determine which approach is faster and more efficient. **Pros and Cons of Each Approach** 1. **Spread operator (`...`)**: * Pros: Simple, concise, and creates a shallow copy without modifying the original object. * Cons: Can be slower than `Object.assign()` for large objects or when dealing with complex property names. 2. **`Object.assign()`**: * Pros: Can handle large objects, complex property names, and can also merge multiple source objects into one target object. * Cons: Can be slower due to the overhead of iterating over properties, and may modify the original object if not used carefully. 3. **`Object.create()`**: * Pros: Creates a new object with a specific prototype, which can be useful for creating a new object that inherits properties from another object. * Cons: May be slower than `Object.assign()` or spread operator due to the overhead of creating a new object and setting its prototype. **Library/Functionality Used** None of the test cases explicitly use any third-party libraries. However, it's worth noting that some browsers may have internal optimizations for these functions that could affect their performance in certain scenarios. **Special JavaScript Features/Syntax** The benchmark uses modern JavaScript features, such as: * Destructuring assignment (`const { sampleData, sampleMethod } = firstObject;`) * Template literals (`'\r\n \tsampleData: 'Hello world',\r\n\tsampleMethod: () => { return true; }\r\n;'`) These features are not specific to the benchmark itself but rather demonstrate the use of modern JavaScript in the test cases. **Other Alternatives** Other approaches to create a shallow copy of an object include: * Using `JSON.parse(JSON.stringify(obj))` * Using a library like Lodash's `cloneDeep()` Keep in mind that these alternatives may have different performance characteristics and trade-offs compared to the methods tested in this benchmark. The results from the benchmark show that the spread operator (`...`) is the fastest approach, followed closely by `Object.assign()`. `Object.create()` is slower due to its overhead of creating a new object and setting its prototype.
Related benchmarks:
object assign vs object spread on growing objects
JavaScript spread operator vs Object.assign performance create new
JavaScript spread operator vs Object.assign performance (single addition)
JavaScript spread operator vs Object.assign performance - Kien Nguyen
Object.assign() vs spread operator (New object)
Comments
Confirm delete:
Do you really want to delete benchmark?