Why use callback in JavaScript, what are its advantages?

Question

Could someone explain, why do we use callback in JavaScript? I found examples, but they could be implemented by using the normal functions. What is the advantage of using it

Answer 1

Callbacks are used all over the place in JS, particularly in jQuery.

One place you need to use a callback is anywhere the language doesn't give you coordination. Coordination means code doesn't execute until the data it needs is ready. Synchronous calls are coordinated; the call doesn't return until the sub-computation is finished. Asynchronous calls don't give you coordination, so you need a callback.

• Event-driven computation can be uncoordinated, so event handlers are callbacks:

   +  = 
  
  

  In JS specifically, coordination for event dispatch (e.g. the DOM dispatchEvent, jQuery trigger and IE fireEvent methods) is left unspecified (except for nested DOM events, which are synchronous). If you trigger an event, the handlers may be deferred and execution immediately return to whatever is after the trigger. Event handlers are usually called synchronously, but they don't need to be.

• JQuery effects usually take a callback to execute once they finish. Animation functions are asynchronous so that they don't block the rest of the script.

Callbacks are also useful for functions that define the outer part of some computation, but leave an inner part undefined. Here are some examples:

• You can use callbacks to filter collections:

  // get odd items
  $([0,1,2,3,4,5,6,7,8,9]).filter(function (i) {return this % 2;})
  // or:
  $.grep([0,1,2,3,4,5,6,7,8,9], function (x, i) {return x % 2;});
  

• Array.sort takes a callback so you can define how elements are compared.

  [{name: 'foo', id: 1}, {name: 'bar', id: 5}, {name: 'baz', id: 3}]
      .sort(function (a,b) { 
          return a.name.localeCompare(b.name); 
      })
  

Some of jQuery's DOM manipulation methods (such as append, prepend and wrap take a callback to construct an element based on context provided by the jQuery method. You could view the callback as providing an inner portion of a computation or as a matter of coordination: when the outer computation is started, the needed data to build the new DOM elements isn't available; the callback finishes the sub-computations to create the elements when the data becomes available.

setTimeout and setInterval both take callbacks to execute after a delay.

Starting with version 1.5, jQuery offers deferred objects as a way of managing multiple callbacks, with various execution dependencies between the callbacks.

A callback is very similar to a "continuation", which basically means "the rest of the computation". The difference is that a continuation represents the entirety of the rest of the computation while a callback represents the rest of a sub-computation. Continuations are part of a whole style of programming known as "continuation passing style" (CPS). With continuations, you can create all sorts of interesting control structures. For example, continuations can be used to implement exceptions and coroutines.

Depending on the features of the language engine (in particular, you need tail call optimization), CPS can offer a more efficient approach. Some control structures (such as coroutines) require tail calls, otherwise you'll get a stack overflow^*.