Benchmark: JavaScript spread operator vs Object.assign performance vs Elm builtin update

Script Preparation code:


function _Utils_update(oldRecord, updatedFields)
{
	var newRecord = {};

	for (var key in oldRecord)
	{
		newRecord[key] = oldRecord[key];
	}

	for (var key in updatedFields)
	{
		newRecord[key] = updatedFields[key];
	}

	return newRecord;
}

Tests:

Using the spread operator
const firstObject = { sampleData: 'Hello world', moreData: 'foo bar' } const secondObject = { moreData: 'foo bar' } const finalObject = { ...firstObject, ...secondObject };
Using Object.assign
const firstObject = { sampleData: 'Hello world', moreData: 'foo bar' } const secondObject = { moreData: 'foo bar' } const finalObject = Object.assign({}, firstObject, secondObject);
Current Elm Update
const firstObject = { sampleData: 'Hello world', moreData: 'foo bar' } const secondObject = { moreData: 'foo bar' } const finalObject = _Utils_update(firstObject, secondObject);
Inline copying
const firstObject = { sampleData: 'Hello world', moreData: 'foo bar' } const secondObject = { moreData: 'foo bar' } const finalObject = {sampleData: firstObject.sampleData, moreData: secondObject.moreData }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator
Using Object.assign
Current Elm Update
Inline copying

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Safari/605.1.15

Browser/OS: Safari 14 on Mac OS X 10.15.6

View result in a separate tab

Test name	Executions per second
Using the spread operator	1726785.2 Ops/sec
Using Object.assign	4081463.5 Ops/sec
Current Elm Update	4353432.5 Ops/sec
Inline copying	286700768.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into explaining what is tested on the provided JSON that represents the benchmark.

**Benchmark Overview**

The benchmark measures the performance of three different approaches to merge two objects:

1.  **Using the spread operator**: This approach uses the spread operator (`...`) to merge two objects, where `firstObject` contains all properties and `secondObject` contains only a subset of those properties.
2.  **Using Object.assign**: This approach uses the `Object.assign()` method to merge two objects.
3.  **Current Elm Update**: This approach updates a copy of `firstObject` with the key-value pairs from `secondObject`.
4.  **Inline copying**: This approach manually copies the value from `secondObject.moreData` into `finalObject.sampleData`.

**Options Compared**

The benchmark compares the performance of these four approaches:

*   Using the spread operator (`...`)
*   Using Object.assign
*   Current Elm Update (the original implementation used in the test code)
*  Inline copying

**Pros and Cons of Each Approach:**

1.  **Using the Spread Operator`(`...)`**:
    *   Pros: Concise, readable, and efficient way to merge objects.
    *   Cons: May not be supported by older browsers or Node.js versions.
2.  **Using Object.assign()**:
    *   Pros: Widely supported across browsers and Node.js versions.
    *   Cons: Can lead to unexpected behavior if the source object is modified after assignment.
3.  **Current Elm Update**: This approach is specific to the original implementation used in the test code.
    *   Pros: Optimized for performance, taking advantage of the optimized `update` function.
    *   Cons: Not a standard or widely supported method.

**Other Considerations**

*   The benchmark uses Safari 14 as the browser, which may not be representative of other browsers' behavior.
*   The benchmark does not account for differences in memory allocation or caching between browsers.

**Library and Syntax Used**

The library used in this benchmark is none; however, it utilizes some specific JavaScript features:

1.  **Rest Parameter (`...`)**: This feature was introduced in ECMAScript 2015 (ES6) and allows for the spread operator to be used on object literals.
2.  **Arrow Function**: The `update` function in the original implementation is an arrow function, which is a shorthand way of defining functions.

**Alternatives**

Alternative approaches to merging objects include:

1.  **Lodash's `merge` function**: This popular utility library provides an efficient and readable way to merge objects.
2.  **jQuery.extend()**: Another widely used utility library that offers an efficient way to merge objects.
3.  **Manual Looping**: You can achieve the same result using a manual loop to copy properties from one object to another.

Keep in mind that these alternatives may have different performance characteristics and trade-offs compared to the original implementation used in this benchmark.

Related benchmarks:

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

Comparing performance of: Using the spread operator vs Using Object.assign vs Current Elm Update vs Inline copying

Created: 3 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Current Elm Update

Inline copying

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