Benchmark: Object.assign vs JavaScript spread operator

Tests:

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

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

Using Object.assign

const firstObject = { sampleData: 'Hello world' }
const secondObject = { moreData: 'foo bar' }
const finalObject = {
	...firstObject,
  	...secondObject
};

 
const firstObject = { sampleData: 'Hello world' }const secondObject = { moreData: 'foo bar' }const finalObject = {    ...firstObject,    ...secondObject};

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:84.0) Gecko/20100101 Firefox/84.0

Browser/OS: Firefox 84 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Using the spread operator	11411084.0 Ops/sec
Using Object.assign	5627435.5 Ops/sec

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

I'd be happy to explain the benchmark and its results.

What is being tested?

The provided JSON represents a JavaScript microbenchmark that compares two approaches for merging objects: Object.assign and the JavaScript spread operator (...). The benchmark measures which approach is faster, in terms of number of executions per second.

Options compared:

There are two options being compared:

Object.assign: This method takes multiple sources and returns a new object with all the properties from each source.
JavaScript spread operator (...): This method creates a new object with all the key-value pairs from the given objects, using the spread syntax.

Pros and Cons of each approach:

Object.assign: Pros:
- Widely supported in older browsers
- Can be used to merge multiple arrays or objects
- Less prone to errors due to its explicit syntax
Cons:
- Can lead to performance issues due to object creation and iteration
- May not be as concise as the spread operator
JavaScript spread operator (...): Pros:
- More concise and expressive than Object.assign
- Creates a new object without modifying the original objects
- Often preferred in modern JavaScript codebases
Cons:
- Not supported in older browsers ( prior to IE 11)
- Can lead to errors if not used carefully

Library or syntax being tested:

In this benchmark, no libraries are explicitly mentioned. However, both approaches rely on the Object and ... keywords, which are part of the JavaScript language.

Special JS feature or syntax:

The spread operator (...) is a relatively recent addition to JavaScript (introduced in ECMAScript 2015). It allows you to create new objects by copying key-value pairs from existing objects.

Other alternatives:

If Object.assign and the spread operator are not suitable, other alternatives for merging objects include:

Using jQuery.extend() or a similar utility function
Implementing your own custom merge function
Using a library like Lodash or Immutable.js

LLMs can make mistakes. Check important info.

I'd be happy to explain the benchmark and its results.

**What is being tested?**

The provided JSON represents a JavaScript microbenchmark that compares two approaches for merging objects: `Object.assign` and the JavaScript spread operator (`...`). The benchmark measures which approach is faster, in terms of number of executions per second.

**Options compared:**

There are two options being compared:

1. **Object.assign**: This method takes multiple sources and returns a new object with all the properties from each source.
2. **JavaScript spread operator (`...`)**: This method creates a new object with all the key-value pairs from the given objects, using the spread syntax.

**Pros and Cons of each approach:**

* **Object.assign**: Pros:
	+ Widely supported in older browsers
	+ Can be used to merge multiple arrays or objects
	+ Less prone to errors due to its explicit syntax
* Cons:
	+ Can lead to performance issues due to object creation and iteration
	+ May not be as concise as the spread operator
* **JavaScript spread operator (`...`)**: Pros:
	+ More concise and expressive than Object.assign
	+ Creates a new object without modifying the original objects
	+ Often preferred in modern JavaScript codebases
* Cons:
	+ Not supported in older browsers ( prior to IE 11)
	+ Can lead to errors if not used carefully

**Library or syntax being tested:**

In this benchmark, no libraries are explicitly mentioned. However, both approaches rely on the `Object` and `...` keywords, which are part of the JavaScript language.

**Special JS feature or syntax:**

The spread operator (`...`) is a relatively recent addition to JavaScript (introduced in ECMAScript 2015). It allows you to create new objects by copying key-value pairs from existing objects.

**Other alternatives:**

If `Object.assign` and the spread operator are not suitable, other alternatives for merging objects include:

* Using `jQuery.extend()` or a similar utility function
* Implementing your own custom merge function
* Using a library like Lodash or Immutable.js

Related benchmarks:

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

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

Created: 4 years ago by: Guest

Jump to the latest result

Using the spread operator