In JavaScript, there are multiple ways to check if an array includes an item. Apart from loops, you can use includes(), indexOf(), find() , etc. to check whether the given value or element exists in an array or not.

includes() Method

The includes method was added in ES6 to determine whether an array contains a specified value. This method returns true if the element exists in the array and false if not.

The includes() method is perfect for finding whether the element exists or not as a simple boolean value:

const fruits = ['🍎', '🍋', '🍊', '🍇', '🍍', '🍐']

fruits.includes('🍇')  // true
fruits.includes('🍉')  // false

By default, the includes() method searches the entire array. But you can also pass in a starting index as a second parameter to start the search from a different position:

fruits.includes('🍐', 4)    // true
fruits.includes('🍊', 4)    // false

Beside strings, the includes() method also works great with other primitive types:

const symbol = Symbol('🌟')

const types = ['Apple', 150, null, undefined, true, 29n, symbol]

// strings
types.includes('Apple')    // true

// numbers
types.includes(150)        // true

// null
types.includes(null)       // true

// undefined
types.includes(undefined)  // true

// boolean
types.includes(true)       // true

// BigInt
types.includes(29n)        // true

// Symbol
types.includes(symbol     // true

Both includes() and indexOf() behave differently with NaN ("Not-a-Number") property:

const arr = [NaN]

// ✅
arr.includes(NaN) // true

// ❌
arr.indexOf(NaN)   // -1

The includes() method doesn't work in IE and is only available in modern browsers.

indexOf() Method

The simplest and fastest way to check if an item is present in an array is by using the Array.indexOf() method. This method searches the array for the given value and returns its index. If no item is found, it returns -1.

const fruits = ['🍎', '🍋', '🍊', '🍇', '🍍', '🍐']

fruits.indexOf('🍋') // 1  (true)
fruits.indexOf('🍍') // 4  (true)
fruits.indexOf('🍌') // -1 (false)

By default, the indexOf() method starts searching the given item from the beginning of the array and stops at the end of the array. But you can pass in a position as a second argument to skip the starting elements to be included in the search:

fruits.indexOf('🍋', 1) // 1    (true)
fruits.indexOf('🍋', 4) // -1   (false)

Note that if the item is present more than once, the indexOf() method returns the position of the first occurrence.

JavaScript provides us an alternate array method called lastIndexOf(). As the name suggests, it returns the position of the last occurrence of the items in an array.

The lastIndexOf() starts searching the array from the end and stops at the beginning of the array. You can also specify a second parameter to exclude items at the end.

const fruits = ['🍎', '🍋', '🍊', '🍇', '🍍', '🍐']

fruits.lastIndexOf('🍇')       // 3   (true)
fruits.lastIndexOf('🍉')       // -1  (true)
fruits.lastIndexOf('🍋', 4)    // 1   (false)

Both indexOf() and lastIndexOf() perform a case-sensitive search and work in all browsers, including IE9 and up.

find() Method

Unlike includes(), the find() method executes the specified function for each element in the array. It returns the value of the first element in the array that passes the given condition:

const fruits = ['🍎', '🍋', '🍊', '🍇', '🍍', '🍐']

const value = fruits.find(elem => elem === '🍍')

console.log(value) // 🍍

Note: In the above example, I have used an ES6 arrow function to loop over elements. Read this article to learn more about arrow functions.

If no element is found where the function returns true, the find() method returns an undefined value:

const value = fruits.find(elem => elem === '🍉')

console.log(value) // undefined

You can also get the current element index as the second parameter. This is useful when you want to compare the index too:

fruits.find((elem, idx) => elem === '🍇' && idx > 2) // 🍇

fruits.find((elem, idx) => elem === '🍋' && idx > 2) // undefined

Another benefit of the find() method is that it works for other data types like objects as well:

const animals = [{ name: '🐱' }, { name: '🐒' }, { whale: '🐋' }]

const found = animals.find(elem => elem.name === '🐒')

console.log(found) // { name: '🐒' }

The find() method only works in modern browsers.

some() Method

The some() method is similar to the find() except that it returns a boolean value true if the element is found in the array, otherwise false.

const fruits = ['🍎', '🍋', '🍊', '🍇', '🍍', '🍐']

fruits.some(elem => elem === '🍐')     // true
fruits.some(elem => elem === '🍓')     // false

The some() method can also be used with an array of objects:

const animals = [{ name: '🐱' }, { name: '🐒' }, { whale: '🐋' }]

animals.some(elem => elem.name === '🐒')   // true
animals.some(elem => elem.name === '🍊')   // false

You can use the some() method in all modern browsers and in IE9 and above.

every() Method

The every() method is like some() except that it makes sure that all elements in the array pass a certain condition:

const numbers = [10, 99, 75, 45, 33]

// check if all elements are > 15
const result = numbers.every(num => num > 15)

console.log(result) // false

Just like some(), the every() works in all modern browsers and IE9 and higher.

Both indexOf() and includes() methods are case-sensitive. This means that you must specify the same case string to search the array:

const names = ['Ali', 'Atta', 'Alex', 'John']

names.indexOf('atta')   // -1
names.includes('atta')  // false

For a case-insensitive search, one way is to convert each string in the array to lowercase by using the map() method and then perform the search:

const names = ['Ali', 'Atta', 'Alex', 'John']

names.map(elem => elem.toLowerCase()).indexOf('atta')   // 1
names.map(elem => elem.toLowerCase()).includes('atta')  // true

Alternatively, you could use the some() method to do both string lowercase and comparison in one step:

names.some(elem => elem.toLowerCase() === 'atta')   // true

Conclusion

In this article, we looked at 5 different JavaScript Array's methods to check if an item exists in an array.

A legitimate question is, why do we need all these methods in the first place? Why not have just one method to search through an array?

A simple answer would be that all these methods are intended for different use cases:

  • Want to know the element position in the array? Use the indexOf() method.
  • Want to find the position of the last occurrence of an element? There is a lastIndexOf() method available for this purpose.
  • Do you only want to know if the element exists or not? Use the includes() method.
  • Do you want to get the matching element too? Use the find() method.
  • Working with an array of objects? Use the some() method to check the existence of the matching element.
  • Want to perform a case-insensitive search? Use find() or some() method.
  • Want to check if all elements in an array satisfy a certain condition? Use the every() method.
  • And so on.

To learn more about JavaScript arrays and how to store multiple pieces of information in one single variable, read this article.

✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.