1
00:00:09,590 --> 00:00:11,610
Hi, welcome to another lesson.

2
00:00:11,870 --> 00:00:20,360
Now we're going to talk about arrays, arrays are ordered, sequences of values, and these values can

3
00:00:20,360 --> 00:00:24,780
be of any data type and they are separated by a comma.

4
00:00:25,130 --> 00:00:27,650
So let's go to Visual Studio code.

5
00:00:28,370 --> 00:00:32,000
Let's start by creating a variable called student.

6
00:00:33,060 --> 00:00:36,960
And now let's say I want to put the names of my students here.

7
00:00:39,830 --> 00:00:46,460
If I didn't use the array, I could do like this, so I have a student called John, another called

8
00:00:46,460 --> 00:00:49,130
Mary, another called Paul.

9
00:00:50,290 --> 00:00:51,580
I'm going to save this.

10
00:00:59,230 --> 00:01:02,770
Let me do the council dialogue first so students.

11
00:01:10,600 --> 00:01:18,250
Refreshing the page, we can see that this seems to be working, but now how do I know how many students

12
00:01:18,250 --> 00:01:22,660
do I have if I try to do like student?

13
00:01:23,710 --> 00:01:29,050
By the way, we can access this variable from the console, so now that we created it in the code,

14
00:01:29,230 --> 00:01:31,820
we can access it from here, as we can see.

15
00:01:32,320 --> 00:01:38,530
So if I try to get how many students do I have using the length prop.?

16
00:01:38,680 --> 00:01:44,480
This is not going to work because strings are just going to count the number of characters.

17
00:01:44,500 --> 00:01:46,630
So I have no way of doing this.

18
00:01:46,780 --> 00:01:51,610
There's also no way that I can access each of the students and know their names.

19
00:01:51,820 --> 00:01:56,470
So this is a terrible way of starting a group of data.

20
00:01:56,830 --> 00:01:59,470
So this is why arrays are useful now.

21
00:01:59,470 --> 00:02:05,600
Instead of using strings, we're going to start with braces so open and close braces.

22
00:02:06,520 --> 00:02:09,100
This is what indicates an array.

23
00:02:09,790 --> 00:02:17,710
So now each of the elements of this array are going to be strings and we are going to separate these

24
00:02:17,710 --> 00:02:19,460
values with a comma.

25
00:02:20,140 --> 00:02:23,060
So now we have the first element of this array.

26
00:02:23,080 --> 00:02:28,270
The second element and the third element, saving this and going back there.

27
00:02:29,600 --> 00:02:35,540
Refreshing the page, we can see that now the console is already showing us that this is an array with

28
00:02:35,540 --> 00:02:39,740
three elements, if we do type of.

29
00:02:41,320 --> 00:02:48,790
Students, we can see that this is considered to be an object by JavaScript, so there's no data type

30
00:02:48,790 --> 00:02:56,890
called array, but in practice this is actually a data type because you see that objects, they have

31
00:02:56,890 --> 00:02:58,410
different behaviors.

32
00:02:58,690 --> 00:03:07,840
So now we know that we can do students that length and now it's returning the actual number of students.

33
00:03:08,170 --> 00:03:09,970
I can also get each of them.

34
00:03:10,240 --> 00:03:17,350
So if I want to get the first element of my array, I'm just going to do just like I do it with strings.

35
00:03:17,590 --> 00:03:21,210
So arrays are also ordered sequences of values.

36
00:03:21,430 --> 00:03:27,100
So the first student has an index of zero and now it's going to return.

37
00:03:27,100 --> 00:03:32,380
John, here I have another example of an array of numbers.

38
00:03:32,680 --> 00:03:36,430
You can even have arrays of strings and numbers together.

39
00:03:36,430 --> 00:03:40,020
You can use any data type, even other arrays.

40
00:03:40,330 --> 00:03:44,830
So I've just put an example here where I created a variable called groups.

41
00:03:45,250 --> 00:03:47,460
So I have a few groups of students.

42
00:03:47,950 --> 00:03:54,430
So by looking at this array, which, by the way, is called multidimensional array, because it has

43
00:03:54,560 --> 00:03:59,930
arrays inside arrays, can you guess what is the length of the group's array?

44
00:04:00,100 --> 00:04:04,030
If I create this in the console, let's do it now.

45
00:04:05,730 --> 00:04:13,410
If your answer is nine, this is not right, because the groups array does not have nine elements,

46
00:04:13,770 --> 00:04:19,860
it actually has one element, two elements, three elements.

47
00:04:20,070 --> 00:04:29,310
So if we do groups that lenth, we can see that this array has three elements and each of these elements

48
00:04:29,310 --> 00:04:30,360
are iRace.

49
00:04:30,630 --> 00:04:37,350
So if I try to get like groups, I'm going to get the second element which has the index of one.

50
00:04:37,950 --> 00:04:42,300
If I do groups with an index, one that lenth.

