javascript - Confusion with how indexOf works in JS - Stack Overflow

I am new to JS and was trying to learn how to properly work with indexOf in JS, that is, if you look at the code below:

var sandwiches = ['turkey', 'ham', 'turkey', 'tuna', 'pb&j', 'ham', 'turkey', 'tuna'];

var deduped = sandwiches.filter(function (sandwich, index) {
    return sandwiches.indexOf(sandwich) === index;
});

// Logs ["turkey", "ham", "tuna", "pb&j"]
console.log(deduped);

I am trying to remove duplicates but wanted to ask two questions. Firstly, in here return sandwiches.indexOf(sandwich) === index; why we need to use "== index;". Secondly, since indexOf returns index like 0, 1 or 2 ... then why when we console.log(deduped) we get array of names instead of array of indexes. Hope you got my points

I am new to JS and was trying to learn how to properly work with indexOf in JS, that is, if you look at the code below:

var sandwiches = ['turkey', 'ham', 'turkey', 'tuna', 'pb&j', 'ham', 'turkey', 'tuna'];

var deduped = sandwiches.filter(function (sandwich, index) {
    return sandwiches.indexOf(sandwich) === index;
});

// Logs ["turkey", "ham", "tuna", "pb&j"]
console.log(deduped);

I am trying to remove duplicates but wanted to ask two questions. Firstly, in here return sandwiches.indexOf(sandwich) === index; why we need to use "== index;". Secondly, since indexOf returns index like 0, 1 or 2 ... then why when we console.log(deduped) we get array of names instead of array of indexes. Hope you got my points

• javascript

Share Improve this question Follow edited Sep 14, 2019 at 11:19 Dickens asked Sep 14, 2019 at 11:14 DickensDickens 91544 gold badges1212 silver badges2727 bronze badges 0

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

You use a method of Javascript Array that is filter, this method take a function that returns a boolean.

The function filter returns a new Array based on the function passed applied to each entry.

If the function return true, then the entry is included in the new Array, otherwise is discarded.

As the functions check the indexOf an entry to be the current index is true for the first occurrency of the entry.

All the duplications will fail the expression as they are not the first index found by indexOf, so they are discarded.

1. since the logic is to remove the duplicates from the array, in your example, you have "turkey" as duplicates. the "turkey" exists in position 0,2,6 so whenever you call indexOf("turkey") always returns 0 because the indexOf function returns the first occurrence of a substring. so for the elements in position 2 & 6 the condition fails. then it won't return that element.

2. That is how the filter works in javascript. it evaluates the condition and returns true or false that indicates whether an element to be included in the new array or not, in your example the condition is return sandwiches.indexOf(sandwich) === index;

Perhaps the basic logic is easier to see at a glance if you use arrow notation:

const deduped = myArray => myArray.filter((x, i) => myArray.indexOf(x) === i);

The key point is that indexOf returns the index of the first occurrence of x. For that occurrence the result of the parison will be true hence the element will be retained by the filter. For any subsequent occurrence the parison will be false and the filter will reject it.

1. Difference between === (identity) and == (equality): if type of pared values are different then === will return false, while == will try to convert values to the same type. So, in cases where you pare some values with known types it is better to use ===. (http://www.c-point./javascript_tutorial/jsgrpComparison.htm)

2. You get as result an array of names instead of array of indexes because Array.filter do not change the values, but only filter them. The filter function in your case is return sandwiches.indexOf(sandwich) === index; which return true or false. If you want get the indexes of your items after deduplication, then use map after filter:

a.filter(...).map(function(item, idx) {return idx;})

@Dikens, indexOf gives the index of the element if found. And if the element is not found then it returns -1.

In your case you are filtering the array and storing the values in the deduped. That's why it is showing an array.

If you console the indexOf in the filter function then it will log the index of the element.

For example :

var deduped = sandwiches.filter(function (sandwich, index) {
   console.log(sandwiches.indexOf(sandwich));
   return sandwiches.indexOf(sandwich) === index;
});