Check if a Value Exists in an Array using Array includes() Method in JavaScript

We use Arrays to store multiple values or data. It’s a very convenient way to store data temporarily in a single variable, till the job is done. There would be situations where we want to search a value, a single character or a string from a list of values stored in an array. I’ll show you a simple method on how to check if a specified value exists in an array using JavaScript Array includes() method.

Using JavaScript array includes method to check values in array

Syntax includes() Method

arr.includes (elementToSearch, startFrom)

a) elementToSearch – The element to search for.

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 | Internet Explorer 14+ - Yes | Safari - Yes | Opera 34 - Yes

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

Now, lets see an example.

I have a list of Bird names 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.

Here’s the method and its very simple.

<html>
<head>
    <title>JavaScript Array includes() Method Example</title>
    <style>
        ul {
            list-style:none;
            padding:0px;
            margin:10px 0;
        }
    </style>
</head>
<body>
    <p>JavaScript Array includes() Method</p>
    <input id="tbFind" placeholder='Enter search term' onkeyup="find(this.value)" />
    <div id="list"></div>
</body>
<script>
    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 find(term) {
        document.getElementById('list').innerHTML = '';
        if (term != '') {

            var ul = document.createElement('ul'); 

            for (var i = 0; i < birds.length; i++) {
                if (birds[i].includes(term)) {
                    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, the term or the value I want to search in the array, starting from the beginning or 0 position in the array.

I guess the method is simple and quick and it serves the purpose, that is, search values in the array and returns the list matching the specific value(s).

Previous - How to Remove Blank Space from a String using RegExp in JavaScriptNext - Convert HTML Table to PDF using JavaScript without a Plug-in



Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner
Tweet this article Google+

Related Posts:

Join our Google Plus Community and be a part of a discussion!