Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Initialization: direct vs. spread vs. Object.assign
(version: 0)
Comparing performance of:
Direct vs Spread vs Object.assign
Created:
one year ago
by:
Guest
Jump to the latest result
Script Preparation code:
let props = [ "field1", "otherField", "aThirdProperty", "idField", "aproperty", "bproperty", "testingProp", "testingProp2", "description", "description_Field", "description_prop", "prop_description", "model", "number", "other", "another", "even_more", "evenMorer", "addtional_1", "addtional_2", "addtional_3", "addtional_4", "addtional_5", "addtional_6", "addtional_7", "addtional_8", "addtional_9", "addtional_10", "addtional_11", "addtional_12", "addtional_13", "addtional_14", ]; let emptyObj = createEmptyRow(); function createEmptyRow() { const result = {}; props.forEach(prop => result[prop] = null); return result; } function copyEmptyRow() { return { ...emptyObj } } function copyEmptyRowAssign() { return Object.assign({}, emptyObj); }
Tests:
Direct
var data = createEmptyRow()
Spread
var data = copyEmptyRow()
Object.assign
var data = copyEmptyRowAssign()
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
Direct
Spread
Object.assign
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:138.0) Gecko/20100101 Firefox/138.0
Browser/OS:
Firefox 138 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
Direct
461040.1 Ops/sec
Spread
1345341.8 Ops/sec
Object.assign
5867771.5 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided JSON and explain what is being tested. **Benchmark Definition** The benchmark definition represents three different approaches to initialize an object in JavaScript: 1. **Direct**: The code simply assigns `null` to each property of the `props` array using bracket notation (`data[prop] = null;`). 2. **Spread**: The code uses the spread operator (`{ ... }`) to create a new object from the `emptyObj` and then sets its properties equal to `null`. 3. **Object.assign**: The code uses the `Object.assign()` method to copy the properties of the `emptyObj` and then assigns it to `data`. **Options Compared** The benchmark is comparing the performance of these three approaches on an object with 13 properties (`props`). The options being compared are: * Direct assignment using bracket notation * Spread operator-based initialization * Object.assign() method **Pros and Cons** Here's a brief summary of each approach: 1. **Direct**: This approach is simple and concise, but it can be slower due to the overhead of bracket notation. * Pros: Simple and easy to read * Cons: Potential performance impact due to bracket notation overhead 2. **Spread**: This approach uses the spread operator, which is a relatively modern feature in JavaScript. It's generally faster than direct assignment because it avoids the overhead of bracket notation. * Pros: Fast and efficient * Cons: Requires modern browsers that support the spread operator 3. **Object.assign**: This approach is often considered the most efficient way to copy an object in JavaScript. However, it can be slower than the spread operator due to the additional method call. * Pros: Fast and efficient, widely supported * Cons: Additional method call overhead **Library Usage** None of the benchmark tests use any external libraries. **Special JS Features or Syntax** The benchmark uses modern JavaScript features such as: * Spread operator (`{ ... }`) * Bracket notation (`data[prop] = null;`) These features are relatively new and were introduced in ECMAScript 2015 (ES6). While most modern browsers support these features, older browsers may not. **Other Alternatives** If you need to initialize an object with a large number of properties, other approaches you might consider include: * Using the `Array.prototype.fill()` method to set all properties equal * Using the `for...in` loop to iterate over the properties and set them equal * Using a library like Lodash's `_.extend()` function However, these alternatives may have different performance characteristics or trade-offs compared to the approaches tested in the benchmark.
Related benchmarks:
Spread vs Object.assign (modify ) vs Object.assign (new)
Object.assign-vs-Spread
JavaScript spread operator vs Object.assign performance with 1000 props
JS Object Cloning - Lots of Different Methods
Comments
Confirm delete:
Do you really want to delete benchmark?