0

I just started with javascript and I can't really comprehend how callback functions work. It may sound dumb but I have some questions. I'll delete if it's not ok.

If a callback function is a function passed as an argument to another function, what happens to the arguments of the callback function?

Will using a callback function execute it twice(once when it's used as an argument and one when it's declared)?

Also, I can't wrap my head around how in the photo attached below the callback function arguments take the values of the elements in the array.

enter image description here

L4M3
  • 11
  • 5
  • Relevant: [Where do the parameters in a javascript callback function come from?](https://stackoverflow.com/q/34624634) – VLAZ May 13 '21 at 09:34

1 Answers1

2

By Taking the example of your snippet, we see that logPerson is a function. Also we are using Array.prototype.forEach to loop over an array of people.

Now forEach takes a function as a argument, which it invokes with the arguments as item value and index for each iteration.

So when we pass logPerson as argument to forEach, this function is invoked with the arguments that forEach passed to its callback

A simple implementation of forEach could be like

Array.prototype.forEach = function(callback) {
    const arr = this;
    for(let i = 0; i < arr.length; i++) {
        callback(arr[i], i);
    }
}

The other way to write your example was

let people = ["mario", "luigi", "rui"];

people.forEach((person, index) => {
   console.log(`${index} - hello ${person}`);
})
Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400
  • So forEach always passes the value and index for every iteration? How does Javascript know to put the value in the person variable and the index in the index variable? – L4M3 May 13 '21 at 09:27
  • @L4M3 it doesn't. It just passes the value from the array as first argument, the index as second argument. What those arguments are called is up to you to decide. You can name them `foo` and `bar` and you'd get the same values. – VLAZ May 13 '21 at 09:31
  • Oh ok, I understand. If I would want to skip the value and just get the index how would that work? And, the last question, callbacking a function will stop it from executing when it's declared? Sorry if it's obnoxious. – L4M3 May 13 '21 at 09:37
  • 1
    @L4M3 to get the index only, you need the second parameter. So just declare two and don't use the first one `(_, index) => { console.log(index) }`, for example. `_` is a common way to name a parameter you don't want to use but it can be anything. You can name it `notGonnaUseThat`, if you wish. And functions are never called when declared. They are only called when...well, when some code explicitly calls them. `fn = () => console.log("hello")` just creates a function called `fn`. But you need `fn()` or `fn.call()` or `fn.apply()` or whatever to actually call it. – VLAZ May 13 '21 at 09:44
  • Thanks, you have no idea how much this helps. I actually considered dropping javascript thinking it's too complicated for me. I'll push forward though. – L4M3 May 13 '21 at 09:45