Functional JavaScript First Steps

filter, map, & reduce Exercise

Anjana Vakil

Anjana Vakil

Software Engineer & Educator
Functional JavaScript First Steps

Check out a free preview of the full Functional JavaScript First Steps course

The "filter, map, & reduce Exercise" Lesson is part of the full, Functional JavaScript First Steps course featured in this preview video. Here's what you'd learn in this lesson:

Students are instructed create predicate functions that can be used with the filter function, implement a map function, and create "sum" and "max" reducer functions.

Preview
Close

Transcript from the "filter, map, & reduce Exercise" Lesson

[00:00:00]
>> So what we're gonna do in the next exercise is work with these functions. We're going to apply some of them, we're gonna get used to writing the type of functions that they take in and apply to the elements in the array. And we're also going to try our hand at implementing some of them, and understanding the implementations of them.

[00:00:22]
So that is going to be our next exercise, which is in the notebook exercise filter, map, reduce. So before we jump in, just wanna quickly pause, see if anybody has any massive questions. But hopefully since these are common array methods in JavaScript, this might not be the first time that we've seen them.

[00:00:40]
But if anyone has any questions, don't hesitate to ask. I see a question around weather map. And we can also say these other functions filter and reduce whether they mutate the array. So in JavaScript when you call array.map, it will actually return a new array. Again, the function that you pass in might be a mutating kind of function depending on what code you put in there.

[00:01:08]
There's nothing in JavaScript that's forcing there to be a mutation there, but map will produce a new array instead of an in place mutation of that array. However, in our exercise today, [COUGH] we're going to, so let me just switch over to this exercise, which again, you can always get to from that functional JavaScript first steps collection.

[00:01:34]
In our exercise, filter, map, reduce, we're going to take a look at how we can conceive of functions that do these operations like filter, instead of relying on JavaScript built in array.filter. This is because in a real functional style, we're actually going to do everything with these functions.

[00:02:00]
In this functional style of passing in the array that we wanna manipulate into the filter, function or map or reduce. Instead of a more object oriented style of calling methods on the array that we want to do something with. So we're actually gonna start to think about filter map and reduce as functions, instead of the array methods that we're used to thinking about in JavaScript.

[00:02:31]
That's gonna be part of the brain work you need to do in this exercise. You can see all of the instructions in the exercise, but essentially we're going to go through. There is a filter function that's been implemented for you using some little helper functions, like for example, length a function that you can call on an array, instead of calling array.length.

[00:03:02]
Again, this is all just to get us really, really practiced in using this functional style. Getting more used to using a functional kind of API for interacting with data and things, as opposed to the dot method object oriented API that we're more used to perhaps. So in these exercises, you're gonna be filling in some to TODOS.

[00:03:25]
You're gonna be finding some predicate functions and some map functions and some reducer functions that will produce the expected output. And in fact, you're gonna be writing your own implementation of map to see how you might do this in a functional way without cheating and using array.map. So challenge yourself see if you can do it without relying on those methods, there are some helper functions defined in here to help you do that.

[00:03:58]
The functions are described in there and you can also find the code for them down at the bottom of the page. One quick note about the way observable works is that, the cells do not need to be defined in the order that you want to run them. So you can actually call a function higher up in the page that you define lower down.

[00:04:24]
And that's sort of similar to function hoisting in JavaScript if you've run into that before. Although it works a little bit differently and observable and there's even less dependence on the linear order in which code is written. So just to let you know about the environment that they were working in here.

[00:04:43]
So we're going to be implementing map, we're going to be doing some challenges where we pass in new functions to map. And then we're going to also be working on getting used to writing these reducer functions which take an accumulator and a value, and produce a single value.

[00:05:01]
So go ahead at your own pace and go through this exercise. There are some exercises that are marked challenged those are kind of extra if you have the time. So try to get through everything that not before coming back to the challenge ones. And if anybody has any questions, we will definitely be able to dig into those when we review the exercises together.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now