JavaScript Includes() Method: The Top 10 Things You Need to Know
Tags: webdev, javascript, beginners, tutorial
Published: 2023-07-08 04:10:08


Are you searching for a method to find out whether the value exists in a string or an array? JavaScript `includes()` function that helps you to find out the value you are looking for from an array or string. 

**The includes() function in** JavaScript **is used to check whether a given value or element exists within an array. The `includes()` method returns a boolean value of true if the specified value is found in the array, and false otherwise.**

In this blog post, we will explore:

*   What is JavaScript includes() function?
*   JavaScript includes() function with arrays
*   Search within string using includes() function
*   How to use includes() with objects
*   Search using includes() function with regular expression
*   How to use includes() in case insensitive manner
*   Use multiple conditions with includes() 
*   Comparing `includes()` with `contains()` and `indexOf()` methods

Let’s look into each item in detail.

What is includes() in JavaScript?
---------------------------------

The `includes()` function takes in one required parameter, which is the value to be searched for in the array or string. It also has an optional parameter fromIndex, which specifies the index from where the search should start. If this parameter is not specified, the search will start from the beginning of the array or string.

```
array.includes(searchString: string, fromIndex?: number)
```


The `includes()` function is a useful method for checking whether a specific value or element exists in an array or string. It is widely supported by modern browsers and can be used in a variety of applications, including web development, data analysis, and more.  

1\. JavaScript includes() function with arrays
----------------------------------------------

