Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Object.assign vs spread operator vs vanilla
(version: 0)
Comparing performance of:
Object.assign vs spread operator vs Manual Update
Created:
7 years ago
by:
Guest
Jump to the latest result
Tests:
Object.assign
var params = { b:"hello", c: true, d:7 }; var other = Object.assign({ a: 2 }, params);
spread operator
var params = { b:"hello", c: true, d:7 }; var other = { a: 2, ...params };
Manual Update
var params = { b:"hello", c: true, d:7 }; params.a = 2; params.b = "NEW TEXT";
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Object.assign
spread operator
Manual Update
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down what is being tested in the provided benchmark. The test consists of three individual test cases: 1. **Object.assign**: This test case tests the performance of JavaScript's built-in `Object.assign()` method, which is used to create a new object by copying existing properties from one or more source objects. 2. **Spread Operator (`...`)**: This test case evaluates the performance of using the spread operator (`...`) in combination with the `{}` syntax to create a new object. The spread operator takes an array-like object as an argument and copies its elements into a new object. 3. **Manual Update**: In this test case, the code updates existing properties on the `params` object directly, without using either `Object.assign()` or the spread operator. Now, let's discuss the pros and cons of each approach: * **Object.assign()**: + Pros: Simple and widely supported by most browsers. It creates a shallow copy of an object, which can be beneficial for performance. + Cons: Can create issues with nested objects, as it only copies the top-level properties. Also, some older browsers might have limitations or bugs when using `Object.assign()`. * **Spread Operator (`...`)**: + Pros: Creates a deep copy of an object and is generally considered more modern and efficient than `Object.assign()`. It's also less prone to issues with nested objects. + Cons: Requires the use of curly braces (`{}`) and may not be supported by older browsers. Additionally, some developers might find it less intuitive compared to using `Object.assign()`. The latest benchmark results show that the **Manual Update** test case has the highest execution frequency (906 million times per second), followed by the **Spread Operator** test case (124 million times per second), and then **Object.assign** (494 million times per second). This suggests that the spread operator is currently performing better than the built-in `Object.assign()` method. The use of libraries or special JavaScript features in this benchmark is not mentioned, so we can assume they are not being used. For those who might be interested in exploring alternative approaches, there are a few: * **Lodash's `cloneDeep` function**: This utility function creates a deep copy of an object and can be used as an alternative to the spread operator. * **Babel's transform-function-arity feature**: Babel is a transpiler that allows developers to use modern JavaScript features in older browsers. The `transform-function-arity` feature enables the use of arrow functions, which might be more efficient than traditional function expressions. Keep in mind that these alternatives might require additional setup or configuration and may not be as widely supported as the built-in `Object.assign()` method.
Related benchmarks:
toFixed -> Number vs Math.round
toFixed() vs Math.round().toString()
toFixed() vs String(Math.floor()
toFixed vs Math.round() with numbers222
Number vs + vs parseFloat + properties px
Comments
Confirm delete:
Do you really want to delete benchmark?