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

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.

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.

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.

@zootechdrum - Your code has been blurred out to avoid spoiling a full working solution for other campers who may not yet want to see a complete solution. In the future, if you post a full passing solution to a challenge and have questions about it, please surround it with `[spoiler]` and `[/spoiler]` tags on the line above and below your solution code.

Thank you.

gotcha I wondering how you guys did that.

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