1
00:00:00,660 --> 00:00:06,120
So raise a very important part of many programming languages they allow us to store multiple values

2
00:00:06,180 --> 00:00:07,530
in one variable.

3
00:00:07,590 --> 00:00:13,380
They can be mutated and iterated through and they can be used in some really complex algorithms.

4
00:00:13,380 --> 00:00:18,270
So in this video we're going to look at creating arrays and mutating them with some really helpful methods

5
00:00:18,270 --> 00:00:20,340
that are available in javascript.

6
00:00:20,340 --> 00:00:25,160
Now I'm not going to go get into iteration and looping in this particular video.

7
00:00:25,200 --> 00:00:28,700
We're going to do that in the lecture on loops and iteration.

8
00:00:28,800 --> 00:00:30,360
So I don't think that I'm leaving that out.

9
00:00:30,360 --> 00:00:32,950
We're just going to do it in a few lectures from now.

10
00:00:33,180 --> 00:00:41,280
So let's start off by just creating some arrays so they create some arrays and we're going to create

11
00:00:41,280 --> 00:00:42,730
an array of numbers.

12
00:00:42,750 --> 00:00:44,970
So I'm just going to call this numbers.

13
00:00:45,510 --> 00:00:48,450
And there's a couple ways to define arrays.

14
00:00:48,450 --> 00:00:55,440
This is basically the the recommended or I guess the most popular way of doing it is just by setting

15
00:00:55,440 --> 00:01:07,410
some brackets and we'll put some numbers in here let's say 43 56 33 23 24 36 and 5.

16
00:01:07,470 --> 00:01:09,090
So we have an array of numbers.

17
00:01:09,090 --> 00:01:15,540
Now the second way to create an array and I'll just call this number two is to use the array constructor

18
00:01:15,970 --> 00:01:22,800
or using the array object so we do that by saying new array and then we can put our numbers in here

19
00:01:22,800 --> 00:01:30,200
so we can say whatever 20 to 40 533 76 54 or whatever.

20
00:01:30,210 --> 00:01:32,680
So both of these are arrays.

21
00:01:32,700 --> 00:01:33,290
OK.

22
00:01:33,390 --> 00:01:36,420
Both of these are ways to create an array.

23
00:01:36,420 --> 00:01:39,700
Now of course arrays don't have to be just numbers.

24
00:01:39,720 --> 00:01:47,400
Let's create an array of strings we'll call this fruit and we'll put it in here let's say apple

25
00:01:49,850 --> 00:01:50,500
banana

26
00:01:52,950 --> 00:01:56,720
orange and pear.

27
00:01:56,790 --> 00:01:57,080
All right.

28
00:01:57,090 --> 00:01:58,610
So we have an array of strings.

29
00:01:58,740 --> 00:02:02,280
And of course we can have we can mix different data types.

30
00:02:02,340 --> 00:02:11,640
So I'll just call this mixed so we can have let's say a number we can have a string say hello we can

31
00:02:11,640 --> 00:02:15,900
have a boolean we can have undefined.

32
00:02:16,200 --> 00:02:19,340
Now we can have an object.

33
00:02:19,400 --> 00:02:23,840
So say a one be one.

34
00:02:23,870 --> 00:02:24,530
All right.

35
00:02:24,540 --> 00:02:26,130
We can even have dates.

36
00:02:26,130 --> 00:02:30,960
So we'll see a new date.

37
00:02:30,960 --> 00:02:31,690
All right.

38
00:02:31,980 --> 00:02:33,860
So we can have all different data types.

39
00:02:33,860 --> 00:02:41,010
Just to show you what that looks like we'll say console log mixed and you can see that we have an array

40
00:02:41,010 --> 00:02:45,530
of all different types OK.

41
00:02:46,090 --> 00:02:53,640
So what I'm going to do here is I'm going to initialize a variable called Val we're going to do this

42
00:02:53,640 --> 00:02:57,640
kind of like we've done a lot of past lectures.

43
00:02:57,750 --> 00:03:01,800
We're just going to kind of you know mutate this variable to show different things.

44
00:03:01,800 --> 00:03:04,830
And then at the end we'll console log it.

