Checking if an Array Contains an Element in JavaScript

To check if an array contains an element in JavaScript, you can use the array.includes(), array.indexOf(), array.find(), and array.filter() methods. The array.includes() method tests if the array contains the specified element and returns the boolean "true" or "false". The array.indexOf() method checks if the JavaScript array contains the specified element and returns the index of the first match or -1. You can use array.lastIndexOf() to search from the end of an array. The array.find() method allows you to check if an array contains the specified element using a custom test function. In this JavaScript Array Contains Element example, we use the array.includes() method to check if an element is in an array. Below you can see more examples of checking if an element is in an array, including a case-insensitive check. Click Execute to run the JavaScript Array Contains Example online and see the result.
Checking if an Array Contains an Element in JavaScript Execute
const array = ['Strawberry', 'Grape', 'Orange', 'Cherry'];

console.log(array.includes('Grape'));
Updated: Viewed: 8302 times

What is JavaScript?

JavaScript is a client-side programming language that runs in the web browser, allowing for real-time manipulation and updates of content on a web page. JavaScript can also be used on the server side (Node.js), making it a universal language for all devices and platforms.

What is an array in JavaScript?

An array 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 index or iterate through the array with a "for loop". JavaScript provides built-in methods for merging, joining, slicing, reversing, copying, reducing, inserting, clearing, and cloning arrays. You can also convert an array to JSON, get a sum of array elements, convert a string to an array, or convert an array to a string.

How to check if an element exists in a JavaScript array?

There are several ways in JavaScript to check if an element exists in an array:

  • The includes() method: the includes() method returns a boolean indicating whether the element is present in the array;
  • The indexOf() method: the indexOf() method returns the first index by which the given element can be found in the array, or -1 if it is not present;
  • The find() method: the find() method returns the value of the first array element that satisfies the given function;
  • The filter() method: the filter() method creates a new array with all elements that pass the test implemented by the provided function;
  • The some() method: the some() method returns a boolean indicating whether at least one element in the array passed the test implemented by the provided function.
JavaScript Array Contains Example
const array = ['JavaScript', 'Array', 'Contains'];

const exists = array.includes('Array');

console.log(exists);

// output: true

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 includes()

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

JavaScript Array Contains Element Example using array.includes()
const array = ['Grape', 'Strawberry', 'Cherry', 'Orange'];

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

// output: true

Checking if an array contains an element, case insensitive

To check if an array contains an element, case insensitively, you can convert all elements in the array and the target element to lowercase (or uppercase) and then use the includes() method to check for the presence of the target element:

JavaScript Check Element Case Insensitive Example
const colors = ['Strawberry', 'Grape', 'Orange', 'Cherry'];
const target = 'GRAPE'

const result = colors.map(e => e.toLowerCase()).includes(target.toLowerCase());

console.log(result);

// output: true

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. The indexOf() method takes two arguments; search value and starting index.

Checking First Element in JavaScript Array
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.

Checking End Element in JavaScript Array
const array = ['Strawberry', 'Grape', 'Orange', 'Cherry', 'Grape', 'Banana'];

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

// output: 4

Difference between indexOf() and includes() methods

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

JavaScript Check Array Contain NaN Example
const arr = [NaN];

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

console.log(arr.includes(NaN));
// 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.

JavaScript Array Contains Example using array.find()
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 find(), case insensitive

To check if an array contains an element using the find(), case insensitive, you can convert all elements in the array and the target element to lowercase (or uppercase) before comparing them:

JavaScript Check Element Case Insensitive with find() Example
const arr = ['JavaScript', 'Array', 'Contains'];
const target  = "array";

const result = arr.find(e => e.toLowerCase() === target.toLowerCase());

if (result) {
  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 filters the elements of an array based on a certain condition. The array.filter() method takes a callback function as an argument, specifying the condition for filtering. The filter() method creates a new array containing all elements that pass the test executed by the supplied function.

JavaScript Find Element using filter() method Example
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.

JavaScript Find Number using some() method Example
const array = [6, 9, 7, 5, 8];

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

// output: true

See also