Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Locate and Join Array Elements

4:57 with Guil Hernandez

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.toLowerCase() 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