45
00:03:04,990 --> 00:03:07,370
So we'll console log now.

46
00:03:07,590 --> 00:03:13,420
And we're also console log the array itself we're going to work with the numbers array mostly.

47
00:03:13,500 --> 00:03:17,730
So we'll see a console log numbers.

48
00:03:17,730 --> 00:03:21,900
All right so if I save that now it's going to show us the numbers array should probably make this a

49
00:03:21,900 --> 00:03:28,170
little smaller and it's going to show us undefined because that's what Val is right now it's undefined.

50
00:03:28,230 --> 00:03:28,460
All right.

51
00:03:28,470 --> 00:03:32,680
So first thing I want to show you is how to get the array length.

52
00:03:33,060 --> 00:03:36,570
OK so by length I mean how many values are in the array.

53
00:03:36,780 --> 00:03:40,280
And we can use this just as if we were to use it with a string.

54
00:03:40,440 --> 00:03:48,200
So we'll save Vau equals numbers Daut length and save and you can see we get seven.

55
00:03:48,210 --> 00:03:51,560
There are seven numbers in this array.

56
00:03:51,630 --> 00:03:51,950
All right.

57
00:03:51,960 --> 00:03:58,480
We can also check to see if something's in array check if is array.

58
00:03:58,560 --> 00:04:01,010
And we do that using the array object.

59
00:04:01,010 --> 00:04:08,700
So we'll say Val equals capital a array and then it has a method called is array.

60
00:04:08,700 --> 00:04:14,340
And then we can pass in whatever we want to test in this case the numbers array and if we save we get

61
00:04:14,340 --> 00:04:15,180
true.

62
00:04:15,210 --> 00:04:20,020
If I were to put in here a string and say we get false.

63
00:04:20,040 --> 00:04:20,330
All right.

64
00:04:20,340 --> 00:04:24,020
So that's a very simple way to check to see if something is actually an array.

65
00:04:24,210 --> 00:04:30,930
And this is useful when we're dealing with the dom because we can return for instance a node list from

66
00:04:30,930 --> 00:04:37,260
the DOM which is structured like an array but it's not an actual array so we can't do certain things

67
00:04:37,260 --> 00:04:39,340
like foreach loops.

68
00:04:39,450 --> 00:04:43,420
So it's it's a good way to test to see if something's in array.

69
00:04:43,590 --> 00:04:47,010
And then you can convert it into an array if you need to.

70
00:04:47,010 --> 00:04:47,330
All right.

71
00:04:47,340 --> 00:04:56,950
So to get a single value from an array we can say will do Val equals numbers.

72
00:04:59,580 --> 00:05:04,940
And then we want to use our brackets and we want to use that we want to put in the position of the value

73
00:05:04,940 --> 00:05:09,530
that we want the index so let's say 3 and save.

74
00:05:09,560 --> 00:05:12,020
So that gives us 23.

75
00:05:12,020 --> 00:05:16,970
All right and if we look up here 23 is actually the fourth value in the array.

76
00:05:16,970 --> 00:05:21,920
Now the reason that this happens is because arrays are zero based.

77
00:05:21,920 --> 00:05:22,340
All right.

78
00:05:22,360 --> 00:05:25,970
There's zero based in every language that I've ever used.

79
00:05:25,970 --> 00:05:30,600
So basically this is 0 1 2 and 3.

80
00:05:30,640 --> 00:05:36,050
OK so that's why we're getting 23 when we're looking at the 3 index.

81
00:05:36,050 --> 00:05:46,010
All right so if we say value equals numbers zero and save you'll see we'll get 43 which is the first

82
00:05:46,010 --> 00:05:46,820
value.

83
00:05:47,090 --> 00:05:50,960
OK so just always remember that arrays are zero based.

84
00:05:50,960 --> 00:05:57,850
Now if we want to insert something into this array K arrays are not immutable we can we can modify them.

85
00:05:57,860 --> 00:06:12,890
So let's say we'll do put a comment here say insert into array so we can say numbers equals sorry not

86
00:06:12,890 --> 00:06:20,100
numbers equals numbers and then the index will put it in the index 2 and we'll set that to 100.

