How to use indexOf with filter() in JavaScript

Question

This is the code I found as an answer to this question: Write a JavaScript program to remove duplicate items from an array (ignore case sensitivity).

var arr1=[3, 'a', 'a', 'a', 2, 3, 'a', 3, 'a', 2, 4, 9, 3, 'A'];

var uniqueArray = arr1.filter(function(elem,i,rep){
    return i == rep.indexOf(elem);
})
console.log(uniqueArray);

I know what filter() does and that indexOf is used to find the index of the first occurence of an element, but I don't understand how this line:

i == rep.indexOf(elem);

introduces only the unique elements to uniqueArray.

Solution 1

According to MDN's article about Array#indexOf:

The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.

In the code you've presented:

var uniqueArray = arr1.filter(function(elem,i,rep){
    return i == rep.indexOf(elem);
})

The variable i in the filter's callback is the index of the current item in the array. If there is more than one appearance of an item, the current index (i), and the index returned by Array#indexOf would be different for duplicated values after the 1st. In this case the filter callback will return false, and the duplicated value will be filtered out.

Solution 2

var arr1 = [3, 'a', 'a', 'a', 2, 3, 'a', 3, 'a', 2, 4, 9, 3, 'A'];

var uniqueArray = arr1.filter(function(elem,i,rep){
        return i == rep.indexOf(elem);
    });
    
console.log(uniqueArray);

here elem would contain each element of the array, i would be the index of the current elem and rep would contain the whole array
now rep.indexOf(elem); would always give the index of the first occurrence of the element now Array.prototype.filter() works in a way that if you return true, it would not filter it but if you return false, it would filter it out so every element except the first occurrence gets filtered out

Solution 3

i == rep.indexOf(elem);

will always return the first index under which the element has been found in the array, so only the first of any copies will be accepted in the filtered array.

Solution 4

var arr1 = [3, 'a', 'a', 'a', 2, 3, 'a', 3, 'a', 2, 4, 9, 3, 'A'];

var newArray = 
 arr1.filter(
  (obj,index,array)=> {return array.map(el => el).indexOf(obj) == index}
            );
  
console.log(newArray);

Solution 5

From w3schools

array.filter(function(currentValue, index, arr), thisValue)

In the .filter method from your example, the function is iterating through each index and using indexOf to find as you said: "the index of the first occurrence."

During the iteration, the index i comes across repeated elements, and you use a test to see if this i is equal to the index of the current element in the given array.

From the w3schools:

The filter() method creates an array filled with all array elements that pass a test (provided as a function).

The test in your example is i == rep.indexOf(elem);.

When the iteration reaches index 2, the element is a. However, the element a's first occurrence is at index 1. At this point, i=2 but rep.indexOf(elem) = 1. The test returns false, because 2==1 is false.

This false return excludes the repeated element a at index 2 from the newly created array.

View more solutions