Benchmark: Initialization: direct vs. spread vs. Object.assign

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()

Historical Performance Data aggregated from 22 community runs

Desktop Results:

Firefox 12 runs

Object.assign

8.1M/s

Spread

1.4M/s

Direct

580K/s

Fastest: Object.assign (13.9x faster)

View exact numbers

✓ Object.assign: 8,066,893 ops/sec
• Spread: 1,354,959 ops/sec
• Direct: 579,896 ops/sec

Chrome 10 runs

Direct

803K/s

Spread

271K/s

Object.assign

185K/s

Fastest: Direct (4.3x faster)

View exact numbers

✓ Direct: 803,374 ops/sec
• Spread: 270,760 ops/sec
• Object.assign: 184,909 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Object.assign

5.9M/s

Spread

1.3M/s

Direct

461K/s

View exact numbers

Test name	Executions per second
✓ Object.assign	5,867,772 Ops/sec
Spread	1,345,342 Ops/sec
Direct	461,040 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

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.

Initialization: direct vs. spread vs. Object.assign (version: 0)

Comparing performance of: `Direct vs Spread vs Object.assign`

Created: one year ago by: Guest

Go to the latest result

Direct

Spread

Object.assign

Historical Performance Data aggregated from 22 community runs

Desktop Results:

Firefox 12 runs

Chrome 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Initialization: direct vs. spread vs. Object.assign (version: 0)

Comparing performance of: Direct vs Spread vs Object.assign

Created: one year ago by: Guest

Go to the latest result

Direct

Spread

Object.assign

Historical Performance Data aggregated from 22 community runs

Desktop Results:

Firefox 12 runs

Chrome 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

Comparing performance of: `Direct vs Spread vs Object.assign`