1
00:00:01,110 --> 00:00:08,070
Let's look at JavaScript arrays, arrays are a way to hold list information, so it's like a list like

2
00:00:08,250 --> 00:00:12,720
that, you can hold multiple items within the same variable definition.

3
00:00:12,990 --> 00:00:18,090
There's some examples over at the Mozilla developer networks that MDN and they've got more information

4
00:00:18,090 --> 00:00:21,470
about what arrays are, how they work and how you can create arrays.

5
00:00:21,690 --> 00:00:25,940
So let's go ahead and create some arrays within our JavaScript code.

6
00:00:26,220 --> 00:00:37,170
So open up the editor and we'll also minimize the window here on the left hand side and also minimize

7
00:00:37,170 --> 00:00:42,690
it on the left, the right, the right hand side, the browser window and then the JavaScript code on

8
00:00:42,690 --> 00:00:43,630
the left hand side.

9
00:00:43,980 --> 00:00:46,750
So first of all, let's create our first arrays.

10
00:00:46,760 --> 00:00:50,610
So just call it R a one, R one.

11
00:00:50,970 --> 00:00:55,260
And arrays are defined with square brackets.

12
00:00:55,690 --> 00:01:02,070
You can console log out the contents of your array by logging it out into the console.

13
00:01:02,100 --> 00:01:04,340
So right now we just got a blank arrays.

14
00:01:04,340 --> 00:01:06,720
There's nothing within that array yet.

15
00:01:07,020 --> 00:01:12,290
And you can also when you are declaring your array, you can add in some values in there.

16
00:01:12,300 --> 00:01:21,210
So these values can be strings, values, they can be no values, they can be boolean values, and there

17
00:01:21,210 --> 00:01:23,910
can also be additional arrays in there as well.

18
00:01:23,910 --> 00:01:25,990
So you can have another array within an array.

19
00:01:26,460 --> 00:01:30,900
So when you output that into the console, it outputs it nice and neatly.

20
00:01:31,080 --> 00:01:36,380
And you'll also notice that within that array there are some default values.

21
00:01:37,020 --> 00:01:38,780
So it does have a default length.

22
00:01:38,790 --> 00:01:44,820
So this array has five items in it, starting at zero, one, two, three, four.

23
00:01:44,970 --> 00:01:49,640
And that's how we can get and retrieve the values that are contained within the array.

24
00:01:49,830 --> 00:01:53,130
By using the index value, they are zero based.

25
00:01:53,340 --> 00:01:57,640
So that means that the first item has an index value of zero.

26
00:01:57,870 --> 00:02:03,180
So if we want it to return back the value of one hundred, what would be the index value that we would

27
00:02:03,180 --> 00:02:03,540
use?

28
00:02:03,700 --> 00:02:09,720
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

29
00:02:09,720 --> 00:02:10,070
right now.

30
00:02:10,860 --> 00:02:16,170
So the solution for that is if we want to retrieve back just the value of one hundred, we can just

31
00:02:16,170 --> 00:02:18,340
define it using the index value.

32
00:02:18,720 --> 00:02:25,200
So when we are creating arrays, there are also different ways that we can add to the array and we can

33
00:02:25,200 --> 00:02:26,930
loop through the items of the array.

34
00:02:27,300 --> 00:02:34,440
And also if we were to do an array and we want to update the value of the item with index value of two,

35
00:02:34,650 --> 00:02:40,590
and we want to update it to something like test a string value, we can change and update the array

36
00:02:40,590 --> 00:02:43,560
and that's going to update the contents of the array itself.

37
00:02:44,010 --> 00:02:48,210
Also, another thing to note, when it comes to arrays, you're probably wondering, OK, well, what

38
00:02:48,210 --> 00:02:52,350
if I do this and if I use an index value that doesn't exist yet?

39
00:02:52,380 --> 00:03:00,720
So if I do one hundred and if I add this as a value of one hundred and then output the contents of the

40
00:03:00,720 --> 00:03:06,960
array, you'll find that the actual length of the array is going to be one hundred and one because remember,

