filter, map, & reduce

[00:00:00]
>> Let us continue our journey through the techniques in a functional programmers toolbox by talking about higher order functions, and in order to talk about higher order functions, we're also gonna need to think about first class functions. Now, first class functions is just the term again, the terminology is not important, but it's a term you might have seen thrown around in the context of functional programming.

[00:00:29]
And you may also have seen it in the context of JavaScript regardless of functional programming. Because we say a language has first class functions, when the language supports functions being passed around as values, just like strings or arrays or numbers. And JavaScript supports this, JavaScript has first class functions.

[00:00:55]
We probably have already encountered this in JavaScript, if you've ever used a callback. Where you pass in a callback function as an argument to another function. Now that might not be a pure function. It might not be a functional style, but that is an instance of using, of taking advantage of first-class functions because we can pass in functions, pass them around like data.

[00:01:19]
Now, in a functional world, where we said our programs are functions, our programs are made up of functions, that becomes really useful because we can pass functions around, in and out of other functions. Another term that comes up, then again, just to de scarify it, we're just gonna talk about it but we don't need to concentrate too much on the terminology is higher order functions.

[00:01:46]
So a higher-order function is a function that takes in another function or maybe it takes in a couple of functions, or it returns out another function. Or again, maybe it takes in one function and returns a different one. So a higher order function is a function that takes other functions as inputs and or outputs.

[00:02:13]
And higher-order functions are a key technique that we're gonna end up working with in functional programming is getting used to this idea that functions can take functions functions can give functions back. That's gonna become really useful, especially when we try to put functions together into more complex programs.

[00:02:35]
So, another thing that this relates to is that higher order functions can be really useful for another alternative to iteration. So you may have already encountered higher-order functions when you've used things like array.map, or array.filter, or reduce. These are methods that we call on JavaScript arrays, but they are also higher-order functions in the sense that they take in another function as an argument, which they then apply to some kind of iterable object, like an array.

[00:03:15]
And map, reduce and filter are like three super useful little functions in the functional programmers toolbox because they allow us to really think about our applications of what we might usually use an iterative loop to iterate over an array or something that. It allows us to think about processing that array with functions instead of with those loops I don't know if anyone has ever seen this graphic before.

[00:03:50]
But when I was learning what filter, map and reduce are, this was one of the most helpful things that helped me understand what is going on with these functions. I like to call it the filter map reduce sandwich. It is an adaptation of someone else's graphic. The link is there.

[00:04:08]
Was just the MapReduce sandwich. But I think this is a beautiful demonstration of how these higher order functions work. So okay, all three of these functions filter, map and reduce take in an array. They operate on an array. And they operate on. They use another function that they take in as input to do something with each element in that array.

[00:04:33]
So filter takes in an array and let's say I have an array of like, sandwich ingredients here an array of ingredients. Filter takes in some kind of function which that inner function will take in one element and return a true or false Boolean value. So we call that type of function, the type of function that returns true or false on a single element, a predicate function.

[00:05:03]
That's not super important, but you might see that term thrown around. So let's say I have a function like is not gross. And I use that to map over, sorry, excuse me to filter all of these elements to remove the ones that are gross and leave me with only the ones that are not gross.

[00:05:26]
So let's say I think that cucumbers are gross. And I think that onions are gross, but everything else here is okay. If I apply a filter to my ingredients array, using my is not gross predicate function, I'll get out a shorter array which only has the things That returned true for my predicate function so bread, not gross, cool.

[00:05:51]
Cucumbers cross boo does not make it through peppers, not gross, awesome and so on and so forth. Cool. hope everybody's with me so far. Okay map is a similar function in the sense that it takes in an array. In this case, maybe we could take in a shorter array of not gross ingredients.

[00:06:12]
Map is also gonna take in a function but it's gonna be more of like an operation function. So maybe I have an operation like cut, or chop or slice, slice like tomatoes, not slice like an array slice I'm gonna pass in that function and my erase to the map, and it's going to apply that function to each element in the array.

[00:06:35]
So now I'm gonna get a cut bread and cut peppers and cut tomatoes and cut lettuce. So hopefully these are not super earth shattering. Hopefully maybe we've worked with these on array methods in JavaScript before. The third one for me is the hardest to wrap my head around.

[00:06:57]
Reduce is a little bit different, because unlike filter and map which both take in an array and a function and return another array. Reduced takes in an array in a function, but it returns a single value. So we can think of it as it's taking that array of all these values and reducing them down to one value that comes out of the reduce function.

[00:07:22]
And in this case, the value that I'm trying to produce is a sandwich. So I'm gonna have to pass in some kind of function that's going to take successive elements of that array and combine them into some kind of accumulated value. So maybe I have a function like layer or stack again, not like call stack but like making a sandwich.

[00:07:48]
So, I am going to take, let's say the bread in and there's nothing to stack it with. So I'm just gonna stack it on top of itself. Then I'm gonna take the peppers in the next call by function and apply stack to my pre stacked bread and get a stack of bread and peppers.

[00:08:08]
Then I'm gonna take the tomato function and apply that, excuse me, I'm gonna take the tomato element in, and apply my stacking function to the tomato and my existing bread and pepper stack, and get a bread, pepper, tomato, stack, and so on and so forth until I've accumulated up everything I want in my sandwich.

[00:08:29]
So usually a reduced function has a excuse me a word the function that a reduce function takes in which we could call a reducer function usually has the notion of some kind of accumulator, some kind of value that allows me to stack up those intermediate values as I go.