1
00:00:00,330 --> 00:00:06,480
So you might be wondering, why would you use an array will arrays are very powerful and they give you

2
00:00:06,480 --> 00:00:10,440
a lot of stuff right out of the box, you can add remove items from the array.

3
00:00:10,710 --> 00:00:15,660
You can also splice and there's really a lot of things you can do with arrays.

4
00:00:15,870 --> 00:00:18,730
So there's these what's called as array methods.

5
00:00:19,060 --> 00:00:22,380
This is a quick example of how you can add content to the array.

6
00:00:22,590 --> 00:00:26,610
And there's a lot of different methods that are available within arrays.

7
00:00:26,880 --> 00:00:28,550
So we've got our typical array.

8
00:00:28,560 --> 00:00:31,160
We can find out a length of the array.

9
00:00:31,410 --> 00:00:33,180
So we know that there's two items in there.

10
00:00:33,180 --> 00:00:34,570
So that's we're getting that length.

11
00:00:34,800 --> 00:00:39,660
We can also do index into an item so we can subtract.

12
00:00:39,990 --> 00:00:44,640
So knowing that we've got the length of the array and we could subtract one.

13
00:00:44,650 --> 00:00:47,620
So that will give us the last item that's in the array.

14
00:00:47,880 --> 00:00:50,130
So basically giving us that banana.

15
00:00:50,140 --> 00:00:56,460
So there's some flexibility over returning those items we can loop through so we can iterate through

16
00:00:56,460 --> 00:00:57,030
the arrays.

17
00:00:57,030 --> 00:00:59,250
And there's going to be a little bit more on loops coming up.

18
00:00:59,700 --> 00:01:02,910
There's also you can add items to the end of the array.

19
00:01:03,180 --> 00:01:05,340
So in this case, using the push method.

20
00:01:05,370 --> 00:01:13,430
So referencing the array and then we use both push and then specify the value that we want to add in.

21
00:01:13,500 --> 00:01:15,750
And as you can see, the series has now changed.

22
00:01:15,840 --> 00:01:17,940
It's got apple, banana and orange.

23
00:01:18,130 --> 00:01:22,560
You can use pop to remove out the last item from the end of the array.

24
00:01:22,890 --> 00:01:24,240
There's also a shift.

25
00:01:24,250 --> 00:01:31,500
So that gives you the ability to move an item from the front of the array and then you can add an item

26
00:01:31,500 --> 00:01:34,010
in the front of the array using on shift.

27
00:01:34,230 --> 00:01:38,410
You can also find an index value of an item in the array.

28
00:01:38,640 --> 00:01:47,160
So there is using index of and if there is no value, if nothing, if that item banana is not within

29
00:01:47,160 --> 00:01:49,910
the array, then it's going to return back a negative one.

30
00:01:49,920 --> 00:01:55,250
And this is often used in order to quickly search for the contents of the array.

31
00:01:55,410 --> 00:02:00,750
And you do a condition to check to see if index of banana is equal to negative one.

32
00:02:00,900 --> 00:02:03,420
And if it is, then, you know, it's not found in the array.

33
00:02:03,630 --> 00:02:06,900
You can also remove an item by its index position.

34
00:02:06,900 --> 00:02:08,430
So that's using Splice.

35
00:02:08,700 --> 00:02:11,550
And I know there's quite a few things that were going over.

36
00:02:11,550 --> 00:02:13,790
And I'm going to show you some examples of these.

37
00:02:14,040 --> 00:02:16,820
There's also removing items from an index position.

38
00:02:17,100 --> 00:02:18,530
There's copying arrays.

39
00:02:18,660 --> 00:02:19,940
So I think you get the picture.

40
00:02:19,950 --> 00:02:25,910
There's just a ton of stuff that you can do with arrays, and that's why everybody loves using arrays.

41
00:02:26,130 --> 00:02:29,430
So this lesson challenge, of course, has to do with arrays.

42
00:02:29,700 --> 00:02:37,920
The objective is to use various methods that we've looked at in order to transform the array below from

43
00:02:37,920 --> 00:02:39,690
this to this.

