Benchmark: JavaScript spread operator vs Object.assign performance, small objects v3

JavaScript spread operator vs Object.assign performance, small objects v3 (version: 0)

For small objects, 1 value change only

Comparing performance of: Using Object.assign vs Using the spread operator vs Using Object.assign (known change) vs Using the spread operator (known change) vs Using Object.assign (filtered) vs Using the spread operator (filter)

Created: 10 months ago by: Guest

Jump to the latest result

Tests:

Using Object.assign

const firstObject = {}
const secondObject = {}

for(let i = 1; i < 10; i++) firstObject[i] = Math.random();
for(let i = 1; i < 10; i++) secondObject[i] = firstObject[i];

let rnd = Math.floor(Math.random() * 10);
secondObject[rnd] = Math.random();

const finalObject = Object.assign(firstObject, secondObject);

console.log("first", firstObject)
console.log("second", secondObject)
console.log("final", finalObject)

​x
 
const firstObject = {}const secondObject = {}​for(let i = 1; i < 10; i++) firstObject[i] = Math.random();for(let i = 1; i < 10; i++) secondObject[i] = firstObject[i];​let rnd = Math.floor(Math.random() * 10);secondObject[rnd] = Math.random();​const finalObject = Object.assign(firstObject, secondObject);​console.log("first", firstObject)console.log("second", secondObject)console.log("final", finalObject)

Using the spread operator

const firstObject = {}
const secondObject = {}

for(let i = 1; i < 10; i++) firstObject[i] = Math.random();
for(let i = 1; i < 10; i++) secondObject[i] = firstObject[i];

let rnd = Math.floor(Math.random() * 10);
secondObject[rnd] = Math.random();

const finalObject = {
	...firstObject,
  	...secondObject
};

console.log("first", firstObject)
console.log("second", secondObject)
console.log("final", finalObject)

 
const firstObject = {}const secondObject = {}​for(let i = 1; i < 10; i++) firstObject[i] = Math.random();for(let i = 1; i < 10; i++) secondObject[i] = firstObject[i];​let rnd = Math.floor(Math.random() * 10);secondObject[rnd] = Math.random();​const finalObject = {    ...firstObject,    ...secondObject};​console.log("first", firstObject)console.log("second", secondObject)console.log("final", finalObject)

Using Object.assign (known change)

const firstObject = {}
const secondObject = {}

for(let i = 1; i < 10; i++) firstObject[i] = Math.random();
for(let i = 1; i < 10; i++) secondObject[i] = firstObject[i];

let rnd = Math.floor(Math.random() * 10);
secondObject[rnd] = Math.random();

let diff = {}
diff[rnd] = secondObject[rnd];

const finalObject = Object.assign(firstObject, diff);

console.log("first", firstObject)
console.log("second", secondObject)
console.log("final", finalObject)

 
const firstObject = {}const secondObject = {}​for(let i = 1; i < 10; i++) firstObject[i] = Math.random();for(let i = 1; i < 10; i++) secondObject[i] = firstObject[i];​let rnd = Math.floor(Math.random() * 10);secondObject[rnd] = Math.random();​let diff = {}diff[rnd] = secondObject[rnd];​const finalObject = Object.assign(firstObject, diff);​console.log("first", firstObject)console.log("second", secondObject)console.log("final", finalObject)

Using the spread operator (known change)

const firstObject = {}
const secondObject = {}

for(let i = 1; i < 10; i++) firstObject[i] = Math.random();
for(let i = 1; i < 10; i++) secondObject[i] = firstObject[i];

let rnd = Math.floor(Math.random() * 10);
secondObject[rnd] = Math.random();

let diff = {}
diff[rnd] = secondObject[rnd];

const finalObject = {
	...firstObject,
  	...diff
};

console.log("first", firstObject)
console.log("second", secondObject)
console.log("final", finalObject)

 
const firstObject = {}const secondObject = {}​for(let i = 1; i < 10; i++) firstObject[i] = Math.random();for(let i = 1; i < 10; i++) secondObject[i] = firstObject[i];​let rnd = Math.floor(Math.random() * 10);secondObject[rnd] = Math.random();​let diff = {}diff[rnd] = secondObject[rnd];​const finalObject = {    ...firstObject,    ...diff};​console.log("first", firstObject)console.log("second", secondObject)console.log("final", finalObject)

Using Object.assign (filtered)

const firstObject = {}
const secondObject = {}

for(let i = 1; i < 10; i++) firstObject[i] = Math.random();
for(let i = 1; i < 10; i++) secondObject[i] = firstObject[i];

let rnd = Math.floor(Math.random() * 10);
secondObject[rnd] = Math.random();

let diff = Object.entries(secondObject).filter((value, key) => key == rnd)
diff = Object.fromEntries(diff)

const finalObject = Object.assign(firstObject, diff);

