# Help explaining how these loops work

Help explaining how these loops work
0

#1

Hi All,

Looking for a little feedback on how this function works as I’m a little confused on the order of operations of this.

``````function destroyer(arr) {
args = arguments;
return arr.filter(function(val) {
for ( i = 1; i < args.length; i++ ) {
if ( val == args[i]) {
return false;
}
}
return true;
});
}
destroyer([1, 2, 3, 1, 2, 3], 2, 3);
``````

Unfortunately Python Tutorial isn’t working with this so I can really see how the different loops work. From my understanding the filter method acts as a loop to iterate over all of the (val)s.

To start off with this function is going to make it to the IF statement and the val 1 does not equal the arg[1] 2 so it will return true. From there where does this go? Does it start back at the top and then enter in 2 as the val and then does the for loop stay at 1 or would it iterate to the next number?

I’m going to assume that it does not move onto the next arg[i]. So it would be 2 == 2 which is true and therefore returns false. The next number is where I really don’t get how this works. So now val == 3 and then two will return true, right? So would it go to the next val, or does the for loop kick in making us look at arg[2]?

If you need me to clarify on any of the above please let me know since I really need to get a better grasp at this!

Seth

#2

Hi @sethdcd,

Here is a complete explanation of everything that is happening in that code. I hope it helps answer your question.

First let’s look at the statement `destroyer([1, 2, 3, 1, 2, 3], 2, 3);` this calls a function named `destroyer` and passes it 3 arguments:

The first argument is the Array `[1, 2, 3, 1, 2, 3]`
The second argument is the Number `2`
The third argument is the Number `3`

Now let’s look at the body of our `destroyer` function. The first statement inside that function is:

``````args = arguments;
``````

This statement creates a variable named `args` and assigns it to a value that represents an array-like object of all of our arguments. In this particular example, it’s roughly the equivalent of writing:

``````args = [[1, 2, 3, 1, 2, 3], 2, 3]
``````

So `args` is an Array-like object that contains 3 values:

The value at index 0 is the Array `[1, 2, 3, 1, 2, 3]`
The value at index 1 is the Number `2`
The value at index 2 is the Number `3`

Next, we return the result of evaluating the expression `arr.filter(...)`

`arr` is the first parameter passed to the `destroyer` function which, in this case, we know is the Array `[1, 2, 3, 1, 2, 3]`

`filter` is a built-in function of the Array type which takes a callback function as its parameter and calls that function with each value of the array. If the callback returns `true`, the current value remains in the array, if the callback returns `false`, the current value is deleted from the array.

You can learn more about the `filter` function on MDN by clicking here.

The callback passed to the `filter` function is an anonymous function that reads as follows:

``````function(val) {
for ( i = 1; i < args.length; i++ ) {
if ( val == args[i]) {
return false;
}
}
return true;
}
``````

This function says for every value of `i` from 1 to 1 less than the total number of arguments:

1. test the current value of the `arr` Array against the argument at the `i` position of the `args` Array-like object.
2. if the current value of the `arr` Array is equal to the value of the argument at the `i` position of the `args` Array-like object, remove it from `arr` Array, otherwise, keep it.

To see this illustrated more clearly, let’s consider the following call to `destroyer`

``````destroyer(['A','B','C'],'C','D')
``````

Now let’s step through the calls to our anonymous callback function substituting in real values.

Since `arr` contains 3 values `A`, `B`, and `C` the callback function will be called 3 times, once for each value `A`, `B`, and `C`. Here is what each of those calls is doing:

``````// 1st call
if 'A' equals 'C' return false
otherwise, if 'A' equals 'D' return false
otherwise, return true

// 2nd call
if 'B' equals 'C' return false
otherwise, if 'B' equals 'D' return false
otherwise, return true

// 3rd call
if 'C' equals 'C' return false // because this is true, code will STOP here.
otherwise, if 'C' equals 'D' return false
otherwise, return true
``````

Hope that helps. Let me know if you have any other questions.

Regards,
Bill Sourour
devmastery.com

#3

Wow thank you very much for the thorough explanation!! That definitely helped