Benchmark: JavaScript spread operator vs Object.assign vs mutation performance #2

Tests:

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

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);
const firstObject = { sampleData: 'Hello world' }
const secondObject = { moreData: 'foo bar' }
const finalObject = Object.assign(firstObject, secondObject);
Using mutation
const finalObject = { sampleData: 'Hello world' } finalObject.moreData = 'foo bar'
x

const finalObject = { sampleData: 'Hello world' }

finalObject.moreData = 'foo bar'

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
Using mutation

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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

Browser/OS: Chrome 108 on Windows

View result in a separate tab

Test name	Executions per second
Using the spread operator	1713069.5 Ops/sec
Using Object.assign	4425319.0 Ops/sec
Using mutation	934930688.0 Ops/sec

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

Let's dive into the benchmark.

What is being tested?

MeasureThat.net is testing the performance of three different approaches to merge two objects in JavaScript:

Spread Operator (...): This syntax allows you to merge two objects by spreading their properties into a new object.
Object.assign(): This method creates a new object and copies all enumerable own properties from one or more source objects into the new object.
Mutation (directly modifying an existing object): This approach involves assigning the values of another object to specific properties of an existing object.

Options compared

The benchmark is comparing these three approaches in terms of performance, which means we're interested in how quickly each method can merge two objects.

Pros and Cons of each approach:

Spread Operator (...):
- Pros: concise and readable syntax, creates a new object without modifying the original one.
- Cons: may incur overhead due to function call and property iteration.
Object.assign():
- Pros: widely supported, efficient way to create a new object by copying properties from another object.
- Cons: requires explicit method call, may not be as concise or readable as the spread operator.
Mutation (directly modifying an existing object):
- Pros: can be faster if you're working with objects that already have the desired properties, and you don't need to create a new object.
- Cons: modifies the original object, can lead to unexpected side effects if not used carefully.

Library usage

There is no explicit library mentioned in the benchmark definition. However, Object.assign() uses the built-in Object constructor, which is part of the JavaScript standard library.

Special JS features or syntax

The spread operator (...) was introduced in ECMAScript 2018 (ES2018) and has since become a widely supported feature across modern browsers.

Other alternatives

If you need to merge two objects, other alternatives include:

Using reduce() with an initial value
Creating a new object with Object.create()
Using a library like Lodash (_.merge())
Using a functional programming approach with immer or similar libraries

Keep in mind that the choice of method depends on your specific use case, performance requirements, and personal preference.

LLMs can make mistakes. Check important info.

Let's dive into the benchmark.

**What is being tested?**

MeasureThat.net is testing the performance of three different approaches to merge two objects in JavaScript:

1. **Spread Operator (`...`)**: This syntax allows you to merge two objects by spreading their properties into a new object.
2. **Object.assign()**: This method creates a new object and copies all enumerable own properties from one or more source objects into the new object.
3. **Mutation** (directly modifying an existing object): This approach involves assigning the values of another object to specific properties of an existing object.

**Options compared**

The benchmark is comparing these three approaches in terms of performance, which means we're interested in how quickly each method can merge two objects.

**Pros and Cons of each approach:**

1. **Spread Operator (`...`)**:
	* Pros: concise and readable syntax, creates a new object without modifying the original one.
	* Cons: may incur overhead due to function call and property iteration.
2. **Object.assign()**:
	* Pros: widely supported, efficient way to create a new object by copying properties from another object.
	* Cons: requires explicit method call, may not be as concise or readable as the spread operator.
3. **Mutation** (directly modifying an existing object):
	* Pros: can be faster if you're working with objects that already have the desired properties, and you don't need to create a new object.
	* Cons: modifies the original object, can lead to unexpected side effects if not used carefully.

**Library usage**

There is no explicit library mentioned in the benchmark definition. However, `Object.assign()` uses the built-in `Object` constructor, which is part of the JavaScript standard library.

**Special JS features or syntax**

The spread operator (`...`) was introduced in ECMAScript 2018 (ES2018) and has since become a widely supported feature across modern browsers.

**Other alternatives**

If you need to merge two objects, other alternatives include:

* Using `reduce()` with an initial value
* Creating a new object with `Object.create()`
* Using a library like Lodash (`_.merge()`)
* Using a functional programming approach with `immer` or similar libraries

Keep in mind that the choice of method depends on your specific use case, performance requirements, and personal preference.

Related benchmarks:

JavaScript spread operator vs Object.assign vs mutation performance #2 (version: 0)

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

Created: 2 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Using mutation

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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