In my last blog post of this series I announced closures to be next on the menu. I will get there but am not quite. First I stumbled over some other words I need to get clarified first. One is callback, a concept that I find hard to understand.

###Struggling with callback functions Callbacks are functions that are set up to be called at a later time. That’s the basic statement or definition I find first. Sounds simple. But when Benjamin went over our vaamo codebase to find examples in JS files and made me think about what the difference between them is, I realized that it is not so easy for me to identify which part of a specific block of code is the callback exactely.

For experienced programmers explaining something to a beginner must be so tough. To imagine which exact part the beginner doesn’t understand in a particular problem when you yourself have a clear concept in you mind. Urgh. Let me show you the examples, that make my troubles a bit clearer.

So first I was looking at this code example in Jezen’s latest blog post here.

define(function() {

  var reCommentContents = /\/\*!?(?:\@preserve)?[ \t]*(?:\r\n|\n)([\s\S]*?)(?:\r\n|\n)\s*\*\//;

  function multiline(fn) {
    if (typeof fn !== 'function') { throw new TypeError('Expected a function'); }
    var match = reCommentContents.exec(fn.toString());
    if (!match) { throw new TypeError('Multiline comment missing.'); }
    return match[1];
  }

  return multiline;
});

I asked Benjamin wether I got it right, that the “fn” in the function multiline is a callback. I thought so, because within the multiline function “fn” is “called back on”, sort of checked with “are you a function or what??”. But even though Benjamin said yes, it is a callback, I think I got it wrong. The reason why this is a callback is something else.

The second example is this code snippet, which stems from our vaamo codebase and was partly even written by myself:

1 define(function(require) {
2  'use strict';
3
4  var $ = require('jquery');
5
6  return {
7
8       gaSendButtonClickEvent: function(label) {
9       ga('send', 'event', 'button', 'click', label);
10    },
11
12    trackAndDelayLocationChange: function(label, event) {
13      var href = $(event.target).attr('href'),
14          linkTarget = $(event.target).attr('target');
15      if ( (href !== undefined) && (linkTarget !== '_blank') ) {
16        event.preventDefault();
17        window.setTimeout('window.location.href=\'' + href + '\'', 100);
18      }
19      this.gaSendButtonClickEvent(label);
20     },
21
22     init: function() {
23       $('.nav-openaccount').click(this.trackAndDelayLocationChange.bind(this, 'openaccount-now'));
24       $('.download-oa-pdf').click(this.trackAndDelayLocationChange.bind(this, 'download-openaccount-pdf'));
25       $('.legal-docs').click(this.trackAndDelayLocationChange.bind(this, 'legal-documents'));
26       $('.display-hidden-info-optimize').click(this.trackAndDelayLocationChange.bind(this, 'optimize-savingsrate'));
27       $('.referral-mail').click(this.trackAndDelayLocationChange.bind(this, 'referral-link-mail'));
28       $('.referral-facebook').click(this.trackAndDelayLocationChange.bind(this, 'referral-link-facebook'));
29       $('.referral-twitter').click(this.trackAndDelayLocationChange.bind(this, 'referral-link-twitter'));
30     }
31   };
32 });

Benjamin told me: “Lines 22-31 here are a typicall callback”, and as an excercise, asked me to identify what the difference between Jezen’s and this callback example was.

And then I got confused. What is the callback function in second example lines 22-31? Isn’t the “trackAndDelayLocationChange” function declared in lines 12-20 the callback function and what’s in line 22-31 is, when that callback is called multiple times?
Am I not maybe mixing up callback with fallback? Are callbacks always functions?
Or isn’t a callback maybe rather any object, be it a variable, be it a function, that is defined simply by it’s availability at a later call?
I thought it was always a function.

I can not make the coin drop on my own and realize I will have to sit down with Benjamin some other time and get a private lesson.

(A totaly not relevant, but nice detail is that I couldn’t ask Benjamin directly the day I actually wrote this blog post, because I had had the pleasure to attend the beyond tellerand in Berlin, my first webdesign conference, which I enjoyed a lot! Got to conferences folks!)

###The private lesson’s result: Callbacks are always functions. Yes.
In the second example it is the “init” function, that is the callback, so really the whole bunch of lines 22-31. Or rather, that’s the one, that Benjamin wanted me to compare to Jezen’s example. The “TrackAndDelay…” function in lines 12-20 is a callback function as well. A callback within the callback so to say.

And the difference between the two callback examples cited above is simply the timing of when the callback is called.

In Jezen’s example, the callback function is invoked within the function itself. Whereas in the second example the moment it is called is actually defined somewhere else, in a different module, the app.js in our case. So first example is a synchronous, second an asynchronous variant of a callback function usage.

Think I heard that coin drop now. But I also know, that I will have to re-read and re-think this many more times.
By the way, I found a very helpful article explaining callback functions written by Michael Vollmer.