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

Tests:

Using the spread operator
var firstObject = { sampleData: 'Hello world' }; var finalObject = { ...firstObject, attr1: 'value 1', attr2: 'value 2', attr3: 'value 3', attr4: 'value 3', attr5: 'value 3', attr6: 'value 3', attr7: 'value 3', attr8: 'value 3', attr9: 'value 3', attr10: 'value 3', attr11: 'value 3' };
Using Object.assign
var firstObject = { sampleData: 'Hello world' }; var finalObject = Object.assign(firstObject, { attr1: 'value 1', attr2: 'value 2', attr3: 'value 3', attr4: 'value 3', attr5: 'value 3', attr6: 'value 3', attr7: 'value 3', attr8: 'value 3', attr9: 'value 3', attr10: 'value 3', attr11: 'value 3' });
using assign
var firstObject = { sampleData: 'Hello world' }; firstObject.attr1= 'value 1'; firstObject.attr2= 'value 2'; firstObject.attr3= 'value 3'; firstObject.attr4= 'value 3'; firstObject.attr5= 'value 3'; firstObject.attr6= 'value 3'; firstObject.attr7= 'value 3'; firstObject.attr8= 'value 3'; firstObject.attr9= 'value 3'; firstObject.attr10= 'value 3'; firstObject.attr11= 'value 3';

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: 4 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_0_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36

Browser/OS: Chrome 87 on Mac OS X 11.0.1

View result in a separate tab

Test name	Executions per second
Using the spread operator	112343.8 Ops/sec
Using Object.assign	2429610.0 Ops/sec
using assign	867466432.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring JavaScript performance is crucial for understanding the efficiency of various coding approaches. Let's break down what's being tested in this benchmark:

**Benchmark Definition**: The benchmark aims to compare the performance of three different methods: using the spread operator (`...`), `Object.assign()`, and assigning individual properties (`attr1 = 'value 1'`).

**Options compared**:

1. **Using the spread operator**: This method creates a new object by spreading an existing object's properties into a new object, adding additional key-value pairs as specified.
2. **Using Object.assign()**: This method takes one or more source objects and merges their enumerable own enumerable properties into a target object.
3. **Assigning individual properties**: This method assigns specific values to individual object properties.

**Pros and Cons of each approach:**

1. **Using the spread operator**:
	* Pros: More concise, readable code; creates a new object with the original properties plus the additional ones.
	* Cons: Can be slower due to the overhead of creating a new object.
2. **Using Object.assign()**:
	* Pros: Fast and efficient, especially when working with large objects or multiple sources.
	* Cons: Can result in code that's less readable; requires careful handling of null and undefined values.
3. **Assigning individual properties**:
	* Pros: Extremely concise and readable code; can be faster for small numbers of additional properties.
	* Cons: Requires repetitive code, which can lead to maintenance issues.

**Library/Functionality used**: `Object.assign()` is a built-in JavaScript function that's part of the ECMAScript standard. It's widely supported across modern browsers and environments.

**Special JS feature/syntax**: None mentioned in this benchmark.

**Considerations:**

* The use of spread operator is a relatively new feature, introduced in ES6 (ECMAScript 2015). Its performance might not be as optimized as older methods.
* `Object.assign()` has been the de facto standard for merging objects since its introduction in ECMAScript 5.1.

**Other alternatives:**

* For creating a shallow copy of an object using Lodash, you can use `_.cloneDeep()` or `_merge()`.
* For using a more functional approach with objects, consider libraries like Immutable.js or Ramda.
* If working with large datasets, other approaches like JSON merging or array flattening might be more efficient.

The benchmark results show that:

1. Assigning individual properties is the fastest method, followed closely by `Object.assign()`.
2. Using the spread operator is slower than the top two methods.

Keep in mind that performance differences can vary depending on specific use cases and environments. These results should serve as a general guideline for optimizing object merging code.

Related benchmarks:

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

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

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