Can someone help me understand what is going on in symmetric difference intermediate solution

JavaScript
1

here is the solution

function sym() {

  // Convert the argument object into a proper array
  var args = Array.prototype.slice.call(arguments);

  // Return the symmetric difference of 2 arrays
  var getDiff = function(arr1, arr2) {

    // Returns items in arr1 that don't exist in arr2
    function filterFunction(arr1, arr2) {
      return arr1.filter(function(item) {
        return arr2.indexOf(item) === -1;
      });
    }

    // Run filter function on each array against the other
    return filterFunction(arr1, arr2)
      .concat(filterFunction(arr2, arr1));
  };

  // Reduce all arguments getting the difference of them
  var symarray = args.reduce(getDiff, []);

  // Run filter function to get the unique values
  var unique = symarray.filter(function(elem, index, self) {
    return index === self.indexOf(elem);
    });
  return unique;
}

// test here
sym([1, 2, 3], [5, 2, 1, 4]);

I have put this code in python javascript tutor. What I don’t get is why when the code reaches var symarray = args.reduce(getDiff, []);
it goes the the second return filter function.

Why doesn’t it go in order after the reduce function get called to getDiff. to the first filter function to the second filter function.

3

Concat return an array composed by the element on which is called ( the result of the first call at filterFunction ) and the elements passed as arguments ( in this case the array returned from the second call to filterfunction).
The first call filter the elements from the first array that you find into the second array too, while the second call makes the opposite: filter from the second array the elements you can find also in the first array.

At that point you have the unique elements of the first array respect to the second array, concatenated with the unique elements of the second array respect to the first.

The last part filter the elements not unique in the array returned from the operation described above.

4

I am more confused on how it executes.

In the javascript tutor http://pythontutor.com/javascript.html#mode=display

It executes as fallows

  1. Turns arguments into actual arrays
    2.var getDiff = function(arr1, arr2) { ////gets declared
    3.var symarray = args.reduce(getDiff, []); the reduce function gets called and uses getDiff as a callback for the reduce function
    Here is where the confusion starts
    3.return filterFunction(arr1, arr2) this lines is then executed
    4.then return arr1.filter(function(item) { gets executed
    (why does it got to return filterFunctionarr1, arr2) and not function filterFunction(arr1, arr2) {
    The rest i can figure out.
6

gotcha I wondering how you guys did that.

7

3.return filterFunction(arr1, arr2) this lines is then executed

Pay attention, even if splitted in two lines the block of code executed here is:
filterFunction(arr1, arr2).concat(filterFunction(arr2, arr1));

Which means that you’re calling the function filterFunction twice ( the first one with args(arr1, arr2) and the second one with (arr2, arr1) )and through the .concat operator you’re ‘merging’ the results.

4.then return arr1.filter(function(item) { gets executed
(why does it got to return filterFunctionarr1, arr2) and not function filterFunction(arr1, arr2) {

Because function filterFunction(arr1, arr2) is not executed until it being called. The whole declaration block is:

function filterFunction(arr1, arr2) {
    return arr1.filter(function(item) {
       return arr2.indexOf(item) === -1;
   });
}

To get this function to be executed you need to call it, and this happens in the follow line(s):

return filterFunction(arr1, arr2).concat(filterFunction(arr2, arr1));