Let's look at JavaScript arrays, arrays are a way to hold list information, so it's like a list like
that, you can hold multiple items within the same variable definition.
There's some examples over at the Mozilla developer networks that MDN and they've got more information
about what arrays are, how they work and how you can create arrays.
So let's go ahead and create some arrays within our JavaScript code.
So open up the editor and we'll also minimize the window here on the left hand side and also minimize
it on the left, the right, the right hand side, the browser window and then the JavaScript code on
the left hand side.
So first of all, let's create our first arrays.
So just call it R a one, R one.
And arrays are defined with square brackets.
You can console log out the contents of your array by logging it out into the console.
So right now we just got a blank arrays.
There's nothing within that array yet.
And you can also when you are declaring your array, you can add in some values in there.
So these values can be strings, values, they can be no values, they can be boolean values, and there
can also be additional arrays in there as well.
So you can have another array within an array.
So when you output that into the console, it outputs it nice and neatly.
And you'll also notice that within that array there are some default values.
So it does have a default length.
So this array has five items in it, starting at zero, one, two, three, four.
And that's how we can get and retrieve the values that are contained within the array.
By using the index value, they are zero based.
So that means that the first item has an index value of zero.
So if we want it to return back the value of one hundred, what would be the index value that we would
use?
I would put it into the console so you can pause the video and give it a try and I'll show you the solution
right now.
So the solution for that is if we want to retrieve back just the value of one hundred, we can just
define it using the index value.
So when we are creating arrays, there are also different ways that we can add to the array and we can
loop through the items of the array.
And also if we were to do an array and we want to update the value of the item with index value of two,
and we want to update it to something like test a string value, we can change and update the array
and that's going to update the contents of the array itself.
Also, another thing to note, when it comes to arrays, you're probably wondering, OK, well, what
if I do this and if I use an index value that doesn't exist yet?
So if I do one hundred and if I add this as a value of one hundred and then output the contents of the
array, you'll find that the actual length of the array is going to be one hundred and one because remember,
they are zero based and it has a bunch of blank empty items within the array that have all the index
values from five to ninety nine.
So that's what happens when you do this declaration of the array.
There's also several ways that if you want to clear out the array, you can clear the contents of the
array so you can set it and take the length value and set the length to zero and that will empty out
the contents of the array.
So over here on line number eight, we've got nothing within the array because we've cleared out all
of the values of the array.
So that's one way that you can clear the array.
I'm going to just comment that out.
And another thing to note about arrays.
So if you were to create another variable and assign array one to that value and if you output the contents
of Array two, you'll find that it does have the same contents as the first array.
But what happens if you update some of the values that are contained within that array?
So if we were to reassign to the item with the index value of four and I'll just add in a string value
of new value, and then we output the current value of array two and open that up in the console, we
see that four has a new value.
And also what if we see what's contained within Array one?
We also have four as the new value, and that's the reason why we can use constants.
We don't have to use left for the array because it's tying the array to a particular memory location.
So when you update the.
Arae, you're actually not updating and duplicating the array, what you're doing is when you're assigning
to array to array one, you're just linking that same memory location.
So these two ultimately tie to the same object.
We update one.
It's going to update on both of them.
So if we do want to make a duplicate of this current array and I'm going to actually remove out this
one that are within the array.
So this is our latest version of the array.
And you'll find that array one and array two are going to be the same.
I'll copy them over and they're going to output the same values.
So after we've made the change to array to the values of both of them are going to be identical.
So if you do want to separate them, there is a few ways that you can do it.
One of the ways is to just loop through all of the values.
So instead of assigning it to array two, let's create a new array and will create array number.
Three, and this is going to be a blank away, and then we can loop through each one of the values within
either array one and using for each and loop through the value can get the index value and our console
logout each one of the elements that we can see what's contained within the array.
So as we loop through, we can simply take to array three and use the index value and assign whatever
the value is contained within the element.
So ultimately that will create a brand new array that will populate the new array and it will also keep
it separate from the values.
So this will give you one way to make updates to the content of the array.
And if you change that, it's going to come out as the changed value, but the two original arrays are
going to stay the same because they're no longer tied to that same memory location.
The nice thing about arrays is that they come with default built-In methods.
So you can do a lot from everything from getting the length to also to adding to the array.
So if you wanted to add to an array, let me clear this so it'll clear out the console.
There's a number of ways to add to the array.
We saw that we can just assign with the index value, but if we don't know the index value, we can
as well get the length and then just add one or just use the length value to append to the end.
There's also better ways to do that.
So if we were to take Array one and we want to add content to the end, we can push the content in.
So call that new value, and now when we output the array, we've added a new value at the end.
So if we were to clear that antique array one and push test to into it.
It returns back the length, so the callback is going to be the new length of the array and then to
put it into the console will see that we've added another value at the end.
There's also, if we do, to array two and if we push.
I just called test five now there's eight items in the array, and if we list out every one, because
those array, one in Array two are still going to be referencing the same array.
That's why we're able to push into one push into the other, and they're both going to get the same
value being added into them.
You can also remove an item from the end of the array.
So if you take the array and if you use pop, this is the method that's going to remove out the last
item in the array and the callback is actually going to be whatever the value was that was contained
within there.
So if we do pop again, we're going to remove that last item.
And if we output the contents of the array, you'll find that that last item is now gone, but it's
being returned back on the callback.
So if, for instance, you want to use that value, just create a value one and take from array one
and run the pop and will console log out the contents of one, what do you think the contents are going
to be?
They're going to be whatever the last item was.
So we added to the array with the push and then we use Pop to remove from the array and that's where
we got the value being returned back in the console there at the end.
There's also, if you want to add an item to the beginning of the array, there's the option to shift
content into there.
So selecting the array name and then shift and whatever you want to add.
And it's actually on shift to add and shift will remove it, so on shift and whatever value we want
to add, I'll just add this one and let's list that out.
So we've added an item in the beginning.
If we want to remove it, we can use the shift and watch.
As we saw with the pop, it's going to return back the value that's being returned back to the callback
value.
And if we're adding to it, then we just simply get the array length being returned back.
So if we do a value to and if we do shift, it's going to take the first item out of the array and it's
going to return it back.
So if you do want to use it, you can pick it up within the call back and make use of it.
So there's the value that we took out and that we've added into the array another really useful method.
And this is the one that you could use that's better than using the loop in order to output the contents
of the array and duplicate array so we can set up another array holder so called this are for and using
the array and the map method, taking the elements and then doing a response of the elements.
So if we do a console log of the contents of the element and then whatever we return back, that's going
to be what the new value is going to be within array for.
So let's console log the contents of Array four.
So that's recreated the array and as you see within line twenty nine, it loops through the contents
of the race.
So we've got string test, false new value.
So that's the current contents of the array and it also adds them into this new array for.
So if we have array for and if we update one of the values to start, it's not going to affect the first
arrays because this again is duplicating the array.
So essentially it's giving us a quick way to do a closing of the array.
There's also a shorter way to write this, and I'll just add this in for reference sake that we can
take the array one and use math and whatever the value is of that current item in the array, we just
simply return it back.
So this is probably the shortest way that you can clone an array.
And then, of course, you can consider log out the value of Array five.
So I know we've covered quite a bit and fairly quickly about arrays.
So before the next lesson, give it a shot.
Creary add in some values into the array.
You can do it right off the bat when you're defining the array or you can add to it.
You can manipulate the array by using the push, the pop, the on shift and the shift.
And actually I just do an array one on shift so that we have that within the reference.
So you can manipulate the contents of the array.
Try it out and put it into the console just to get more familiar with arrays, because arrays are going
to be really important as we go through the upcoming lessons in understanding and working with our JSON
data that's coming back from the server.