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.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

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>.`;
}

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

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 its 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 product's 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 lets 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 inStock 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 teacher's 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

You need to sign up for Treehouse in order to set up Workspace

Sign up