JavaScript filter () method confusion

Question

I work through JavaScript: A complete guide as part Learn JavaScript correctly and am having trouble discussing filter() in Chapter 7 of the Array Methods section.

Here is an example:

The filter() method returns an array containing a subset of the elements of the array on which it is called. The function you pass in must be a predicate: a function that returns true or false. the predicate is called the same way as forEach() and map() . If the return value is true or a value that is converted to true, then the element passed to the predicate is a member of the subset and is added to the array, which will become the return value.

Examples:

 a = [5, 4, 3, 2, 1]; smallvalues = a.filter(function(x) { return x < 3 }); // [2, 1] everyother = a.filter(function(x,i) { return i%2==0 }); // [5, 3, 1] 

Where am I confused how exactly is i applied to x in everyother line. That's what I think:

• i (index a[] ) is passed through the function x , which applies the predicate to each element a[] and returns [4, 2] .

• Then the function says "filter [4, 2] out of a[] " ... I really don't understand how.

When I get confused in the console, I tried:

 everyother = a.filter(function(i) { return i%2==0 }); // returns [4, 2] 

which I would expect, but I don’t understand what is going on inside, how JS handles the parameters when I change the above code to

 everyother = a.filter(function(x,i) { return i%2==0 }); // returns [5, 3, 1] 

(I know that array methods are applied like this: function(element, index, array) )

In this specific example, it is obvious to me that I could get the expected result in a different way:

 everyother = a.filter(function(x) { return x%2!=0 }); // returns [5, 3, 1] 

But I suspect that the line of thinking definitely misses the point to which I try to try to give an example ... I just missed it.

Answer 1

When you call filter using a function of two arguments, the first argument is bound to the value of the array element, the second (optional) to the index of the element.

Your confusion stems from the fact that the input array [5,4,3,2,1] somewhat specific - elements that even have indices (5, 3, 1) are odd, and elements with odd indices (4, 2 ) are even.

Thus, this filtering predicate ...%2 always selects elements of the same type, depending on what you pass as a parameter to the predicate (value or index), you will get odd or even elements.

My advice on clearing up the confusion is to select a different array to test your filtering method. The array should mix the weirdness of the indices and values, something like [1,3,4,5,7,8] . You will immediately notice what happens when a predicate takes into account a value or index.

Also remember that when creating a filter predicate, the names of formal parameters are arbitrary, which matters for their position. The first parameter, no matter what you call it, means the value, the second is the index. If you accidentally run into parameter names and you call your first parameter i , and then your second parameter i , then it communicates with something else in both scenarios.

Answer 2

Your example is very simple and straightforward:

 a = [5, 4, 3, 2, 1]; smallvalues = a.filter(function(x) { return x < 3 }); // [2, 1] everyother = a.filter(function(x,i) { return i%2==0 }); // [5, 3, 1] 

The first reads: "Give me back every element (x) that is less than 3." The result is not astounding.

The second reads: "give me back every element whose index (i) is even (including 0)"

x is simply ignored.

You could also write [5, 4, 3, 2, 1].filter(function(_,x){return x%2===0})

See MDN for Array.prototype.filter() .

Answer 3

 a = [5, 4, 3, 2, 1]; everyother = a.filter(function(x,i) { return i%2==0 }); // [5, 3, 1] 

x - each element in the array (first iteration x = 5, second iteration x = 4, etc.)
i - index - (first iteration i = 0, second iteration i = 1, etc.)

So, in the question (for the first iteration-i% 2 becomes 0% 2 equal to 0, and the condition becomes true. And the first element is returned to the array. After returning, 5 is returned). next, 1% 2! = 0, so 4 is deleted. 2% 2 == 0, therefore 3 remains. (etc..)

In this syntax: - x is relevant for each iteration, but it is not used in state.

Tip: filter () always expects a boolean value. And everything that is returned (true or false) determines whether the value (or element) remains in the array or not.

Answer 4

Its simple ... in everyother , i is the index of each element, and only the possible values ​​of i are 0,1,2,3,4, since you have five elements in the array. Now of all the values ​​of i only 0.2.4 are divided by 2 and that you get the values ​​of these indices, i.e. [5,3,1] .