Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Start a free Courses trial
to watch this video
Write a program using the join(), includes(), and indexOf() array methods you learned about earlier.
Resources
Why repeat search.toLowerCase() vs. assigning it to a variable and reusing it? For example:
const search = prompt('Search for a product.');
const searchText = search.toLowerCase();
inStock.includes(searchText);
inStock.indexOf(searchText);
If the user clicks the "Cancel" button in the prompt dialogue, the variable searchText would point to null. The JavaScript interpreter throws an error when you call toLowerCase() on a returned null value -- there's nothing to convert to lowercase:
const search = prompt('Search for a product.');
const searchText = search.toLowerCase();
// Uncaught TypeError: Cannot read property 'toLowerCase' of null
Following is another way you might convert the value assigned to search to all lowercase. If search points to a truthy value (not null, for example), then convert it to lowercase:
const inStock = [ ... ];
let message;
let search = prompt('Search for a product.');
if ( search ) {
search = search.toLowerCase();
}
if ( !search ) {
message = `<strong>In stock:</strong> ${inStock.join(', ')}`;
} else if ( inStock.includes(search) ) {
message = `Yes, we have <strong>${search}</strong>. It's #${inStock.indexOf(search) + 1} on the list!`;
} else {
message = `Sorry, we do not have <strong>${search}</strong>.`;
}
That way, you don't have to repeat calling toLowerCase() in the conditional.
A different approach with only indexof()
There's another way you might write the product search without having to use includes() to check whether the inStock array includes a specific value. Remember, indexOf() returns the index of a given element inside an array, or -1 if it's not present.
First, pass the search value to indexOf(). In the else if clause, check if the product index is not -1. Then use the value of productIndex + 1 to display the product's number in the list:
const inStock = ['pizza', 'cookies', 'eggs', 'apples', 'milk', 'cheese', 'bread', 'lettuce', 'carrots', 'broccoli', 'potatoes', 'crackers', 'onions', 'tofu', 'limes', 'cucumbers'];
let search = prompt('Search for a product.');
let productIndex;
let message;
if ( search ) {
search = search.toLowerCase();
productIndex = inStock.indexOf(search);
}
if ( !search ) {
message = `<strong>In stock:</strong> ${inStock.join(', ')}`;
} else if ( productIndex !== -1 ) {
message = `Yes, we have <strong>${search}</strong>. It's #${productIndex + 1} on the list!`;
} else {
message = `Sorry, we do not have <strong>${search}</strong>.`;
}
If a product is in stock, let's also display its index or 0:00 position in the product list. 0:05 You learned that the index of method returns the index of an array element. 0:07 I'll insert it into the if statement's message 0:12 with it's dollar sign curly braces inStock.indexOf search, 0:18 then outside the curly braces type on the list. 0:26 I'll also display a hash symbol or a number sign just before the index value. 0:32 This is going to search the array for the inStock product and 0:38 return its index starting from 0. 0:41 Now, if the user types pizza, for example, they'll see the message, 0:45 Yes, we have pizza, it's #0 on the list, which seems a bit strange. 0:50 Remember that the index of the elements begins with 0. 0:55 So I'll update this expression to display the element's current index + 1. 0:59 That way the products displayed to the users starting from 1 instead of 0. 1:06 Typing pizza into the prompt dialog now returns, Yes, 1:11 we have pizza, it's number 1 on the list! 1:15 I'll try limes and see that limes are in stock, and it's number 15 on the list. 1:17 How about chips? 1:23 Nope, that's not in stock. 1:26 All right, everything's working so far. 1:29 And notice how I'm writing a little bit of code, then testing to see if it works. 1:31 It's good to get into the habit of programming this way too. 1:35 This let's you quickly catch and fix errors. 1:38 Next, if the user clicks the prompt dialogue's cancel button, 1:41 that's going to return the value null, which as you've learned, 1:45 is JavaScript's way of saying there's an empty value here. 1:48 In this case, the search variable points to nothing. 1:51 Also if a user submits a blank search, that returns the message, Sorry, 1:55 we do not have, then a blank space. 1:59 So I'll also check for any null or empty string values using a conditional. 2:02 I'll check for those values first. 2:07 So I'll change my current if statement to an else if clause. 2:09 Then right above, add an if statement 2:14 I'll use the logical not operator in the condition to check if 2:22 the value assigned to the search variable is falsy. 2:26 In other words, a value that's considered false when evaluated. 2:29 Examples of falsy values are null, an empty string, the number 0, the keyword 2:33 false, and a few others you can review in the teacher's notes with this video. 2:38 I'm only checking for null and an empty string. 2:41 In that case, I want to list all the products in stock. 2:45 I'll use a template literal to assign the message variable a string holding all 2:49 the products in stock. 2:54 You'll learn that an array's join method lets you create a single string composed 3:07 of all the elements in an array. 3:11 I'll call join on the inStock array. 3:14 And to separate each element in the list, 3:18 I'll pass the join method a string consisting of a comma and a space. 3:21 Now, when this code runs, the join method will, for example, 3:26 return a string like pizza comma space cookies comma space eggs and so on. 3:30 I'll test this by saving my file, refreshing the browser, 3:35 then clicking the Cancel button, and 3:39 good, that displays all the products or elements in the in stock array. 3:42 They also appear if I submit a blank search. 3:46 Finally, the includes and indexOf methods are case sensitive. 3:50 Currently, all the in stock array values are lowercase. 3:55 So if a user typed an in stock item using a capital letter or any uppercase letter, 3:58 includes would return false, and indexOf would return -1. 4:04 To prevent that, I'll convert the text entered by the user to all 4:10 lowercase characters using the string.2 lowercase method. 4:14 This way if the user types pizza in all uppercase, or eggs with a capital E, 4:26 for example, this else if condition still evaluates to true, 4:33 and inStock.indexOf returns the index of the element. 4:39 There's another way you might write this too. 4:44 You can review it in the teachers notes with this video. 4:46 All right, up next, you'll learn about more complex types of arrays. 4:49
You need to sign up for Treehouse in order to download course files.
Sign up