51
00:04:43,220 --> 00:04:51,130
Now, this array has four elements, so from this point on, we should be able to identify those things,

52
00:04:51,140 --> 00:04:57,110
look at arrays and understand their structure so we can work with them properly.

53
00:04:57,500 --> 00:05:01,280
Now, let's see a few operations that we can do with race.

54
00:05:01,400 --> 00:05:04,010
I'm just going to use this example.

55
00:05:04,010 --> 00:05:08,030
So I'm just going to copy this and go to Visual Studio Code.

56
00:05:10,530 --> 00:05:16,560
We don't need this consult that log anymore, so I'm just going to create this coarsest variable.

57
00:05:17,690 --> 00:05:24,260
Now, refreshing the page, I have this variable right here, so it's an array of three elements.

58
00:05:24,530 --> 00:05:27,830
Now, how can I add elements to this array?

59
00:05:28,220 --> 00:05:36,110
Well, since arrays are an ordered sequence of values, it's important to decide if we want to add elements

60
00:05:36,110 --> 00:05:39,020
to the beginning or to the end of the array.

61
00:05:39,230 --> 00:05:46,820
So if we want to add elements to the end, we can just use the push method so courses don't push.

62
00:05:47,300 --> 00:05:48,440
This is a method.

63
00:05:48,450 --> 00:05:51,770
So we need parentheses and inside parentheses.

64
00:05:52,100 --> 00:05:55,550
We can pass what we are trying to add.

65
00:05:55,820 --> 00:05:59,120
So in this case, let's create a JavaScript course.

66
00:06:01,160 --> 00:06:07,490
Don't worry about the numbers that show here, sometimes when we type comments in the console, you

67
00:06:07,490 --> 00:06:14,120
can see that these methods, normally they return something so you can see that methods are actually

68
00:06:14,120 --> 00:06:14,940
functions.

69
00:06:15,080 --> 00:06:23,270
Now, you should be recognizing that this is an argument of this push function and it is returning something

70
00:06:23,510 --> 00:06:27,120
which is the new length of the array after the push.

71
00:06:27,470 --> 00:06:29,030
This is not important to us.

72
00:06:29,210 --> 00:06:31,570
It's not important what it returns.

73
00:06:31,820 --> 00:06:33,560
It's important what it does.

74
00:06:33,980 --> 00:06:42,170
So now if we call the course this array, again, we can see that now we have four elements and JavaScript

75
00:06:42,170 --> 00:06:45,080
has been added to the end of the array.

76
00:06:45,450 --> 00:06:52,160
If we want to do the opposite, add elements, the beginning of the array, instead of doing push,

77
00:06:52,170 --> 00:06:53,840
we can do on shift.

78
00:06:57,300 --> 00:06:59,100
Now, let's add bootstrap.

79
00:07:02,160 --> 00:07:04,830
Now, our array has five elements.

80
00:07:06,030 --> 00:07:09,960
And we've just added bootstrap to the beginning of the array.

81
00:07:10,230 --> 00:07:13,350
We can also do the same thing with the leading elements.

82
00:07:13,620 --> 00:07:18,870
So removing the last element of the array is going to be the pop method.

83
00:07:19,140 --> 00:07:27,510
So courses dot, pop, we don't need to pass any argument because it's just going to get the last element

84
00:07:27,510 --> 00:07:28,290
of the array.

85
00:07:30,590 --> 00:07:34,080
So it just returned the element that was removed.

86
00:07:34,310 --> 00:07:39,890
Now, if we check the variable again, we can see that JavaScript is not there anymore.

87
00:07:40,130 --> 00:07:46,490
And the same thing if we want to do at the beginning of the array, the name of the method is going

88
00:07:46,490 --> 00:07:47,690
to be shift.

89
00:07:49,150 --> 00:07:51,370
So now it's going to remove bootstrap.

90
00:07:52,780 --> 00:07:57,730
And we can check how is our array so if just remove the first element.

91
00:07:58,750 --> 00:08:08,830
We can also redefine Arae element, so at this moment, the index zero is this age TML, we can do like

92
00:08:08,830 --> 00:08:16,550
courses and then the index we want to change so zero and then we can redefine a different value.

93
00:08:16,840 --> 00:08:20,680
So let's say age Temel success.

94
00:08:22,890 --> 00:08:26,400
And now we've just changed the first element.

95
00:08:27,700 --> 00:08:32,140
First, let me just clear this up so we can see it better.

96
00:08:32,650 --> 00:08:35,950
Another interesting thing we can do is slicing.

97
00:08:35,950 --> 00:08:40,570
So we are going to use slicing to extract part of an array.

98
00:08:41,200 --> 00:08:43,870
So now let me just copy this variable.

99
00:08:46,460 --> 00:08:52,520
And let's say I want to get the first three students I can do students.

100
00:08:53,790 --> 00:08:55,350
That slice.

