What is the use of the includes() method in JavaScript?

The includes() method in JavaScript is a built-in method that is used to check if a given value exists in an array or a string.

It returns a boolean value, true or false, depending on whether the specified value is found or not.

The includes() method is a useful tool for performing various tasks, such as searching for an item in an array, validating user input, and manipulating strings.

Syntax of `includes()` method:

array.includes(valueToFind[, fromIndex])

string.includes(searchString[, position])

where array is the array in which the value is to be searched, valueToFind is the value to be found in the array, fromIndex is an optional parameter that specifies the starting index for the search (default is 0)

and

string is the string in which the search is to be performed, searchString is the string to be searched, and position is an optional parameter that specifies the starting index for the search (default is 0).

Working with Arrays:

One of the primary use cases of the includes() method is to search for an item in an array. It allows you to check if a specific value exists in an array without having to loop through the array manually.

For example:

You can use the includes() method to check if a particular number, say 3, is present in the array as follows

const numbers = [1, 2, 3, 4, 5];
const includesThree = numbers.includes(3);
console.log(includesThree); // Output: true

Similarly, you can check for the presence of other values in the array using the includes() method.

It’s important to note that the includes() method performs a strict equality comparison (===), which means that it not only checks for the value but also the data type.

For example:

const mixedArray = [1, "2", "three", true];

console.log(mixedArray.includes("2")); // Output: false
console.log(mixedArray.includes(2)); // Output: false

In the above example, the includes() method returns false because the value '2' is a string, whereas the array contains the number 2.

The includes() method also supports the use of the fromIndex parameter, which allows you to specify the starting index for the search.

For example:

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(3, 2)); // Output: true

In the above example, the includes() method starts the search from the index 2 (which corresponds to the value 3 in the array), and finds the value 3 in the array.

Working with Strings:

The includes() method can also be used to search for a substring within a string. It allows you to check if a particular substring exists in a string without having to use complex regular expressions or string manipulation techniques.

For example:

const sentence = "The quick brown fox jumps over the lazy dog";

console.log(sentence.includes("fox")); // Output: true
console.log(sentence.includes("cat")); // Output: false

The includes() method is case-sensitive, which means that it distinguishes between uppercase and lowercase letters.

For example:

const sentence = "The quick brown fox jumps over the lazy dog";
console.log(sentence.includes("Fox")); // Output: false

In the above example, the includes() method returns false because the substring 'Fox' is not found in the string sentence due to the difference in case.

Similar to arrays, the includes() method for strings also supports the use of the optional position parameter, which allows you to specify the starting index for the search.

For example:

const sentence = "The quick brown fox jumps over the lazy dog";
console.log(sentence.includes("fox", 10)); // Output: false

In the above example, the includes() method starts the search from the index 10 (which corresponds to the letter 'f' in the string), and does not find the substring 'fox' in the string.

Useful Applications:

1. Search and Filter Data:

The includes() method is commonly used in applications where you need to search and filter data in arrays or strings.

For example, in a search functionality of a web application, you can use the includes() method to search for a particular keyword in an array of items or a string of text.

const products = ["apple", "banana", "orange", "grapes", "mango"];

const searchTerm = "banana";
const isAvailable = products.includes(searchTerm);

if (isAvailable) {
  console.log(`"${searchTerm}" is available in the list of products.`);
} else {
  console.log(`"${searchTerm}" is not available in the list of products.`);
}

2. Input Validation:

The includes() method can be used to validate user input.

For example, you can use it to check if a user’s input contains a certain character or meets a specific requirement. This can be useful in form validation or data validation scenarios.

const username = "john_doe_123";
const blacklistChars = ["@", "#", "$"];

const isValid = !blacklistChars.includes(username);

if (isValid) {
  console.log("Username is valid.");
} else {
  console.log("Username contains invalid characters.");
}

3. String Manipulation:

The includes() method can be used for string manipulation tasks, such as checking if a string starts with a particular substring, ends with a specific substring, or contains a substring at a certain position.

const message = "Hello, world!";

console.log(message.includes("Hello")); // Output: true
console.log(message.includes("world")); // Output: true
console.log(message.includes("!")); // Output: true
console.log(message.includes("world", 7)); // Output: false

4. Conditional Logic:

The includes() method can be used in conditional logic to perform actions based on whether a value is present or not.

For example, you can use it in an if statement to execute different code blocks based on the presence or absence of a value in an array or a string.

const fruits = ["apple", "banana", "orange", "grapes", "mango"];

if (fruits.includes("banana")) {
  console.log("Banana is available.");
} else {
  console.log("Banana is not available.");
}