How Javascript callbacks are handled differently?

Question

I want to have a clear understanding of callback functions in javascript and the following are 2 of my questions, these questions may be very basic but I guess it will help in clarifying the concept of callbacks:

1.Do all the callback functions execute asynchronously which means that even if the task is not slow,they run on a separate process and are put back on the event queue to be executed at a later time?

2.In my sample code below,there are 3 functions, a simple add function of 2 numbers,a normal function which calls the add function and a function which uses a callback function,the results will be the same in console,now,apart from the advantage of shorthand and anonymous function, how the calculate() and calculate1() differ in the execution.

And also I went through the thread Why use callback in JavaScript, what are its advantages? in which it is explained that why we need callbacks specifically for asynchronous programming,however I want to know how all the callbacks simple or complexed are handled,in my code below where I am using a simple callback is not an asyncronous function like setTimeOut or setInterval, it is simply a callback,so how will it be handled or executed differently. Thankyou!

function add(x,y){  
   return x + y;
}
function calculate(x,y,compute){    
   return compute(x,y);   
}
function calculate1(x,y){
return add(x,y);
}
var a = calculate(5,4,function(x,y){return add(x,y)}); 
var b=  calculate(5,4,add);
var c= calculate1(5,4);

console.log(a); 
console.log(b); 
console.log(c);

score 1 · Answer 1 · answered Sep 28 '17 at 13:34

Do all the callback functions execute asynchronously [...]?

Whether callbacks are handled asynchronously depends on when the function that accepts the callbacks calls them. You could say that your calculate function calls its callback synchronously. The anonymous function that you pass to calculate is executed before the next line is evaluated, just like in the following snippet:

function callCallback (cb) {
  cb();
}

callCallback(function () {
  console.log('A'); // called first
});

console.log('B');   // called second

As you can see, in spite of taking a callback function, callCallback "blocks" the execution.

In fact, passing functions as arguments to other functions has nothing to do asynchrony. However, this is convenient and often used when dealing with asynchronous tasks.

That should answer your first question. The second question is a bit unclear.

There are, of course, functions that do not block the execution of the code after them:

function callCallback (cb) {
  setTimeout(cb, 10);
}

callCallback(function () {
  console.log('A'); // called second
});

console.log('B');   // called first

This is the difference, which you seem to already have understood.

Thanks for the explanation and the answer to my first question is clear now that callbacks is nothing necessarily to do with asynchronous thing,however regarding my second question I will try to explain further.Suppose I take your coding Snippet where you called settimeout in callCallback and remove the callback cb in parameter & re-write setTimeout(function(){console.log('A'),10} & call callCallback() without anonymous function,although the ouptput will be the same,will it make any difference how javascript will handle it? — code-efficient, Sep 28 '17 at 14:38
No, internally, it wouldn't make any difference. In both cases, you pass a function reference to `setTimeout`, that's it. — PeterMader, Sep 28 '17 at 16:46

score 0 · Answer 2 · answered Sep 28 '17 at 13:57

1.Do all the callback functions execute asynchronously which means that even if the task is not slow,they run on a separate process and are put back on the event queue to be executed at a later time?

No if there are no blocking javascript methods, callbacks are immediately executed.

2.In my sample code below,there are 3 functions, a simple add function of 2 numbers,a normal function which calls the add function and a function which uses a callback function,the results will be the same in console,now,apart from the advantage of shorthand and anonymous function, how the calculate() and calculate1() differ in the execution.

They are almost identical but there are some basic difference's.

1)One is purity calculate is pure while calculate1 is impure. Basically Calculate works only with the values it is passed with, this makes it predictable.

function calculate(x,y,compute){    
   return compute(x,y);   
}

here all x,y,compute are within calculate's own scope self sufficient. It need not worry about what outside scope contains.

But calculate1 on the other hand assumes there will be add function somewhere and we have not control how or what it is.

function calculate1(x,y){
 return add(x,y);
}

here we don't know what add is so when calculate is called it tries to find whatever is add outside it.This is why in functional programming callbacks are a must.

2)And Another major difference is this inside callbacks which is not shown in your example.

When using callbacks with this is a major headache. So I would suggest you look more into it if you want to master callbacks. this link has one of the best explanation of this inside callbacks. I highly recommend going through it.

How Javascript callbacks are handled differently?

2 Answers2