Benchmark: Lodash Union vs Spread

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js'></script>

Script Preparation code:

var arr1 = new Array(100000000).fill(0);
var arr2 = new Array(100000000).fill(1);

Tests:

Spread Operator
[...arr1, arr2]
Lodash union
_.union(arr1, arr2)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Spread Operator
Lodash union

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/137.0.0.0 Safari/537.36

Browser/OS: Chrome 137 on Mac OS X 10.15.7

View result in a separate tab

Lodash union

42.7M/s

Spread Operator

0/s

View exact numbers

Test name	Executions per second
✓ Lodash union	42,708,164 Ops/sec
Spread Operator	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**

This benchmark compares the performance of two approaches: using the spread operator (`[...arr1, arr2]`) and using Lodash's `union` function (`_.union(arr1, arr2)`).

**What is tested?**

In both cases, we have an array `arr1` with 100 million elements filled with zeros, and another array `arr2` with 100 million elements filled with ones.

The test compares the time it takes to create a new array that includes all elements from `arr1` and `arr2`, using:

1. The spread operator (`[...arr1, arr2]`)
2. Lodash's `union` function (`_.union(arr1, arr2)`)

**Options compared**

We have two options being compared:

a) **Spread Operator**: This method uses the spread operator to create a new array that includes all elements from `arr1` and `arr2`. The spread operator is a syntax feature in JavaScript that allows you to expand an iterable (like an array or string) into individual elements.

b) **Lodash union**: This method uses Lodash's `union` function, which takes two arrays as input and returns a new array with all unique elements from both input arrays.

**Pros and Cons**

Here are some pros and cons of each approach:

a) **Spread Operator**

Pros:

* Simple to understand and implement
* Fast and efficient

Cons:

* Can be slower than the spread operator for very large arrays, as it requires creating a new array and iterating over all elements.
* May not be suitable for non-arrays (e.g., strings or numbers).

b) **Lodash union**

Pros:

* Faster than the spread operator for very large arrays, as Lodash's `union` function uses optimized algorithms to avoid unnecessary allocations.
* Can handle non-array inputs.

Cons:

* Requires including an external library (Lodash)
* May have higher memory overhead due to the additional allocation and garbage collection required by the library.

**Other Considerations**

When using the spread operator, keep in mind that it can create a new array reference each time it's used. If you're working with very large arrays, this can lead to unnecessary allocations and garbage collection. On the other hand, Lodash's `union` function uses optimized algorithms to minimize these issues.

**Library: Lodash**

Lodash is a popular JavaScript utility library that provides a wide range of functions for common tasks, such as array manipulation, string formatting, and more. In this benchmark, we're using Lodash's `union` function to compare its performance with the spread operator.

If you're not familiar with Lodash, it's worth checking out their documentation to learn more about the various features and functions they provide.

**Special JS Feature: None**

There are no special JavaScript features or syntax used in this benchmark that would require additional explanation. The focus is on comparing two different approaches to creating a new array with combined elements from two input arrays.

Lodash Union vs Spread (version: 0) Benchmark.js

Comparing performance of: `Spread Operator vs Lodash union`

Created: 4 years ago by: Guest

Go to the latest result

Spread Operator

Lodash union

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Lodash Union vs Spread (version: 0) Benchmark.js

Comparing performance of: Spread Operator vs Lodash union

Created: 4 years ago by: Guest

Go to the latest result

Spread Operator

Lodash union

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: `Spread Operator vs Lodash union`