CODEWITHSUNDEEP
javascriptarraysindexof
Nicolae Stroncea
Nicolae Stroncea

Reputation: 627

How to use indexOf with filter() in JavaScript

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.

Upvotes: 7

Views: 19485

Answers (7)

Ori Drori
Ori Drori

Reputation: 192252

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.

Upvotes: 3

marvel308
marvel308

Reputation: 10458

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

Upvotes: 3

Abhilash A S
Abhilash A S

Reputation: 7

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

Upvotes: 1

thecassion
thecassion

Reputation: 546

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

Upvotes: 0

Dan Kreiger
Dan Kreiger

Reputation: 5516

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.

Upvotes: 1

Carsten Massmann
Carsten Massmann

Reputation: 28206

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.

Upvotes: 2

SPlatten
SPlatten

Reputation: 5760

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

Upvotes: 0

Related Questions