Checking if an Array Contains an Element in JavaScript

What is JavaScript?

JavaScript is a scripting language that works both on the server side (Node.js) and on the client side (in browsers). JavaScript is the primary programming language for the web, which turns static pages into interactive ones. Using JavaScript, you can change HTML code and CSS styles, process data, validate forms, play videos, and more.

What is an array in JavaScript?

An array in JavaScript is a special built-in object in JavaScript that allows storing multiple elements of different types in a single variable. A JavaScript array is created using square brackets "[...]" or using the "new Array()" constructor. Each element in an array has its own index, allowing you to access an element directly by its index or iterate through the array with a "for loop". JavaScript provides many sets of built-in functions for merging, joining, slicing, reversing, copying, reducing, inserting, clearing, and cloning arrays. You can also convert array to JSON, get a sum of array elements, convert string to array, and convert array to string.

JavaScript Array Contains Examples

The following are examples of checking if an array contains an element in JavaScript:

Checking if an array contains an element using indexOf()

The array.indexOf(searchElement, index) method in JavaScript returns the index of the first element in the array that matches the search condition, or "-1". The indexOf() method is case sensitive when searching for strings in an array. The indexOf() method takes two arguments; search value and starting index. The search is performed from left to right. By default, the search starts at the first element and ends at the last. If a negative index value is passed, then the starting index is counted from the last element to the left by the specified number of elements (but the search continues from right to left. The main difference between the include() and indexOf() methods is that include() returns a boolean value (true or false) while the indexOf() method returns the first index of the matched element, or -1 (if the element is not found).

const array = ['Strawberry', 'Grape', 'Orange', 'Cherry', 'Grape', 'Banana'];

console.log(array.indexOf('Grape'));

// output: 1

If you need to search for the desired element from the end of the array, you can use the array.lastIndexOf() method. The array.lastIndexOf() method returns the last index of the specified value, or -1 if no value was found. By default, the search starts at the last element and ends at the first. A negative index value tells the lastIndexOf() method to start searching for the last element minus the specified number of elements (but still searching from right to left).

const array = ['Strawberry', 'Grape', 'Orange', 'Cherry', 'Grape', 'Banana'];

console.log(array.lastIndexOf('Grape'));

// output: 4

Checking if an array contains an element using includes()

The array.includes(searchElement, index) method in JavaScript checks if an array contains a given element. The includes() method is best for using in "if" conditions. The method returns the boolean value "true" if the element is found, otherwise "false". The include() method is case sensitive when searching for strings in an array.

const array = ['Strawberry', 'Grape', 'Orange', 'Cherry'];

console.log(array.includes('Grape'));

// output: true

Checking if an array contains an element using find()

The array.find() method returns the first element in the array that satisfies the condition in the passed function, or "undefined". Compared to the array.indexOf() and array.includes() methods, the array.find() method takes a function as a parameter and executes it for each array elements until it returns the boolean "true". When the first element is found, the find() method immediately returns the value without checking the rest of the values in the array.

const arr = [10, 21, 43, 1, 24, 12, 6];
if (arr.find(i => (i === 21))) {
  console.log('Found');
} else {
   console.log('Not Found');
}

// output: Found

Checking if an array contains an element using filter()

The array.filter(function(currentValue, index, array), thisValue) method returns an array of elements that match the criteria defined in the function passed as an argument. The filter() method does not modify the original array.

const arr = [21, 43, 23, 1, 34, 12, 8];

if (arr.filter(i => (i === 23)).length) {
  console.log('Found');
} else {
  console.log('Not Found');
}

// output: Found

Checking if an array contains an element using some()

The array.some(callback(element,index,array),thisArg) method tests whether at least one element in the array passes the test implemented by the provided function. The some() method does not modify the original array.

const array = [6, 9, 7, 5, 8];

console.log(array.some(element => element > 6));

// output: true

Checking if an array contains an element, case-sensitive

To check if an element is in a case-sensitive array, you need to use the map() and .toLocaleLowerCase() methods to return a new array containing all elements in lowercase. Then use the includes() method to check:

const colors = ['Strawberry', 'Grape', 'Orange', 'Cherry'];

const result = colors.map(element => element.toLocaleLowerCase()).includes('grape');

console.log(result);

// output: true

What is the difference between indexOf() and include() methods?

The main difference between the indexOf() and include() methods is that the indexOf() method returns the index of the found element in the array (or -1), while the include() method returns a boolean true or false. When searching inside an array containing NaN elements, the include() method will return true, and the indexOf() method will return -1.

const arr = [NaN];

console.log(arr.indexOf(NaN));
// output: -1

console.log(arr.includes(NaN));
// output: true

See also

• JavaScript Array forEach()
• How to send Authorization Credentials with JavaScript Fetch API?
• How do I send requests using JavaScript Fetch API?