41
00:03:06,960 --> 00:03:15,840
they are zero based and it has a bunch of blank empty items within the array that have all the index

42
00:03:15,840 --> 00:03:18,110
values from five to ninety nine.

43
00:03:18,480 --> 00:03:21,770
So that's what happens when you do this declaration of the array.

44
00:03:22,260 --> 00:03:28,230
There's also several ways that if you want to clear out the array, you can clear the contents of the

45
00:03:28,230 --> 00:03:36,750
array so you can set it and take the length value and set the length to zero and that will empty out

46
00:03:36,750 --> 00:03:38,610
the contents of the array.

47
00:03:38,910 --> 00:03:45,060
So over here on line number eight, we've got nothing within the array because we've cleared out all

48
00:03:45,060 --> 00:03:46,540
of the values of the array.

49
00:03:46,890 --> 00:03:48,980
So that's one way that you can clear the array.

50
00:03:49,440 --> 00:03:52,020
I'm going to just comment that out.

51
00:03:52,440 --> 00:03:55,210
And another thing to note about arrays.

52
00:03:55,230 --> 00:04:05,220
So if you were to create another variable and assign array one to that value and if you output the contents

53
00:04:05,220 --> 00:04:11,630
of Array two, you'll find that it does have the same contents as the first array.

54
00:04:12,690 --> 00:04:17,820
But what happens if you update some of the values that are contained within that array?

55
00:04:18,150 --> 00:04:26,700
So if we were to reassign to the item with the index value of four and I'll just add in a string value

56
00:04:26,700 --> 00:04:36,030
of new value, and then we output the current value of array two and open that up in the console, we

57
00:04:36,030 --> 00:04:37,950
see that four has a new value.

58
00:04:38,340 --> 00:04:42,840
And also what if we see what's contained within Array one?

59
00:04:43,080 --> 00:04:49,740
We also have four as the new value, and that's the reason why we can use constants.

60
00:04:49,740 --> 00:04:56,360
We don't have to use left for the array because it's tying the array to a particular memory location.

61
00:04:56,640 --> 00:04:59,400
So when you update the.

62
00:04:59,480 --> 00:05:05,300
Arae, you're actually not updating and duplicating the array, what you're doing is when you're assigning

63
00:05:05,660 --> 00:05:11,590
to array to array one, you're just linking that same memory location.

64
00:05:11,810 --> 00:05:14,940
So these two ultimately tie to the same object.

65
00:05:14,960 --> 00:05:16,220
We update one.

66
00:05:16,250 --> 00:05:18,160
It's going to update on both of them.

67
00:05:18,530 --> 00:05:24,470
So if we do want to make a duplicate of this current array and I'm going to actually remove out this

68
00:05:24,470 --> 00:05:26,090
one that are within the array.

69
00:05:26,570 --> 00:05:28,880
So this is our latest version of the array.

70
00:05:28,880 --> 00:05:33,280
And you'll find that array one and array two are going to be the same.

71
00:05:33,740 --> 00:05:36,750
I'll copy them over and they're going to output the same values.

72
00:05:37,010 --> 00:05:42,690
So after we've made the change to array to the values of both of them are going to be identical.

73
00:05:42,950 --> 00:05:46,480
So if you do want to separate them, there is a few ways that you can do it.

74
00:05:47,030 --> 00:05:50,240
One of the ways is to just loop through all of the values.

75
00:05:50,510 --> 00:05:56,960
So instead of assigning it to array two, let's create a new array and will create array number.

76
00:05:58,560 --> 00:06:05,370
Three, and this is going to be a blank away, and then we can loop through each one of the values within

77
00:06:05,370 --> 00:06:16,260
either array one and using for each and loop through the value can get the index value and our console

78
00:06:16,260 --> 00:06:20,140
logout each one of the elements that we can see what's contained within the array.

79
00:06:20,820 --> 00:06:29,580
So as we loop through, we can simply take to array three and use the index value and assign whatever