87
00:06:20,120 --> 00:06:23,660
So if we save that now and we look at the array that's being printed out.

88
00:06:23,660 --> 00:06:28,260
One hundred is now in the two index position.

89
00:06:28,260 --> 00:06:29,260
All right.

90
00:06:29,270 --> 00:06:40,830
Now if you want to find the index of a value say find index of value you can use the index of methods

91
00:06:40,870 --> 00:06:44,030
so we'll say Val equals numbers.

92
00:06:44,030 --> 00:06:46,340
Daut index of.

93
00:06:46,430 --> 00:06:50,370
And let's say we want to find the index for 36.

94
00:06:50,540 --> 00:06:52,490
So we'll save that and we get five.

95
00:06:52,490 --> 00:06:59,970
And if we look up here 0 1 2 3 4 5 so 36 is in the 5 position.

96
00:06:59,970 --> 00:07:09,380
All right so now let's look into mutating arrays with some with different methods OK are different functions

97
00:07:09,380 --> 00:07:10,520
that are available.

98
00:07:10,520 --> 00:07:17,450
So the first one I want to show you is how to add on to the end of the array so we can do that with

99
00:07:17,450 --> 00:07:19,340
a method called Push.

100
00:07:19,340 --> 00:07:29,540
So we're going to say numbers Daut push and let's push push on to 50 and we'll save and see if we look

101
00:07:29,540 --> 00:07:32,040
at the array which is being logged here.

102
00:07:32,270 --> 00:07:35,360
We get to 50 at the end.

103
00:07:35,450 --> 00:07:37,490
All right and we're just going to comment this.

104
00:07:37,550 --> 00:07:39,890
So we'll say add on to

105
00:07:42,570 --> 00:07:50,270
and and what if we want to add on to front.

106
00:07:50,300 --> 00:07:55,920
So for that we have a method called on shift.

107
00:07:56,060 --> 00:08:04,660
So on shift to let's put on one 20 and save and I can see that 120 is the first value in the survey.

108
00:08:05,240 --> 00:08:05,900
OK.

109
00:08:06,110 --> 00:08:10,400
Now we want to take off from the back or from the front we can do that.

110
00:08:10,610 --> 00:08:17,620
So it's a take off from and still say numbers Daut.

111
00:08:17,660 --> 00:08:20,720
And then we have a method called pop.

112
00:08:20,720 --> 00:08:20,990
All right.

113
00:08:20,990 --> 00:08:26,240
So think of it as just popping it off from the end so we'll say actually you don't have to put in any

114
00:08:26,240 --> 00:08:31,520
parameters we'll just save and now that 120 is gone.

115
00:08:31,650 --> 00:08:32,210
OK.

116
00:08:33,790 --> 00:08:40,230
Now up here you know five is the last is the end and five is still here.

117
00:08:40,240 --> 00:08:45,160
The reason for that is because we actually added 250 onto the end.

118
00:08:45,160 --> 00:08:47,830
So that's being popped off if I were to comment.

119
00:08:47,880 --> 00:08:52,970
So where where we didn't add it on then five will be popped off.

120
00:08:52,990 --> 00:08:53,330
All right.

121
00:08:53,350 --> 00:08:55,130
But I'm going to uncomment that.

122
00:08:55,260 --> 00:08:57,940
So if we want to take off

123
00:09:00,340 --> 00:09:08,600
from the front we can say numbers Daut shift instead of an we're doing shift.

124
00:09:08,740 --> 00:09:14,890
And if you look at the survey now 120 is at the beginning but if I save this and reload the 120 now

125
00:09:14,890 --> 00:09:17,650
gets gets taken off the front.

126
00:09:18,210 --> 00:09:18,550
All right.

127
00:09:18,550 --> 00:09:23,380
We can also splice out values from any place in the array.

128
00:09:23,380 --> 00:09:24,290
So let's do that.

129
00:09:24,290 --> 00:09:26,140
I will say splice

130
00:09:29,770 --> 00:09:31,200
values.

131
00:09:32,020 --> 00:09:38,230
So we'll do that by saying numbers dot splice and we wanted to find where we want to start from.

132
00:09:38,230 --> 00:09:41,620
So let's say we want to take out this 56.

