How to check if an element is in a JavaScript array? From «just works» to «flies»
\n\nHave you ever been writing code and suddenly froze, staring at an array of data? «Is what I need in here?» — this question plagues every developer. On Stack Overflow, the topic How do I check if an array includes a value in JavaScript has gathered millions of views. And for good reason. It seems like a trivial task, but the solution affects not only code readability but also the performance of the entire application.
\n\nToday, we will break down all the ways to check for the presence of an element in a JavaScript array. We won't just show the methods — we'll conduct a real performance investigation. You'll learn when to use includes(), why indexOf() is sometimes faster, and how Set can speed up your code tenfold. Let's go!
The classic: Array.prototype.includes()
\n\nThe most modern and readable way is the includes() method. It appeared in ES2016 and quickly became the de facto standard. Why? Because its name speaks for itself.
\n\nconst fruits = ['apple', 'banana', 'mango', 'orange'];\nconst hasBanana = fruits.includes('banana');\nconsole.log(hasBanana); // true\n\nconst hasGrape = fruits.includes('grape');\nconsole.log(hasGrape); // false\n\n\nSimple and elegant. includes() uses strict comparison (===), so be careful with data types:
const numbers = [1, 2, 3];\nconsole.log(numbers.includes('1')); // false — string is not equal to number\n\n\nPros:
\n- \n
- Readability 10/10 — code is understandable even for a beginner \n
- Works with
NaN(unlikeindexOf) \n - Supported by all modern browsers \n
Cons:
\n- \n
- Linear complexity O(n) — iterates through the entire array \n
- Not suitable if you need to find the index of an element \n
The veteran: Array.prototype.indexOf()
\n\nBefore includes() appeared, everyone used indexOf(). This method returns the index of the first found element or -1 if the element is absent.
const fruits = ['apple', 'banana', 'mango'];\nconst index = fruits.indexOf('banana');\nif (index !== -1) {\n console.log('Element found at position', index);\n} else {\n console.log('Element not found');\n}\n\n\nMany are accustomed to this check, and it still works. But there is one important nuance: indexOf() cannot find NaN.
\n\nconst arr = [NaN];\nconsole.log(arr.indexOf(NaN)); // -1 — doesn't find it!\nconsole.log(arr.includes(NaN)); // true — finds it\n\n\nThis is because NaN !== NaN in JavaScript, and indexOf uses strict comparison. includes() uses the SameValueZero algorithm, which correctly handles NaN.
When to use indexOf?
\n- \n
- If you need the index of an element, not just the fact of its presence \n
- If you are sure there is no NaN in the array \n
- In legacy code where ES2016+ cannot be used \n
The flexible fighter: Array.prototype.find() and findIndex()
\n\nWhen you need to check not just for presence, but for a condition, find() comes to the rescue. It takes a callback function and returns the first element that satisfies the condition, or undefined.
const users = [\n { id: 1, name: 'Alice', age: 25 },\n { id: 2, name: 'Bob', age: 30 },\n { id: 3, name: 'Charlie', age: 35 }\n];\n\nconst user = users.find(u => u.age > 28);\nconsole.log(user); // { id: 2, name: 'Bob', age: 30 }\n\n// Checking for existence\nconst exists = users.find(u => u.id === 4) !== undefined;\nconsole.log(exists); // fals