Benchmark: Object assign vs spread operator vs manual assign

Script Preparation code:

var originalObject = {
  a: 1,
  b: "string",
  c: true,
};

Tests:

Object assign
const copyObject = Object.assign({}, originalObject, { c: false });
Spread operator
const copyObject = { ...originalObject, c: false };
Manually
const copyObject = { a: originalObject.a, b: originalObject.b, c: false, };

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object assign
Spread operator
Manually

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:106.0) Gecko/20100101 Firefox/106.0

Browser/OS: Firefox 106 on Windows

View result in a separate tab

Test name	Executions per second
Object assign	11070142.0 Ops/sec
Spread operator	11066430.0 Ops/sec
Manually	947081728.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in the provided benchmark.

The main goal of this benchmark is to compare three different approaches for creating a new object and then modifying one of its properties.

**Approaches compared:**

1. **Object assign**: This method uses the `Object.assign()` function to create a new object by copying the existing object (`originalObject`) and adding or replacing some properties.
2. **Spread operator**: This method uses the spread operator (`{ ... }`) to create a new object by spreading the existing object's properties and then updating one of them.
3. **Manual assign**: This approach requires manually setting each property in the new object.

**Pros and cons of each approach:**

* **Object assign**:
	+ Pros: Can be faster for larger objects, as it avoids creating a temporary object with spread operators.
	+ Cons: Can be slower for smaller objects due to the overhead of the `Object.assign()` function, and might not be as efficient if the object has many properties.
* **Spread operator**:
	+ Pros: Can be more readable and easier to understand, especially for simple updates. It also avoids creating a temporary object like in manual assign.
	+ Cons: Might be slower than `Object.assign()` due to the overhead of creating a new object, and can be less efficient if the object has many properties.
* **Manual assign**:
	+ Pros: Can be faster for smaller objects, as it bypasses the creation of temporary objects.
	+ Cons: Requires more code and might not be as readable or maintainable.

**Library usage:**

None of the approaches rely on any external libraries.

**Special JS feature/syntax:**

The benchmark uses the spread operator (`{ ... }`) which is a relatively modern JavaScript feature introduced in ECMAScript 2018. It allows creating a new object by spreading the properties of an existing object into it.

**Benchmark preparation code and test cases:**

The script preparation code creates an `originalObject` with three properties: `a`, `b`, and `c`. The benchmark then defines three test cases:

1. Object assign: Creates a new object using `Object.assign()` with the original object as the first argument, and an additional property `{ c: false }`.
2. Spread operator: Creates a new object using the spread operator (`{ ... }`) and updates one of its properties.
3. Manual assign: Manually sets each property in the new object.

The benchmark then runs these tests on Firefox 106 with multiple executions per second, comparing the performance of each approach.

**Alternative approaches:**

Other alternatives for creating a new object might include:

* Using `Object.create()` to create an object and then updating its properties.
* Using a library like Lodash's `cloneDeep()` function to create a deep copy of the original object.
* Using a different programming language or framework that has built-in support for object creation and modification.

However, these alternatives might not be as relevant in this specific benchmark, which is focused on comparing the performance of three simple approaches.

Related benchmarks:

Object assign vs spread operator vs manual assign (version: 0)

Testing how these fare against each other to create a new object (no nested objects). The tests will also change one of the properties in the new object.

Comparing performance of: Object assign vs Spread operator vs Manually

Created: 2 years ago by: Guest

Jump to the latest result

Object assign

Spread operator

Manually

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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