Narrator: Arrays are a fundamental concept
in JavaScript that you're gonna use
throughout your entire JavaScript Live.
Let's now learn exactly how they work.
In many previous lectures, we had different variables
for different persons, but now imagine
how handy it would be to bundle them all
into one single variable.
In JavaScript we have arrays for that.
They're like collections of variables
that can even have different data types.
Let's declare a variable like always
called names and now we can use an array.
There are different ways of creating a new array,
but the easiest and most used one is using brackets.
We use the brackets and then in here
we put our different values.
Let's say we want an array of names,
so John then comma and then we add a new element,
so Mark and then let's say a third element called Jane.
Now we have array of names,
an array with three elements called John, Mark, and Jane
all separated by these commas.
Let's create a new one called years.
As I mentioned, there are different ways
of creating arrays, so let's see another one,
which is new array, so you can do an array like this
basically calling this array function here
with a new key word and then in there
you pass the data that you want to be in the array, so 1990,
1969, and 1948.
This will be an array the same, but, again,
this here is far more used and so you will usually
not use this one.
I just wanted to let you know that it also exists.
We say that arrays are zero based,
which means that the first element is element number zero,
the second one is element number one,
number two, and so forth and so on.
Let's now see how we can actually access
elements in an array.
We're gonna log to the console,
names, and then we use the brackets again
and then the index, so the number.
Names, brackets, zero will be the element zero
of the names array.
Remember that arrays are zero based
and so John is the element zero.
Let's take a look at that and indeed we see John.
Of course we could also log the entire array,
so this is how it's gonna look like,
so we have here, we state number three,
which is the amount of elements in the array
and then the entire array.
Actually we can also access this number here
and all we have to do in order to do that
is to say names.length,
so we will learn later what this dot here means,
but for now just know that we can do names.length
and then that will show us how many elements are in there.
In this case, it just returned undefined,
but that is just because I misspelled length.
That's what it should look like
and now we should get the number three,
so we have three elements in our array.
We access number zero.
We can also access number two, for example,
and that should then be Jane.
This is how we retrieve, basically,
data from the array, but we can also use the syntax
to mutate the data in the array.
We can say names and one, which will be Mark
and then we can say that we want it to be
Ben instead of Mark.
If we now log the array,
then we should see that it's different.
Now it is actually on position number one,
it is Ben and no longer Mark.
We can also add data to the array,
so we can actually access a position
that's not even there.
Let's say we want position five to be Mary.
Let's see what happens then
and actually let's put it here before this console.log
and so you see that now we have empty here
and then, only then comes Mary.
Now if we wanted to add the Mary as a last element
in the array, we could use this property
that we used before, so names.length.
Remember that this is three at this point.
If we say names, names.length and this will
then beat three and so names three should be Mary.
Then it adds this as a last element in the array basically.
Make sense?
First, let me actually add it here,
so Mutate array data,
here we can say,
Initialize new array.
First here we mutated the array on position number one
and added Ben, then here we mutated the array
at position number names.length
and that is three at this point.
So at names position number three,
we will add Mary and so position number three
will be the last one, so zero, one, two,
and then three is the new one.
I hope that you start to see how useful arrays
can be by holding this different data
all in one variable.
Of course, this can also be different data types.
Let's say that we want to have all the information
about John all in one variable.
Let's give us some more space here
and then let's say var john
and now we can put the first name,
we can put the last name,
we can put the date of birth,
we can put the job, and we can put that he is single
or that he's not married, so let's say false.
Now we have different data type all in one data structure,
which is this array.
These are the very, very basics of arrays,
but let's make it a bit better even
because there are a couple of functions
that we can basically apply to arrays.
These functions are called methods
that are specific to arrays.
You will learn all about methods
and why they are called methods in this case
in the next couple of lectures.
For now, just know that we can do something like,
like this, so we have our john variable
and then we can say .push and then this is like
a regular function.
The push function or the push method
what it will do is it will add an element
at the end of the array.
Let's say that John's favorite color is blue
and so if we pass in blue now here,
it will then add that element to the end of the array,
so console.log john
and so let's see how that worked.
Indeed, we have now the array that we declared initially
plus the blue element at the end of the array.
That's what the push method, the push function here did
to the John array.
Don't worry about this dot syntax here
and this function, this way we call this push function.
We will learn about why it works this way
in a couple of lectures.
There are a couple of methods that I want to show you now
because push is not the only one.
There are tons a different methods for arrays.
Now we'll just show you a couple of them now.
We can also use john unshift
and what unshift will do is very similar to push,
but instead of adding to the end of the array,
it'll add it to the beginning.
Let's say that we want to add a title,
so Mr., so that it's Mr. John Smith.
Now we have the first element, the Mr.,
and then the rest as we've seen in the previous steps.
These two methods here, they add elements to the array.
Let's now see two methods that remove them, so john.pop
and what this will do, it removes the element from the end.
Let's now then log into the console again
and so now you see that we have the array from before,
but without the blue element.
If we do it again, then it will remove yet another
from the end and so now we should also lose the false.
Let's take a look at that
and indeed it did now remove these two.
Finally, we also have a method of course
to remove the first element and that one is called shift.
Now we should lose the Mr. here
and, yeah, indeed it's gone.
Push and shift, pop and shift methods.
Just one last (mumbles) I want to show you,
which is the indexOf.
Let me show that to you,
so indexOf will return the position of the argument
that we pass in inside of this array.
Let's say that we want to know the position
of the 1990, so we pass in this value
and indexOf will then return in which position
this 1990 appears in the John array.
Let's log that to the console, so we take a look at it.
What do you think it will be?
We'll take a guess and now let's see.
It is number two and indeed it is,
so zero, one, and two.
It returns the position at which the element
is in the array, if it is in the array, and if that element
is actually not present in the array
it will return minus one.
Let's say that we pass in something else,
let's say 23 and so now it should return minus one
and indeed it does because we don't have any 23
in that array.
One of the things that this method here
is most useful for is to actually test if an element
is in the array or not.
Let me show that to you.
Let's use the (mumbles) operator
that we learned about before,
so john.indexOf
and so now let's test if John is a designer.
We ask the position of the designer element in the array,
so that will return a number to us, then we say
if it's equal to minus one,
well, then John is NOT a designer
and else John IS a designer.
Let's check that out.
Nothing happens of course because we didn't
assign this here to any variable.
Let's say var isDesigner
and then we can log into the console.
John is NOT a designer.
Let's see why that happened.
We searched for designer in the array,
but that element is not actually in that array,
so it will return minus one.
This entire part here will be minus one
and so we test is minus one equal to minus one?
Yeah, indeed it is.
The isDesigner variable will be assigned
that John is NOT a designer string.
Let's say we now change it to designer
and so now we should see that John IS a designer
because it will now actually return this index.
Let's try that out in the console,
so indexOf and you see that it is three,
so zero, one, two, and three.
Three is, of course, different than minus one
and so we now have John IS a designer.
These are just a couple of methods on arrays
and I'm gonna show you many, many, many more
throughout the rest of the course.
For now you know how arrays work and that's amazing.
It's a really powerful data structure
that we can use in JavaScript.
Now I think that you learned enough already
to take on another coding challenge,
so let's do that right in the next video.