JavaScript Array includes() Method: A Comprehensive Guide

The includes() method in JavaScript is a powerful and convenient tool for determining whether an array contains a specific element. It returns a boolean value, true if the element is found, and false otherwise. This method simplifies array checks and enhances code readability, making it an essential part of every JavaScript developer’s toolkit. This guide will provide you with a detailed understanding of the includes() method, including its syntax, parameters, and practical examples.

What is the includes() Method?

The includes() method is a built-in JavaScript array method that checks for the presence of a specified element within an array. Unlike older methods that require manual iteration, includes() provides a concise and efficient way to check for inclusion, returning a simple true or false result.

Purpose of the includes() Method

The primary purpose of the includes() method is to:

• Simplify the process of checking for an element’s existence in an array.
• Return a boolean value indicating whether an array contains a specific element.
• Enhance code readability and maintainability by avoiding manual loop-based checks.
• Improve efficiency by providing a built-in, optimized way to perform array inclusion checks.

Syntax of the includes() Method

The syntax for the includes() method is straightforward:

array.includes(searchElement, fromIndex)

Parameters

The includes() method accepts the following parameters:

Parameter	Type	Description
`searchElement`	Any	The element to search for in the array. It can be of any data type.
`fromIndex` (optional)	Number	The index at which to begin the search. A negative index starts from the end of the array. Default is 0.

Return Value

• The includes() method returns true if the searchElement is found in the array.
• It returns false if the searchElement is not found.

Basic Usage Examples

Let’s explore some basic examples to illustrate how the includes() method works.

Checking for a String

const fruits_arr = ["apple", "banana", "orange", "grape"];

const hasBanana_arr = fruits_arr.includes("banana");
console.log(hasBanana_arr); // Output: true

const hasMango_arr = fruits_arr.includes("mango");
console.log(hasMango_arr); // Output: false

Checking for a Number

const numbers_arr = [10, 20, 30, 40, 50];

const hasThirty_arr = numbers_arr.includes(30);
console.log(hasThirty_arr); // Output: true

const hasSixty_arr = numbers_arr.includes(60);
console.log(hasSixty_arr);  // Output: false

Checking with fromIndex

const letters_arr = ["a", "b", "c", "d", "e", "f"];

const includesC_arr = letters_arr.includes("c", 0); // Search from start
console.log(includesC_arr); // Output: true

const includesB_arr = letters_arr.includes("b", 2); // Search from index 2
console.log(includesB_arr); // Output: false

const includesF_arr = letters_arr.includes("f", -1) //Search from end
console.log(includesF_arr) //Output: true

Checking for Different Data Types

const mixed_arr = [1, "hello", true, null, { key: "value" }];

const hasOne_arr = mixed_arr.includes(1);
console.log(hasOne_arr);  // Output: true

const hasTrue_arr = mixed_arr.includes(true);
console.log(hasTrue_arr);  // Output: true

const hasHello_arr = mixed_arr.includes("hello");
console.log(hasHello_arr);  // Output: true

const hasNull_arr = mixed_arr.includes(null);
console.log(hasNull_arr);  // Output: true

const hasObj_arr = mixed_arr.includes({ key: "value" }); //This will return false
console.log(hasObj_arr);   // Output: false

Note: When comparing objects, includes() uses strict equality (===). Therefore, it checks for the same object reference, not just matching values. 💡

Practical Use Cases

The includes() method is highly practical and can be used in various scenarios:

Validating User Input

Check if a user-provided value is within a list of allowed options:

function validateInput_arr(input) {
  const allowedValues_arr = ["admin", "editor", "viewer"];
  return allowedValues_arr.includes(input);
}

console.log(validateInput_arr("editor")); // Output: true
console.log(validateInput_arr("guest")); // Output: false

Checking for Specific Items in a Shopping Cart

Determine if a product is already present in a shopping cart:

const cart_arr = ["laptop", "mouse", "keyboard"];

function isInCart_arr(product) {
  return cart_arr.includes(product);
}

console.log(isInCart_arr("mouse")); // Output: true
console.log(isInCart_arr("monitor")); // Output: false

Filtering Arrays Based on Inclusion

Create a new array containing only elements that are included in a list:

const allUsers_arr = ["user1", "user2", "user3", "admin1", "admin2"];
const adminUsers_arr = ["admin1", "admin2"];

const filteredUsers_arr = allUsers_arr.filter(user =>
  adminUsers_arr.includes(user)
);
console.log(filteredUsers_arr); // Output: ["admin1", "admin2"]

Advanced Usage Examples

Checking for NaN Values

includes() correctly identifies NaN (Not-a-Number) values, unlike some other methods.

const nanValues_arr = [1, NaN, 3];

const hasNaN_arr = nanValues_arr.includes(NaN);
console.log(hasNaN_arr);  // Output: true

Case Sensitivity

The includes() method is case-sensitive when comparing strings:

const names_arr = ["John", "john", "Jane"];

console.log(names_arr.includes("john")); // Output: true
console.log(names_arr.includes("John")); // Output: true
console.log(names_arr.includes("JOHN")); // Output: false

Note: Remember that includes() performs case-sensitive comparisons for strings. ⚠️

Using with Complex Objects

As noted earlier, includes() checks for the same object reference when working with objects. To check for inclusion based on properties, consider using methods like some or find.

const objects_arr = [{ id: 1 }, { id: 2 }, { id: 3 }];

const obj_arr1 = { id: 2 };
const obj_arr2 = { id: 2 };

console.log(objects_arr.includes(obj_arr1)); // Output: false
console.log(objects_arr.includes(obj_arr2)); // Output: false

const hasObjectWithId2_arr = objects_arr.some(obj => obj.id === 2);
console.log(hasObjectWithId2_arr) //Output: true

Browser Support

The includes() method is well-supported in all modern browsers, ensuring reliable functionality across various platforms.

Browser	Version
Chrome	47+
Edge	14+
Firefox	43+
Safari	9+
Opera	34+

Note: For older browsers, you may need to use polyfills to provide includes() functionality. 🧐

Conclusion

The includes() method in JavaScript is an essential tool for efficiently checking if an array contains a specific element. Its simple syntax and clear return value make it a highly practical and readable approach to array inclusion checks. From basic checks to complex scenarios, includes() enhances code maintainability and effectiveness. Understanding and effectively using this method will significantly improve your JavaScript development workflow.