Benchmark: My JavaScript spread operator vs Object.assign performance

Tests:

Using the spread operator with constant inside
const firstObject = { sampleData: 'Hello world' } const secondObject = { moreData: 'foo bar' } const finalObject = { ...secondObject, __key: "a key", __src: "a src", };
Using Object.assign
const firstObject = { __key: "a key", __src: "a src", } const secondObject = { moreData: 'foo bar' } const finalObject = Object.assign(firstObject, secondObject);
Using the spread operator
const firstObject = { __key: "a key", __src: "a src", } const secondObject = { moreData: 'foo bar' } const finalObject = { ...secondObject, ...firstObject };

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator with constant inside
Using Object.assign
Using the spread operator

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/120.0.0.0 Safari/537.36 Edg/120.0.0.0

Browser/OS: Chrome 120 on Windows

View result in a separate tab

Test name	Executions per second
Using the spread operator with constant inside	82493128.0 Ops/sec
Using Object.assign	9045195.0 Ops/sec
Using the spread operator	25963040.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

**Benchmark Overview**

The benchmark compares the performance of three different approaches to merge objects in JavaScript: using the spread operator (`...`), `Object.assign()`, and simply concatenating object literals.

**Options Compared**

1. **Using the Spread Operator**: This approach uses the rest-spread syntax (`...`) to create a new object with all the properties from `secondObject`. The spread operator is used to copy all own enumerable properties (key-value pairs) of `secondObject` into a new object.
2. **Using Object.assign()**: This approach passes both objects as arguments to the `Object.assign()` method, which returns a new object containing all own enumerable properties (key-value pairs) from both passed objects.
3. **Concatenating Object Literals**: This approach simply concatenates two objects using the `+` operator, creating a new object with all properties from both objects.

**Pros and Cons**

*   Using the Spread Operator:
    *   Pros: concise syntax, easy to read, and modern JavaScript feature.
    *   Cons: may have slower performance compared to other approaches due to its complexity and potential for over-optimization.
*   Using Object.assign():
    *   Pros: widely supported, well-documented, and efficient.
    *   Cons: may require more boilerplate code than the spread operator, and its behavior can be counterintuitive in some cases (e.g., when using `Object.assign()` with a function as the target object).
*   Concatenating Object Literals:
    *   Pros: simple and straightforward approach, easy to understand.
    *   Cons: less readable and maintainable than other approaches, and may lead to issues with property order and merging logic.

**Library/Function Used**

None. This benchmark does not rely on any external libraries or functions beyond the standard JavaScript API.

**Special JS Features/Syntax**

The spread operator (`...`) is a modern JavaScript feature introduced in ECMAScript 2015 (ES6). It allows for concise syntax to create new objects with properties from an existing object.

**Alternative Approaches**

Other approaches to merge objects in JavaScript include:

*   Using the `merge()` method of some libraries, such as Lodash.
*   Implementing a custom merging function using recursion or iteration.
*   Utilizing a third-party library like JSON Merge Patch (JMP).

Keep in mind that each approach has its pros and cons, and the best choice depends on the specific use case, performance requirements, and personal preference.

Related benchmarks:

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

Comparing performance of: Using the spread operator with constant inside vs Using Object.assign vs Using the spread operator

Created: 2 years ago by: Guest

Jump to the latest result

Using the spread operator with constant inside

Using Object.assign

Using the spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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