1 00:00:00,950 --> 00:00:05,070 If a product is in stock, let's also display its index or 2 00:00:05,070 --> 00:00:07,412 position in the product list. 3 00:00:07,412 --> 00:00:12,730 You learned that the index of method returns the index of an array element. 4 00:00:12,730 --> 00:00:18,639 I'll insert it into the if statement's message 5 00:00:18,639 --> 00:00:26,423 with it's dollar sign curly braces inStock.indexOf search, 6 00:00:26,423 --> 00:00:32,199 then outside the curly braces type on the list. 7 00:00:32,199 --> 00:00:36,850 I'll also display a hash symbol or a number sign just before the index value. 8 00:00:38,050 --> 00:00:41,950 This is going to search the array for the inStock product and 9 00:00:41,950 --> 00:00:43,835 return its index starting from 0. 10 00:00:45,010 --> 00:00:50,490 Now, if the user types pizza, for example, they'll see the message, 11 00:00:50,490 --> 00:00:55,360 Yes, we have pizza, it's #0 on the list, which seems a bit strange. 12 00:00:55,360 --> 00:00:59,940 Remember that the index of the elements begins with 0. 13 00:00:59,940 --> 00:01:06,939 So I'll update this expression to display the element's current index + 1. 14 00:01:06,939 --> 00:01:11,860 That way the products displayed to the users starting from 1 instead of 0. 15 00:01:11,860 --> 00:01:15,030 Typing pizza into the prompt dialog now returns, Yes, 16 00:01:15,030 --> 00:01:17,810 we have pizza, it's number 1 on the list! 17 00:01:17,810 --> 00:01:23,746 I'll try limes and see that limes are in stock, and it's number 15 on the list. 18 00:01:23,746 --> 00:01:24,560 How about chips? 19 00:01:26,572 --> 00:01:27,840 Nope, that's not in stock. 20 00:01:29,390 --> 00:01:31,240 All right, everything's working so far. 21 00:01:31,240 --> 00:01:35,700 And notice how I'm writing a little bit of code, then testing to see if it works. 22 00:01:35,700 --> 00:01:38,540 It's good to get into the habit of programming this way too. 23 00:01:38,540 --> 00:01:41,630 This let's you quickly catch and fix errors. 24 00:01:41,630 --> 00:01:45,720 Next, if the user clicks the prompt dialogue's cancel button, 25 00:01:45,720 --> 00:01:48,770 that's going to return the value null, which as you've learned, 26 00:01:48,770 --> 00:01:51,990 is JavaScript's way of saying there's an empty value here. 27 00:01:51,990 --> 00:01:55,080 In this case, the search variable points to nothing. 28 00:01:55,080 --> 00:01:59,690 Also if a user submits a blank search, that returns the message, Sorry, 29 00:01:59,690 --> 00:02:02,110 we do not have, then a blank space. 30 00:02:02,110 --> 00:02:07,600 So I'll also check for any null or empty string values using a conditional. 31 00:02:07,600 --> 00:02:09,580 I'll check for those values first. 32 00:02:09,580 --> 00:02:14,180 So I'll change my current if statement to an else if clause. 33 00:02:14,180 --> 00:02:16,860 Then right above, add an if statement 34 00:02:22,100 --> 00:02:26,055 I'll use the logical not operator in the condition to check if 35 00:02:26,055 --> 00:02:29,840 the value assigned to the search variable is falsy. 36 00:02:29,840 --> 00:02:33,540 In other words, a value that's considered false when evaluated. 37 00:02:33,540 --> 00:02:38,260 Examples of falsy values are null, an empty string, the number 0, the keyword 38 00:02:38,260 --> 00:02:41,860 false, and a few others you can review in the teacher's notes with this video. 39 00:02:41,860 --> 00:02:43,990 I'm only checking for null and an empty string. 40 00:02:45,500 --> 00:02:49,370 In that case, I want to list all the products in stock. 41 00:02:49,370 --> 00:02:54,106 I'll use a template literal to assign the message variable a string holding all 42 00:02:54,106 --> 00:02:55,531 the products in stock. 43 00:03:07,123 --> 00:03:11,743 You'll learn that an array's join method lets you create a single string composed 44 00:03:11,743 --> 00:03:13,530 of all the elements in an array. 45 00:03:14,530 --> 00:03:18,120 I'll call join on the inStock array. 46 00:03:18,120 --> 00:03:21,260 And to separate each element in the list, 47 00:03:21,260 --> 00:03:26,960 I'll pass the join method a string consisting of a comma and a space. 48 00:03:26,960 --> 00:03:30,526 Now, when this code runs, the join method will, for example, 49 00:03:30,526 --> 00:03:35,310 return a string like pizza comma space cookies comma space eggs and so on. 50 00:03:35,310 --> 00:03:39,740 I'll test this by saving my file, refreshing the browser, 51 00:03:39,740 --> 00:03:42,140 then clicking the Cancel button, and 52 00:03:42,140 --> 00:03:46,640 good, that displays all the products or elements in the in stock array. 53 00:03:46,640 --> 00:03:49,120 They also appear if I submit a blank search. 54 00:03:50,640 --> 00:03:55,180 Finally, the includes and indexOf methods are case sensitive. 55 00:03:55,180 --> 00:03:58,920 Currently, all the in stock array values are lowercase. 56 00:03:58,920 --> 00:04:04,600 So if a user typed an in stock item using a capital letter or any uppercase letter, 57 00:04:04,600 --> 00:04:10,550 includes would return false, and indexOf would return -1. 58 00:04:10,550 --> 00:04:14,465 To prevent that, I'll convert the text entered by the user to all 59 00:04:14,465 --> 00:04:18,325 lowercase characters using the string.2 lowercase method. 60 00:04:26,942 --> 00:04:33,651 This way if the user types pizza in all uppercase, or eggs with a capital E, 61 00:04:33,651 --> 00:04:39,297 for example, this else if condition still evaluates to true, 62 00:04:39,297 --> 00:04:44,830 and inStock.indexOf returns the index of the element. 63 00:04:44,830 --> 00:04:46,690 There's another way you might write this too. 64 00:04:46,690 --> 00:04:49,510 You can review it in the teachers notes with this video. 65 00:04:49,510 --> 00:04:53,130 All right, up next, you'll learn about more complex types of arrays.