Benchmark: Javascript Set vs Filter

Script Preparation code:

var A = Array.from({length: 40000000}, () => Math.floor(Math.random() * 140));
var B = Array.from({length: 40000000}, () => Math.floor(Math.random() * 140));

Tests:

Filter
var C = A.filter((a) => !B.includes(a));
Array Set
var C = [...new Set(A,B)];

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 10 runs

Array Set

2/s

Filter

1/s

Fastest: Array Set (2.3x faster)

View exact numbers

✓ Array Set: 2 ops/sec
• Filter: 1 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
Filter
Array Set

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 147 on Mac OS X 10.15.7

View result in a separate tab

Array Set

2/s

Filter

1/s

View exact numbers

Test name	Executions per second
✓ Array Set	2 Ops/sec
Filter	1 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 benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark is designed to compare the performance of two approaches for filtering or manipulating arrays in JavaScript: `filter()` and using an array set (`Set`).

**Options Being Compared**

There are two test cases:

1. **Filter**: This test case uses the `filter()` method to create a new array with elements that do not match the condition specified by the callback function.
2. **Array Set**: This test case creates a new array set from two existing arrays (`A` and `B`) using the spread operator (`...`). The resulting set is then converted back into an array.

**Pros and Cons of Each Approach**

1. **Filter**:
	* Pros: Simple to implement, works well for small to medium-sized datasets.
	* Cons: Can be slow for large datasets due to the creation of a new array, which involves copying all elements from the original array.
2. **Array Set**:
	* Pros: Faster for large datasets since it only includes unique elements in the resulting set, reducing the overall size of the data structure.
	* Cons: More complex to implement, and requires additional memory to store the set.

**Library/Functionality Used**

The `Set` object is a built-in JavaScript library that provides an efficient way to store unique values. In this benchmark, it's used to create a new array set from two existing arrays (`A` and `B`). The spread operator (`...`) is used to convert the resulting set back into an array.

**Special JS Feature/Syntax**

The benchmark uses the spread operator (`...`) which is a modern JavaScript syntax introduced in ECMAScript 2015 (ES6). It allows for creating new arrays or objects by spreading elements from existing ones. This syntax is not available in older versions of JavaScript, such as ES3 or ES4.

**Other Alternatives**

If you're interested in exploring alternative approaches to filtering or manipulating arrays, here are a few options:

* Using `reduce()` with an accumulator function
* Using `forEach()` and modifying the original array directly
* Using a custom implementation using bitwise operations (e.g., bit masking)
* Using a library like Lodash, which provides various utility functions for working with arrays.

Keep in mind that each approach has its own trade-offs in terms of performance, readability, and maintainability. The choice of approach depends on the specific use case, dataset size, and personal preference.

Javascript Set vs Filter (version: 0) Benchmark.js

Comparing performance of: `Filter vs Array Set`

Created: 3 years ago by: Guest

Go to the latest result

Filter

Array Set

Historical Performance Data aggregated from 10 community runs

Desktop 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):

Javascript Set vs Filter (version: 0) Benchmark.js

Comparing performance of: Filter vs Array Set

Created: 3 years ago by: Guest

Go to the latest result

Filter

Array Set

Historical Performance Data aggregated from 10 community runs

Desktop 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):

Comparing performance of: `Filter vs Array Set`