Jonas: So I have counted,
and since the beginning of the course,
we have learned a total of 30 different array methods.
That's pretty incredible.
But it makes sense, because arrays
are probably the most used data structure in JavaScript.
We use arrays really all the time
when we work with data in JavaScript.
And so we need to be able to perform
all kinds of operations with them.
Now, the problem is that choosing
between 30 different methods is not always easy,
especially when you just started learning
about them like you have.
So most likely, in your mind right now,
there is a big confusion between all these methods,
and especially about when to use each of them.
And so to help you with that, I created this summary lecture
with all 30 array methods, plus some other techniques
to work with array that we've also learned
throughout this section and some previous one.
Now, I believe that the best way to figure out
which method to use in each situation
is by starting to ask the question,
what do I actually want from this method?
Do I want to mutate the original array,
or do I want a new array based on the original one?
Do I want an array index,
or do I want to retrieve an entire array element?
Or do I want to know if an array includes a certain element,
or maybe I just want to get a new string
to transform the array to a new value
or simply loop over the array?
And by asking these different questions,
we can now categorize the methods
and easily choose between them.
So this is kind of a decision framework that I developed.
And so let me go briefly
through all of these different scenarios with you.
First off, if we want to add an element
to the original array, we can use 'push' or 'unshift.'
And we already talked about all of these methods,
so of course, I will not explain them again.
This is just a reference for you to keep.
Now anyway, if we want to remove from the original,
then we use either 'pop,' 'shift,' or 'splice.'
And finally, we also talked about these three other methods
that mutate the original array as well,
which are the 'reverse,' 'sort,' and 'fill' methods.
Okay, now keep in mind that with all these methods here,
you have to be very careful, because they do change
the underlying array that you're working with,
and that, many times, is not what we want.
In fact, these methods should actually
mostly be avoided these days,
because JavaScript development is moving
more and more into a direction of using a more functional,
non-destructive approach, where instead of mutating
the original data structures, we simply create new ones.
And speaking of creating a new array
based on the original array,
the most straightforward method here is the 'map' method.
And this one we use all the time,
as it loops over the original array
and creates a new one with the same length of the original.
So one very nice trick to decide
whether we want to use the map method or not
is to ask ourselves, should the new array
have the exact same length as the old one?
And if the answer is yes,
then we probably need the map method.
We can also create new arrays by filtering for a condition,
or by taking a slice of the original array.
So basically, just a piece of the original.
If we want a new array where one of the items is different,
so where it's replaced, we use the width method.
We can also flatten the original array
by using 'flat' and 'flatMap.'
Now, three very important of the mutating methods,
which we also call destructive methods
are reverse, sort, and splice.
But what if we do not want to change the original array?
Well, then we can use the new 'toReversed,'
'toSorted,' and 'toSpliced' methods,
which will all return brand new arrays.
Finally, we can also concatenate
or join two arrays using the concat method.
Alright, now next up,
sometimes what we need is an array index.
And for that, we have the index of findIndex
and findLastIndex methods.
Now, the difference between them is that findIndex
and findLastIndex can basically search
for an element in the array based on a test condition
that we can provide in the callback function.
But besides that, they are pretty similar.
And both give us the index of a certain element in an array.
Now, if we actually need the array element itself,
again, based on a test condition,
then we can use the 'find' or 'findLast' method.
And so these ones are pretty similar
to 'findIndex' and 'findLastIndex,'
but instead of just giving the index,
they gave us the entire element that we're looking for.
So in practice, 'find' and 'findLast' are a bit more useful.
But what if we already know the position of the element
that we want to get from the array?
Well, then we can just use the 'at' method,
which will do the exact same thing
as using square brackets to retrieve an element.
Next up, sometimes it's pretty helpful to know
whether an array includes a certain element or not.
And for that, we have 'includes,' 'some,' and 'every.'
So with 'includes,' we can simply test
whether an array contains a single value,
while on the other hand, with 'some' and 'every,'
we can specify a test condition based on a callback again.
So the 'some' method is gonna return true
if at least one of the elements in the array
satisfies the condition.
And the 'every' method only returns true
if all of the elements satisfy the condition.
So these three methods all return a Boolean value,
which is very helpful in something like an if-else statement
or a turn array operator.
So that's where you many times will use
one of these methods.
Alright, next, sometimes,
all we want is to just transform an array into a string.
And for that, we use the very simple 'join' method,
or we might want to reduce the entire array
to just one value, no matter if that's a string
or any other type.
And as we already know,
for that, we use the 'reduce' method.
So in the 'reduce' method, we use an accumulator,
which we can think of as like a snowball,
which accumulates all the values
of an entire array into just one single value.
And that value can actually be of any type.
So it can be a number, string Boolean,
or even a new array or a new object now, all right?
And so in fact, we could actually replace
most of these methods that we have here with a 'reduce,'
but we don't do that because it's a lot more work to do so.
But in theory, we could just use a 'reduce.'
For example, 'for' and 'includes,'
or really, most of the other methods that we have here.
Now finally, if all we want to do is to just loop
over an array without producing any new value,
we use the 'forEach' method.
So remember, this one does not create a new array,
and in fact, it doesn't create any new value at all.
All we do in the 'forEach' method is to basically
just do some work but not produce a new value.
All right, and that's it.
That's an overview of all the 30 array methods
that we talked about.
And it might be a good idea
to somehow keep this overview handy.
For example, you can print it out on a paper
or just store it somewhere on your computer.
But we're actually not done with this video yet,
because I also want to briefly summarize
the additional array tool and techniques
that we learned throughout this section and a previous one,
but which aren't exactly array methods.
So first of all, besides all the array operations
that we just looked at, we can also group arrays
by different categories
by leveraging the Object.groupBy function.
So again, this isn't technically an array method,
which is why it's on this separate slide for array tools.
Now, if we want to create a new array from scratch,
we have two options.
First, we can use the Array.from function
where we pass in the desired length and a map callback
to fill up the new array
as we learned in one of the previous videos.
And this is the preferred way
of creating a new array from scratch.
But we can also use the array constructor with new array
and pass in the number of empty elements
that this array should have.
We can then remember,
fill up this empty array using the fill method.
Now, in an earlier section,
we learned that besides the concat method,
we can also use the spread operator like this
in order to join two or more arrays into a brand new one.
Now, if we want to get all the unique values of an array,
we can place them into a new set, just like this,
and then again, spread the result into a brand new array.
And now finally, here comes the most complex
technique of all.
So if we want to find all elements
that are present in two arrays,
then we can again convert them into sets,
use the intersection method on the set,
and then spread the result
into a brand new array once again.
So these are just a few more ways to work with arrays
that you should always keep in mind.
Now, okay, and with this, we're finally done
with this summary lecture.
Even though it's a summary, it still runs pretty long.
So now, all that's left to do in this section
is to complete the final coding challenge.
And so let's do that next.