6.2 Filter - Video Tutorials & Practice Problems

<v Instructor>Now that we've learned how to use map</v> to transform one array into another array by mapping a function over all the elements. We're going to learn how to use filter. To filter out elements that satisfy a certain criterion. For example, in this case, we're going to filter out from this list of states, the states that consist of only one word. As in the last section, first we'll solve the problem with an imperative solution. Oops. And I realized I forgot to put in the analogous. Comment here. This is the functional version of URLs. In this case, this is going to be single word states. Let's call it singles for short. As before it will take in a list of developments. By the way, sometimes I say list instead of array, because as long as you can use forEach, it actually doesn't matter very much. We'll almost always be using arrays, but there are cases as we'll see in the final chapter, where we've got a collection of elements that can be iterated through. That's not technically an array, but we can still use these techniques. All right. So how are we going to select from this list? Just the elements that are a single word. Well, as before, it'll start with an empty array. In this case, let's call it singles. And then for each element, we'll push it to this array. If the result of splitting it on white space has length one. elements.forEach element. If... Splitting on white space gives you an array of length one ever triple equals, then we'll push that element onto the list of singles. And then as before, we'll just return the array. States. Let's think about what this should be. So it should be Kansas and Nebraska, North Dakota and South Dakota both have two words. So we go into here, we've got the full states array, initialized singles for each. Kansas and Nebraska both have length one when you split them on white space. So we should get just Kansas and Nebraska. Let's take a look at the command line. And there we go, Kansas, Nebraska. Now we'll learn how to do the same thing with filter. As before we'll start with the numeric array in the REPL just for demonstration purposes. As an example of filter, let's take an array of numbers, and filter on whether they're even or not. So the result will be just the even numbers in an array of numbers. In order to do this, we need to know how to determine whether or not a number is even. And the way to do this is with an important operator called the modulo operator, or mod written using the percent sign. So for example, 16 % 2 is the remainder that we get when we divide 16 by two. Since 16 divides evenly by two, 16 divided by two is eight. This is zero. There is no remainder. But we were to say 17 % 2, well 17 divided by two is eight with a remainder of one. So by looking at whether a number is zero or 1 % 2, we can determine whether to even or odd. 16 % 2. Well, if it's triple equals to zero, that means it must be even, that's true. 17 % 2 === 0, that's false. So this is a test for evenness that we can then apply to an array like this. Just go up to eight, and we can filter the even numbers from this by calling filter, and then giving it an anonymous function that returns true if the element is even. So remember with map we just have n =&gt; the same syntax is map. Except here we're gonna say n % 2 === 0. That selects out the even numbers. So this should be [2, 4, 6, 8]. All right. Now let's apply the same idea to the function in our file. So here we had this imperativeSingles. Let's go down here, let's copy this. This is the functional version. We'll call it functionalSingles. And so now all we need to do is say elements.filter, and then a function that returns true for the elements we want. But we already have that right here. It's this, it's this test. It's the test inside the if statement. So we can say elements =&gt; and then just the exact thing we did in the imperative singles function. But this is it. This is the thing we want to return. It's the filtered version of the array. So we can just return it. Check it out. There we go. We can see that as with map we've converted this rather long imperative version into a single line. And indeed there are a lot of parallels. In both cases, in the imperative version we started with an empty array, and then mutated it based on some criterion. In this case, we're selecting the elements that have length one. In this case, we're pushing on the urlify versions, and then we return the result. And in both cases, we could convert this sort of thing with a forEach loop and an auxiliary variable that we mutated into a single line like this. As with map, the result is more compact, easier to understand and easier to maintain if that is, you know, functional programming.