‫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 panel
‫and this Quokka output here cleaned up a bit.
‫So let's again pretend that we are getting our books
‫from this fictional API using the getBooks function.
‫So let's say getBooks.
‫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,
‫'cause 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, el 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.map.
‫And now again, our callback function.
‫And here, let's call each element a book
‫because well, we have this book's array,
‫which is well, actually it isn't anything.
‫And that's because we have this arrow here.
‫Let's just return something here so that the arrow ends.
‫No. Ah, 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.title.
‫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 these 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 essentialData
‫should be books.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 book.title
‫and author is book.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 parenthesis.
‫So we don't need any of this.
‫And so now that works the same.
‫And so by using these parenthesis 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 the reviewsCount.
‫Now here we could get back this function that we did before.
‫Let's just copy that.
‫And then let's just call getTotalReviewCount
‫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 MDN.
‫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.