Benchmark: Merge vs Spread - MeasureThat.net

Tests:

Spread
var params = [ "hello", true, 7 ]; var other = [ ...params, ...(null ?? []), ...params, ...(null ?? []), ...params, ...(null ?? []), ...params, ...params, ...(null ?? []), ...params, ...(null ?? []), ...params, ...(null ?? []), ...params, ...params, ...(null ?? []), ...params, ...(null ?? []), ...params, ...(null ?? []), ...params, ];
Other
var params = [ "hello", true, 7 ]; var merge2 = (...objects) => objects.reduce((acc, cur) => ([ ...acc, ...cur ])); var other = merge2(...[ params, (null ?? []), params, (null ?? []), params, (null ?? []), params, params, (null ?? []), params, (null ?? []), params, (null ?? []), params, params, (null ?? []), params, (null ?? []), params, (null ?? []), params, ]);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Spread
Other

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_3_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.3 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 18 on iOS 18.3.1

View result in a separate tab

Test name	Executions per second
Spread	10228931.0 Ops/sec
Other	795503.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**What is being tested?**

The provided benchmark tests two approaches for merging arrays: Spread (`...`) and `merge2` (a custom function).

**Spread approach**

In this approach, the spread operator (`...`) is used to merge multiple arrays into one. The test case takes an array `params` as input and merges it with multiple arrays containing null or other values. The resulting merged array is then printed.

**Pros of using Spread:**

1. **Concise**: The spread operator is a concise way to merge arrays.
2. **Efficient**: It's generally faster than using custom functions for merging arrays.

**Cons of using Spread:**

1. **Readability**: Some developers might find the use of spread operators in this context less readable, as it may not be immediately clear what's happening.
2. **Browser support**: While the spread operator is widely supported, some older browsers might not have optimal performance or support for this feature.

**Other approach: merge2 function**

The `merge2` function is a custom implementation of array merging using the reduce method. It takes an array of objects as input and returns a new merged array.

**Pros of using merge2:**

1. **Readability**: The code using `merge2` might be more readable, as it explicitly shows what's happening in the merging process.
2. **Customizability**: Developers can modify the `merge2` function to suit their specific needs.

**Cons of using merge2:**

1. **Performance**: Custom functions like `merge2` might have a slight performance overhead compared to the spread operator.
2. **Code bloat**: Creating and testing custom functions can lead to code bloat, especially if not optimized properly.

**Library usage**

Neither approach uses any external libraries in this benchmark.

**Special JS feature/syntax**

There are no special JavaScript features or syntax used in this benchmark, aside from the use of spread operators in modern browsers.

**Other alternatives**

If you're interested in exploring other array merging approaches, here are some alternatives:

1. **concat()**: The `concat()` method is another way to merge arrays.
2. **Array.prototype.push.apply()**: This approach uses the `push.apply()` method to add elements from one or more arrays to a destination array.
3. **ES6 flat() function**: If you're using a modern browser, you can also use the `flat()` function to flatten an array and then merge it.

These alternatives might have different performance characteristics or readability trade-offs compared to the spread operator and `merge2` approach used in this benchmark.

Related benchmarks:

Merge vs Spread (version: 0)

Comparing performance of: Spread vs Other

Created: 3 years ago by: Guest

Jump to the latest result

Spread

Other

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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