Trying to grasp callbacks javascript

Question

I am currently learning Javascript, and i am trying to grasp my head around callbacks. And there is something i am trying to understand.
What i do not understand is, how does the function in the click call get the value from the function sendData? I do understand that we always return an array, but how does the value become data?
// Function that takes callback
function sendData(callback) {
  
      let data = ['1', '2']; 
      // Here we return the sendData function, with  a array value

return callback(data); 
}

// Use the function when  the btn gets clicked
btn.addEventListener('click', (event) => {

// But how come the value here becomes the returned value?
  sendData(function (value)  { 
    console.log(value); // Outputs 1,2 in the console
  });

});

Etheryte · Answer

When I was first starting out, one of the things that helped me intuitively grasp callbacks was moving code around.
This can be a bit tricky at first, but becomes second nature once you get the hang of it.
To demonstrate the idea, we can modify sendData in a way that it has no callback, but behaves the same way as it did before in this specific example.
function sendData() {
    const data = ['1', '2'];

const callback = function (value)  { 
        console.log(value);
    };

return callback(data); 
}

All we've done in the above example is moved the callback from the function argument into an inlined variable, but the way the data is passed around is a lot clearer.
If you then unwrap the function since it's called right away after its declaration, the flow is more barebones:
function sendData() {
    const value = ['1', '2'];
    console.log(value);
    return;
}

Note that I've renamed data to value so that it matches the name used for the callback argument.
Hope this mental model is useful, if perhaps complementary to Quentin's answer.

Quentin · Answer

What i do not understand is, how does the function in the click call get the value from the function sendData?

First:

sendData(function (value)  {

You call sendData and pass it a function as an argument.
The function you pass expects an argument which it will put in the value parameter.
Second:

function sendData(callback) {

The argument you pass to sendData (the function above) gets assigned to the callback parameter.
Third:

return callback(data);

You call callback (which is that function) and pass it one argument (data) which gets assigned to the first parameter (value).

I do understand that we always return an array

You don't. sendData takes the return value of calling callback(data) and returns that.
It passes an array into callback but what it returns depends on what callback returns.
In this case, callback has no return statement at all, so it returns undefined.

Trying to grasp callbacks javascript

2 Answers

Add your own answers!

Ask a Question