Unable to understand this JS code [Array and Filter]

Question

I came across a question which asked us to

combine arrays

var array1 = [1, 2, 3]; 
var array2 = [2, 30, 1];

and then remove all duplicate items so expected output was

[1, 2, 3, 30]

in the comment section there was this solution which I'm unable to understand:

var array1 = [1, 2, 3];
var array2 = [2, 30, 1];
function concatArrays(array1, array2){
    var concated = array1.concat(array2);
    var solution = concated.filter(function(element,Index,self){
        return Index== self.indexOf(element);
    });
console.log(solution);
}
concatArrays(array1,array2);

So I want to understand this line

var solution = concated.filter(function(element,Index,self){
        return Index == self.indexOf(element);
    });

I know what the filter method does, but then in the return part I'm unable to understand his code.
This is what I think the return part does:
Compare index of element with the index of current element. If it's equal then return else don't do anything.
I don't know if my interpretation is right or wrong.

What part about the return don't you understand? Its comparing 2 indices. — Carcigenicate
– Carcigenicate, Commented Mar 25, 2017 at 15:14
<b>EDITED </b> @Carcigenicate its comparing two indices then how is it able to remove Duplicate value ?? example if element is 1 and then its converted into 0 using indexOf() after that its compared to index of its own element so how is it able to remove duplicate data ? — Ayush Katoch
– Ayush Katoch, Commented Mar 25, 2017 at 15:18
It compares the current index with the index of the first occurance of this element in the array. And the uppercase Index in this code stinks; it's no class. — Thomas
– Thomas, Commented Mar 25, 2017 at 15:19

Nina Scholz · Accepted Answer · 2017-03-25 16:33:24Z

You could insert an output for every step of the filter loop and check the values, you get

                                                   result
  element       index     indexOf   comparison      array
----------  ----------  ----------  ----------  ----------
        1           0           0        true           1
        2           1           1        true           2
        3           2           2        true           3
        2           3           1       false
       30           4           4        true          30
        1           5           0       false

As you see, the item gets in the result if the comparison is true. That means, the actual element's index has to the same as the value of Array#indexOf. indexOf returns the first index of the wanted item or -1 if not found. Therefore if the index and the value of indexOf is not equal, then you have the second or third value found, but not the first.

function concatArrays(array1, array2) {
    var concated = array1.concat(array2);
    console.log('element', 'Index', 'indexOf', 'comparison');
    var solution = concated.filter(function (element, Index, self) {
        console.log(element, Index, self.indexOf(element), Index == self.indexOf(element));
            return Index == self.indexOf(element);
        });
    console.log(solution);
}

var array1 = [1, 2, 3];
var array2 = [2, 30, 1];

concatArrays(array1, array2);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Sagar V · Accepted Answer · 2017-03-25 15:29:15Z

0

Filetr function is realy easy it creates new array based on prev array and passed function.
If function passed returns true element is pushed else not.

This is simple implemenation of this function to help you understand it:

function Filter(array, func) {
  var newArray = [];
  for (var i = 0; i < array.length; i++) {
    if (func(array[i], i, array)) {
      newArray.push(array[i]);
    }
  }
  return newArray;
}

console.log(Filter([1, 1, 1, 2, 3, 4], function(element, index, self){
    return index == self.indexOf(element);
}))

Now if we iterate over array elements and for each we check if that item is found at it index because indexOf returns first index found we don't add duplicates.

edited Mar 25, 2017 at 15:29

Sagar V

12.5k8 gold badges46 silver badges71 bronze badges

answered Mar 25, 2017 at 15:17

Maciej Kozieja

1,8751 gold badge14 silver badges34 bronze badges

1 Comment

Sagar V Over a year ago

You had a typo in found

Collectives™ on Stack Overflow

Unable to understand this JS code [Array and Filter]

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related