Benchmark: lodash uniq vs Array.from(new Set()) vs spread new Set() vs for

HTML Preparation code:


<script src='https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js'></script>

Tests:

Spread
return [...new Set([1, 2, 3, 4, 5, 6, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7])]
use lodash
return _.uniq([1, 2, 3, 4, 5, 6, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7]);
Array.from
return Array.from( new Set([1, 2, 3, 4, 5, 6, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7]) );
For
const visited = {}; const uniques = []; const initial = [1, 2, 3, 4, 5, 6, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7]; for(let i=0;i<initial.lenght;i++){ if(!visited[initial[i]]) { visited[initial[i]] = true; uniques.push(initial[i]); } } return uniques

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

For

1103.2M/s

use lodash

5.9M/s

Spread

2.8M/s

Array.from

2.2M/s

Fastest: For (495.1x faster)

View exact numbers

✓ For: 1,103,212,416 ops/sec
• use lodash: 5,884,128 ops/sec
• Spread: 2,758,869 ops/sec
• Array.from: 2,228,290 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Spread
use lodash
Array.from
For

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

For

171.5M/s

use lodash

9.3M/s

Spread

2.7M/s

Array.from

2.3M/s

View exact numbers

Test name	Executions per second
✓ For	171,462,432 Ops/sec
use lodash	9,313,307 Ops/sec
Spread	2,737,632 Ops/sec
Array.from	2,308,457 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of three different approaches to remove duplicates from an array: `lodash uniq`, `Array.from(new Set())`, and using the spread operator (`new Set()`). The benchmark also includes a control group that uses a traditional `for` loop.

**Options Compared**

1. **Lodash `uniq`**: This method uses a library function to recursively traverse the input array and remove duplicates.
2. **`Array.from(new Set())`**: This approach converts the input array into a set, which automatically removes duplicates, and then converts it back into an array using `Array.from()`.
3. **Spread operator (`new Set()`)**: This method uses the spread operator to convert the input array into a new set, effectively removing duplicates.
4. **Traditional `for` loop**: This approach manually iterates through the input array, keeping track of visited elements and pushing unique ones into an output array.

**Pros and Cons**

1. **Lodash `uniq`**:
	* Pros: Easy to use, efficient, and well-maintained library.
	* Cons: Requires including an external library, may have slower overhead due to function calls.
2. **`Array.from(new Set())`**:
	* Pros: Efficient, easy to understand, and built-in JavaScript functionality.
	* Cons: May have slower performance than native `Set` operations in some browsers.
3. **Spread operator (`new Set()`)**:
	* Pros: Lightweight, efficient, and easy to understand.
	* Cons: May not be supported in older browsers or those with limited set support.
4. **Traditional `for` loop**:
	* Pros: Customizable, no external dependencies required.
	* Cons: More complex, error-prone, and less efficient compared to other approaches.

**Library Used**

The benchmark uses the `lodash` library for its `uniq` function. Lodash is a popular JavaScript utility library that provides a wide range of functions for tasks like string manipulation, array processing, and more.

**Special JS Features or Syntax**

None are explicitly mentioned in the provided benchmark. However, it's worth noting that the spread operator (`new Set()`) uses a modern JavaScript feature called destructuring, which was introduced in ECMAScript 2015 (ES6). If the benchmark were to be run on an older browser or environment without ES6 support, this syntax would not be valid.

**Alternatives**

If you're looking for alternative approaches to remove duplicates from an array, some other options include:

1. Using `reduce()` with a custom callback function.
2. Utilizing `filter()` and checking for the presence of elements in the original array.
3. Implementing a manual hash-based approach using a library like `fasthash`.

However, these alternatives may have varying degrees of complexity, performance, and browser support compared to the options presented in this benchmark.

lodash uniq vs Array.from(new Set()) vs spread new Set() vs for (version: 0)

Comparing performance of: `Spread vs use lodash vs Array.from vs For`

Created: 2 years ago by: Guest

Go to the latest result

Spread

use lodash

Array.from

For

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

lodash uniq vs Array.from(new Set()) vs spread new Set() vs for (version: 0)

Comparing performance of: Spread vs use lodash vs Array.from vs For

Created: 2 years ago by: Guest

Go to the latest result

Spread

use lodash

Array.from

For

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

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 vs use lodash vs Array.from vs For`