July 12, 2020

How to Check if an Element is Present in an Array in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to check if an element is present in an array in javascript. In an array, we can have duplicate items, and to keep our array filled with unique items, we need to verify if an element is already present in it or not.

There are various approaches to solve this problem. If an array contains only strings, then it becomes more important to come up with logic that works for both case-sensitive and case insensitive strings since 2 strings with the different casing of letters are not the same.

For case-sensitive verification, we are going to use only the includes() method. For case insensitive verification, we will use combination of map(), toLowerCase(), and includes() method.

In the following example, we have one global array users and it holds an array of strings. We will simply take value from the input value and verify if it’s part of the array or not. After verification, we will get a Boolean value in return and that will be displayed in the h1 element. Please have a look over the code example and steps given below.

HTML & CSS

We have 4 elements in the HTML file (div, button, input, and h1). The div element is just a wrapper for the rest of the elements.
The inner text for the button element is “Check” and for the h1 element is “Result”.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    
    <div>
        <input type="text">
        <button>Check</button>
        <h1>Result</h1>
    </div>

    <script src="script.js"></script>
</body>
</html>

body {
    text-align: center;
}

div {
    display: inline-block;
}

input,button {
    display: inline-block;
    padding: 10px 20px;
}

Javascript

We have a global variable users and it holds an array of strings.
We have selected button, h1, and input elements using the document.querySelector() method and stored them in btnCheck, result, and input variables respectively.
We have attached the click event listener to the button element.

Case Sensitive

In the event handler function, we are taking the value of the input element and passing it to the includes() method.
We will get a Boolean value in return and we will display it in the h1 element.

Case Insensitive

In the event handler function, we are using the map() method to loop through all the array elements, changing their case to lower using the toLowerCase() method and assigning the returning array to the myArray variable.
We are taking the value of the input element and converting it into lower case, then passing it to the includes() method. The point to be noted is that we are calling includes() method of myArray, not users.
We will get a Boolean value in return and we will display it in the h1 element.

let users = ['Peter', 'Mary', 'Marks', 'James', 'Ronald'];

let btnCheck = document.querySelector('button');
let input = document.querySelector('input');
let result = document.querySelector('h1');

btnCheck.addEventListener('click', () => {
    // result.innerText = users.includes(input.value) ? 'True' : 'False';

    let myArray = users.map(user => user.toLowerCase());
    result.innerText = myArray.includes(input.value.toLowerCase()) ? 'True' : 'False';
});

You May Also Like: