Benchmark: Object.assign vs spread vs _.extend on big data

HTML Preparation code:

<script src="https://underscorejs.org/underscore-min.js"></script>

Script Preparation code:

var params = Array(10000).fill().map((_, i) => i).reduce((acc, v) => {
  console.log(v)
  acc[v] = {vafsd: v};
  return acc
}, {});

Tests:

Object.assign
var other = Object.assign(params);
spread operator
var other = { ...params };
_.extend
var other = _.extend({ a: 2 }, params);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.assign
spread operator
_.extend

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

Object.assign

9.5M/s

spread operator

949K/s

_.extend

5K/s

View exact numbers

Test name	Executions per second
✓ Object.assign	9,534,656 Ops/sec
spread operator	948,868 Ops/sec
_.extend	4,755 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring JavaScript performance is an essential task in web development, and MeasuringThat.net provides a convenient platform for benchmarking various aspects of the language.

The provided JSON represents a benchmark test that compares three different approaches to assign a large dataset to a variable:

1.  **Object.assign**: This method assigns the values from one or more specified objects to the properties of an existing object.
2.  **Spread operator (`...`)**: This syntax creates a new object by copying all key-value pairs from an existing object.
3.  **Lodash's `_.extend()` method**: Lodash is a popular JavaScript utility library that provides a variety of functional programming helpers.

**Options comparison**

The test case uses three different approaches to assign the large dataset (`params`) to a variable, each with its own pros and cons:

*   **Object.assign**:
    *   Pros: Fast, widely supported, and easy to use.
    *   Cons: Can be less readable than other methods, especially for complex assignments.
*   **Spread operator (`...`)**:
    *   Pros: Concise, modern, and easy to understand.
    *   Cons: Not as fast as `Object.assign`, and not all browsers support it (although Chrome 122 does).
*   **Lodash's `_.extend()` method**:
    *   Pros: Offers more control over the assignment process, especially when dealing with complex objects.
    *   Cons: Requires an additional dependency (Lodash), which may be a drawback for some developers.

In terms of performance, the results suggest that:

*   **Object.assign** is the fastest approach, followed by the spread operator.
*   **_.extend()` method** is slower than both `Object.assign` and the spread operator.

**Other considerations**

The benchmark test assumes that the input data (`params`) is a large object with thousands of properties. The test case generates this data dynamically using the provided script preparation code.

When working with large datasets, it's essential to consider the following factors:

*   **Memory allocation**: Assigning a large dataset to a variable can lead to memory issues if not handled properly.
*   **Browser support**: Some features, like the spread operator, may not be supported by older browsers.

**Alternatives**

If you're looking for alternative methods to compare or benchmark JavaScript performance, consider the following options:

*   **Benchmarking libraries**: Libraries like Benchmark.js, Fastest, or Microbenchmark provide a structured approach to writing and running benchmarks.
*   **JavaScript testing frameworks**: Frameworks like Jest, Mocha, or Cypress offer built-in support for benchmarking and can be used in conjunction with benchmarking libraries.

In conclusion, the provided benchmark test provides valuable insights into the performance of different approaches to assigning large datasets in JavaScript. By understanding the pros and cons of each method, developers can make informed decisions about which approach to use depending on their specific requirements and constraints.

Object.assign vs spread vs _.extend on big data (version: 0) Benchmark.js

Comparing performance of: `Object.assign vs spread operator vs _.extend`

Created: 3 years ago by: Guest

Go to the latest result

Object.assign

spread operator

_.extend

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Object.assign vs spread vs _.extend on big data (version: 0) Benchmark.js

Comparing performance of: Object.assign vs spread operator vs _.extend

Created: 3 years ago by: Guest

Go to the latest result

Object.assign

spread operator

_.extend

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Object.assign vs spread operator vs _.extend`