How to check if an Array includes a particular value in JavaScript

You can use the includes() method in JavaScript to check if a value exists in an array or not. In-addition, you can use this method to check if a substring exists in a string.

Using JavaScript array includes method to check values in array

For example, I have an array with few values (numbers) in it and I want to check if particular numbers (or values) exists or not.

<script>
  const arr = [1, 2, 3, 4, 5];
  document.write (arr.includes(4) + '<br>');     // output will be true.
  document.writeln (arr.includes(8));           // output will be false.
</script>

Try it

In the above example, I am using the includes() method on an array to check for particular values in it. You can use the method to check if a substring exists in a string or not.

Before we go to our next example, let us see the syntax.

Syntax includes() Method

arr.includes (elementToSearch, startFrom)

The includes() method returns a "Boolean" value (true or false), based on the search result.

a) elementToSearch – The element to search.

b) startFrom – The position from where the search would begin. The default is 0, that is, if you do not specify any value to "startFrom", it is considered 0 position (or location) in the array.

Browser Support:
Chrome 39.0 - Yes | Firefox 34.0 - Yes | Microsoft Edge 85+ - Yes | Safari - Yes | Opera 34 - Yes

• The method works the same as it works on a "string" variable.
• The method is case sensitive.

Here's another example.

How to check if a particular value, a substring, exists within a string using the includes() method? Here's the solution.

<script>
  const str = 'arun banik';
  document.write (str.includes('arun')  + '<br>');     // output: true.
  document.write (str.includes('kumar'));      // output: false.
</script>

Try it

Finally, let us see a more practical example using ".includes()" method.

The example here shows how to create a simple AutoComplete textbox feature using data from an Array and using the "includes()" method.

I have a list of birds stored in an array. I want to search for birds using a character or two. It’s like a look-up, similar to an AutoComplete feature.

<html>
<head>
    <style>
        ul {
            list-style:none;
            padding:0px;
            margin:10px 0;
        }
    </style>
</head>
<body>
    <input id="tbFind" placeholder='Enter search term' onkeyup="find(this.value)" />
    <div id="list"></div>
</body>
<script>
    // JSON array.
    var birds = ['Eurasian Collared-Dove', 'Bald Eagle',
        'Coopers Hawk', 'Mourning Dove', 'Bells Sparrow',
        'Rock Pigeon', 'Aberts Towhee', 'Brewers Sparrow',
        'Canyon Towhee', 'Black Vulture', 'Gila Woodpecker'];

    // function to check a value in the above array.
    function find(val) {
        document.getElementById('list').innerHTML = '';

        if (val != '') {
            var ul = document.createElement('ul'); 

            for (var i = 0; i < birds.length; i++) {
                if (birds[i].includes(val)) {
                    var li = document.createElement('li');
                    ul.appendChild(li);
                    li.innerHTML = birds[i];
                    li.setAttribute('onclick', 'showValue(this)');   // ATTACH AN EVENT.
                }
            }
            document.getElementById('list').appendChild(ul);
        }
        else {
            document.getElementById('list').innerHTML = '';
        }
    }

    function showValue(ele) {
        var t = document.getElementById('tbFind');
        t.value = ele.innerHTML;
        document.getElementById('list').innerHTML = '';
    }
</script>
</html>

Try it

The "includes()" method, as the syntax suggests, takes two parameters (see the syntax above). However, I have provided only one in the above example, the value I want to search in the array, starting from the beginning or "0" position in the array.

← PreviousNext →