All right we'll come back.
So in this video we're going to discuss our first main data structure which is something called the
array.
So we have a few objectives here.
The first one is we want to understand what arrays are and why we use them.
And then secondly we want to use them in our code.
So let's start by talking about conceptually what the point of an array is.
So suppose I wanted to model a group of friends.
So every friend is a string with their name like Charlie and Liz David and Mathias.
So I could make for friend variables.
Each one is a separate variable and if I wanted to add another one I would need to save our friend 5
is equal to some other name.
And then I need to know for the next one I need to do forensics and then friend 7.
And so this is problematic for a few reasons.
One is that this code is not what we would consider dry.
There's a lot of repeated code here.
Also these friends aren't related to one another.
They're totally separate.
So it's not really a group of friends.
So this is a perfect use case for an array an array lets his group data in a list.
So rather than having four separate variables we can write one variable and inside of it we store four
different names.
So let's take a closer look at how arrays work.
I have the same example code here.
Var friends equals and then square brackets.
So that's what tells javascript this is an array.
Up until this point here we're dealing with just a regular javascript variable where on the right side
we could just have a string or a number or boolean or undefined or no.
But instead we have an array.
So the square brackets denote an array.
You can see open bracket closed bracket.
And inside we have our list of data to declare an array.
It's a comma separated list.
So we have our values like Charlie comma Liz comma David comma.
MATHIAS.
And that results in an array of four items.
The second important piece of information about arrays is that they are indexed just like characters
in a string where there is a specific number that corresponds to every character starting at zero.
Arrays are also indexed starting at zero.
So every slot in this array has a corresponding number.
When we make this array here with these four names Here's a diagram representing how the array is created
in memory.
So we have Charlie stored with the number zero as index is with one David with two Mathias with three
.
We use those array indices all the time to get data out of the array.
So here I'm initializing the same exact array.
And if I want to get Charlie out of the array I need to know the index that corresponds to Charlee which
is.
And then all I do is write friends.
The variable name bracket is 0.
Just like we would for string if I wanted the first character again.
The only difference is that we're not dealing with a string of characters we're dealing with an array
of strings.
So friend 0 is going to give me Chartley.
Likewise if I did friends one who gives me lives plus a heart plus friends two gives me David and we
end up with Liz Hart.
David we can also use the indices to update array values.
So if Charlie wants to change his name to chuck all I have to do is find Charlie in the array with index
zero friends zero and set it equal to another string Chuck.
So then our array looks like this where we have Chuck at index 0.
Same thing with Liz.
She changes her name to Lizzie we just find the correct index for Liz which is one friends of one equals
Lizzie as you can see here in our array.
Now looks like Chuck at zero Lizzy at 1.
The next feature of arrays is that we can also add data to an existing array.
So if I got a new friend which would be awesome I could really use some new friends all that I need
to do is access friends and put an index in here that doesn't exist yet.
So in this case for it and if I do friends for equals family I will get a lead down here index for I'm
not going to show you a quick demonstration in the con. I'm going to use an array to model colors to
do that.
I'm going to define an array of var colors equals and I'm going to put just a few colors in there as
strings to start red orange and yellow and I'll hit enter.
I now have my colors array defined.
If I access colors it has three items in it and if I wanted to print out orange I would do colors for
packet 1 because it has an index of 1 and I get orange if I wanted to add in another element after yellow
I wanted to add in green.
I would need to count 0 1 2.
So index of 3 is the next one.
Index three colors three equals green.
And now if we take a look at colors I get red orange yellow green.
Suppose that I wanted to change green to be dark green.
I need to access it first.
So colors 3.
Just verify that that is green.
So I'll now change colors three to be dark green and that's it.
One quick note if I do something like colors of 10 is equal to Violet and I hit enter.
And let's take a look at what colors looks like.
Now you can see that I get red orange yellow dark green and then it shows undefined.
Times 6.
So what happened here is that I added Violet an index of 10 and that leaves us with a lot of blank space
between index of 3 and index of 10.
So javascript makes empty spaces there and fills some with undefined.
So there's a bunch of empty space in this array which isn't ideal.
So in the next video I'm going to show you another way of adding data where we don't have to keep track
of how many items are in our array at any given time to wrap up here.
I have a few other notes about arrays.
The first of which is that there are different ways of defining arrays.
The first way is to define an empty array using square brackets.
In this case I defined a friend's array but I have no friends unfortunately.
So it's just empty square brackets.
The other way to define an array that you may come across is to write new array with a capital A and
parentheses after it.
So I won't go into too much detail as to what this is but think of this as a function.
It is a function.
We're calling it with parentheses.
That makes us a new array just like this one does.
So these are equivalent in both cases.
We have a friend's array that's empty.
The next point is that arrays can hold any type of data.
So you've only seen them so far with strings like Charlie and Liz but we can fill them with numbers
with booleans with no undefined with strings with other arrays which will see a little bit later.
So we can fill arrays with all sorts of data.
And they don't all have to be of one type.
So here's an example with a number of boolean a string and no all in one array.
The very last thing I'll point out is that arrays also have a length property just like strings.
In this example I'm defining an array of four items and I run nothing startling.
It gives me four.
I'll go ahead and open up my Consul and demonstrate that.
Let's define a new array here called dogs and dogs.
I'm going to define a string.
Rusty Wyatt and Ali just like that.
And if I run Dogstar at length I get three because length just counts.
How many things are in there.
But remember that the highest index in this array is always one less than the length.
So all the is an index to dogs bracket 2 and you get all the.
So that's important just like strings.
We can define a string var name equals resti and we do named hotlink.
We get 5 because there's five characters but the index of the Y is index for name of four.
Gives me why.
Because indices start at zero.
All right so that's it for a race.
Now in the next video we're going to have a quick problem set.