Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
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
Go to the latest result
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>
Run tests (2)
Previous results
Fork
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
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=601758" width="100%" height="500px"></iframe>
.map()
996K/s
.filter() with .includes()
912K/s
View exact numbers
Test name
Executions per second
✓
.map()
996,270 Ops/sec
.filter() with .includes()
911,931 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated one year ago):
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
Lodash uniq vs ES6 Set and sort with 2 arrays
Comments
Confirm delete:
Do you really want to delete benchmark?