How To Check If An Array Contains an Item In JavaScript? – Detailed Guide

Arrays can be used to store multiple values in a variable. So when you work with Arrays, you may require to check if an array contains an Item in Javascript.

You can use array.includes("searchValue") check if an array contains an Item using javascript

In this tutorial, you’ll learn about the different methods to check if an array contains an Item.

If You’re in Hurry…

You can use the code snippet to check if an array contains an Item in javascript.

Code

    var birds = ["dove", "owl", "parrot", "finch", "cuckoos"];

    console.log(birds.includes("owl"));

Output

    true

If You Want to Understand Details, Read on…

Using Array.includes()

Array.includes() can be used to check if an array contains an Item among its entries, returning true or false as appropriate.
Syntax

arr.includes(searchValue)

arr.includes(searchValue, fromIndex)

Parameters
searchValue

  • Actual value searched for in an array. On string and character comparison, includes() is case-insensitive.

fromIndex(optional)

  • Search begin position for searchValue in the array.
  • If fromIndex is a positive value then the first value for search will begin at the fromIndex position.
  • If fromIndex is a negative value then the first value for search will begin arr.length + fromIndex using the absolute value.
  • Defaults to 0.

Code

    var birds = ["dove", "owl", "parrot", "finch", "cuckoos"];

    console.log(birds.includes("owl"));

Output

    true

Let’s see an example with fromIndex having passed with positive values.
Code

    var birds = ["dove", "owl", "parrot", "finch", "cuckoos"];

    console.log(birds.includes("owl", 1));

Output

    true

You can see the includes() is having two parameters, searchValue as “owl” and fromIndex as 1.

In this case fromIndex is a positive number, so the search will start from fromIndex position, which is the index position 1. SearchValue(“owl”) is present at position 1 and includes() returns true.

Let’s see another example of fromIndex having passed with negative values.
Code

    var birds = ["dove", "owl", "parrot", "finch", "cuckoos"];

    console.log(birds.includes("owl", -1));

Output

    false

In this case, you can see the fromIndex given with a negative value. So in order to determine the first search position, array.includes() will calculate the arr.length(5) + fromIndex(-1) which is 4. The first search position will start at 4, as searchValue(“owl”) is present at index 1, .includes("owl", -1) will return false

array.includes() uses the sameValueZero algorithm to identify whether the given element is found.

Using Array.indexOf()

The indexOf() the method will return the first index position of the search item if present or returns -1 if it’s not present in the array.
Syntax

arr.indexOf(searchValue)

arr.indexOf(searchValue, fromIndex)

Parameters
searchValue

  • Actual value searched for in an array.

fromIndex(optional)

  • the index position from which search to take place.
  • if fromIndex is greater than or equal to array.length, -1 will be returned, meaning the array will not be searched.
  • if fromIndex is provided with a negative value, the position will be calculated from the end of the array. Even if a negative value is provided, still search will happen from front to back.
  • if fromIndex is provided with 0, then the whole array will be searched. Default fromIndex value is 0.
    returnValue
  • returns index position, if searchValue found in the array
  • returns -1 if searchValue is not found in the array. Code

Code

    var birds = ["dove", "owl", "parrot", "finch", "cuckoos"];

    console.log(birds.indexOf("owl") !== -1);

Output

    true

Here, indexOf() will return the index position(1), as the searchValue(“owl”) is present at index position 1. indexOf() conditional check returns true as the return value is not equal to -1.

Let us see an example of fromIndex having passed with a positive value.
Code

    var birds = ["dove", "owl", "parrot", "finch", "cuckoos"];

    console.log(birds.indexOf("owl",3) !== -1);

Output

    false

In this example, you can see the result is false , becasue indexOf("owl",3) is forced to start the search from 3rd index position and as ‘owl’ value is present at index position 1, indexOf() concludes that value is not present in the array.

includes() vs indexOf()

Let’s see the behaviour of includes() and indexOf() for different primitive types.

const symbol = Symbol('owl');

const array = [
  symbol, 
  0,
  200,
  null,
  undefined,
  'string'
];
array.includes()array.indexOf()
array.includes(symbol); // truearray.indexOf(symbol) !== -1; // true
array.includes(0); // truearray.indexOf(0) !== -1; // true
array.includes(200); // truearray.indexOf(200) !== -1; // true
array.includes(null); // truearray.indexOf(null) !== -1; // true
array.includes(undefined); // truearray.indexOf(undefined) !== -1; // true
array.includes(‘string’); // truearray.indexOf(‘string’) !== -1; // true

You can see both includes() and indexOf() behaviours is similar on the above primitive types. But there is one type that results different.

const array = [NaN];
array.includes()array.indexOf()
array.includes(NaN) // truearray.indexOf(NaN) !== -1 // false

Using For Loop

Using For loop to check if an array contains a value is simply by iterating and having a traditional conditional check.
Code

    var birds = ["dove", "owl", "parrot", "finch", "cuckoos"];

    var len = birds.length;

    var searchValue = 'owl';

    for (var i=0; i<len ; i++){
        if(birds[i] == searchValue){
            console.log("true");
        }
    }

Output

    true

JSfiddle

This tutorial is available in this JSFiddle.

Conclusion

In this tutorial, you’ve learned how to check if an array contains a value in Javascript. You’ve also known different ways to check if an array contains a value.

If you’ve any questions, please comment below.

You May Also Like

Leave a Comment