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.

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 | 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.

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)'); } } 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.

← PreviousNext →