Checking if an Array Contains an Element in JavaScript

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.

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.

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:

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.

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.

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.

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.

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:

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.

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

See also

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