jQuery: What's the meaning of comparison in following code block - callback && function() {callback.call();}

Question

Seeing this block from jQuery.scrollTo.js library (in v1.4 at line 184).

function animate( callback ){
    $elem.animate( attr, duration, settings.easing, callback && function(){
        callback.call(this, target, settings);
    });
};

Curious to know how the comparison is going to work with

callback && function() {callback.call(...)}; 

and what's exactly the meaning behind this. Thanks in advance.

Answer 1

The callback && function() {callback.call(...)}; is doing two things:

• testing whether a callback has been defined and
• if it has, calling it in the correct context

JavaScript has a feature called "short-circuiting logical expressions" . If a part of a logical expression cannot change the overall result, it is not going to be evaluated.

If callback is undefined , then it evaluates to false in the context of a logical expression (it's "falsy" ). So the expression becomes the equivalent of false && ... , in which case it does not matter anymore what ... actually is, the result will always be false ^†1 . JavaScript is not looking at the ... in this case.

If callback is not undefined (but a function), the first part of the logical expression evaluates to true (it's "truthy" ). At this point JavaScript evaluates the ... . The overall result happens to be a function expression. The function expression results in an anonymous function, which is then passed to jQuery's animate() .

The callback.call() executes callback and determines the meaning of this within callback . So callback.call(this) makes sure that this refers to the same object as in the outer function.

---

^†1 To be absolutely correct: The overall result of the expression will not be false , it will be undefined .

Answer 2

callback && function() {callback.call(...)}; 

This will check if the callback is truthy (is not false, 0, "", null, undefined, NaN) and if it is truthy and second part of the statement will be evaluated which will return function that will be passed in as a argument.

Example:

var test = true && function() {};
console.log(typeof test); // "function"

Answer 3

When used with Boolean operands, the && operator performs the Boolean AND operation on the two values: it returns TRue if and only if both its first operand and its second operand are true. If one or both of these operands is false, it returns false.

The actual behavior of this operator is somewhat more complicated. It starts by evaluating its first operand, the expression on its left. If the value of this expression can be converted to false (for example, if the left operand evaluates to null, 0, "", or undefined), the operator returns the value of the left-side expression. Otherwise, it evaluates its second operand, the expression on its right, and returns the value of that expression.

Therefore this expression callback && function(){ callback.call(this, target, settings); } callback && function(){ callback.call(this, target, settings); } returns second anonymous function. The benefit of this syntax is enabling to call callback function in context of plugin instance.

Answer 4

expr1 && expr2

The logical AND ( && ) operator returns expr1 if it can be converted to false; otherwise, returns expr2 .

Now in your example, a function object in callback will evaluate to true and the anonymous function is used; if callback is undefined it will not create the anonymous function and pass undefined through.

Answer 5

It's not a comparison. .animate() is a method so all of the items in brackets are arguments.