0 1 00:00:02,560 --> 00:00:10,520 So a little while ago I had a 24 party, and I invited some people, and those people invited 1 2 00:00:10,520 --> 00:00:12,220 some people, and before you know it, 2 3 00:00:12,240 --> 00:00:14,910 I've got a massive guest list to manage. 3 4 00:00:14,920 --> 00:00:17,060 So what's the obvious solution? 4 5 00:00:17,100 --> 00:00:22,440 Well, code, of course. We’re programmers, we have all the codes. So I thought, what if I could write a script 5 6 00:00:22,480 --> 00:00:27,390 that asked the guests for their name and checks against a guest list to see whether or not they should 6 7 00:00:27,390 --> 00:00:28,510 be admitted? 7 8 00:00:28,530 --> 00:00:33,600 Now the actual implementation was done via Alexa, which is a little bit hairy, but let's see if we can 8 9 00:00:33,600 --> 00:00:36,360 make a basic version of this using Javascript. 9 10 00:00:36,360 --> 00:00:42,630 Now using what we know about Javascript so far, we could write maybe like a gigantic conditional statement, 10 11 00:00:42,660 --> 00:00:50,480 say if guest name equals Angela then alert("Welcome!), 11 12 00:00:50,820 --> 00:01:02,370 else if guest name equals Jack then alert("Welcome!"), and so on and so forth until I basically break my 12 13 00:01:02,370 --> 00:01:04,620 fingers or I run out of motivation. 13 14 00:01:04,650 --> 00:01:10,890 So the problem here is that we've seen that you can store data in variables but we've only been able 14 15 00:01:10,890 --> 00:01:13,260 to store a single piece of data, 15 16 00:01:13,350 --> 00:01:16,750 so for example var a equals Angela. 16 17 00:01:16,980 --> 00:01:22,920 And we've seen that you can store different data types, but how can we store a collection of related 17 18 00:01:22,920 --> 00:01:27,260 items into the same container or the same variable? 18 19 00:01:27,600 --> 00:01:30,880 Well, this is a case for creating an array. 19 20 00:01:30,960 --> 00:01:33,770 So let's say that we have a single piece of data, an egg 20 21 00:01:33,780 --> 00:01:41,220 in this case. Instead of storing a single egg into a variable, we can also store it inside an array, or, 21 22 00:01:41,220 --> 00:01:43,690 say, an egg box full of eggs. 22 23 00:01:43,850 --> 00:01:46,720 And this is essentially what an array is. 23 24 00:01:46,860 --> 00:01:49,190 It's a collection of items that 24 25 00:01:49,200 --> 00:01:55,840 are related, and they can be stored together into the same container or the same variable. 25 26 00:01:55,950 --> 00:01:58,110 And this is what the syntax looks like. 26 27 00:01:58,110 --> 00:01:59,450 So you would create a variable, 27 28 00:01:59,460 --> 00:02:00,190 give it a name, 28 29 00:02:00,210 --> 00:02:08,430 let's say call it eggs, and we can set it to equal a bunch of data and enclose it inside these square 29 30 00:02:08,430 --> 00:02:11,760 brackets, with commas in between each piece of data. 30 31 00:02:12,000 --> 00:02:18,780 And, if we try to retrieve a piece of data from this array, then we can simply use the name of the array, 31 32 00:02:19,020 --> 00:02:25,880 eggs, and specify the position of the data inside the array by using, again, square brackets. 32 33 00:02:26,030 --> 00:02:28,880 Now just take a quick guess. Which egg 33 34 00:02:28,890 --> 00:02:33,640 do you think my egg will equal if I run these lines of code, 34 35 00:02:33,780 --> 00:02:41,720 given that the position that I'm trying to tap into is the egg at position 1 inside the eggs array? 35 36 00:02:41,820 --> 00:02:47,430 So if you remember from before we said that computers always start counting from zero. 36 37 00:02:47,580 --> 00:02:51,490 So as programmers we also always start counting from zero. 37 38 00:02:51,630 --> 00:02:55,900 So the first egg in the array is in fact at position zero, 38 39 00:02:56,190 --> 00:03:01,430 and that means that the second egg is in fact the one at position 1, which is a little bit weird, 39 40 00:03:01,650 --> 00:03:06,540 but this is the egg that we would get and we would store inside that variable 40 41 00:03:06,540 --> 00:03:07,430 myEgg, 41 42 00:03:07,620 --> 00:03:10,870 if we ran the code that said var myEgg = eggs 42 43 00:03:10,920 --> 00:03:12,490 [1]. 43 44 00:03:12,500 --> 00:03:14,910 Now we can other things with arrays as well. 44 45 00:03:14,910 --> 00:03:16,760 We can say eggs.length, 45 46 00:03:16,890 --> 00:03:24,030 and this counts the eggs inside the eggs array and gives us the number 5 back, because there are 5 items 46 47 00:03:24,150 --> 00:03:25,160 inside the array. 47 48 00:03:25,260 --> 00:03:31,680 So using arrays we can create a very simple guest list. So we can say something like, for example, var 48 49 00:03:31,890 --> 00:03:39,150 guestList = [], and it's really important to remember that whenever 49 50 00:03:39,150 --> 00:03:46,020 you see square brackets, then it's usually something to do with a collection data type such as an array, 50 51 00:03:46,230 --> 00:03:51,870 and we use these square brackets when we're creating arrays as well as when we're trying to retrieve items 51 52 00:03:51,870 --> 00:03:52,600 from arrays. 52 53 00:03:52,620 --> 00:03:58,020 So this is a telltale sign that we're dealing with something that holds a number of data items such 53 54 00:03:58,020 --> 00:03:58,850 as an array. 54 55 00:03:58,890 --> 00:04:03,560 So inside our guest list I'm going to add all of these names that are on the guest list. 55 56 00:04:03,570 --> 00:04:10,530 So let's turn these names into strings and now I can add them one by one into the guest list remembering 56 57 00:04:10,530 --> 00:04:13,710 to add a comma in between each piece of data. 57 58 00:04:13,710 --> 00:04:20,490 So here's our brand new array that is stored inside a variable called guestList. And this array contains 58 59 00:04:20,550 --> 00:04:27,600 all the names of the people who are on my guest list. So you can see that if I use console.log and 59 60 00:04:27,600 --> 00:04:34,890 I try to print what's inside my variable guest list then it'll print out all of the items inside my array 60 61 00:04:34,890 --> 00:04:40,460 like so, and it will also tell me that there are 6 items inside this array. 61 62 00:04:40,470 --> 00:04:42,660 Now we can also find this out by simply saying 62 63 00:04:42,660 --> 00:04:46,960 guestList.length, and this will do exactly the same thing, 63 64 00:04:46,980 --> 00:04:52,650 it will count how many pieces of data are currently inside the guest list and give you a output of that 64 65 00:04:52,650 --> 00:04:53,520 number. 65 66 00:04:53,520 --> 00:04:57,420 Now let's see if we can retrieve the first guest on that guest list. 66 67 00:04:57,420 --> 00:05:04,840 So, remember, when we want to retrieve items from the array, we have to start counting from 0. And we retrieve 67 68 00:05:04,840 --> 00:05:10,510 items in the same way that we create items, using the square brackets, and inside the square brackets 68 69 00:05:10,570 --> 00:05:15,300 we specify the position of the data that we want to retrieve. 69 70 00:05:15,310 --> 00:05:23,420 So let's say that if I want the first piece of data, then I would say guestList [0]. And this, 70 71 00:05:23,440 --> 00:05:24,740 if I console.log it, 71 72 00:05:24,940 --> 00:05:26,980 you can see is Angela, 72 73 00:05:26,980 --> 00:05:31,110 which we can confirm is the first piece of data inside our array. 73 74 00:05:31,210 --> 00:05:37,450 Now another cool thing that you can do with arrays is that you can use the function includes to find 74 75 00:05:37,450 --> 00:05:40,480 out if an array includes a particular item. 75 76 00:05:40,480 --> 00:05:45,820 So, for example, in this case, if I say eggs.includes this specific egg, then the computer will look through 76 77 00:05:45,820 --> 00:05:51,330 your array and see if it matches with any of the items inside the array. 77 78 00:05:51,640 --> 00:05:57,120 And if it does then this line of code will return true, and if it doesn't then it will return false. 78 79 00:05:57,130 --> 00:06:00,790 So we get a boolean as the output of this function. 79 80 00:06:00,880 --> 00:06:07,690 So, given what you've just learnt, can you write some code that creates a prompt that asks the guest what 80 81 00:06:07,690 --> 00:06:10,620 is their name, which they will then type into the prompt, 81 82 00:06:10,690 --> 00:06:14,890 then you will check their name against all of the names inside our guest list, 82 83 00:06:14,980 --> 00:06:21,100 and if it does exist then it will send an alert saying "Welcome!", and if it doesn't exist we'll tell 83 84 00:06:21,100 --> 00:06:22,240 them "Sorry, 84 85 00:06:22,450 --> 00:06:29,260 maybe next time.". So, I'll go through the solution with you shortly after, but pause the video now and try 85 86 00:06:29,260 --> 00:06:30,300 and give that a go. 86 87 00:06:30,520 --> 00:06:35,350 You might need to rewind the video back and review some of the concepts that we spoke about in this 87 88 00:06:35,350 --> 00:06:36,160 lesson. 88 89 00:06:36,160 --> 00:06:41,080 All right. So the first thing we're going to do is we're going to create a variable called guestName, 89 90 00:06:41,280 --> 00:06:46,980 and this will be set to equal the response that we get back from the user when we ask them 90 91 00:06:47,020 --> 00:06:48,230 "What is your name?". 91 92 00:06:48,250 --> 00:06:57,340 And now we can check to see if the guest list includes the guest name by using that includes function 92 93 00:06:57,350 --> 00:07:03,430 that we spoke about earlier on, and this will return either true or false depending on whether if the 93 94 00:07:03,430 --> 00:07:06,630 guest name is included inside the guest list. 94 95 00:07:06,670 --> 00:07:09,180 So let's run our code and see what we get. 95 96 00:07:09,250 --> 00:07:13,990 So I'll give it a name that I know is definitely on the guest list, so my own. 96 97 00:07:14,120 --> 00:07:14,580 I'm going to hit 97 98 00:07:14,650 --> 00:07:22,330 OK. Now that name is going to be stored inside guestName, and our next line of code on line 6 is going 98 99 00:07:22,330 --> 00:07:24,380 to check inside the guest list, 99 100 00:07:24,430 --> 00:07:29,220 is there a piece of data that is equal to the guest name, and we get back 100 101 00:07:29,260 --> 00:07:35,620 true, so in fact the guest list does include the guest name. But say if we put in some random name or 101 102 00:07:35,620 --> 00:07:38,480 some random characters, then we get false 102 103 00:07:38,500 --> 00:07:41,900 once this line of code is evaluated. 103 104 00:07:41,900 --> 00:07:49,400 So how can we use this to give the user a different alert based on this condition? 104 105 00:07:49,660 --> 00:07:56,200 Yep, you guessed it, we have to use conditionals. So if we use this as the condition, then we can create 105 106 00:07:56,200 --> 00:08:03,130 an if statement that sends an alert which tells the user "Welcome!", and if the condition was false then 106 107 00:08:03,130 --> 00:08:07,350 we'd give them an alert that says "Sorry, maybe next time.". 107 108 00:08:07,360 --> 00:08:13,060 So now, if we run our code, we can see if I give it a name that it recognizes, 108 109 00:08:13,060 --> 00:08:18,400 it'll give me an alert saying "Welcome!", and if I give it a name that it doesn't recognize, then it'll say 109 110 00:08:18,400 --> 00:08:19,820 "Sorry, maybe next time.". 110 111 00:08:19,880 --> 00:08:21,680 So that's pretty simple, right? 111 112 00:08:21,700 --> 00:08:26,270 So this is how you can store a collection of data inside an array, 112 113 00:08:26,560 --> 00:08:30,900 and it gives you a lot of functionality without having to write a lot of code. 113 114 00:08:30,940 --> 00:08:36,960 Now, in the next lesson, we're going to explore how you can use arrays on a more intermediate level. 114 115 00:08:37,210 --> 00:08:43,760 But before I leave, here's a question. Why did the programmer quit his job? Because he didn't get arrays. 115 116 00:08:47,230 --> 00:08:53,920 I'd just like to say at this point that, in this course, all the jokes that you think are funny I will take 116 117 00:08:53,920 --> 00:08:56,490 credit for, and all the other jokes, 117 118 00:08:56,500 --> 00:08:59,370 it's down to the Internet. 118 119 00:09:00,010 --> 00:09:01,800 So I'll see you on the next lesson.