101
00:08:56,960 --> 00:09:04,250
And then I can choose where I want to start, so I want to start at index zero, just one thing to pay

102
00:09:04,250 --> 00:09:07,590
attention is that the START index is included.

103
00:09:07,850 --> 00:09:15,320
So if I start at zero, it is going to get better, which is the first, but the end element is not

104
00:09:15,320 --> 00:09:16,080
included.

105
00:09:16,370 --> 00:09:23,090
So if I want to get Peter and Joanna, I need to go up to index two.

106
00:09:23,690 --> 00:09:30,910
So zero one and two because the end index is not included.

107
00:09:31,220 --> 00:09:34,780
So doing like this, we just got Peter and Joanna.

108
00:09:35,090 --> 00:09:37,280
It's just something that we need to pay attention.

109
00:09:37,470 --> 00:09:42,190
So if we want to get up to Pouliot, what do you want to do?

110
00:09:43,640 --> 00:09:49,170
Zero, one, two, three and four.

111
00:09:50,060 --> 00:09:56,060
So the end element is never included so far, we are going to get up to Houllier.

112
00:09:56,450 --> 00:10:03,200
If we don't include the second number, then we can get until the last element of the array so we can

113
00:10:03,200 --> 00:10:04,080
do it like this.

114
00:10:04,580 --> 00:10:08,290
Just use the comma and omit the second value.

115
00:10:08,660 --> 00:10:15,800
So if we want to get from Joanna until the end of the array, we can start at one because the first

116
00:10:15,800 --> 00:10:17,150
index is included.

117
00:10:17,150 --> 00:10:25,850
So it's getting Joanna and we don't declare the end index and it's just going to get all the students

118
00:10:25,850 --> 00:10:27,770
up to the end of the array.

119
00:10:27,890 --> 00:10:32,090
Another interesting thing we can do is using negative numbers.

120
00:10:32,630 --> 00:10:40,700
So if I want to get the last three students, I can declare the first one is minus three.

121
00:10:42,540 --> 00:10:51,360
So now this one is minus one, Mary Kate is minus two, who is minus three, so I'm getting from minus

122
00:10:51,360 --> 00:10:53,780
three to the end of the array.

123
00:10:54,060 --> 00:10:59,040
By doing this, we can get the last three elements of the array.

124
00:10:59,700 --> 00:11:07,620
Just one last thing worth mentioning, since strings are also sequences, you can apply the slice method

125
00:11:07,620 --> 00:11:09,090
to strings as well.

126
00:11:09,240 --> 00:11:10,500
So let me clear this.

127
00:11:11,790 --> 00:11:14,670
So if I create a variable, let's say Ubon.

128
00:11:15,870 --> 00:11:19,170
Which would be for an international bank account.

129
00:11:19,410 --> 00:11:27,390
We know that the first two characters of the bond is going to be the country code, so any bond would

130
00:11:27,390 --> 00:11:28,330
look like this.

131
00:11:28,470 --> 00:11:32,900
So in Portugal, for example, it would be Bitti 50.

132
00:11:32,910 --> 00:11:37,000
Actually, it's not the first two characters, but the first four.

133
00:11:37,260 --> 00:11:39,180
So this indicates the country.

134
00:11:39,420 --> 00:11:43,290
Then comes all these numbers for the account number and all that.

135
00:11:44,330 --> 00:11:53,210
So this is our variable now, how can we get the country code, the country code is the first four characters

136
00:11:53,390 --> 00:11:56,660
so we can apply slicing to strings as well.

137
00:11:56,810 --> 00:12:00,290
So we could do it on that slice.

138
00:12:01,740 --> 00:12:11,640
And then we can get it from zero to four, four is actually the fifth character, but we know that the

139
00:12:11,640 --> 00:12:13,620
second value is not included.

140
00:12:13,800 --> 00:12:16,220
So it's just going to be these four.

141
00:12:16,440 --> 00:12:22,910
So by doing this, we are able to extract the country code from an Iban number.

142
00:12:23,700 --> 00:12:26,700
So these are some examples that I wanted to show you.

143
00:12:26,850 --> 00:12:30,510
Again, what's the use of everything we've done with the arrays?

144
00:12:30,570 --> 00:12:35,040
Well, now that you know how they work, how can you add or remove elements?

145
00:12:35,040 --> 00:12:36,650
How can you get its length?

146
00:12:36,810 --> 00:12:39,290
How can you get specific elements?

147
00:12:39,300 --> 00:12:41,370
How can you extract part of it?

148
00:12:41,850 --> 00:12:47,760
When you face a problem involving arrays, you won't have any trouble to solve them, as you will see

149
00:12:47,940 --> 00:12:50,260
in the next list of exercises.

150
00:12:50,490 --> 00:12:52,410
So that was all for this lesson.

151
00:12:52,680 --> 00:12:56,390
In the next video, we're going to talk about objects.

152
00:12:56,460 --> 00:12:57,300
I'll see you then.