In the last lesson we started using the map function to loop through our data and map pieces of data 1
to our reusable components. 2
Now in this lesson I want to go through map in greater detail and also look at some of the related functions 3
that help us deal with arrays such as map, filter, reduce find, and find index. 4
So go ahead and get the starting code sandbox and then go ahead and fork your own copy. 5
All right so here I've got an array of numbers up at the top and what map allows us to do is to loop 6
through the array and create a new array by doing something with each item. 7
So as you saw the way that we call this is we need to get hold of an array in order to call map on it. 8
And inside this map function it's going to expect a function. 9
So we're passing a function into another function. 10
Now the function that we pass in will determine what we actually want to do with each item. 11
So let's say that I wanted to maybe double each of these items. So I could create a function that takes 12
an input x and simply just returns the value of x multiplied by 2. 13
So this is a doubling function and it's pretty simple. 14
If I pass this function double into my map function, then it's going to loop through my numbers array 15
and for each of the numbers in there it's going to put it as the input of this function and output a 16
new array with each item replaced with double the size of the previous one. 17
Let's go ahead and try it out. This method has an output and that output can be either captured, so let's 18
call it new numbers and we can go ahead and console log it so you can see in our console that we're 19
getting the values 6, 112, 4, 96 and 10, each of which are double the size of each of the items in our 20
numbers array. Now if you think about this, this is not exactly something that we couldn't do before right? 21
Because we already knew about the forEach and we've been using it to loop through arrays for a long 22
time now in the course. 23
So if we wanted to do this with forEach we could have done it like this. 24
We could have created a new variable called newNumbers and set it to an empty array and then we could 25
have gotten hold of our numbers array and then called forEach. 26
And then inside this forEach function it also expects a function 27
right? 28
So let's go ahead and create another double function which takes a number x and it gets hold of this 29
newNumbers array and pushes a new value which is going to be x multiplied by two into that newNumbers 30
array. And then we can pass that function double into this forEach loop. 31
So this is how we would do it using the forEach 32
rather than using map. So you can see that map is a lot more concise. 33
Now you might be thinking, "Well actually, when we've been using for each we don't actually define a separate 34
function right?" 35
So we could in fact make this a lot simpler by putting that function inside the forEach and making 36
it anonymous by removing its name. 37
So it would look something like this, a little bit simpler 38
right? 39
But equally we could have done the same with our map function. 40
We can also make that a lot simpler if we wanted to by simply putting this function inside the parentheses 41
and then removing its name and turning it anonymous. Which ever way you do it 42
you'll notice that it's more concise using map because this function itself actually returns an output 43
which is a new array. 44
So unlike forEach where we have to create a new empty array and then every time we do something with 45
each item inside the array we push to the new array. Instead with map 46
it just does it all by itself. 47
This is really really handy in React when we're creating custom components and mapping data to it. Now 48
another related and also quite a useful function is filter. 49
Let's say that we've still got our numbers array up here, 50
so let's just move it a bit closer. 51
And I wanted to filter on it. 52
Well as the name suggests, what it does is it's going to create a new array by keeping only the items 53
that return true. 54
What does that mean? 55
Well let me show you a demo. 56
Let's say that we have our numbers array and I call the filter method and inside here again it expects 57
a function. 58
Let me write it out. Instead of creating a separate function 59
I'm just going to create an anonymous function inside here. 60
This filter function is going to look through each of the numbers inside this numbers array and for 61
each of these numbers, it's going to return only the ones that meet a particular criteria. 62
So we could say something like return num > 10. 63
In this case, we're looking through this numbers array here and we're checking each of the numbers. 64
So we first start with 3 then 56. 65
And for each of these numbers, we're checking to see if they're greater than 10. 66
And if they are then we're going to add it to a new array which is going to be the output of this function. 67
So let's create a const called newNumbers and set it to equal this. 68
And then we can go ahead and console log it. And you can see we get 56 and 48 69
the only two numbers that are greater than 10. Now you can of course switch this up so make it create 70
an array where the numbers must be less than 10, in which case we get 3, 2, 5. 71
And this is basically a way of adding a filter to your array and providing a condition that you want 72
to check for. 73
And if that condition is met and then create a new array with those items that actually return true. 74
I find it quite helpful usually thinking about these methods map/filter/reduce in the context of a method 75
that you should already be pretty familiar with which is the forEach. 76
So let's think about how we might do this with a forEach loop. So we might create a new numbers array 77
which is going to be empty, 78
then let's get hold of our numbers and then call forEach on it and then inside here will add an anonymous 79
function which will loop through each of the numbers inside here. 80
So we have access to each of the numbers inside our numbers array and then we're going to check, we're 81
gonna say if num is, 82
so we were checking less than 10 up here, less than 10. 83
Well then in that case we're going to push this number which meets this criteria into our array of new 84
numbers. 85
So newNumbers.push and we're going to push num in there. 86
Now when we log new numbers, you can see it's still the same but it obviously took a lot more effort 87
than simply just using the filter function. 88
Now the final one that sort of fits inside this set map/filter/reduce is the reduce function. 89
So the reduce function works by accumulating a value and doing something to each of the item in an 90
array. 91
So sounds a little bit confusing as well but it will be less confusing when we actually see it in action. 92
Let's say that I wanted to add and sum up all of the items in my numbers array. 93
Well if I wanted to do that with forEach then I would have to say something like numbers.forEach. 94
And then let's create an anonymous function in here for each number in numbers. 95
We're going to create a new variable which will call newNumber and set it to 0. 96
And then inside this loop, we would have to get hold of a newNumber and add the value of the current 97
number in the array. 98
So it might help if I actually rename this currentNumber. What this loop does is it goes through all 99
of the numbers in this array and for each of the current number that it's looping through, 100
so the first time it'd 3, then it's going to add that number to our new number. 101
So 0 becomes 3 and then the next time it loops around 102
this is 3 and it becomes 59 etc. etc. until we end up with the final value so we can go ahead 103
and log newNumber which is equal to 114. 104
This is the roundabout way of doing it. 105
Now what if we wanted to do it using our reduce function? 106
Well it's actually a lot simpler. 107
So we could say numbers.reduce and then we can pass in a function which takes an accumulator as 108
well as the current number. 109
And this is going to be the equivalent of that previous variable. 110
And then this is going to be the number which is equal to each and every iteration through the array. 111
And then inside the reduce function 112
I'm going to return the accumulator plus the current number and if we go ahead and save this to a variable 113
called newNumber, because we're really console logging it down here, then you can see the result is the 114
same as the previous method using forEach. 115
Now it might help if you actually go ahead and just console log 116
the value of accumulator and current number every time the loop is run in order to understand how this 117
reduce function works. You can see that the first time the loop is run the accumulator is already set 118
as the first value and the current number gets set as the second value. 119
The next time it's run, the accumulator has already been added to the current number. 120
So it's now equal to 56 but the current number now moves onto the next item in the array and so on and 121
so forth until we get to the end of the array and we end up with our total value. 122
So those three functions are probably some of the most useful JavaScript functions that actually exist 123
even before ES6. If you take a look at the MDN and develop a docs for map, filter and reduce which 124
are linked to in the course resources, you can take a look at how they work and what parameters they 125
take but also notice how their compatibility is across all browsers. 126
This was introduced way before ES6 and you can safely use this code anywhere on any browser. But the 127
next two that I want to talk about, the find and find index, were actually introduced relatively recently. 128
So what are they useful for? 129
Well find is a function that's going to help you find the first item that matches in an array. 130
So for example inside our numbers array, we could go ahead and call numbers.find and again it expects 131
a function. 132
So let's loop through all the numbers in our numbers array and then go ahead and find the first value 133
that is greater than 10. 134
So return num greater than 10. What this does, unlike the filter, is it's not going to loop through the 135
entire array. 136
It's going to stop as soon as one of these returns true. If we go ahead and save this to a constant 137
and log it, 138
you can see that it loops through our array but it's stopped as soon as it found the first item that 139
was greater than 10. And find index works in a similar way. 140
But instead of finding the first item instead what it does is it finds the index of the first item that 141
matches. 142
So in this case if we change find to find index, you can see it works pretty much the same way 143
but now we're getting the index of that first number that matches the criteria which is of course the 144
index 1 because arrays start from 0. 145
So all of these functions are not for you to memorize. 146
It will be really hard to remember all of these. But instead I recommend really understanding what's 147
going on and what the goals are of each of these methods 148
map, filter, reduce, 149
find and find index so that when you actually have a need for something that one of these functions 150
might be able to help you achieve somewhere in the back of your mind you might have a light bulb go 151
off and think oh yeah there was a function somewhere whether it was ma, filter or reduce I can't remember 152
but one of these can probably do what it is that I need. and then go and have a look at the docs and 153
find the function that you actually need and then quickly look through the demo and the documentation 154
to see what it actually does and how to use it. 155
So as I always stress, memorization is not what we do in the post at Google world. 156
So in order to test your understanding, I've got a challenge for you. 157
Go ahead and comment out any code that you've already got. 158
And feel free to save it inside this code sandbox for future reference if you want. But you'll notice 159
I've also included the emojipedia file that came from our previous code challenge. And what I want 160
you to do is to go ahead and import the emojipedia constant from our ./emojipedia file. And 161
then you'll remember that the emojipedia constant is also an array right? 162
So when we log it you can see we've got an array of three objects and each of these have a property 163
called meaning which contains a whole bunch of text. 164
So your goal is to create a new array that just has the meaning text. 165
For example this one, this one and this one. 166
But here's the catch. You have to truncate the text so that it only has a maximum of 100 characters. Here's 167
what it would look like if you have completed the challenge successfully. 168
So here's my new array that I've created using some sort of function. 169
And it logs each of these emoji meanings but it caps them, if you notice, at a hundred characters. 170
So they are all equally long. 171
And this is kind of useful 172
a lot of times when we're creating websites where we want these sizes of cards or boxes to be even across 173
our entire page. And we might just do a truncation like what I've got here. As a hint, you will need to 174
use a another method which you might have come across ages ago in the Javascript section which is called 175
substring. I've linked to the documentation on this method 176
so have a look at it. 177
Have a think about this problem and see if you can achieve this outcome and complete the challenge. Pause 178
the video now and give it a go. 179
All right. 180
Our starting point is three objects in an array. So we know that the map function helps us create a new 181
array by doing something with each of the items. 182
And that kind of matches what we want right? 183
Because in our case we want to create a new array of meanings. 184
And the doing something is to truncate it to 100 characters and we're going to do that to each item 185
in this emojipedia array. 186
Now that we've settled on the map function, let's go ahead and call it. 187
So we'll say emojipedia.map. 188
Now inside this map function, it of course expects a function which is going to give us every single 189
emoji entry. 190
So let's just call it emojiEntry. 191
So we've got three emoji entries each are an object. 192
And the first time this loops through it, what do we want to do with the emoji entry? 193
What do we want to do with it? 194
Well we want to take the emoji entry, so let's just focus on the first object for now, the emotive entry's 195
meaning, 196
so we're going to be tapping into emojiEntry.meaning, and we're going to try and use substring to 197
cut it down to 100 characters. Based on this demo 198
you can see that these substring takes the string and cuts it between the index specified at the first 199
and the second positions. 200
So in this case 0 1. 201
So it starts from 0 and ends at 3. 2, 3. 202
So we end up with 'oz' printed out. In our case if we want 100 characters printed, we can simply 203
use these substring method and cut it from 0 to 100. 204
Now that we've got this newly formatted meaning, what are we going to do with it? 205
Well we're just going to return it. 206
And what this does is it's going to build a new array which we can save into a constant newEmoji 207
pedia and it's going to create it from the meanings in our emoji entries from our emojipedia with only 208
the first hundred characters. 209
So let's go ahead and log this new emojipedia. And you can see that I've now got this new array and I've 210
cut the meanings all at a hundred characters. 211
So they are now equally long. 212
And this is achieved by using our map function which maps through this emojipedia array 213
and for each of the entries I've gotten hold of the meaning text and then I've cut it down to the first 214
hundred characters and then I've returned it to be added to this new array. If you didn't manage to complete 215
this challenge I recommend heading back to your code and trying to do this yourself from scratch and 216
play around with the code until it makes sense. 217
It's also worth having a quick read of each of these pieces of documentation which as usual is really 218
high quality and really helps you get even more understanding of each of these functions. 219
Now in the next lesson, we're going to learn about something that is ES6 specific and it's going 220
to help us to cut down on the length of our functions even more. 221
And that is the fat arrow also known as the Javascript arrow function. For all of that and more, 222
I'll see you there.