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