Benchmark: Spread vs Object.assign vs Object.keys vs update

Tests:

Using the spread operator
const firstObject = { sampleData: 'Hello world',sampleData2: 'Hello world',sampleData3: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = { ...firstObject, ...secondObject };
Using Object.assign
const firstObject = { sampleData: 'Hello world',sampleData2: 'Hello world',sampleData3: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = Object.assign(firstObject, secondObject);
Not merging
const firstObject = { sampleData: 'Hello world',sampleData2: 'Hello world',sampleData3: 'Hello world' } const secondObject = { moreData: 'foo bar' } Object.keys(firstObject).map(key => {firstObject[key] = firstObject[key] })
Update
const firstObject = { sampleData: 'Hello world',sampleData2: 'Hello world',sampleData3: 'Hello world' } const secondObject = { moreData: 'foo bar' } 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
Not merging
Update

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Browser/OS: Chrome 120 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using the spread operator	29259702.0 Ops/sec
Using Object.assign	10907239.0 Ops/sec
Not merging	6434501.5 Ops/sec
Update	149456256.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what's being tested.

**Benchmark Overview**

The test measures the performance of three approaches to merge objects in JavaScript:

1. Spread operator (`...` syntax)
2. `Object.assign()`
3. Not merging (assigning properties individually)

**Approach 1: Spread Operator (`...` syntax)**

The spread operator is a shorthand way to create a new object by copying the properties of an existing object. In this test, it's used to merge two objects, `firstObject` and `secondObject`, into a single object, `finalObject`.

**Pros:**

* Concise and expressive syntax
* Fast performance, since it only creates a new reference to the original object

**Cons:**

* May not be supported in older browsers or environments that don't understand the spread operator
* Can lead to unexpected behavior if not used carefully (e.g., assigning properties with the same key)

In this test, the spread operator performs well, with an execution rate of 29259702 executions per second.

**Approach 2: `Object.assign()`**

`Object.assign()` is a method that copies properties from one or more source objects to a target object. In this test, it's used in the same way as the spread operator.

**Pros:**

* Widely supported across browsers and environments
* Can be used with arrays and other types of data

**Cons:**

* May be slower than the spread operator due to the overhead of method calls and property copying
* Requires an additional function call, which can lead to slightly worse performance compared to a direct assignment operation.

In this test, `Object.assign()` performs slightly worse than the spread operator, with an execution rate of 10907239 executions per second.

**Approach 3: Not Merging (assigning properties individually)**

This approach involves assigning each property of one object to a corresponding key in another object. In this test, it's used to merge `firstObject` and `secondObject` without using either the spread operator or `Object.assign()`.

**Pros:**

* No additional function calls or overhead
* Can be seen as more "manual" approach

**Cons:**

* Requires explicit loops or recursion, which can lead to slower performance
* Less readable and maintainable code compared to other approaches

In this test, the not-merging approach performs worst, with an execution rate of 6434501 executions per second.

**Library Used**

There is no library explicitly mentioned in the benchmark definition. However, it's worth noting that `Object.assign()` was introduced in ECMAScript 2015 (ES6) and has since become a widely supported method across browsers.

**Special JS Feature or Syntax**

None of the approaches used special JavaScript features or syntax beyond what's standard in modern JavaScript.

**Other Alternatives**

If you're interested in exploring alternative approaches, here are some other methods for merging objects:

* Using `lodash.merge()`: A popular utility library that provides a convenient way to merge objects.
* Using `Object.create()`: An older method for creating objects and merging properties.
* Using `Array.prototype.slice()` or `Array.prototype.concat()`: Methods that can be used to merge arrays, which can also be applied to objects.

Keep in mind that these alternatives may have trade-offs in terms of performance, readability, and support across browsers.

Related benchmarks:

Spread vs Object.assign vs Object.keys vs update (version: 0)

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

Created: 2 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Not merging

Update

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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