80
00:06:29,580 --> 00:06:33,070
the value is contained within the element.

81
00:06:33,480 --> 00:06:40,230
So ultimately that will create a brand new array that will populate the new array and it will also keep

82
00:06:40,230 --> 00:06:42,180
it separate from the values.

83
00:06:42,180 --> 00:06:47,160
So this will give you one way to make updates to the content of the array.

84
00:06:51,070 --> 00:06:58,480
And if you change that, it's going to come out as the changed value, but the two original arrays are

85
00:06:58,480 --> 00:07:02,500
going to stay the same because they're no longer tied to that same memory location.

86
00:07:03,070 --> 00:07:07,180
The nice thing about arrays is that they come with default built-In methods.

87
00:07:07,390 --> 00:07:13,990
So you can do a lot from everything from getting the length to also to adding to the array.

88
00:07:14,030 --> 00:07:18,930
So if you wanted to add to an array, let me clear this so it'll clear out the console.

89
00:07:19,300 --> 00:07:21,730
There's a number of ways to add to the array.

90
00:07:21,760 --> 00:07:27,400
We saw that we can just assign with the index value, but if we don't know the index value, we can

91
00:07:27,400 --> 00:07:33,360
as well get the length and then just add one or just use the length value to append to the end.

92
00:07:33,790 --> 00:07:35,500
There's also better ways to do that.

93
00:07:35,510 --> 00:07:43,390
So if we were to take Array one and we want to add content to the end, we can push the content in.

94
00:07:45,500 --> 00:07:54,190
So call that new value, and now when we output the array, we've added a new value at the end.

95
00:07:54,860 --> 00:08:03,020
So if we were to clear that antique array one and push test to into it.

96
00:08:04,210 --> 00:08:10,090
It returns back the length, so the callback is going to be the new length of the array and then to

97
00:08:10,270 --> 00:08:14,500
put it into the console will see that we've added another value at the end.

98
00:08:15,220 --> 00:08:19,450
There's also, if we do, to array two and if we push.

99
00:08:21,350 --> 00:08:28,280
I just called test five now there's eight items in the array, and if we list out every one, because

100
00:08:28,280 --> 00:08:32,210
those array, one in Array two are still going to be referencing the same array.

101
00:08:32,450 --> 00:08:37,250
That's why we're able to push into one push into the other, and they're both going to get the same

102
00:08:37,250 --> 00:08:38,610
value being added into them.

103
00:08:39,110 --> 00:08:42,220
You can also remove an item from the end of the array.

104
00:08:42,500 --> 00:08:50,660
So if you take the array and if you use pop, this is the method that's going to remove out the last

105
00:08:50,660 --> 00:08:56,210
item in the array and the callback is actually going to be whatever the value was that was contained

106
00:08:56,210 --> 00:08:56,640
within there.

107
00:08:57,020 --> 00:09:02,720
So if we do pop again, we're going to remove that last item.

108
00:09:02,900 --> 00:09:08,960
And if we output the contents of the array, you'll find that that last item is now gone, but it's

109
00:09:08,960 --> 00:09:10,570
being returned back on the callback.

110
00:09:10,820 --> 00:09:18,470
So if, for instance, you want to use that value, just create a value one and take from array one

111
00:09:18,950 --> 00:09:27,620
and run the pop and will console log out the contents of one, what do you think the contents are going

112
00:09:27,620 --> 00:09:28,010
to be?

113
00:09:28,310 --> 00:09:30,890
They're going to be whatever the last item was.

114
00:09:31,100 --> 00:09:37,040
So we added to the array with the push and then we use Pop to remove from the array and that's where

115
00:09:37,040 --> 00:09:40,490
we got the value being returned back in the console there at the end.

116
00:09:40,940 --> 00:09:47,300
There's also, if you want to add an item to the beginning of the array, there's the option to shift

117
00:09:47,300 --> 00:09:48,380
content into there.

118
00:09:48,590 --> 00:09:55,280
So selecting the array name and then shift and whatever you want to add.

