Chaining Array Methods

[00:00:00]
>> Will Sentance: When it hits an element where it runs this function on it and it gets a return value of true. It takes not true and put it in the array, no, no, no. It takes the element itself, sticks it in the array. That's all the filter does. We're not gonna build it out ourselves.

[00:00:15]
It's not hard to do so, but that's all it's doing. So let's take the first element, the 1. And it's going to be inserted into the greater than 2 function. So we do greater than 2, taking the 1, creates, everybody, a new?
>> Jasmine: Execution.
>> Will Sentance: Execution context, exactly, there it is.

[00:00:35]
Into it we go and in the local memory.
>> Will Sentance: Jasmine, we're running greater than 2 inside of filter on the first element of the array, which is the number 1. And into the 1, 1 gets thrown into greater than 2, Jasmine. Therefore, our parameter that is assigned that 1 is what?

[00:00:59]
>> Jasmine: Num.
>> Will Sentance: Num, exactly. And then we've got numbers, or a greater than 2, which is reading return num greater than 2. 1 greater than 2 evaluates to what, Jasmine?
>> Jasmine: False.
>> Will Sentance: False, and we return out false. And so we move the hell on. And we do with 2 greater than 2, input of 2.

[00:01:20]
Well, presumably, that still also returns out false. Now we take the 3, and we call greater than 2 on the 3. Let's do the execution context this time. And Jasmine, the num value here will be what?
>> Jasmine: 3.
>> Will Sentance: Num will be 3. 3 greater than 2, Jasmine?

[00:01:49]
>> Jasmine: True.
>> Will Sentance: True, return it out. And the way filters written, and we're not interested desperately in how it's doing this, but we have to sort of figure it out, right? It's when it pauses in the 3, if it returns out true from greater than 2, it's gonna grab that 3 and stick it in the new array.

[00:02:07]
Same with 4, in it goes. Same with 5, in it goes. Same with 6. And then this array gets returned out 3, 4 ,5, 6. We're gonna see later on, note, we have not mutated, altered our underlying array. Meaning the result of this line running filter on that array with that condition is all self-contained to that line, unless we assign it to a global like this.

[00:02:39]
It's all self-contained to that line, or that's maybe our problem, hold on. Do I wanna be assigned to a global and have another line of code al that all other lines of code depend on? No, there's a way around it, folk. We can chain these higher order functions together.

[00:02:57]
We can do this. Look at this, array dot filter parsing greater than 2. I didn't show you this directly, gonna show you now. It actually turns, array evaluates to 1, 2, 3, 4, 5, 6 becomes 1, 2, 3, 4, 5, 6. Running filter with the parenthesis. This whole portion will actually become what?

[00:03:23]
Raise your hand if you wanna tell me what this whole portion will become to JavaScript? Yeah, Eric.
>> Eric: An array with 3, 4, 5 and 6.
>> Will Sentance: Exactly, it evaluates to our array of 3, 4, 5, 6. Now, that array has access to what collection of functions, Eric?

[00:03:41]
>> Eric: The prototype chain.
>> Will Sentance: Up the chain, up the chain,
>> Will Sentance: To our shared collection of functions that all arrays get access to. Meaning, do I need to save this result to another label and then go and grab these functions? Or can I? David shakes his head, he's right.

[00:04:07]
Can I just literally write dot reduce, right there on the end, whenever I wanna do. And know that I can stick it right on the end. Meaning array dot filter being called greater than 2 2 becomes 3, 4, 5, 6 from our original 1, 2, 3, 4, 5, 6.

[00:04:25]
And then that, we run the reduced method on because the array or arrays have access to the shared functions. We put dot reduce. Well, let's just quickly remind ourselves of how reduce works. So 3, 4, 5, 6 reduced with the input of 0. How are we combining the first two, Virginia, by what rule for combining the first, by adding?

[00:04:50]
There it is we get 3. Combined with the next one, we get 7, combined the output of that combination, that reduction of 2 to 1. When 2 becomes 1, we combine with the next value, which gives us 12. The output of that gives us 18. Meaning what does this portion evaluate to, David?

[00:05:12]
>> David: 18.
>> Will Sentance: To 18, to 18, and there it is, people. Meaning array dot filter being called with greater than 2, that evaluated to 3, 4, 5, 6. And then that got dot reduced and that evaluated to 18. And that means the whole block evaluates to 18. Alex, we do what with that 18?

[00:05:33]
>> Alex: Starting sum of greater than 2.
>> Will Sentance: Starting sum of greater than 2, exactly. Well, we had array from our earlier version. We store it into sum of greater than 2, which is a good name for it, right? Because we filled that array down to 3, 4, 5, 6 and some up.