Instructor: Welcome back.
Let's begin this section with a couple of very simple
and very easy to understand array methods,
just to expand our array toolkit a little bit more.
And as always, at the beginning of a new section,
make sure to grab your starter files
and open them up in VS Code.
So that's the folder called arrays banquest.
And then open up script.js, which is gonna contain
a lot of stuff here.
But for now, don't worry about any of that,
I will explain what all of this is,
and also what else we have in our starter files
in a couple of videos from here.
All right, so up there, we have the application part
for the app we're gonna build in this section.
And then here we have the lectures part,
which is a bit more for the concepts themselves.
And by the way, this yellow part here comes
from a VS Code extension that I use.
And I think I showed it to you in the beginning.
But anyway, let's now talk about array methods.
Now before we start, let's quickly talk about why arrays
do actually have methods.
Well, remember that methods are simply functions
that we can call on objects.
So basically, they are functions attached to objects.
So if we have array methods, that means that
arrays themselves are also objects.
And so these array methods are simply functions
that are attached to all arrays
that we create in JavaScript.
Now, we will learn why all arrays have access
to this methods in a later section
when we talk about prototypal inheritance.
But for now, I just want you to understand that arrays
are objects, and that they get access to special
built in methods that we can essentially
see as tools for arrays.
And so as I mentioned, in this lecture, we're gonna start
by learning some very simple tools
that we can use on arrays.
So let's start by defining a simple test array
that we can work with.
And I'll make it as simple as possible
just with these letters, because that will help us
understand some of the things we're gonna do here.
Alright, the first method we're gonna talk about
is the slice method.
And this one is very similar to the slice method
that's available on strings, remember?
So with the slice method, we can extract part of any array,
but without changing the original array.
So essentially, we can take a slice of an array.
And so that's why it's called slice.
So array.slice, and now just like in strings,
we have the begin parameter.
And so this is the index at which we will start extracting.
So when we say two here, we should start extracting
here at C, and then all the way to the end, okay?
And then this slice method will return a new array.
And so we need to log that to the console
in order to actually see it, okay.
So as I said, this does not mutate the original arr, array.
Instead it returns a new array.
So a copy of the array, but only with the extracted parts.
So let's open up a terminal here again, and live server.
And here we go.
So this is already on banker's page,
but nothing is gonna work here yet.
So for now, let's just open up the console
because that's really all we are interested in for now.
Let's reload here again.
And so now we indeed get this array, which is a slice
of the original array starting at position number two.
So zero, one and two, right.
Now, of course, we can also define the end parameter.
So when we write two and four
then let's see the result here.
And so what this means is that just like in strings,
the end parameter here is not included in the output.
So index four is this one here.
And so yeah, as I just mentioned, this one is not
gonna be included in the output.
So two to four is really just two and three, okay?
And so the length of the output array right here
will be the end parameter minus the beginning one.
And so that's exactly the length we get here.
Then next, again, just like in strings,
we can define a negative begin parameter,
and then it will start to copy from the end of the array.
So minus one will basically take the last two elements
of the array, so D and E.
And so with this, it's pretty easy to simply get
the last element of any array.
So if we just duplicate this, so minus one is always
just the last element of any array.
So this is a very nice trick that sometimes useful.
And now to make this complete,
we can also use a negative index as the end parameter.
So let's start extracting at position number one,
until minus one, basically.
So let's see if that returns B and C.
And that's because it now starts extracting at position one,
which is here, and it extracts everything
except the last two here.
So that's what the minus two here means.
Alright, and if you find this a bit confusing,
then just experiment a little bit more with this.
Now finally, we can use the slice method
to simply create a shallow copy of any array.
So to do that, we simply call it
without any arguments at all.
And then indeed, we get here the exact same array.
And if you remember it correctly, we already did
something similar in one of the previous sections,
but using the spread operator, remember?
So back then we did this.
So creating a new array, and then expanding
the original array into that.
And so that gives us the exact same result.
So the question is, should you use the spread operator
or the slice method, in order to create a shallow copy?
Well, that's actually entirely up to you.
So it's just a matter of personal preference.
The only time you really need to use the slice method here
is when you want to chain multiple methods together,
so calling one after the other.
And we will do that, of course, later in this section.
All right.
So that is the slice method.
Next up is a method with a very similar name,
which is called splice.
And a splice method works in almost the same way as slice.
But the fundamental difference is that
it does actually change the original array.
So it mutates that array.
So let's again, log the result to the console anyway.
But now, we use splice.
And then with the same argument, as we use before here,
and so the result here, looks exactly the same.
So this one here is the same as this first one.
Let's give it even more space here.
But now, watch what happened to our original array,
and we see that all that remains here in our original array
is the first two elements.
And so now the extracted elements are actually gone
from the original array.
So splice deleted them.
And so what we can see is that splice actually does mutate
the original array, so it takes part of the array
and returns it and then the original array itself
loses this part that was extracted.
Now in practice, most of the time the value that
the splice method returns, doesn't even interest us.
All we are usually interested in is to just delete
one or more elements from an array using splice.
And one pretty common use case is to simply remove
the last element of an array.
So let's actually do that here.
So let's say arr.splice, and then minus one.
So just like in the slice method, minus one here
is the last element.
So the begin and end parameters, works exactly the same
as in the slice method.
Let's just get rid of this one here,
so that we see our original array.
And so indeed, as we log here arr to the console.
It is the original array, except for the last element,
which was e.
So that's exactly what we did here.
Alright.
And as always, in case you want to learn more
about any particular method, for example,
you can always use the MDN documentation.
So let's say MDN array splice.
So this one.
And so now here are some more examples on how to use this.
And so you have the name of the parameters.
And actually, the second parameter is called delete count.
So it's actually not the begin parameter.
So it works a little bit different than in the slice method.
So let me just show that to you.
So going back here.
So if we do dot splice, let's say at position number one,
and then we want to take exactly two elements,
and so then we write two, okay,
and so the result now of the resulting array
should be that a and c are deleted.
And so indeed, only a and d now remain.
Let's log arr to the console here to see the process
a little bit better.
So here, we removed the first one.
And then here, we went to position one,
and extracted or deleted two elements.
And so position one and then two elements.
So this first parameter here works the same
as in the slice method but the second one
is really the number of elements that we want to delete.
All right, so that is splice.
Next up, we're gonna talk about reverse.
So that's a very simple one.
Let's just restore our array here at this part
so that we can work with the original one here.
Or actually, let's also create a new array here.
Let's call this one, arr two.
And here, we will have five more letters of the alphabet
but this time, in a wrong order.
So let's say for some reason,
we are working with this array and we need to reverse it.
And so that's exactly what we use reverse for.
So arr2.reverse.
And indeed, it now returns the reverse array.
Here I actually want F.
And so now it is correct.
So f, g, h, i, j.
But now what's important to note here is the fact
that the reverse method does actually mutate
the original array.
So you see, as we log in the original,
it is now reversed two, okay.
So this one here does mutate the array.
So that's important to keep in mind.
So maybe you're noticing that in each of the methods,
I always mentioned which one mutates,
and which one does not mutate the original array.
And that's because this is a very important characteristic
of each of these methods.
That's because in a certain situation,
we might not want to mutate the original array,
and then we cannot use any of these methods.
Now, okay.
Next up, is the concat method.
And so this one is used to concatenate two arrays.
So let's create a variable called letters.
And letters will be the result of calling
the concat method on array.
And here, we have to specify the second array.
So let's take a look.
And now we have the 10 first letters of the alphabet here.
So the first array will be the one
on which the method is called.
And the second one is the one that we pass
into the concat method.
And once again, we already did this before,
in another way, remember?
So we could simply also do this, right,
arr and then arr two.
This gives us the exact same result
and it also does not mutate any of the involved arrays.
So just like concat, which also doesn't mutate
the original array here, alright.
And finally, just the join method
that we already talked about before,
but just for the sake of completion here, right.
And by the way, here in this concat method,
so if you prefer to do this one is of course perfectly fine.
And once again, it is just a matter of personal preference,
whether you prefer to use the spread operator,
or the concat method.
All right.
And now here, let's just join all the letters
of the alphabet together that we have here in our array
by using this separator here.
Okay, and so as you already know, the result here
is a string with the separator that we specified.
Great.
So your array tool set is rapidly growing here.
And remember that you already know push on shift,
pop shift, index of n includes from the intersection.
Now if you ever lose track of all these different methods,
and how they work, you can always come back to these videos.
Or of course, check the documentation on MDN,
just like we did here.
So no developer in the world knows all of this by heart.
So sometimes I even have to look up how the splice
or the slice method works,
because it's just too many methods to keep track of.
And, yeah, it's very hard to know everything by heart.
But anyway, let's now move on to the next lecture,
where we will take array methods to a whole new level.