Help Me Understand .filter() and This Test

JavaScript
#1

I don’t understand the return value of this function.

let x = function(names) {
    return names.filter(function(v, i) {
        return names.indexOf(v) === i;
    });
};

const names = ['John', 'Paul', 'George', 'Paul', 'Ringo', 'John'];

It returns ['John', 'Paul', 'George', 'Ringo']

Why does the test return false to the second instances of ‘Paul’ and ‘John’? To me, the .indexOf() is checking if v is the value at index i, but the values of second ‘Paul’ and ‘John’ are those values at index i.

Confused :face_with_raised_eyebrow:

#2

Hey!

This function is removing duplicates from the names array. .filter will only return values where the predicate (the call back function passed in as an argument to .filter) is true. In this example, that predicate is:

function (v, i) { return names.indexOf(v) === i; }

What is this function doing?

v stands for value. i stands for index. For each value within the names list, the function will check if the index of the name provided in the names list is equal to the index during .filter's iterations. Let’s look at a couple examples:

The first time value the function comes across is “John”. The index of the first occurrence of John in the names list is 0. That is true, so that value gets included in the output list. The same goes for “Paul” and “George.”

However, something interesting happens when it gets to the 2nd occurrence of Paul in the names list – it returns false. Why?

Array.indexOf returns the index of the first element it finds matching the provided argument. In this case, the first occurrence of “Paul” is at index 1. When .filter evaluates function (v, i) { ... }, the index of the first “Paul” in the names list is 1, but the filter function has iterated all the way to position 3 by name (already processing “John”, the first “Paul” and “George”). Therefore, this 2nd occurrence of Paul does not get included in the output.

Hope that helps!

2 Likes
#3

Riiiiiiight!! Thank you!!

I had forgotten that .indexOf() returns the index of the first instance of that element. That’s what got me so hung up.

1 Like
#4