Benchmark: Fastest way of removing items from array 2 that also appear in array 1

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

var a1 = ["fox", "drawing", "art", "animal", "posture", "fur", "sketch", "creativity", "playful", "standing", "wildlife", "illustration", "detail", "nature", "creative expression", "artist", "unique", "tail", "stance", "animal behavior", "whimsical", "illustration style", "fine art", "drawing techniques", "imaginative", "hand-drawn"];
var a2 = ["dance", "celebration", "lights", "fox", "drawing", "art", "colors", "whimsical", "floor", "party", "evening", "creative expression", "artist", "unique", "tail", "stance", "shadows", "entertainment", "people", "socialize", "energy", "rhythm", "colorful", "bright", "texture", "ambiance", "nightlife", "mood", "design", "pattern", "event space", "nightlife scene", "sound", "celebration area"];

Tests:

.filter() with .includes()
const uniqA = a1.filter((x) => !a2.includes(x))
.map() with .includes()
const uniqA2 = []; a1.map((x) => !a2.includes(x) ? uniqA2.push(x) : x)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
.filter() with .includes()
.map() with .includes()

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:138.0) Gecko/20100101 Firefox/138.0

Browser/OS: Firefox 138 on Linux

View result in a separate tab

Test name	Executions per second
.filter() with .includes()	911931.2 Ops/sec
.map()	996270.4 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

The benchmark provided tests two approaches for removing duplicate items from one array (`a1`) that are present in another array (`a2`). The performance of these two methods is compared in terms of execution speed.

### Approaches Compared

1. **Using `.filter()` with `.includes()`**:
   ```javascript
   const uniqA = a1.filter((x) => !a2.includes(x));
   ```
   - **Description**: This approach filters through `a1`, retaining only the elements that are not found in `a2` by checking each element of `a1` against all elements of `a2` using the `.includes()` method.
   
   - **Pros**: 
     - The code is straightforward and uses familiar array methods that are chainable.
     - Readable and expressive; indicates intent clearly.
  
   - **Cons**: 
     - The performance can degrade for larger arrays because `.includes()` performs a linear search for each element in `a1`, leading to a time complexity of O(n*m), where n is the length of `a1` and m is the length of `a2`.
     - As both arrays grow, this method may become inefficient.

2. **Using `.map()` with manual pushing**:
   ```javascript
   const uniqA2 = [];
   a1.map((x) => !a2.includes(x) ? uniqA2.push(x) : x);
   ```
   - **Description**: In this method, `a1` is iterated through using `.map()`, where for each element, it checks if the element exists in `a2` using `.includes()`. If it doesn't exist, the element is pushed to a new array `uniqA2`.
   
   - **Pros**: 
     - Similar to the first approach, it is easy to read and understand as it leverages common array methods.
     - Allows for further transformations to be added to the mapped values if needed, although such functionality is not used in this case.

- **Cons**:
     - Similar time complexity issues as the previous method—O(n*m)—due to the use of `.includes()`.
     - The use of an additional array (`uniqA2`) might introduce overhead, as it may require more memory.

### Benchmark Results

From the benchmark results, it's noted that the `.map()` approach performed better than the `.filter()` combined with `.includes()`, with an execution speed of approximately 996,270.43 executions per second versus 911,931.19 for the latter.

### Other Alternatives

While the methods tested are valid, there are alternative approaches that might yield better performance, especially for larger datasets:

1. **Using a Set**: 
   - By utilizing a `Set` to hold the elements of `a2`, membership tests can be performed in constant time:
     ```javascript
     const setA2 = new Set(a2);
     const uniqA = a1.filter(x => !setA2.has(x));
     ```
   - **Pros**: 
     - This reduces the time complexity to O(n + m) since creating a Set takes O(m) and filtering takes O(n).
   - **Cons**: 
     - Slightly more complex to implement but provides significant performance benefits.

2. **Using a HashMap**: 
   - Similar to using a Set, one could create a Map structure that tracks counts or existence.
   - This approach would also yield efficient lookups.

### Conclusion

The benchmark effectively demonstrates the performance differences between common JavaScript methods for handling array manipulations. While the tested methods are accessible for many developers, exploring alternatives such as Sets for deduplication tasks can significantly enhance performance and scalability in real-world applications, making code cleaner and faster, especially when dealing with large datasets.

Related benchmarks:

Fastest way of removing items from array 2 that also appear in array 1 (version: 2)

What is the fastest way of removing items from array2 that are in array1. filter vs includes vs map

Comparing performance of: .filter() with .includes() vs .map() with .includes()

Created: one year ago by: Registered User

Jump to the latest result

.filter() with .includes()

.map() with .includes()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):