Benchmark: Set vs Filter for unique

Script Preparation code:

var array = Array.from({length: 40}, () => Math.floor(Math.random() * 140));

Tests:

Set spread
const f = [... new Set(array)]
Array from set
const s = new Set(array) const l = Array.from(s)
Filter
const b = array.filter((i,index) => array.indexOf(i)=== index)

Historical Performance Data aggregated from 232 community runs

Desktop Results:

Chrome 187 runs

Set spread

1.3M/s

Array from set

1.2M/s

Filter

482K/s

Fastest: Set spread (2.7x faster)

View exact numbers

✓ Set spread: 1,300,819 ops/sec
• Array from set: 1,208,491 ops/sec
• Filter: 482,213 ops/sec

Firefox 35 runs

Filter

591K/s

Array from set

558K/s

Set spread

512K/s

Fastest: Filter (1.2x faster)

View exact numbers

✓ Filter: 590,787 ops/sec
• Array from set: 557,726 ops/sec
• Set spread: 512,002 ops/sec

Mobile Results:

Chrome 10 runs

Set spread

712K/s

Array from set

651K/s

Filter

297K/s

Fastest: Set spread (2.4x faster)

View exact numbers

✓ Set spread: 711,763 ops/sec
• Array from set: 650,536 ops/sec
• Filter: 296,546 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
Set spread
Array from set
Filter

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:152.0) Gecko/20100101 Firefox/152.0

Browser/OS: Firefox 152 on Windows

View result in a separate tab

Set spread

604K/s

Array from set

597K/s

Filter

417K/s

View exact numbers

Test name	Executions per second
✓ Set spread	604,475 Ops/sec
Array from set	596,847 Ops/sec
Filter	417,474 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested.

**Benchmark Overview**

The benchmark compares three approaches to remove duplicates from an array: `Set` spread, `Array.from(new Set(array))`, and filtering using `array.filter()`. The goal is to determine which approach is the fastest.

**Options Compared**

1. **Set Spread**: This method uses the spread operator (`...`) to create a new array with unique values from the original array.
2. **Array.from(new Set(array))**: This method creates a new `Set` object from the array and then converts it back to an array using `Array.from()`.
3. **Filtering using `array.filter()`**: This method uses the `filter()` method to create a new array with only unique values.

**Pros and Cons of Each Approach**

1. **Set Spread**:
	* Pros: concise, efficient, and easy to read.
	* Cons: may not be as efficient as other methods for very large arrays, as it creates an intermediate array.
2. **Array.from(new Set(array))**:
	* Pros: can handle very large arrays efficiently, as `Set` operations are O(1) on average.
	* Cons: requires creating an intermediate `Set` object, which may not be desirable for some use cases.
3. **Filtering using `array.filter()`**:
	* Pros: flexible and easy to understand, but can be slower than other methods due to the overhead of the `filter()` method.
	* Cons: may not be as efficient as other methods for very large arrays.

**Library Used**

In this benchmark, the `Set` data structure is used. A `Set` in JavaScript is a collection of unique values that cannot have duplicate elements. It's implemented as a hash table, which allows for fast lookup and insertion times.

**Special JS Feature or Syntax**

None mentioned in this benchmark. However, it's worth noting that the `filter()` method uses the Arrow Function syntax (`(i,index) => array.indexOf(i)=== index`), which is a modern JavaScript feature introduced in ECMAScript 2015 (ES6).

**Alternative Approaches**

Other approaches to remove duplicates from an array include:

1. **Using `reduce()`**: Instead of using `Set`, you can use the `reduce()` method to accumulate unique values.
2. **Using `map()` and `includes()`**: You can use `map()` to create a new array with unique values, and then use `includes()` to check for duplicates.

For example:
```javascript
const uniqueArray = array.map((value, index) => {
  if (array.includes(value)) return value;
});
```
However, these approaches may not be as efficient as the ones being compared in this benchmark.

Set vs Filter for unique (version: 0)

Comparing performance of: `Set spread vs Array from set vs Filter`

Created: 7 years ago by: Guest

Go to the latest result

Set spread

Array from set

Filter

Historical Performance Data aggregated from 232 community runs

Desktop Results:

Chrome 187 runs

Firefox 35 runs

Mobile Results:

Chrome 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Set vs Filter for unique (version: 0)

Comparing performance of: Set spread vs Array from set vs Filter

Created: 7 years ago by: Guest

Go to the latest result

Set spread

Array from set

Filter

Historical Performance Data aggregated from 232 community runs

Desktop Results:

Chrome 187 runs

Firefox 35 runs

Mobile Results:

Chrome 10 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: `Set spread vs Array from set vs Filter`