Sometimes, when building applications, performance ends up being the key or at least a significant driver, especially when dealing with large datasets or real-time requirements. One of the most common tasks in JavaScript is to check whether some value exists in a collection. The two most often used alternatives are Array.includes() and Set.has(). Both work, but actually, Set.has() works better than Array.includes. Let's dive into the reasons for this and decide when you should use either alternative.
Understanding Array.includes() vs. Set.has()
There are two methods that appear to be fairly straightforward in their usage, but have different implementations, namely, Array.includes() and Set.has().
Array.includes()
The includes() method checks if a given value is present within an array.
It makes use of the time complexity of O(n), such that the greater the length of the array, the longer it will take for the value check.
This is because Array.includes() searches the array from start to end (or until it finds the value), and the bigger the array, the longer it takes.
Set.has()
The has() method of a Set checks if a given value exists as well but does so much quicker.
Set.has() relies on a hash table-based structure that allows for constant-time lookup, or O(1) time complexity.
Unlike arrays, set is built for handling unique values, so it won't have duplicate values inside of it and has more lookup times.
Why Set.has() is Faster for Large Data Sets
When you use Set.has(), JavaScript can find the item in one direct operation, no matter how many items are in the set. For example, while checking if a value is in a set that contains a million, the time consumed by Set.has() will be precisely the same as checking ten.
On the other hand, Array.includes() examines each element from left to right sequentially until it may either find the item of interest or reaches its very end. That means the longer it is in size, check times take, especially in the case of an item close to the end-and definitely when the item in question is not there.
Here's a close look at an example:
When you run this, you see that Set.has() far outperforms Array.includes() on large arrays. In practice, that difference might well translate to smoother animations, faster load times, or even less resource usage on your server.
When to Use Set.has() and Array.includes()
This all depends on what you are trying to achieve. Here is a brief summary:
Use Set.has() if:
- You are dealing with big data and are doing lots of lookups.
- You're working with unique values, such as a set of unique user IDs,tags, or keywords.
- You do not mind the small upfront cost of an array conversion into a set to minimize the number of lookups later.
Use Array.includes() if:
- Your dataset is small and the difference in performance is negligible.
- You need to check for an item only once or a few times, so there is no benefit in creating a Set.
- You are dealing with duplicates, which a set cannot handle.
Example Use Case
Imagine you are implementing a user search feature that filters names against a list of blocked words. If you have hundreds of blocked words and are searching frequently, using a Set for the blocked words can make each search check faster:
Even in smaller cases, a Set will help keep things efficient and predictable. Plus, if the blocked words list grows, you’ll already have a scalable solution.
Key Takeaways
Performance:
Set.has()offers O(1) time complexity, making it much faster thanArray.includes()with O(n) for larger collectionsSuitability:
Setis designed for unique values, so it’s naturally optimized for lookups. Arrays are more flexible with duplicate values but are slower at checking for existence.Scalability: As your data grows,
Set.has()continues to perform well, whileArray.includes()will slow down.
Final Thoughts
It is always important to know the size and nature of your dataset when choosing between Set.has() and Array.includes(). Array.includes() is perfectly fine for small datasets, but Set.has() is a precious tool in situations where speed is critical. The right data structure can help optimize your JavaScript applications to be faster and more efficient without making major changes to your code.
Therefore, whenever you find yourself checking whether something is there, then you should ask yourself: Is that a job for an array, or am I able to use the power of a set? Getting it right might well be the difference your application needs.
Top comments (5)
Worth noting there is an overhead for making a set too, converting an array into set is not free and not really worth it if you're only going to touch that data once.
Tested this myself and you're right!
(Using CodePerf)
Yeah, it's totally worth it to use set, what more it needs?, just extra space for hash table while giving a 1000x better lookup, then yeah, it's totally worth it, thanks for this❤️
Its helpful, Thanks 🙌
Helpful, Thanks.