Benchmark: JavaScript assign like array VS Object.assign Performance

Tests:

Using the spread operator
const firstObject = { one: 'Hello world' }; firstObject["two"] = "123";
Using Object.assign
const firstObject = { one: 'Hello world' }; Object.assign(firstObject, {two: "123"});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator
Using Object.assign

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

Browser/OS: Chrome 89 on Mac OS X 10.14.6

View result in a separate tab

Test name	Executions per second
Using the spread operator	533294336.0 Ops/sec
Using Object.assign	3522132.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

The provided JSON represents a benchmark test case that measures the performance difference between two approaches: using the spread operator and using `Object.assign` to assign values to an object.

**Benchmark Definition**

The benchmark definition is a string that describes how to create a test scenario. In this case, it's just a JavaScript code snippet:

*   We create a constant object named `firstObject` with a single property `one` containing the string "Hello world".
*   We then try to assign a value `"123"` to a non-existent key `"two"`. Since JavaScript allows you to use dynamic keys (also known as bracket notation), we can access the object's properties using square brackets `[ ]`.

This benchmark definition tests how JavaScript handles property assignment, particularly when dealing with dynamic or non-existent keys.

**Options Compared**

There are two options being compared in this benchmark:

1.  **Using the spread operator (`...`)**: This is a shorthand syntax introduced in ECMAScript 2018 (ES2018). It allows you to create a new object by spreading an existing one or an array.
2.  **Using `Object.assign()`**: This method takes another object as an argument and copies all its enumerable properties to the current object.

**Pros and Cons of Each Approach**

*   **Using the spread operator (`...`):**
    *   Pros:
        *   More concise and readable syntax
        *   Can be faster for large objects or arrays due to optimized code generation
    *   Cons:
        *   Not supported in older JavaScript versions (pre-ES2018)
        *   May not perform well if the spread operator is used incorrectly (e.g., spreading an array instead of an object)
*   **Using `Object.assign()`**:
    *   Pros:
        *   Widely supported across all modern browsers and Node.js versions
        *   Well-established method with a clear syntax
    *   Cons:
        *   Less concise than the spread operator syntax
        *   May be slower due to additional overhead

**Library Used**

None.

**Special JS Feature/Syntax**

There is no special JavaScript feature or syntax being used in this benchmark, just standard ECMAScript 2015 (ES2015) features like bracket notation and object assignment methods.

**Other Alternatives**

If you'd like to explore alternative approaches for property assignment, here are a few options:

*   **`Object.keys()` + `Object.assign()`**: This method involves using the `Object.keys()` function to get an array of the object's keys, then using `Array.prototype.forEach()` or `Array.prototype.reduce()` to iterate over the keys and assign values.
*   **`for...in` loop**: You can use a traditional `for...in` loop to iterate over the object's properties and manually set their values.
*   **`JSON.parse()` with a custom replacer function**: This method involves creating a JSON string from your initial object, then using the `JSON.parse()` function with a custom replacer function to assign new values.

Keep in mind that each of these alternatives has its own trade-offs and performance characteristics.

Related benchmarks:

JavaScript assign like array VS Object.assign Performance (version: 0)

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

Created: 3 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.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):