All language subtitles for 9. The Array map Method

Now, before you can start building any meaningful react application, you need to be a true master

of the three functional array methods in JavaScript, which are map, filter and reduce.

And I call them functional array methods because these methods do not mutate the original array, but

do instead return a new array based on the original one.

So in this lecture, let's start by taking a look at the map method.

And to start, let's actually take out all this code here because we do no longer need it now, because

from now on we will actually start working with the entire books array.

So let me take that out, give it a save.

And then here we have all this this panel and this output here cleaned up a bit.

So let's again pretend that we are getting our books from this fictional API.

Using the get books function.

So let's say get books.

And so remember that this will then give us the entire books array.

And so now we are ready to use the map method on that array.

So what does the map method actually do?

Well, basically the map method will loop over an array and return a new array with the same length,

with some operation applied to each of the elements of the original array.

So just to illustrate that, let's say we have this very simple array.

And on that we can call map.

And so now Map expects a callback function, which is a function that will be called for each of these

elements of the array.

And so now here are these arrow functions that we talked about earlier become really handy because now

we can simply use an arrow function here.

For example, like this.

And I will explain in a second what this does.

But for now, let's just take a look at the output here.

Actually, let's save this in some variable.

And so what you see here is that we get an array which is basically double the previous array.

So what happened here?

So again, we passed in this callback function, which is a function that gets called for each of the

elements of this array.

And in this callback function, the element parameter will always be the current element of the array.

So for this first element here, l will become one.

And then here we simply return one times two, which is two.

So that's then placed in the array and we move on to the next one.

So then here we have two.

So therefore element becomes two, two times two is four.

And so that then gets placed in the array.

And like this, it goes all the way until the end of the array.

And so again, the map method is basically to create a new array based on the original array with some

operation applied to each element of the original array.

So this was just some demo here.

But now what I want to do is to create an array that contains simply all the titles of all the books.

So instead of having this huge array which contains all these objects, all I want is an array which

simply has all the titles.

So let's say titles equals books, dot map.

And now again, our callback function.

And here, let's call each element a book because, well, we have this books array, which is.

Well.

Well, actually, it isn't.

Isn't anything.

And that's because we have this error here.

Let's just return something here so that the error ends.

Now.

But yeah, this is not the books array anyway.

Yeah.

So here we have this array with all these objects.

And so now as we loop over this array, each of the elements is one book object.

Right.

So this is the argument to the function.

And then remember is what we return.

So what do we want to return?

Well, simply book that title.

And now as we check out what titles is we see, it is this array which only contains the titles.

Beautiful.

So that was pretty simple, right?

So the operation doesn't, of course, have to be like a math operation like this here.

Simply what we return for each book element is book title.

And so that then gets placed into the array.

So the new output array, which then gets stored into this titles.

Okay, let's see another example and let's say that we wanted to basically only get the essential data

for each of these book objects.

So we want an array with objects still.

But now we only want, like, the title and the author.

Maybe.

So let's say essential.

Data should be books.

Dot map.

And again, I'm calling each one the book.

And now here what we want to return is a new object which contains, again, the title and the author.

Now in an arrow function, whenever we use these curly braces like this, the arrow function will think

that this is a declaration block.

Right.

So this is not returning an object.

So if we wrote like x 23, this would not be returning anything because again, the arrow function simply

thinks that this here is the function block.

So we can solve this in two ways.

First, we can simply then return the object from here manually.

So we can now say.

Title is booked.

Title.

And author is book dot Author.

Let's take a look at that.

And.

Yeah, that works.

So now for each of the books, we only have the author and the title and nothing else.

So that worked.

So that's great.

But yeah, here we have a bit too much code.

So let's get rid of this return again.

And so the trick is to simply wrap this here in a parentheses.

So we don't need any of this.

And so now that works the same.

And so by using these parentheses first instead of the curly braces, then again, we are automatically

returning this object from here.

So just like here we are returning the result of this operation.

And here we are returning simply this value right here.

And of course, we could also do some computations in here.

For example, let's say we wanted to reviews count and now here we could get back this function that

we did before.

Let's just copy that.

And then let's just call get total review count for the current book.

And so now, yeah, we get all of this data that we wanted, but again, it's just the essential data,

just basically a small part of the total data that we had before in the books array.

So these are just a few use cases that are going to become in handy for the rest of the React course.

And if this was maybe a bit too fast.

So if you didn't know this map method before and you didn't quite understand it yet, that's understandable

because this was more of a crash course on this map method.

And so if somehow it hasn't clicked for you yet, you can just check out the documentation on mSDN or

of course you can also check out my complete JavaScript course because there I explain it all in a lot

more detail.

But for this short introduction, this should be enough.

And so let's now move on to the next important method, which is the filter method.