All language subtitles for 131 Collections_ Working with Javascript Arrays.en_US

So a little while ago I had a 24 party, and I invited some people, and those people invited

some people, and before you know it,

I've got a massive guest list to manage.

So what's the obvious solution?

Well, code, of course. We’re programmers, we have all the codes. So I thought, what if I could write a script

that asked the guests for their name and checks against a guest list to see whether or not they should

be admitted?

Now the actual implementation was done via Alexa, which is a little bit hairy, but let's see if we can

make a basic version of this using Javascript.

Now using what we know about Javascript so far, we could write maybe like a gigantic conditional statement,

say if guest name equals Angela then alert("Welcome!),

else if guest name equals Jack then alert("Welcome!"), and so on and so forth until I basically break my

fingers or I run out of motivation.

So the problem here is that we've seen that you can store data in variables but we've only been able

to store a single piece of data,

so for example var a equals Angela.

And we've seen that you can store different data types, but how can we store a collection of related

items into the same container or the same variable?

Well, this is a case for creating an array.

So let's say that we have a single piece of data, an egg

in this case. Instead of storing a single egg into a variable, we can also store it inside an array, or,

say, an egg box full of eggs.

And this is essentially what an array is.

It's a collection of items that

are related, and they can be stored together into the same container or the same variable.

And this is what the syntax looks like.

So you would create a variable,

give it a name,

let's say call it eggs, and we can set it to equal a bunch of data and enclose it inside these square

brackets, with commas in between each piece of data.

And, if we try to retrieve a piece of data from this array, then we can simply use the name of the array,

eggs, and specify the position of the data inside the array by using, again, square brackets.

Now just take a quick guess. Which egg

do you think my egg will equal if I run these lines of code,

given that the position that I'm trying to tap into is the egg at position 1 inside the eggs array?

So if you remember from before we said that computers always start counting from zero.

So as programmers we also always start counting from zero.

So the first egg in the array is in fact at position zero,

and that means that the second egg is in fact the one at position 1, which is a little bit weird,

but this is the egg that we would get and we would store inside that variable

myEgg,

if we ran the code that said var myEgg = eggs

[1].

Now we can other things with arrays as well.

We can say eggs.length,

and this counts the eggs inside the eggs array and gives us the number 5 back, because there are 5 items

inside the array.

So using arrays we can create a very simple guest list. So we can say something like, for example, var

guestList = [], and it's really important to remember that whenever

you see square brackets, then it's usually something to do with a collection data type such as an array,

and we use these square brackets when we're creating arrays as well as when we're trying to retrieve items

from arrays.

So this is a telltale sign that we're dealing with something that holds a number of data items such

as an array.

So inside our guest list I'm going to add all of these names that are on the guest list.

So let's turn these names into strings and now I can add them one by one into the guest list remembering

to add a comma in between each piece of data.

So here's our brand new array that is stored inside a variable called guestList. And this array contains

all the names of the people who are on my guest list. So you can see that if I use console.log and

I try to print what's inside my variable guest list then it'll print out all of the items inside my array

like so, and it will also tell me that there are 6 items inside this array.

Now we can also find this out by simply saying

guestList.length, and this will do exactly the same thing,

it will count how many pieces of data are currently inside the guest list and give you a output of that

number.

Now let's see if we can retrieve the first guest on that guest list.

So, remember, when we want to retrieve items from the array, we have to start counting from 0. And we retrieve

items in the same way that we create items, using the square brackets, and inside the square brackets

we specify the position of the data that we want to retrieve.

So let's say that if I want the first piece of data, then I would say guestList [0]. And this,

if I console.log it,

you can see is Angela,

which we can confirm is the first piece of data inside our array.

Now another cool thing that you can do with arrays is that you can use the function includes to find

out if an array includes a particular item.

So, for example, in this case, if I say eggs.includes this specific egg, then the computer will look through

your array and see if it matches with any of the items inside the array.

And if it does then this line of code will return true, and if it doesn't then it will return false.

So we get a boolean as the output of this function.

So, given what you've just learnt, can you write some code that creates a prompt that asks the guest what

is their name, which they will then type into the prompt,

then you will check their name against all of the names inside our guest list,

and if it does exist then it will send an alert saying "Welcome!", and if it doesn't exist we'll tell

them "Sorry,

maybe next time.". So, I'll go through the solution with you shortly after, but pause the video now and try

and give that a go.

You might need to rewind the video back and review some of the concepts that we spoke about in this

lesson.

All right. So the first thing we're going to do is we're going to create a variable called guestName,

and this will be set to equal the response that we get back from the user when we ask them

"What is your name?".

And now we can check to see if the guest list includes the guest name by using that includes function

that we spoke about earlier on, and this will return either true or false depending on whether if the

guest name is included inside the guest list.

So let's run our code and see what we get.

So I'll give it a name that I know is definitely on the guest list, so my own.

I'm going to hit

OK. Now that name is going to be stored inside guestName, and our next line of code on line 6 is going

to check inside the guest list,

is there a piece of data that is equal to the guest name, and we get back

true, so in fact the guest list does include the guest name. But say if we put in some random name or

some random characters, then we get false

once this line of code is evaluated.

So how can we use this to give the user a different alert based on this condition?

Yep, you guessed it, we have to use conditionals. So if we use this as the condition, then we can create

an if statement that sends an alert which tells the user "Welcome!", and if the condition was false then

we'd give them an alert that says "Sorry, maybe next time.".

So now, if we run our code, we can see if I give it a name that it recognizes,

it'll give me an alert saying "Welcome!", and if I give it a name that it doesn't recognize, then it'll say

"Sorry, maybe next time.".

So that's pretty simple, right?

So this is how you can store a collection of data inside an array,

and it gives you a lot of functionality without having to write a lot of code.

Now, in the next lesson, we're going to explore how you can use arrays on a more intermediate level.

But before I leave, here's a question. Why did the programmer quit his job? Because he didn't get arrays.

I'd just like to say at this point that, in this course, all the jokes that you think are funny I will take

credit for, and all the other jokes,

it's down to the Internet.

So I'll see you on the next lesson.