Hi, welcome to another lesson.
Now we're going to talk about arrays, arrays are ordered, sequences of values, and these values can
be of any data type and they are separated by a comma.
So let's go to Visual Studio code.
Let's start by creating a variable called student.
And now let's say I want to put the names of my students here.
If I didn't use the array, I could do like this, so I have a student called John, another called
Mary, another called Paul.
I'm going to save this.
Let me do the council dialogue first so students.
Refreshing the page, we can see that this seems to be working, but now how do I know how many students
do I have if I try to do like student?
By the way, we can access this variable from the console, so now that we created it in the code,
we can access it from here, as we can see.
So if I try to get how many students do I have using the length prop.?
This is not going to work because strings are just going to count the number of characters.
So I have no way of doing this.
There's also no way that I can access each of the students and know their names.
So this is a terrible way of starting a group of data.
So this is why arrays are useful now.
Instead of using strings, we're going to start with braces so open and close braces.
This is what indicates an array.
So now each of the elements of this array are going to be strings and we are going to separate these
values with a comma.
So now we have the first element of this array.
The second element and the third element, saving this and going back there.
Refreshing the page, we can see that now the console is already showing us that this is an array with
three elements, if we do type of.
Students, we can see that this is considered to be an object by JavaScript, so there's no data type
called array, but in practice this is actually a data type because you see that objects, they have
different behaviors.
So now we know that we can do students that length and now it's returning the actual number of students.
I can also get each of them.
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.
So arrays are also ordered sequences of values.
So the first student has an index of zero and now it's going to return.
John, here I have another example of an array of numbers.
You can even have arrays of strings and numbers together.
You can use any data type, even other arrays.
So I've just put an example here where I created a variable called groups.
So I have a few groups of students.
So by looking at this array, which, by the way, is called multidimensional array, because it has
arrays inside arrays, can you guess what is the length of the group's array?
If I create this in the console, let's do it now.
If your answer is nine, this is not right, because the groups array does not have nine elements,
it actually has one element, two elements, three elements.
So if we do groups that lenth, we can see that this array has three elements and each of these elements
are iRace.
So if I try to get like groups, I'm going to get the second element which has the index of one.
If I do groups with an index, one that lenth.
Now, this array has four elements, so from this point on, we should be able to identify those things,
look at arrays and understand their structure so we can work with them properly.
Now, let's see a few operations that we can do with race.
I'm just going to use this example.
So I'm just going to copy this and go to Visual Studio Code.
We don't need this consult that log anymore, so I'm just going to create this coarsest variable.
Now, refreshing the page, I have this variable right here, so it's an array of three elements.
Now, how can I add elements to this array?
Well, since arrays are an ordered sequence of values, it's important to decide if we want to add elements
to the beginning or to the end of the array.
So if we want to add elements to the end, we can just use the push method so courses don't push.
This is a method.
So we need parentheses and inside parentheses.
We can pass what we are trying to add.
So in this case, let's create a JavaScript course.
Don't worry about the numbers that show here, sometimes when we type comments in the console, you
can see that these methods, normally they return something so you can see that methods are actually
functions.
Now, you should be recognizing that this is an argument of this push function and it is returning something
which is the new length of the array after the push.
This is not important to us.
It's not important what it returns.
It's important what it does.
So now if we call the course this array, again, we can see that now we have four elements and JavaScript
has been added to the end of the array.
If we want to do the opposite, add elements, the beginning of the array, instead of doing push,
we can do on shift.
Now, let's add bootstrap.
Now, our array has five elements.
And we've just added bootstrap to the beginning of the array.
We can also do the same thing with the leading elements.
So removing the last element of the array is going to be the pop method.
So courses dot, pop, we don't need to pass any argument because it's just going to get the last element
of the array.
So it just returned the element that was removed.
Now, if we check the variable again, we can see that JavaScript is not there anymore.
And the same thing if we want to do at the beginning of the array, the name of the method is going
to be shift.
So now it's going to remove bootstrap.
And we can check how is our array so if just remove the first element.
We can also redefine Arae element, so at this moment, the index zero is this age TML, we can do like
courses and then the index we want to change so zero and then we can redefine a different value.
So let's say age Temel success.
And now we've just changed the first element.
First, let me just clear this up so we can see it better.
Another interesting thing we can do is slicing.
So we are going to use slicing to extract part of an array.
So now let me just copy this variable.
And let's say I want to get the first three students I can do students.
That slice.
And then I can choose where I want to start, so I want to start at index zero, just one thing to pay
attention is that the START index is included.
So if I start at zero, it is going to get better, which is the first, but the end element is not
included.
So if I want to get Peter and Joanna, I need to go up to index two.
So zero one and two because the end index is not included.
So doing like this, we just got Peter and Joanna.
It's just something that we need to pay attention.
So if we want to get up to Pouliot, what do you want to do?
Zero, one, two, three and four.
So the end element is never included so far, we are going to get up to Houllier.
If we don't include the second number, then we can get until the last element of the array so we can
do it like this.
Just use the comma and omit the second value.
So if we want to get from Joanna until the end of the array, we can start at one because the first
index is included.
So it's getting Joanna and we don't declare the end index and it's just going to get all the students
up to the end of the array.
Another interesting thing we can do is using negative numbers.
So if I want to get the last three students, I can declare the first one is minus three.
So now this one is minus one, Mary Kate is minus two, who is minus three, so I'm getting from minus
three to the end of the array.
By doing this, we can get the last three elements of the array.
Just one last thing worth mentioning, since strings are also sequences, you can apply the slice method
to strings as well.
So let me clear this.
So if I create a variable, let's say Ubon.
Which would be for an international bank account.
We know that the first two characters of the bond is going to be the country code, so any bond would
look like this.
So in Portugal, for example, it would be Bitti 50.
Actually, it's not the first two characters, but the first four.
So this indicates the country.
Then comes all these numbers for the account number and all that.
So this is our variable now, how can we get the country code, the country code is the first four characters
so we can apply slicing to strings as well.
So we could do it on that slice.
And then we can get it from zero to four, four is actually the fifth character, but we know that the
second value is not included.
So it's just going to be these four.
So by doing this, we are able to extract the country code from an Iban number.
So these are some examples that I wanted to show you.
Again, what's the use of everything we've done with the arrays?
Well, now that you know how they work, how can you add or remove elements?
How can you get its length?
How can you get specific elements?
How can you extract part of it?
When you face a problem involving arrays, you won't have any trouble to solve them, as you will see
in the next list of exercises.
So that was all for this lesson.
In the next video, we're going to talk about objects.
I'll see you then.