2

const getData = (cb) => {  
  setTimeout( () => {
    cb({ data: ['there', 'is', 'stuff', 'here'] })
  }, 100)
}

getData( data => {  
  console.log(data);
});

Here is the example of the javascript callback. Could some one let me know how this functions is executed into the javascript callback?

Here what is the function inside getData(cb) ? How it will be executed ? How the functions is passed as callback inside cb and return to the console.log

Regards.

Nico Diz
  • 1,484
  • 1
  • 7
  • 20
Amit
  • 325
  • 1
  • 5
  • 16

3 Answers3

2

The function inside getData is a callback being passed to setTimeout, which is one way to schedule a call to a function to happen in the future. In this case, it's asking for that callback to happen roughly 100ms later. getData returns before that happens.

The setTimeout callback is a closure¹ over the context where it's created, which means it has access to cb even after getData has returned. So when the browser's timer calls the callback, the callback can call cb. The call to cb uses an object literal to create an object to pass to cb.

In the call to getData, the author is passing a function as cb that logs the data it receives.

So:

  1. getData is called, passing in a function that will log the argument it gets.

  2. getData calls setTimeout to schedule a callback in about 100ms, passing in another function for the timer to call.

  3. getData returns.

  4. About 100ms later, the browser's timer subsystem triggers a call to the callback passed to setTimeout.

  5. That callback creates an object and calls cb, passing the object to it.

  6. That callback (the one passed to getData) logs the data object it receives.

¹ "closure" — see: SO, my anemic blog

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
1

In order to understand the code you can just simplify it by naming the anonymous functions. One example could be:

function logData(data) {
    console.log(data);
}

const getData = (cb) => {  
    // `cb` is `logData` function when `getData` is called
    function timeoutCallback() {
        var data = { data: ['there', 'is', 'stuff', 'here'] };
        cb(data);
    }
    setTimeout(timeoutCallback, 100)
}

getData(logData);

Does that make sense?

Engineer
  • 47,849
  • 12
  • 88
  • 91
-1

1- first global execution context created 2- get data function will be called then it will wait for 10 seconds inside the event loop then it will be come to execution context and printed to console.

user3647491
  • 45
  • 5