44
00:02:39,780 --> 00:02:41,880
Actually, quite a few possibilities.

45
00:02:42,030 --> 00:02:49,410
And I can walk you through some of the options that we have using the index of push pop shift on shift

46
00:02:49,410 --> 00:02:54,020
splice in order to rebuild this array and change the value.

47
00:02:54,240 --> 00:03:00,990
We can also get things back like the length and of course, try that output into the console and see

48
00:03:01,290 --> 00:03:07,620
how you can make adjustments to the array trying out all these different common methods that are available

49
00:03:07,620 --> 00:03:08,400
for arrays.

50
00:03:08,580 --> 00:03:10,440
And I'll walk you through it so you can post a video.

51
00:03:10,450 --> 00:03:12,300
Try this on your own as well.

52
00:03:12,300 --> 00:03:14,900
I'm going to walk you through some of these methods.

53
00:03:14,900 --> 00:03:19,560
So let's start with our favorite list array.

54
00:03:19,680 --> 00:03:22,640
And there's are items sitting there in the list array.

55
00:03:23,010 --> 00:03:29,210
So it's console we can console log it out or we could just simply look into the console here.

56
00:03:29,400 --> 00:03:31,020
So you see, you've got a length.

57
00:03:31,320 --> 00:03:38,160
You can also see when you press the dot, Chrome is giving us some suggestions of what we can do so

58
00:03:38,160 --> 00:03:40,590
we can do all of these different methods.

59
00:03:40,770 --> 00:03:44,250
So let's try some of these out and we're going to manipulate the array.

60
00:03:44,610 --> 00:03:49,550
Also going to be constantly console logging out the list to see where we're at.

61
00:03:49,710 --> 00:03:51,570
So checking the list.

62
00:03:51,600 --> 00:03:56,780
So let's make some updates to the array so we can check to see if it is an array.

63
00:03:57,120 --> 00:04:04,230
So if it's a valid array, we can do array is array, temp, equal array is array and we'll also output

64
00:04:04,230 --> 00:04:10,370
the value of temp as we refresh it so we can see those values within the console of the browser.

65
00:04:10,620 --> 00:04:12,680
So we see that it is a valid array.

66
00:04:12,720 --> 00:04:13,670
So that's a good thing.

67
00:04:13,710 --> 00:04:15,450
Let's update the array.

68
00:04:15,450 --> 00:04:21,870
So we're taking the list and selecting value with the index of number one.

69
00:04:22,830 --> 00:04:30,180
And let's update that to Hello World so that when we refresh our value for the last time has updated,

70
00:04:30,300 --> 00:04:33,260
we can also return back index values.

71
00:04:33,260 --> 00:04:37,760
So using temp again as are variable and then the list array.

72
00:04:38,700 --> 00:04:44,850
Let's check for an index of and we'll look for the value that we've updated and replaced.

73
00:04:45,480 --> 00:04:50,100
So we see that temp comes back as negative one because it's no longer within that array.

74
00:04:50,130 --> 00:04:51,290
Let's check for Lawrence.

75
00:04:51,570 --> 00:04:54,030
That one has an index value of zero.

76
00:04:54,210 --> 00:04:56,520
Let's check for 35.

77
00:04:56,640 --> 00:04:59,940
That has an index value of negative one because we're checking for a string.

78
00:05:00,240 --> 00:05:06,000
And there's only a number available there, so if we do 35 as a number, you can see that it does get

79
00:05:06,000 --> 00:05:06,430
returned.

80
00:05:06,720 --> 00:05:12,750
So remember that there is a difference between strings and numbers and it will distinguish differentiate

81
00:05:12,750 --> 00:05:13,590
between the difference.

82
00:05:13,860 --> 00:05:15,810
Let's make some more updates to the array.

83
00:05:16,110 --> 00:05:19,230
So adding in push and we'll just call this one pushed.

84
00:05:19,470 --> 00:05:22,030
You can see that it gets added to the end of the array.

85
00:05:22,200 --> 00:05:23,850
And this time we're going to do pop.