133
00:09:41,620 --> 00:09:43,420
This is in the one position right.

134
00:09:43,420 --> 00:09:51,790
So 0 1 so we'll say 1 and 1 and save and now 56 is gone.

135
00:09:51,790 --> 00:09:56,890
So basically we're saying where we want to start and where we want to end so we only wanted to take

136
00:09:56,890 --> 00:09:59,500
out that one value so we put a 1.

137
00:09:59,500 --> 00:10:04,770
Now let's say we wanted to take the 56 and then the two after it 123.

138
00:10:04,930 --> 00:10:08,520
So we would say 1 3 and save.

139
00:10:08,530 --> 00:10:12,850
And now you can see the 100 and the 23 are also gone.

140
00:10:12,850 --> 00:10:13,150
All right.

141
00:10:13,150 --> 00:10:15,100
So that is splice.

142
00:10:15,160 --> 00:10:19,180
Now we can also reverse C array.

143
00:10:19,540 --> 00:10:24,300
So if we say numbers start reverse.

144
00:10:24,400 --> 00:10:26,990
OK so right now it starts at 43 ends at 5.

145
00:10:27,010 --> 00:10:28,020
Let's save that.

146
00:10:28,120 --> 00:10:30,960
Now it starts at 5 and ends at 43.

147
00:10:31,450 --> 00:10:34,710
All right so that is mutating arrays.

148
00:10:34,800 --> 00:10:38,680
We can also concatenate arrays.

149
00:10:39,280 --> 00:10:42,840
See x ray.

150
00:10:42,940 --> 00:10:50,260
So for that let's say Val equals and then we'll take the numbers array and then we'll do concat And

151
00:10:50,260 --> 00:10:56,230
let's see if we want to concat on numbers 2 which is the other array we have up here so if I go ahead

152
00:10:56,230 --> 00:10:58,760
and save that and we log the vowel.

153
00:10:58,780 --> 00:11:05,440
Now we have an array with nine values inside of it because it's both of these put together.

154
00:11:05,940 --> 00:11:06,560
OK.

155
00:11:08,580 --> 00:11:13,040
Another thing we can do is sort.

156
00:11:14,090 --> 00:11:23,190
Christ so let's say vowel equals and we'll sort fruit so fruit does store and save.

157
00:11:23,280 --> 00:11:26,050
And notice that now it's in alphabetical order.

158
00:11:26,430 --> 00:11:27,240
OK.

159
00:11:27,240 --> 00:11:28,720
Now sorting numbers.

160
00:11:28,770 --> 00:11:30,000
Let me just show you if we do.

161
00:11:30,090 --> 00:11:43,700
Vowel equals numbers that sort and say See we're looking at this one here actually know what I'm going

162
00:11:43,700 --> 00:11:50,840
to do is comment out all of these mutating methods that we created just so we have the original array

163
00:11:50,840 --> 00:11:52,200
which is this.

164
00:11:52,220 --> 00:11:53,630
So we'll save that.

165
00:11:53,630 --> 00:11:55,870
And then let's look at this.

166
00:11:56,570 --> 00:11:59,130
So this doesn't look right.

167
00:11:59,210 --> 00:11:59,500
Right.

168
00:11:59,510 --> 00:12:02,000
We have one hundred twenty three thirty six.

169
00:12:02,000 --> 00:12:08,060
This is supposed to be going from lowest to highest of five down here what it's doing is it's sorting

170
00:12:08,060 --> 00:12:09,670
by the first number.

171
00:12:09,870 --> 00:12:15,710
So you notice that the first number is sorted and that's probably not what you want to do.

172
00:12:15,710 --> 00:12:19,150
So what you want to do to fix this is use what's called the compare function.

173
00:12:19,160 --> 00:12:21,980
So you want to pass in a callback to this sort.

174
00:12:22,070 --> 00:12:23,580
So I'll show you how to do that.

175
00:12:23,620 --> 00:12:30,650
Let's use the pair function.

176
00:12:30,650 --> 00:12:36,650
So it would do Vallet equals numbers Daut sort.

177
00:12:36,710 --> 00:12:43,430
And then what you would do is pass in a function here and this function takes into Verrett you can call

