{"id":12644,"date":"2020-06-22T14:42:01","date_gmt":"2020-06-22T21:42:01","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=12644"},"modified":"2023-12-01T03:22:45","modified_gmt":"2023-12-01T11:22:45","slug":"javascript-includes","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/javascript-includes\/","title":{"rendered":"JavaScript Includes: A Step-By-Step Guide"},"content":{"rendered":"\n

The JavaScript includes()<\/code> method determines whether a list includes a specified item. The includes()<\/code> method takes one parameter, the value to check for in a list. includes()<\/code> will return true if that value is present, and false if it’s not.<\/em><\/p>\n\n\n\n

\n\n\n\n

Often, when you have a list of items, you want to check whether or not that list contains a particular element. For example, you may have a list of pending order numbers and want to check whether or not order #500 is pending, or has already been processed.<\/p>\n\n\n\n

That\u2019s where the JavaScript includes()<\/code> function comes in. JavaScript includes()<\/code> is a built-in function that can be used to determine whether an array contains a particular item. The function returns a true or false value depending on whether the array contains the item you have specified.<\/p>\n\n\n\n

In this tutorial, we are going to discuss the basics of the JavaScript includes method and explore how you can use it to check whether an array contains a particular item.
<\/p>\n\n\n\n

JavaScript Array Refresher<\/h2>\n\n\n\n

An array in JavaScript is an ordered object that can be used to store data. JS arrays can include zero or more items and are useful when you want to store multiple values in a single variable. For example, you may have a list of order numbers that you want to store in one variable, rather than in multiple variables throughout your program.
<\/p>\n\n\n\n

Arrays in JavaScript are declared as a list of comma-separated values, enclosed within square brackets. Here\u2019s an example of an array in JavaScript that stores a list of employee names:
<\/p>\n\n\n\n

employees = ['Jeff', 'Linda', 'Emma', 'Luke'];<\/pre><\/div>\n\n\n\n
The employees<\/code> array we have just created contains four values: Jeff, Linda, Emma, and Luke. By using the console.log()<\/code> function, we can see the contents of our array:
<\/p>\n\n\n\n
console.log(employees);<\/pre><\/div>\n\n\n\n
Our program returns:
<\/p>\n\n\n\n
['Jeff', 'Linda', 'Emma', 'Luke']<\/pre><\/div>\n\n\n\n
JavaScript Array Includes<\/h2>\n\n\n\n
The JavaScript array includes()<\/code> method can be used to determine whether an array contains a particular value. The method returns a true<\/code> or false<\/code> value depending on whether or not the array contains the value you have specified.
<\/p>\n\n\n\n
The array includes()<\/code> method takes two parameters. The first one is the value you are searching for in an array, and the second is the index position in the array at which the search should start. When you\u2019re using the includes()<\/code> method, remember the case sensitivity of the method. If your value parameter does not use the right case, the value you are looking for will not be returned.
<\/p>\n\n\n\n
Let\u2019s say that we have an ice cream store and we want to figure out whether anyone has ordered our Double Chocolate Deluxe<\/code> ice cream today. We have an array of data which contains all the orders that have been placed today, and we can use the includes()<\/code> method to check if that array contains the value Double Chocolate Deluxe<\/code>.
<\/p>\n\n\n\n
Here\u2019s the code we would use to perform this action:
<\/p>\n\n\n\n
var orders_today = ['Strawberry', 'Chocolate', 'Chocolate', 'Raspberry', 'Vanilla', 'Vanilla', 'Double Chocolate Deluxe'];\nconsole.log(orders_today.includes('Double Chocolate Deluxe'));<\/pre><\/div>\n\n\n\n
Our code returns the following: true.<\/code>
<\/p>\n\n\n\n
Let\u2019s break down our code. On the first line, we declare an array called orders_today<\/code> which stores all the orders that were placed today. On the next line, we use the includes()<\/code> method to determine whether or not our orders_today<\/code> array includes the value Double Chocolate Deluxe<\/code>. Because our array does include that value, the program returns true<\/code>.
<\/p>\n\n\n\n
Similarly, the includes()<\/code> method can be used to find a number in an array of numbers. Let\u2019s say that we have an array which stores a list of pending order numbers in our ice cream store, and we want to check if order number 27 is still pending. We could use the following code to perform this action:
<\/p>\n\n\n\n
var pending_order_numbers = [24, 26, 28, 29];\nconsole.log(pending_order_numbers.includes(27));\n<\/pre><\/div>\n\n\n\n
Our code returns: false. The includes()<\/code> method has checked if pending_order_numbers<\/code> includes the value 27<\/code>. Because it does not, our program returns the value false<\/code>.
<\/p>\n\n\n\n
Search From a Specific Position<\/h2>\n\n\n\n
In the above examples, we have only specified the value we are searching for in our array. But what if we only want to search for a specific value after a certain position? That\u2019s where the second, optional, includes()<\/code> parameter comes in.
<\/p>\n\n\n\n
The second includes()<\/code> parameter is used to specify the index value at which our search should begin. Let\u2019s say that we want to search our array of orders to see if a Strawberry<\/code> ice cream was ordered today. However, we want to ignore the first order because that was a test ice cream order. We could use the following code to perform this search:
<\/p>\n\n\n\n
var orders_today = ['Strawberry', 'Chocolate', 'Chocolate', 'Raspberry', 'Vanilla', 'Vanilla', 'Double Chocolate Deluxe'];\nconsole.log(orders_today.includes('Strawberry', 1);<\/pre><\/div>\n\n\n\n
Our program returns: false. Even though orders_today<\/code> includes an order for strawberry ice cream, it appears at the position 0<\/code> in our array. So, our program returns false.<\/code><\/p>\n\n\n\n