Check if an Array Includes a value using JavaScript

You can use JavaScript includes() method to check if a value exists in an array or not. We use an array to store data temporarily, until the work is done. Sometimes we might look for a value or a string of values that are already stored in the array, to avoid duplicates or replace the value with another. I’ll show you how using JavaScript includes() method, you can easily check if a given value exists in an array.

Using JavaScript array includes method to check values in array

Note: The example here also shows how to create a simple AutoComplete textbox feature using data from an Array and with JavaScript array includes() method.

Syntax includes() Method

arr.includes (elementToSearch, startFrom)

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

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>
    // 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 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 either true or false. Based on the result we can perform a particular task.

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!