 |
When writing JavaScript code, it's easy to use simple, intuitive methods like Array.includes() to check whether an element is present in an array. However, if you're working with large datasets or repeated operations, this approach can become a performance bottleneck.
Let's see why tools like Set and Map can give you better execution times, thanks to their O(1) computational complexity.
⚠️ The problem with Array.includes()
The includes() method loops through the entire array to find the specified element. This means that:
- In the worst case,
includes()has a time complexity of O(n). - The larger the array, the longer it takes to search.
📦 Example:
const items = ['a', 'b', 'c', ..., 'z']; // Long array
items.includes('z'); // O(n) timeIf this check is done thousands of times (for example, in a loop), the times add up quickly.
✅ The solution: Use Set
A Set is a data structure that stores unique values and allows checks to be performed in constant O(1) time.
📦 Equivalent example:
const itemSet = new Set(['a', 'b', 'c', ..., 'z']);
itemSet.has('z'); // O(1) time🔁 If you need to check for the presence of an element multiple times, using Set dramatically reduces execution time.
🔐 When to use Map
If you need to associate keys and values (like a dictionary), Map is the right choice. Map.has(key) also operates in O(1) time, unlike having to search for an object in an array with find() or some().
📦 Example with Map:
const userMap = new Map();
userMap.set('alice', { age: 30 });
userMap.set('bob', { age: 25 });
userMap.has('alice'); // O(1)🚀 Practical Benchmark
Suppose we need to check 10,000 elements:
- With
Array.includes: up to 10,000 comparisons for each call. - With
Set.has: 1 constant comparison, regardless of size.
💡 Result: Set is tens or hundreds of times faster, especially in high-frequency loops or functions.
❌ When not to use Set or Map
Like any tool, Set and Map aren't always the best choice. Here are some cases where you shouldn't use them:
🔹 1. Small collections and occasional checks
If you only have a few elements (e.g., fewer than 10) and perform few checks, the performance difference is negligible. In these cases, using an array is simpler and more readable.
const colors = ['red', 'green', 'blue'];
if (colors.includes('green')) {
// that's fine
}🔹 2. Necessary Sorting
Set doesn't maintain a reliable sort order (except insertion order), and Map isn't suitable for sort-based comparisons. If you need to do .sort() or work with indexes, it's best to use an array.
🔹 3. Index Access
Set and Map do not support direct index access (e.g., array[0]). If you need to access elements positionally, an array is your only option.
🔹 4. JSON Serialization
Set and Map are not serialized correctly with JSON.stringify(). If you need to save or send data in JSON format, you'll need to convert it manually first.
JSON.stringify(new Set(['a', 'b'])); // "{}" ❌ doesn't work as expected🧠 Conclusion
Choosing between Array, Set, or Map depends on the context:
- Use
Set/Mapif you need to perform many presence checks on large collections. - Use
Arrayif you have little data, work with indexes or sorts, or need serialization simple.
📌 Performance, readability, and simplicity must always guide your choice.
Follow me #techelopment
Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
whatsapp: Techelopment
youtube: @techelopment
