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

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: 5 days ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:136.0) Gecko/20100101 Firefox/136.0

Browser/OS: Firefox 136 on Linux

View result in a separate tab

Test name	Executions per second
Direct	735272.1 Ops/sec
Spread	1894436.2 Ops/sec
Object.assign	8434888.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months 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.

Related benchmarks:

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

Comparing performance of: Direct vs Spread vs Object.assign

Created: 8 months ago by: Guest

Jump to the latest result

Direct

Spread

Object.assign

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):