Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
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.
14924
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.