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

JavaScript Arrays

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

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