178
00:12:43,430 --> 00:12:51,860
this whatever you want X and Y is popular a and b some times and then all you want to do is return X

179
00:12:51,920 --> 00:12:53,200
minus Y.

180
00:12:53,210 --> 00:12:53,630
All right.

181
00:12:53,630 --> 00:12:55,110
And then let's save that.

182
00:12:55,160 --> 00:13:00,290
And now if we look at the sorted array you can see it starts at 5 ends at 100 k.

183
00:13:00,300 --> 00:13:04,330
It doesn't matter for you know the beginning number like you did before.

184
00:13:04,790 --> 00:13:08,390
And then if you want to go the other way.

185
00:13:08,700 --> 00:13:18,630
So if you want a reverse sort then we can grab this instead of X minus why we can do Y minus X and save.

186
00:13:18,620 --> 00:13:21,850
And now it's sorted in the other direction.

187
00:13:21,860 --> 00:13:27,940
All right so this is what you want to do if you're storing numbers all right and another method I want

188
00:13:27,940 --> 00:13:33,840
to mention is find now find actually takes in a testing function.

189
00:13:33,850 --> 00:13:38,290
So what I'm going to do here I know we haven't really gone over functions yet but I just want to show

190
00:13:38,290 --> 00:13:39,620
you this real quick.

191
00:13:39,720 --> 00:13:48,460
So if we have a function actually we need to name it let's call it we'll call it under 50.

192
00:13:48,460 --> 00:13:48,840
All right.

193
00:13:48,870 --> 00:13:57,080
It's going to take in a number and then we're just going to return no less than 50.

194
00:13:57,400 --> 00:13:57,660
All right.

195
00:13:57,670 --> 00:14:06,640
So we have this very simple function and then we're going to set Vau equal to numbers dot find and then

196
00:14:06,640 --> 00:14:10,230
we're going to pass in that function which is under 50.

197
00:14:10,630 --> 00:14:14,500
OK so let's save that and we get a 44.

198
00:14:14,500 --> 00:14:20,090
So what this did is it looked at our array which is this right here.

199
00:14:20,230 --> 00:14:28,790
And the first number that popped up that is under 50 actually wait a minute that's not right.

200
00:14:32,550 --> 00:14:37,820
Return the numbers find.

201
00:14:37,990 --> 00:14:40,030
Oh it's because we sorted it.

202
00:14:40,180 --> 00:14:45,430
That's why if we go ahead and comment that out and save then we get 23.

203
00:14:45,430 --> 00:14:46,780
All right and if we look up here

204
00:14:50,260 --> 00:14:52,380
that's not right either.

205
00:14:52,440 --> 00:15:01,230
How sort of here as well so you can see we've done some things to change up the array so now it works.

206
00:15:01,230 --> 00:15:01,530
All right.

207
00:15:01,530 --> 00:15:04,830
So 43 is the first number under 50.

208
00:15:04,830 --> 00:15:06,600
All right.

209
00:15:06,600 --> 00:15:10,020
It's just that we had stuff going on here that mutated the array.

210
00:15:10,140 --> 00:15:13,670
And that's what it was going on when we said numbers.

211
00:15:13,680 --> 00:15:13,940
All right.

212
00:15:13,950 --> 00:15:20,220
But now we're just looking at it as how we created it and 43 is the first one that's under 50.

213
00:15:20,220 --> 00:15:25,140
If we wanted to do the opposite let's say are over 50.

214
00:15:25,230 --> 00:15:37,380
Change that to a greater than and pass in over 50 and say we get 56 if we go up here and we go you can

215
00:15:37,380 --> 00:15:40,850
see that 56 is the first one over 50.

216
00:15:40,860 --> 00:15:41,180
All right.

217
00:15:41,190 --> 00:15:43,540
So I think that's it.

218
00:15:43,620 --> 00:15:49,470
You know these are very very simple methods and they're very powerful and you'll see that we'll use

219
00:15:49,470 --> 00:15:56,610
some of these in some of the projects we create but that's going to be it for now guys in the next video

220
00:15:56,610 --> 00:15:59,160
we're going to look at object literals.