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.

Cavern

var uniqueArray = [...new Set(arr1)]; – Rabiah

Answer 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.

Rayner

Answer 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

Tourneur

Answer 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.

Matson

I like the way you explain the behavior. You give a complete explanation while being concise. – Dameron

Answer 4

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.

Burglar

Answer 5

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);

Militant

Answer 6

The return is testing for i being equal to the index of the found element, so the function return will be true or false.

Perishable

Answer 7

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);

Let me try to explain the code and its result .

The Array.prototype.filter can take three arguments . In your code ,

1. elem is an element of the Array arr1.
2. i is the index of elem in the arr1.
3. it has an index in arr1 .
4. rep is the same Array as arr1. Just consider rep as arr1.

According to [MDN's article][1] indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.

Now we can try to understand what the code does .

1. if we suppose that the value of elem is 'a' , rep.indexOf(elem); will return 1.
2. Suppose that elem is 'a' and the index of elem i is 3 , return i == rep.indexOf(elem); will return false and will return true when i the index is equal to 1.

That means the the filter will return an array with the values of what is in the first index of each element in the Array.

Let simulate the code :

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

var uniqueArray = arr1.filter(function(elem,i,rep){
    console.log("index  :"+i+" first indext of this value: "+rep.indexOf(elem)+" element :"+elem+ " is filterable :"+(i == rep.indexOf(elem)) );
    return i == rep.indexOf(elem);
})
console.log(uniqueArray);

Cowherb