119
00:09:58,520 --> 00:10:05,600
And it's actually on shift to add and shift will remove it, so on shift and whatever value we want

120
00:10:05,600 --> 00:10:11,040
to add, I'll just add this one and let's list that out.

121
00:10:11,060 --> 00:10:12,920
So we've added an item in the beginning.

122
00:10:13,070 --> 00:10:19,610
If we want to remove it, we can use the shift and watch.

123
00:10:19,610 --> 00:10:26,660
As we saw with the pop, it's going to return back the value that's being returned back to the callback

124
00:10:26,660 --> 00:10:27,040
value.

125
00:10:27,290 --> 00:10:32,190
And if we're adding to it, then we just simply get the array length being returned back.

126
00:10:32,210 --> 00:10:39,140
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

127
00:10:39,140 --> 00:10:40,020
going to return it back.

128
00:10:40,190 --> 00:10:44,690
So if you do want to use it, you can pick it up within the call back and make use of it.

129
00:10:44,720 --> 00:10:51,350
So there's the value that we took out and that we've added into the array another really useful method.

130
00:10:51,350 --> 00:10:58,130
And this is the one that you could use that's better than using the loop in order to output the contents

131
00:10:58,130 --> 00:11:09,140
of the array and duplicate array so we can set up another array holder so called this are for and using

132
00:11:09,140 --> 00:11:18,330
the array and the map method, taking the elements and then doing a response of the elements.

133
00:11:18,340 --> 00:11:25,460
So if we do a console log of the contents of the element and then whatever we return back, that's going

134
00:11:25,460 --> 00:11:30,830
to be what the new value is going to be within array for.

135
00:11:31,260 --> 00:11:34,870
So let's console log the contents of Array four.

136
00:11:37,430 --> 00:11:44,210
So that's recreated the array and as you see within line twenty nine, it loops through the contents

137
00:11:44,210 --> 00:11:44,660
of the race.

138
00:11:44,660 --> 00:11:46,870
So we've got string test, false new value.

139
00:11:47,060 --> 00:11:52,550
So that's the current contents of the array and it also adds them into this new array for.

140
00:11:52,730 --> 00:12:03,530
So if we have array for and if we update one of the values to start, it's not going to affect the first

141
00:12:03,530 --> 00:12:06,170
arrays because this again is duplicating the array.

142
00:12:06,380 --> 00:12:09,800
So essentially it's giving us a quick way to do a closing of the array.

143
00:12:10,070 --> 00:12:16,460
There's also a shorter way to write this, and I'll just add this in for reference sake that we can

144
00:12:16,880 --> 00:12:25,250
take the array one and use math and whatever the value is of that current item in the array, we just

145
00:12:25,250 --> 00:12:26,390
simply return it back.

146
00:12:26,990 --> 00:12:32,860
So this is probably the shortest way that you can clone an array.

147
00:12:34,610 --> 00:12:38,410
And then, of course, you can consider log out the value of Array five.

148
00:12:39,230 --> 00:12:43,360
So I know we've covered quite a bit and fairly quickly about arrays.

149
00:12:43,640 --> 00:12:46,130
So before the next lesson, give it a shot.

150
00:12:46,610 --> 00:12:49,090
Creary add in some values into the array.

151
00:12:49,250 --> 00:12:54,070
You can do it right off the bat when you're defining the array or you can add to it.

152
00:12:54,080 --> 00:12:59,960
You can manipulate the array by using the push, the pop, the on shift and the shift.

153
00:13:00,170 --> 00:13:05,390
And actually I just do an array one on shift so that we have that within the reference.

154
00:13:06,260 --> 00:13:09,310
So you can manipulate the contents of the array.

155
00:13:10,160 --> 00:13:15,920
Try it out and put it into the console just to get more familiar with arrays, because arrays are going

156
00:13:15,920 --> 00:13:23,300
to be really important as we go through the upcoming lessons in understanding and working with our JSON

157
00:13:23,360 --> 00:13:25,370
data that's coming back from the server.