Let’s start with arrays. The `includes()` [JavaScript Array Methods](https://www.rajamsr.com/javascript-array-methods/) can be used to find out whether or not an array contains a particular element. This method can be used in a string or a numbers array. 

When the `includes()` function is used with an array to search for an element, it will search for a specific value in the array. The includes() method returns true if it is found, and false otherwise. It performs a strict equality comparison, meaning that the value and the data type of the searched value must match the elements of the array.

Here’s an example of a includes() function with string array:

```
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May'];
console.log(months.includes('Apr'));
// Output: true

console.log(months.includes('apr'));
// Output: false

```


In this example, we’re checking if the array months contains the string ‘Apr’. The `includes()` method returns `true` since the array does contain the value ‘Apr’.

At the same time, the result of the `includes()` function for the word “apr” is `false`. Because it will do a strict [JavaScript String Equality](https://www.rajamsr.com/javascript-string-equality/) comparison.  There is no month with “apr” in the input array, so it returns false.

2\. JavaScript string includes()
--------------------------------

![JavaScript includes() Method](https://i0.wp.com/www.rajamsr.com/wp-content/uploads/2023/04/JavaScript-includes-method.webp)

JavaScript includes() Method

The includes() function can also be used with strings. When the includes() function is used with a string, it searches for the presence of the specified string or character in the given string. It returns true if the specified string or character is found, and false otherwise. 

The `includes()` function is case sensitive, meaning that it distinguishes between [JavaScript Uppercase](https://www.rajamsr.com/javascript-string-touppercase/) and [JavaScript Lowercase](https://www.rajamsr.com/javascript-string-lowercase/) letters.

Here’s an example of the includes() function with string:

```
const message = 'Hello, JavaScript!';
console.log(message.includes('JavaScript')); 
// Output: true

console.log(message.includes('javascript')); 
// Output: false

```


In this example, we’re checking if the string ‘message’ contains the string ‘JavaScript’. The result of the includes() function is true since the string does contain the value ‘JavaScript’.

The includes() function returns false for the lowercase search string “javascript”. Because it will do case-sensitive searches.

In a later section, we will see how to use JavaScript includes() function in a case-insensitive() way.

3\. Includes() function with objects
------------------------------------

The includes() function can even be used with objects. Let’s assume, we have a book object with Id, ISBN, title, and price properties. If we want to check the book object by the author’s full name we can use the includes() function as shown in the following code example:

```
const book = {
  bookId: 2,
  isbn: "978-1449331818",
  title: "Eloquent JavaScript: A Modern Introduction to Programming",
  author: "Marijn Haverbeke",
  price: 32.99
}

console.log(Object.values(book).includes('Marijn Haverbeke'));
// Output: true

console.log(Object.values(book).includes('Marijn'));
// Output: false
```


In this example, we’re checking if the object ‘book’ contains the string ‘Marijn Haverbeke’. Since we can’t use the `includes()` function directly on an object, we first convert the values of the object into an array using Object.values(). We then use the includes() function on the resulting array to check if it contains the string ‘Marijn Haverbeke’. The result is true since the object does contain the value ‘Marijn Haverbeke’.

When using the includes() function with an object, it will return true only when the property’s full value matches with the search string, otherwise, return false.

4\. Includes() JavaScript function with regular expressions
-----------------------------------------------------------

No, **it’s not possible to use regular expressions in the includes() function in JavaScript**. The includes() function expects a substring as its parameter and performs a simple substring search. 

If you want to use regular expressions, you can use the `test()` method of a [regular expression](https://www.codecademy.com/resources/docs/javascript/regexp) object instead of includes().

```
const message = 'JavaScript runs everywhere on everything.';
console.log(message.includes(/everywhere/));

// TypeError: First argument to String.prototype.includes must not be a regular expression
```


5\. Includes() function case insensitivity
------------------------------------------

By default, the includes() function is case-sensitive. However, you can make it case insensitive by using the toLowerCase() or [JavaScript Uppercase](https://www.rajamsr.com/javascript-string-touppercase/) using toUpperCase() method on the string you’re searching for. Here’s an example:

```
const message = 'JavaScript runs everywhere on everything.';
const stringToSearch = 'EVERYWHERE'

console.log(message.toLowerCase().includes(stringToSearch.toLocaleLowerCase())); 
// Output: true
```


In this example, we’re checking if the string message string variable value includes the string ‘EVERYWHERE’ in a case-insensitive way. To achieve this, we convert the entire string to [JavaScript Lowercase](https://www.rajamsr.com/javascript-string-lowercase/) using the `toLowerCase()` method before using the includes() function.

6\. JavaScript includes() partial match search
----------------------------------------------

The includes() function returns true if the search value exactly matches with array elements. It will not work on the partial match as expected. To do partial match, you can use `includes()` along with other [JavaScript Array Methods](https://www.rajamsr.com/javascript-array-methods/) like `filter()`, `find()` or `findIndex()` as shown in the following example:

```
let languages = ['C#', 'PHP', 'JavaScript', 'Rust', 'Scala']
let searchTerm = 'Java'

console.log(languages.filter(e => e.includes(searchTerm)))
// Output: ["JavaScript"]

console.log(languages.find(e => e.includes(searchTerm)))
// Output: "JavaScript"

console.log(languages.findIndex(e => e.includes(searchTerm)))
// Output: 2
```


In the above example, we have a list of programming languages in an array variable ‘languages’. We are trying to search “Java” in the list.

When the `includes()` method is used with `filter()` it will return partial matching elements as an array. If we use the `find()` with the `includes()` method, it will return a matching string. If we use `findIndex()` with `includes()`, it will return the index of the partially matching element. 

You can follow any one of the approaches to search a string array using partial words.

7\. Includes() function vs indexOf()
------------------------------------

You might be wondering, What’s the difference between the `includes()` and the `indexOf()` function? Well, the main difference is that `includes()` returns a boolean value indicating whether the value is found, whereas [JavaScript indexOf()](https://www.rajamsr.com/javascript-indexof/) returns the position of the first occurrence of the value. Returns -1 if it’s not found in the array. 

Here’s an example:

```
const programmingLanguages = [
  "JavaScript",
  "Java",
  "C#",
  "TypeScript",
  "F#"
];

const stringToSearch = 'Java'

const hasJava = programmingLanguages.includes(stringToSearch);
console.log(hasJava);
// Output: true

const indexOfJava = programmingLanguages.indexOf(stringToSearch);
console.log(indexOfJava);
// Output: 1

```


In this example, we’re using both the `includes()` and `indexOf()` functions to check if the array variable ‘programmingLanguages’ contains the string ‘Java’. 

The result of the `includes()` function is true, which indicates that the array does indeed contain the string ‘Java’.

The result of the `indexOf()` function is 1, which is the position of the first occurrence of ‘Java’ in the array. In JavaScript, the array index starts at 0.

8\. Includes() function vs. String contains()
---------------------------------------------

You might also be wondering, What’s the difference between the includes() and the string `contains()` method? Well, the contains() method is not actually part of the JavaScript language. It’s a proposed addition to the language, but as of this writing, it’s not yet widely supported. The includes() function, on the other hand, is supported by all major browsers and is part of the ECMAScript 2016 standard.

9\. Includes() function with multiple conditions
------------------------------------------------

Finally, you might be wondering, Can I use the `includes()` function with multiple conditions? The short answer is yes! You can use the logical operators && and || to combine multiple conditions. Here’s an example:

```
const webTech = ['React', 'C#', 'Angular', 'PHP', 'Vue', 'Node JS'];

const hasReactAndAngular = webTech.includes('React') && webTech.includes('Angular');
console.log(hasReactAndAngular); 
// Output: true

const hasCSharpAndPHP = webTech.includes('C#') || webTech.includes('HTML');
console.log(hasCSharpAndPHP); 
// Output: true

```


In this example, we’re using the && and || operators combined with JavaScript `includes()` method. In ‘webTech’ array we have a list of web frameworks and language names. 

On line #3, we are checking whether the webTech array includes both ‘React’ and ‘Angular’ using the AND operator (&&). It returns true because webTech array contains both values. 

On line #7, we are checking whether the webTech array includes either ‘React’ or ‘HTML’ using the OR operator( || ). Though the input array doesn’t have ‘HTML’ it returns true because we used OR condition. When the OR operator is used, it will return true if either one of the conditions is true. In this case, we have ‘C#’ in the input array.

10\. includes() is not a function
---------------------------------

You can use the `includes()` function only on the array type. It will throw an exception “includes is not a function” error if used on other types. For example, `includes()` used on Object type and it throws an exception.

```
const book =   {
    bookId: 1,
    isbn: "978-1491904244",
    title: "JavaScript - The Good Parts",
    author: "Douglas Crockford",
    price: 25.99
  }

  console.log(book.includes())
  // TypeError: book.includes is not a function
```


How to avoid this error? Before using the `includes()` method, ensure that the input type is an array or [JavaScript String](https://www.rajamsr.com/javascript-string/). This is a simple problem to solve. Use `Array.isArray()` function to check whether the input is an array. To identify the type of a string, use the [JavaScript typeof](https://www.rajamsr.com/javascript-typeof/) keyword.

You can use both of the conditions to make sure the input is an array or string as shown in the following code:

```
if (Array.isArray(book) || typeof book === 'string') {
  console.log(book.includes())
}
else {
  console.log(`Input is not type of string or array.`)
}


```


In conclusion, the `includes()` built-in function using this you check if an array, string, or object contains a specific value. With the includes() function, you can’t use a regular expression to search strings. 

By default, JavaScript `includes()` method search is case-sensitive, you have to take additional measures to work in a case-insensitive manner. 

To search using the partial word in a string array, you have to use the `includes()` method along with `filter()`, `find()`, or `findIndex()` methods.

You can use JavaScript `indexOf()`, contains() methods as an alternative to the includes() method. If you want to safely apply the includes() method, make sure the input type is string or array. 

By understanding its various use cases and avoiding common mistakes, you can use includes() to write more efficient and effective JavaScript code. So go ahead and give it a try in your own projects!

Content re-published from [www.rajamsr.com](https://www.rajamsr.com/).