0

I'm reading the source code for the Twitter Bootstrap Tabs Plugin and there's a line that appears to be short hand for something, but I don't understand what it is. Here's a snippet from the source (version 3.0.0):

Tab.prototype.activate = function (element, container, callback) {
var $active    = container.find('> .active')
var transition = callback
  && $.support.transition
  && $active.hasClass('fade')

function next() {
  $active
    .removeClass('active')
    .find('> .dropdown-menu > .active')
    .removeClass('active')

  // some code removed for conciseness

  callback && callback()
}

The line in question is this: callback && callback().

I've never seen a function or variable name just typed out like that and then a function being called after the && operator.

I'm guessing this is short hand. What is it and what is it meant to do? And how does it work?

shrewdbeans
  • 11,971
  • 23
  • 69
  • 115

5 Answers5

4

It is shorthand for 

if (callback)
{
   callback();
}

Basically if the first part is null (or undefined) which both equate to false, the && (logical and) fails and it does nothing.

If the callback is defined, the first part of the && is true, so it evaluates the second part (in this case calling the method).

This is known as short-circuiting as an initial false on the left hand side of the logical AND operator means it does not attempt to evaluated the second part of the expression on the right hand side (as it has already failed the test for "is everything true"). Note: not all languages implement short circuiting in logical AND expressions (VB does not from memory), but javascript is one of the sensible ones! :)

For those that care about the finer points of undefined vs null vs 0 checks:

http://www.sitepoint.com/javascript-truthy-falsy/

*Disclaimer: The code example was intentionally simple and performed by a trained stunt-coder. Please do not attempt this at home. It is dangerous and may lead to down-votes :)

iCollect.it Ltd
  • 92,391
  • 25
  • 181
  • 202
  • 1
    No it's not, that just checks for undefined or null, not falsiness – Esailija Sep 23 '13 at 09:53
  • Apologies for using the simpler `!= null` instead of the more long-winded "undefined" check, but that is both unnecessary for the explanation and I find quite an ugly detail :) – iCollect.it Ltd Sep 23 '13 at 09:53
  • 3
    the actually equivalent code is actually shorter: `if( callback ) callback()` – Esailija Sep 23 '13 at 09:55
  • I have one doubt !!callback makes more sense to me than just callback, how does it take callback if undefined as false, not falsy but false?!! –  Sep 23 '13 at 09:57
  • @Esailija: The point of the exercise was to give a clear explanation, not the smallest coding alternative, however I agree and it avoid the use of null vs. "undefined" (which I personally hate) – iCollect.it Ltd Sep 23 '13 at 09:58
  • @rps: type undefined also equates to a false value. Have added a link. – iCollect.it Ltd Sep 23 '13 at 09:59
  • @TrueBlueAussie I think you're missing Esailija's point that the code you originally posted `if (callback != null) callback()` is not equivalent to `callback && callback()` for some falsy values of callback (all except null and undefined). The current version is fine and equivalent for all values. – Tibos Sep 23 '13 at 10:00
  • no I meant false not falsey! guess falsey ones can be used for logical operations then. –  Sep 23 '13 at 10:07
  • @Tibos: I think you are missing my original point, which was "explain it in a simple way". The finer details of whether the syntax of the example is the most efficient hardly matters. Thanks for the downvote though :P – iCollect.it Ltd Sep 23 '13 at 10:09
  • @TrueBlueAussie I think you should always point out when you sacrifice correctness in favor of clarity. No downvote from me though and i even think your current answer is the best given. My comment was trying to make sure you are not confused about the issue at hand and possibly confuse others. – Tibos Sep 23 '13 at 10:25
  • @Tibos: It compiles, it runs, and it is explained why it runs... If anyone is still confused I think the added disclaimer will avoid any fatal accidents. – iCollect.it Ltd Sep 23 '13 at 10:31
2

The && operator works like this:

a && b
  1. Evaluate a
  2. If a is falsy, return a
  3. Return the result of Evaluate b

So, the line your mentioned is equivalent to this:

if the value of callback is truthy, call callback as a function

You can easily trip up this code if you supply callback as non-zero number, non-empty string or object, but if you supply a function or nothing (that's what the author of the code expects), then it will work properly and only call the callback if it is provided.

EDIT:

Truthy/Falsy explained in short:

  • Falsy values: undefined, null, false, 0, '', NaN
  • Truthy values: everything else

Longer explanation: http://www.sitepoint.com/javascript-truthy-falsy/

Tibos
  • 27,507
  • 4
  • 50
  • 64
  • 1
    Best you explain the terms `truthy` and `falsy` as a lot of people may not realise that it is Javascript jargon (and not kindergarden speech) :) – iCollect.it Ltd Sep 23 '13 at 10:13
1

It will check if callback exists and if it does then it will run it. The reason is the && operator which will short circuit in the case that the first argument is false. So if callback does not exist it will not check the second half

DGS
  • 6,015
  • 1
  • 21
  • 37
1

It's the same as:

if (typeof callback != "undefined"){
    callback();
}
Reinherd
  • 5,476
  • 7
  • 51
  • 88
0
  • All objects are considered to be true.
  • Strings are considered to be false if they are empty.
  • null and undefined are considered to be false.
  • A Number is false if it is zero.

http://msdn.microsoft.com/en-us/library/ie/719e8e30%28v=vs.94%29.aspx

and in logical && if first one is false so is the entire statement. hence if there is no callback (false), then next part of the && won't execute (which is the callback() function calling)!