Filter

[00:00:00]
>> Will Sentance: We were saying that, in fact, we got a whole number of built in functions available to all our arrays in JavaScript, higher order functions. Each of them iterate, loop through, an array that has access to them right here a dot filter, what's gonna be 1, 2, 3, 4, 5, 6 dot filter.

[00:00:19]
And then runs some sort of function. Look, there it is, greater than 2. Which is gonna take in a number and return the evaluated result of whether that number is greater or less than 2, true or false, and then does something else. They all behave differently. Our job is to go to MDN to figure that out.

[00:00:34]
We're gonna see one more here called filter. Then we're gonna see something called chaining, high order functions. I don't think it's the most functional programming style of writing code. But we're gonna see is actually the way that often people do do it in JavaScript. But then after that, by which time we'll have reinvigorated because of course now we've all just eaten lunch.

[00:00:59]
But by then, will be reinvigorated to see the functional programming style of writing clean compartmentalized little baby tiny functions and lining them up one by one by one, do that one, then do that one, then do that one. Composing little baby functions into bigger tasks, just like we compose little baby motifs in music into larger melodies.

[00:01:25]
>> Will Sentance: It's got the sender's resume the end somewhere. The toner, there's gonna be end of the sentence. There you go. Good.
>> Alex: [LAUGH]
>> Will Sentance: All right, here we go. So let's actually start off the way that JavaScript behind the scenes. As soon as you turn JavaScript on, it opens up its memory, it's store of data.

[00:01:41]
And into and actually behind the scenes, it sticks that, let's put it here, that object full of functions that are built in and available to all arrays. So we had reduce in there, we had filter. In there, we had map. In there, we had for each is another.

[00:02:13]
There's a whole bunch of them. I think I listed them all out there, right? You got like flat map and other ones as well. Okay, they're all available to all arrays. Well, let's get going. Line one, what is the array we're declaring right here, Alex?
>> Alex: What is the actual value of it?

[00:02:27]
>> Will Sentance: Just to tell me what doing in line one here.
>> Alex: We're putting a constant labeled array.
>> Will Sentance: Yeah.
>> Alex: To memory, the value is an array of 1, 2, 3, 4, 5, 6.
>> Will Sentance: Lovely, I like that clarity of technical communication as well Alex, thank you. 1, 2, 3, 4, 5, 6.

[00:02:44]
There it is. Okay, then, next line, David.
>> David: We are declaring a const of greater than 2.
>> Will Sentance: Const is our function.
>> Will Sentance: [LAUGH] Look at that. I converted f into greater than 2 and it's a regular old function. I really stressed David don't even say it's just a function.

[00:03:09]
It's a function. It's a function. It's a function that takes in nom and returns out the evaluated result yeah Boolean a true false whether nom is greater or less than 2. So it's run with a 3, it will return out true. If it's run with a 1, it will return out false.

[00:03:26]
Okay, now, final line, Virginia.
>> Virginia: So we have-
>> Will Sentance: Left hand side?
>> Virginia: Yes, a label filtered array.
>> Will Sentance: Perfect, great. And the right hand side says to go do what?
>> Virginia: Execute something on that array.
>> Will Sentance: Yeah, and the thing we're gonna execute is?
>> Virginia: Greater than 2 filter.

[00:03:48]
>> Will Sentance: Filter, filter, filter, definitely not greater than 2 we may not use it.
>> Virginia: Filter with the reducer.
>> Will Sentance: Yeah, not reducer. The reducer is specifically the function we take into reduce who takes each element of the array of reduce and accumulates it and combines it to get an output, which is then combined using the reducer with an excellent.

[00:04:09]
We'll see it again and again, don't worry. Yeah, so the court exactly the focus has been pausing the callback, okay. All right, so filtered.
>> Will Sentance: This is a very, very typical and usable function. I'm not going to go into massive detail of it, we're not actually going to show it for an execution context.

[00:04:28]
I'm going to give you a kind of truncated version of its execution context. There it is with the input of the entire greater than to functionality. There it is takes in, nom returns out, no greater than two functionality. You know what actually I'm going to evaluate the array piece here and put it straight in as, but it's 3ds in as what it's going to.

[00:05:00]
Actually be so it's slightly easier to see. It's going to be 1, 2, 3, 4, 5, 6 dot filter, wow. That is, that is not good is it? That does not look good for the long term for the long haul. Let's get rid of that, was if you rub really, really hard, side yeah, indeed.

[00:05:37]
All right, so let's head over here filtered, array will be the evaluated result of calling on array which is 1,2,3,4,5,6 filter. The method filter. How to get access to that filter method? Well that array has a bond through its object version, let's not get too bogged down in this through its proto property.

[00:06:13]
To what? So what Michael?
>> Michael: To the prototype?
>> Will Sentance: Yes shorter to the object full of functions here that we get access to. So when we do 1, 2, 3, 4, 5, 6 dot filter, we go and look at the array, the object bit of 1, 2, 3, 4, 5, 6.

[00:06:32]
And it's going to link down to a list of functions we can use when we find filter. Let's grab it and use it. Let's create. Yes, it does create an execution context. Here it is. I'm not going to talk about what's in his local memory. I'm just going to talk more generally the first thing filter does folk I'm just gonna tell you what it does we go with MDN to figure this out.

[00:06:52]
The first thing it does inside is create what what do you think the first thing it does anyone gets I guess Sam? David? Grayson?
>> Alex: Empty array.
>> Will Sentance: Right. Empty array, right good job exactly create an empty array into which we're going to stick anything It then runs this function greater than two on the zeroth element, then the oneth element and the two way through.

[00:07:17]
And it takes in that element and passes it into the execution context of greater than to the function we passed in with numbers a parameter which will be one, and then asked one is greater than two false and returns that falls out and moves on from that element.