Original subtitles

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.