- [Instructor] An array is an instance of the array object
and we declare a new array by creating a variable
then using square brackets to wrap around a
comma separated list of each of the items
within that array.
So each of these items take up a slot in the array.
If we console.log out an array in the browser,
you can see here we have an array with four items
and we got a list of all four of those items
and you clearly see that we can mix
different data types with the same array,
so we have a string, we have a variable that
pulls in the string, and we have a number
and we then have a boolean value.
Also notice at the bottom we have a property
in the array, and it's the length property
that gives us the total length of the array.
So if I instead go here and say collection.length
then we just get the number signifying
how long that array is
and how many items are in the array.
To access a specific item within an array,
we need to use the index number for the slot in the array.
You'll notice here that the index actually starts with zero.
So the first item at the index number is zero,
the second item has the index number one, and so on.
That means if I want to get ahold of the second item,
I need to call for index number one.
I do that using the same square brackets.
So I'll say square brackets one,
that is the index number.
And when I do this I get the value of slot number two.
In this case that's the variable
that has the contents flashlight
so that's why we're seeing flashlight in the console.
We can assign new values to any
of these slots using the same technique.
So if I want to add a different value to the third slot,
that'd be index number two,
all I'd have to do is call in that slot.
So collection square bracket two.
That gives me the third slot,
and then I'll set it equal to whatever
I want to put in there instead.
So I'll put in camera, save,
and now when I expand again you'll see
the third item, index number two,
is set to camera instead.
So even though the original slot was a number,
I can swap it out for a string
or anything else at any time
because Java Script does not care
about the data type inside any of these slots.
Just like you can place any data type inside a variable,
you can place any data type inside any slot in an array.
String, a number, a boolean value,
an undefined value, a null value, a true or false value,
even an object or another array.
Now let's say you want to add a new item
to the end of the array.
You can do that using this length property
because the length property, you notice,
has the same number as the next imagined item
in this array.
So the length is four.
That means if I want to add a new item to the end,
I can just say collection and then inside
the square brackets I'll say collection again,
and a length.
This will give me the current length of the array
and then I'll set that equal to new item.
Save that, now our array is five items long
and the new item has a slot number four,
which is the number we got out of collection.length.
Interestingly you can also assign a new item
to a slot that doesn't exist yet
that's further down the chain.
So for example, we can say collection
and then let's say nine.
This is further down on the list
and there aren't numbers eight, seven, six and five yet,
but let's see what happens.
So I'll say at the end and click save.
Now our array has 10 slots,
but if we look at the list we only get one,
two, three, four, five, six.
So what happened to slots five through eight?
Well, we can try to output them and see what they say.
Console.log collection and then say eight.
Save that and what we get is undefined.
That's what we'll get for all of those undefined slots
because they are quite literally undefined.
We never defined them so they are undefined.
There's nothing in there and we can't pull anything out,
but we can assign new values to them at any time
because, like I said, Java Script doesn't care
if we mix data types,
so we can swap out a undefined for anything else.
What you see here is arrays
are an extremely flexible data storage method.
We can very quickly access content,
we can add new content, we can replace content,
and pretty much do whatever we want with it.
Arrays also have a long list of methods we can use
to do more advanced things
and we'll look at that in the next movie.