Benchmark: JavaScript spread operator vs Object.assign vs Setter performance

Tests:

Using the spread operator
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = { ...firstObject, ...secondObject };
Using Object.assign
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = Object.assign(firstObject, secondObject);
Using assign
const firstObject = { sampleData: 'Hello world' } firstObject.moreData = 'foo bar'

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator
Using Object.assign
Using assign

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36

Browser/OS: Chrome 92 on Linux

View result in a separate tab

Test name	Executions per second
Using the spread operator	1812711.1 Ops/sec
Using Object.assign	5491746.5 Ops/sec
Using assign	673089920.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 this JavaScript microbenchmark.

**Benchmark Definition**

The benchmark is designed to compare the performance of three different approaches:

1. **Spread Operator (`...`)**: This syntax allows you to create a new object by spreading the properties of an existing object into a new object.
2. **Object.assign()**: This method copies all enumerable own properties from one or more source objects to a target object.
3. **Setter Performance (assign)**: This option is likely using the dot notation (`firstObject.moreData = 'foo bar'`) to assign a value to a specific property of an existing object.

**Comparison**

The benchmark is comparing the performance of these three approaches in terms of:

* Raw execution time (executions per second)
* Browser, device platform, operating system, and UA string information

**Options Compared:**

1. Spread Operator (`...`): Creates a new object by spreading properties from an existing object.
Pros:
	+ Concise and readable syntax
Cons:
	+ May create unnecessary intermediate objects
2. Object.assign() : Copies properties from one or more source objects to a target object.
Pros:
	+ Efficient in terms of memory usage (no intermediate objects)
Cons:
	+ Less readable syntax for some developers
3. Setter Performance (assign): Uses dot notation to assign values to specific properties of an existing object.
Pros:
	+ Fast and efficient (no overhead from function calls or object creation)
Cons:
	+ Less concise and less readable syntax

**Library and Syntax**

In the benchmark, none of the libraries are explicitly mentioned, but Object.assign() is a built-in method in JavaScript.

No special JavaScript features or syntax are used in this benchmark. It's focused on comparing the performance of simple object assignment approaches.

**Alternatives**

If you're interested in exploring alternative approaches, here are a few options:

1. **Object.create()**: Creates an object with a specific prototype and then copies properties from another object to it.
2. **for...in loop**: Iterates over an object's properties using a for...in loop and assigns them to a new object.
3. **Array.prototype.reduce()**: Uses the reduce method to combine multiple objects into one.

Keep in mind that each of these alternatives has its own trade-offs and may not be suitable for all use cases.

Related benchmarks:

JavaScript spread operator vs Object.assign vs Setter performance (version: 0)

Comparing performance of: Using the spread operator vs Using Object.assign vs Using assign

Created: 3 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Using assign

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