I must start by saying I love the .map, .filter, and .reduce methods in Javascript. However, for quite sometime, and still now, I occasionally find myself flipping back to MDN or W3 to look something up. That’s why I decided my next post would be a walkthrough to make me better remember these amazing tools.
.Map() Method
The JavaScript Map method iterates over every element in an array and returns a new array with the result. The .map()
and .forEach()
methods appear to have the same functionality; the key difference is .map()
ability to return a new a new array.
Syntax
The textbook syntax for the .map()
method is array.map(callbackFunction(currentValue, index, arr), thisValue)
.
Let's take each element by itself:
-
array - any JavaScript array, i.e.
let myArr = [1,2,3,4,5]
- map() - the method being called on myArr
- callbackFunction - a function, either name, anonymous, or arrow, that will iterate over each item in myArr
- index - (OPTIONAL) the index of the element in the array being processed
- arr - (OPTIONAL) the array the map method is being called on
-
thisValue - (OPTIONAL) value to use for
this
when executing the callback (we'll get tothis
at a later post)
As I said, the above syntax is "textbook." Below are three simple ways to utilize the .map()
method.
-
var b
utilizes an anonymous function -
var c
utilizes a named function -
var d
utilizes an arrow function
The .map()
method does not mutate the original array. In the code above, a
still evaluates to [1,2,3,4,5]
. If you are not using the new array or if you are not returning any values from the callback, .forEach
is probably the better option to use.
.Filter() Method
The .filter()
method, like .map()
, returns a new array from the criteria passed to each item of the original array. Filter
also uses a callback function. The best way for me to process how the callback function in .filter()
works is, the callback function is criteria that each item of the array is checked against. If the item evaluates to true, that item is "filtered" into the new array.
Syntax
The syntax for the .filter()
method is the same as .map()
.
array.filter(callbackFunction(currentValue, index, arr), thisValue)
.
-
array - any JavaScript array, i.e.
let myArr = [1,2,3,4,5]
- filter() - the method being called on myArr
- callbackFunction - a function, either name, anonymous, or arrow, that will iterate over each item in myArr
- index - (OPTIONAL) the index of the element in the array being processed
- arr - (OPTIONAL) the array the map method is being called on
-
thisValue - (OPTIONAL) value to use for
this
when executing the callback (we'll get tothis
at a later post)
Again, below are different examples utilizing the .filter()
method:
One thing to note, as I said, filter
returns a new array EVEN IF no items in the original array meet the criteria. If no items pass, an empty array is returned.
Below is an example in which Filter
could be used in a real-life example:
Here, an array of cities is listed (even though this is a short array, the concept can be extrapolated with larger Fetch requests). Next is a function that takes an array and searches criteria as arguments and returns a filtered array based on the search
parameter. In this example, the cities
array is being passed, and being asked to return all cities in that array that contain the letter "a".
There is another method that is typically paired when talking about map
and filter
and that's reduce
. However, there's a lot to the reduce
method and I think it deserves its own post.
With that, I hope someone finds this tutorial helpful, as I certainly did. I've only been posting a short time, but I've already found myself coming back to my post on destructuring to keep it fresh in my mind.
As always, happy coding!
Top comments (0)