86
00:05:24,330 --> 00:05:25,650
So it's removing the last one.

87
00:05:25,680 --> 00:05:27,730
So basically it removed the one that we added.

88
00:05:27,750 --> 00:05:29,100
There's also shift.

89
00:05:29,400 --> 00:05:32,250
So that removes the first element from the array.

90
00:05:32,280 --> 00:05:38,070
And another neat thing is if you want to get the value that's being returned back, if you want to get

91
00:05:38,070 --> 00:05:43,530
the value that's popped, that you can see that we did get this value being returned back.

92
00:05:43,620 --> 00:05:48,480
It will make the update to the array, but then it will also return back that value that it pulled out.

93
00:05:48,720 --> 00:05:55,020
So if you do want to use that within your code, you can always reference that value in a variable and

94
00:05:55,020 --> 00:05:56,710
then make use of it within your code.

95
00:05:56,820 --> 00:05:58,210
There is shift as well.

96
00:05:58,230 --> 00:06:01,020
So it's adding an element to the beginning.

97
00:06:01,650 --> 00:06:04,870
So just call that on shift so that we can see that within the array.

98
00:06:05,070 --> 00:06:07,020
So it's going to add it to the beginning of the array.

99
00:06:07,380 --> 00:06:09,390
So it's added in the zero position.

100
00:06:09,390 --> 00:06:12,000
So it's shifted all the rest of the index values.

101
00:06:12,270 --> 00:06:17,490
And that's why setting the values using this type of format, we're using the index format.

102
00:06:18,030 --> 00:06:23,520
This isn't the best way to go about it, because as we've seen, these array values can be shifting

103
00:06:23,520 --> 00:06:24,170
and changing.

104
00:06:24,180 --> 00:06:26,940
So there's quite a bit of stuff that can happen with arrays.

105
00:06:27,270 --> 00:06:31,510
So they're also probably wondering, well, what happens if we do temp and on shift?

106
00:06:31,650 --> 00:06:34,710
So what this will do is this will return back the length.

107
00:06:34,710 --> 00:06:41,040
So the length is eight and if we had more items in there, so if I added in one more and then you can

108
00:06:41,040 --> 00:06:44,650
see that it's returning back the length of the array.

109
00:06:44,700 --> 00:06:50,940
So as we're updating values, you can see that those are updating the length of the array.

110
00:06:50,970 --> 00:06:52,410
So that's what's being returned back.

111
00:06:52,710 --> 00:06:55,590
So unstaffed will add it to the front of the array.

112
00:06:55,620 --> 00:06:56,790
So it makes it first.

113
00:06:56,880 --> 00:07:02,700
What Splice does is it changes the content delivery, adding new elements while removing old ones.

114
00:07:03,090 --> 00:07:04,330
So this is an interesting one.

115
00:07:04,440 --> 00:07:06,930
So what Slice will do is this.

116
00:07:07,230 --> 00:07:11,970
As we can see, it added an item, but it also removed out items.

117
00:07:11,980 --> 00:07:19,140
So basically we started at index value one and we removed out a couple items from index value number

118
00:07:19,140 --> 00:07:19,410
one.

119
00:07:19,650 --> 00:07:22,680
And if we use temp, you can see what's being returned.

120
00:07:22,680 --> 00:07:26,060
There is the two items that got removed out.

121
00:07:26,370 --> 00:07:27,900
So that's what we can do with Splice.

122
00:07:28,050 --> 00:07:33,660
So our starting index position of where we want to remove it and then how many items we want to remove

123
00:07:33,660 --> 00:07:34,480
out of the array.

124
00:07:34,500 --> 00:07:39,690
So I know this lesson covered quite a bit of stuff and it is important to understand all the different

125
00:07:39,690 --> 00:07:41,220
things that you can do with the race.

126
00:07:41,430 --> 00:07:46,080
And this is really just scratching the surface within the modular developer network.

127
00:07:46,170 --> 00:07:50,700
We saw there is so much power and so many things that you can do with arrays.

128
00:07:50,700 --> 00:07:53,580
So even more is going to be coming up in the next lesson.