General JS function parameters within "filter()"

Hello campers,
I am having a hard time understanding the logic behind the way parameters are passed within functions (in this particular case within the “filter” context). I have seen this hundreds of times, so I think it is a fundamental part of JS that will unlock for me (and hopefully for others) future challenges and projects. I am going through the “Seek and Destroy” challenge, and I see in the “Hint” page the following piece of code (which I pasted and don’t claim as my own). My interest here is on the “function (val)” part. Where does the “val” parameter come from, where does it get its content from and how is it evaluated? Thank you.

function destroyer(arr) {
var args = Array.from(arguments).slice(1);
return arr.filter(function(val) {
return !args.includes(val);
} a

val is “The current element being processed in the array.” (source). So, it’s like you’re iterating through an array using a for loop and using arr[i] to access an array’s element, arr[i] is the same as the parameter val here.

And it’s evaluated through the callback, callback: “Function is a predicate, to test each element of the array. Return true to keep the element, false otherwise” (source).

pythontutor is a great program for visualizing the likes of this so i created a little visual to step through that should make it clear … just click the forward button and step through the code one step at a time and you will see whats going on

1 Like

Thank you @fortMaximus. This helped a lot.

1 Like

Thank you @JohnL3. The tool is awesome.