console.log("first", firstObject)
console.log("second", secondObject)
console.log("final", finalObject)

 
const firstObject = {}const secondObject = {}​for(let i = 1; i < 10; i++) firstObject[i] = Math.random();for(let i = 1; i < 10; i++) secondObject[i] = firstObject[i];​let rnd = Math.floor(Math.random() * 10);secondObject[rnd] = Math.random();​let diff = Object.entries(secondObject).filter((value, key) => key == rnd)diff = Object.fromEntries(diff)​const finalObject = Object.assign(firstObject, diff);​console.log("first", firstObject)console.log("second", secondObject)console.log("final", finalObject)

Using the spread operator (filter)

const firstObject = {}
const secondObject = {}

for(let i = 1; i < 10; i++) firstObject[i] = Math.random();
for(let i = 1; i < 10; i++) secondObject[i] = firstObject[i];

let rnd = Math.floor(Math.random() * 10);
secondObject[rnd] = Math.random();

let diff = Object.entries(secondObject).filter((value, key) => key == rnd)
diff = Object.fromEntries(diff)

const finalObject = {
	...firstObject,
  	...diff
};

console.log("first", firstObject)
console.log("second", secondObject)
console.log("final", finalObject)

 
const firstObject = {}const secondObject = {}​for(let i = 1; i < 10; i++) firstObject[i] = Math.random();for(let i = 1; i < 10; i++) secondObject[i] = firstObject[i];​let rnd = Math.floor(Math.random() * 10);secondObject[rnd] = Math.random();​let diff = Object.entries(secondObject).filter((value, key) => key == rnd)diff = Object.fromEntries(diff)​const finalObject = {    ...firstObject,    ...diff};​console.log("first", firstObject)console.log("second", secondObject)console.log("final", finalObject)

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 Object.assign
Using the spread operator
Using Object.assign (known change)
Using the spread operator (known change)
Using Object.assign (filtered)
Using the spread operator (filter)

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 134 on Linux

View result in a separate tab

Test name	Executions per second
Using Object.assign	12976.6 Ops/sec
Using the spread operator	12422.2 Ops/sec
Using Object.assign (known change)	13418.2 Ops/sec
Using the spread operator (known change)	12944.2 Ops/sec
Using Object.assign (filtered)	13112.8 Ops/sec
Using the spread operator (filter)	12630.6 Ops/sec

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

Benchmark Overview

The provided JSON represents a JavaScript microbenchmarking test created on MeasureThat.net. The test compares the performance of three different approaches to merge two objects:

Using Object.assign()
Using the spread operator (...)
Using the spread operator with a known change (i.e., filtering out one property)

Approach 1: Using Object.assign()

This approach uses the Object.assign() method to merge the two objects. The first object is assigned all properties of the second object.

Approach 2: Using the Spread Operator (...)

This approach uses the spread operator (...) to create a new object with all properties from both objects. This approach does not require explicit iteration or filtering.

Approach 3: Using the Spread Operator with a Known Change (Filtering)

This approach uses the spread operator (...) and filters out one property using Object.entries(), filter(), and Object.fromEntries().

Benchmark Results

The latest benchmark results show performance variations between the three approaches on different devices running Chrome 126:

Using the spread operator with a known change (Filtering): fastest, averaging around 41136 executions per second
Using the spread operator: slightly slower, averaging around 35891 executions per second
Using Object.assign(): slowest, averaging around 58231 and 55762 executions per second

Observations

The results suggest that using the spread operator with filtering (Approach 3) is the fastest method, followed by the simple spread operator (Approach 2), and then Object.assign() (Approach 1). The performance difference between these approaches is significant, indicating that the specific implementation choice can have a substantial impact on performance.

Recommendation

Based on these results, if performance is critical, using the spread operator with filtering (Approach 3) might be the best choice. However, it's essential to consider other factors, such as code readability and maintainability, when selecting an implementation method.

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmarking test created on MeasureThat.net. The test compares the performance of three different approaches to merge two objects:

1. Using `Object.assign()`
2. Using the spread operator (`...`)
3. Using the spread operator with a known change (i.e., filtering out one property)

**Approach 1: Using `Object.assign()`**

This approach uses the `Object.assign()` method to merge the two objects. The first object is assigned all properties of the second object.

**Approach 2: Using the Spread Operator (`...`)**

This approach uses the spread operator (`...`) to create a new object with all properties from both objects. This approach does not require explicit iteration or filtering.

**Approach 3: Using the Spread Operator with a Known Change (Filtering)**

This approach uses the spread operator (`...`) and filters out one property using `Object.entries()`, `filter()`, and `Object.fromEntries()`.

**Benchmark Results**

The latest benchmark results show performance variations between the three approaches on different devices running Chrome 126:

* Using the spread operator with a known change (Filtering): fastest, averaging around 41136 executions per second
* Using the spread operator: slightly slower, averaging around 35891 executions per second
* Using `Object.assign()`: slowest, averaging around 58231 and 55762 executions per second

**Observations**

The results suggest that using the spread operator with filtering (Approach 3) is the fastest method, followed by the simple spread operator (Approach 2), and then `Object.assign()` (Approach 1). The performance difference between these approaches is significant, indicating that the specific implementation choice can have a substantial impact on performance.

**Recommendation**

Related benchmarks: