WEBVTT 0 00:02.560 --> 00:10.520 So a little while ago I had a 24 party, and I invited some people, and those people invited 1 00:10.520 --> 00:12.220 some people, and before you know it, 2 00:12.240 --> 00:14.910 I've got a massive guest list to manage. 3 00:14.920 --> 00:17.060 So what's the obvious solution? 4 00:17.100 --> 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 00:22.480 --> 00:27.390 that asked the guests for their name and checks against a guest list to see whether or not they should 6 00:27.390 --> 00:28.510 be admitted? 7 00:28.530 --> 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 00:33.600 --> 00:36.360 make a basic version of this using Javascript. 9 00:36.360 --> 00:42.630 Now using what we know about Javascript so far, we could write maybe like a gigantic conditional statement, 10 00:42.660 --> 00:50.480 say if guest name equals Angela then alert("Welcome!), 11 00:50.820 --> 01:02.370 else if guest name equals Jack then alert("Welcome!"), and so on and so forth until I basically break my 12 01:02.370 --> 01:04.620 fingers or I run out of motivation. 13 01:04.650 --> 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 01:10.890 --> 01:13.260 to store a single piece of data, 15 01:13.350 --> 01:16.750 so for example var a equals Angela. 16 01:16.980 --> 01:22.920 And we've seen that you can store different data types, but how can we store a collection of related 17 01:22.920 --> 01:27.260 items into the same container or the same variable? 18 01:27.600 --> 01:30.880 Well, this is a case for creating an array. 19 01:30.960 --> 01:33.770 So let's say that we have a single piece of data, an egg 20 01:33.780 --> 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 01:41.220 --> 01:43.690 say, an egg box full of eggs. 22 01:43.850 --> 01:46.720 And this is essentially what an array is. 23 01:46.860 --> 01:49.190 It's a collection of items that 24 01:49.200 --> 01:55.840 are related, and they can be stored together into the same container or the same variable. 25 01:55.950 --> 01:58.110 And this is what the syntax looks like. 26 01:58.110 --> 01:59.450 So you would create a variable, 27 01:59.460 --> 02:00.190 give it a name, 28 02:00.210 --> 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 02:08.430 --> 02:11.760 brackets, with commas in between each piece of data. 30 02:12.000 --> 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 02:19.020 --> 02:25.880 eggs, and specify the position of the data inside the array by using, again, square brackets. 32 02:26.030 --> 02:28.880 Now just take a quick guess. Which egg 33 02:28.890 --> 02:33.640 do you think my egg will equal if I run these lines of code, 34 02:33.780 --> 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 02:41.820 --> 02:47.430 So if you remember from before we said that computers always start counting from zero. 36 02:47.580 --> 02:51.490 So as programmers we also always start counting from zero. 37 02:51.630 --> 02:55.900 So the first egg in the array is in fact at position zero, 38 02:56.190 --> 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 03:01.650 --> 03:06.540 but this is the egg that we would get and we would store inside that variable 40 03:06.540 --> 03:07.430 myEgg, 41 03:07.620 --> 03:10.870 if we ran the code that said var myEgg = eggs 42 03:10.920 --> 03:12.490 [1]. 43 03:12.500 --> 03:14.910 Now we can other things with arrays as well. 44 03:14.910 --> 03:16.760 We can say eggs.length, 45 03:16.890 --> 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 03:24.150 --> 03:25.160 inside the array. 47 03:25.260 --> 03:31.680 So using arrays we can create a very simple guest list. So we can say something like, for example, var 48 03:31.890 --> 03:39.150 guestList = [], and it's really important to remember that whenever 49 03:39.150 --> 03:46.020 you see square brackets, then it's usually something to do with a collection data type such as an array, 50 03:46.230 --> 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 03:51.870 --> 03:52.600 from arrays. 52 03:52.620 --> 03:58.020 So this is a telltale sign that we're dealing with something that holds a number of data items such 53 03:58.020 --> 03:58.850 as an array. 54 03:58.890 --> 04:03.560 So inside our guest list I'm going to add all of these names that are on the guest list. 55 04:03.570 --> 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 04:10.530 --> 04:13.710 to add a comma in between each piece of data. 57 04:13.710 --> 04:20.490 So here's our brand new array that is stored inside a variable called guestList. And this array contains 58 04:20.550 --> 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 04:27.600 --> 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 04:34.890 --> 04:40.460 like so, and it will also tell me that there are 6 items inside this array. 61 04:40.470 --> 04:42.660 Now we can also find this out by simply saying 62 04:42.660 --> 04:46.960 guestList.length, and this will do exactly the same thing, 63 04:46.980 --> 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 04:52.650 --> 04:53.520 number. 65 04:53.520 --> 04:57.420 Now let's see if we can retrieve the first guest on that guest list. 66 04:57.420 --> 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 05:04.840 --> 05:10.510 items in the same way that we create items, using the square brackets, and inside the square brackets 68 05:10.570 --> 05:15.300 we specify the position of the data that we want to retrieve. 69 05:15.310 --> 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 05:23.440 --> 05:24.740 if I console.log it, 71 05:24.940 --> 05:26.980 you can see is Angela, 72 05:26.980 --> 05:31.110 which we can confirm is the first piece of data inside our array. 73 05:31.210 --> 05:37.450 Now another cool thing that you can do with arrays is that you can use the function includes to find 74 05:37.450 --> 05:40.480 out if an array includes a particular item. 75 05:40.480 --> 05:45.820 So, for example, in this case, if I say eggs.includes this specific egg, then the computer will look through 76 05:45.820 --> 05:51.330 your array and see if it matches with any of the items inside the array. 77 05:51.640 --> 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 05:57.130 --> 06:00.790 So we get a boolean as the output of this function. 79 06:00.880 --> 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 06:07.690 --> 06:10.620 is their name, which they will then type into the prompt, 81 06:10.690 --> 06:14.890 then you will check their name against all of the names inside our guest list, 82 06:14.980 --> 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 06:21.100 --> 06:22.240 them "Sorry, 84 06:22.450 --> 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 06:29.260 --> 06:30.300 and give that a go. 86 06:30.520 --> 06:35.350 You might need to rewind the video back and review some of the concepts that we spoke about in this 87 06:35.350 --> 06:36.160 lesson. 88 06:36.160 --> 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 06:41.280 --> 06:46.980 and this will be set to equal the response that we get back from the user when we ask them 90 06:47.020 --> 06:48.230 "What is your name?". 91 06:48.250 --> 06:57.340 And now we can check to see if the guest list includes the guest name by using that includes function 92 06:57.350 --> 07:03.430 that we spoke about earlier on, and this will return either true or false depending on whether if the 93 07:03.430 --> 07:06.630 guest name is included inside the guest list. 94 07:06.670 --> 07:09.180 So let's run our code and see what we get. 95 07:09.250 --> 07:13.990 So I'll give it a name that I know is definitely on the guest list, so my own. 96 07:14.120 --> 07:14.580 I'm going to hit 97 07:14.650 --> 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 07:22.330 --> 07:24.380 to check inside the guest list, 99 07:24.430 --> 07:29.220 is there a piece of data that is equal to the guest name, and we get back 100 07:29.260 --> 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 07:35.620 --> 07:38.480 some random characters, then we get false 102 07:38.500 --> 07:41.900 once this line of code is evaluated. 103 07:41.900 --> 07:49.400 So how can we use this to give the user a different alert based on this condition? 104 07:49.660 --> 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 07:56.200 --> 08:03.130 an if statement that sends an alert which tells the user "Welcome!", and if the condition was false then 106 08:03.130 --> 08:07.350 we'd give them an alert that says "Sorry, maybe next time.". 107 08:07.360 --> 08:13.060 So now, if we run our code, we can see if I give it a name that it recognizes, 108 08:13.060 --> 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 08:18.400 --> 08:19.820 "Sorry, maybe next time.". 110 08:19.880 --> 08:21.680 So that's pretty simple, right? 111 08:21.700 --> 08:26.270 So this is how you can store a collection of data inside an array, 112 08:26.560 --> 08:30.900 and it gives you a lot of functionality without having to write a lot of code. 113 08:30.940 --> 08:36.960 Now, in the next lesson, we're going to explore how you can use arrays on a more intermediate level. 114 08:37.210 --> 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 08:47.230 --> 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 08:53.920 --> 08:56.490 credit for, and all the other jokes, 117 08:56.500 --> 08:59.370 it's down to the Internet. 118 09:00.010 --> 09:01.800 So I'll see you on the next lesson.