JavaScript syntax (0, fn)(args)

Question

Just checking Google's JavaScript code and I've found this syntax:

var myVar = function...; (0, myVar)(args); 

Do you know the meaning of this syntax? I cannot find the difference between (0, myVar)(args); and myVar(args);.

To give an exact example, we have

_.x3 = function (a, b) {     return new _.q3(20 * b.x + a.B.B.x, 20 * b.y + a.B.B.y) }; 

And later

this.ta = new _.s3((0, _.x3)(this.fa, this.B.B), 0); 

Answer 1

I had the same question and then found the answer, as follows:

It really is for

(0, foo.fn)(); 

Remember that in JavaScript, when foo.fn() is invoked, then inside of fn, the this is bound to foo. If you use

var g = foo.fn; g(); 

then when g is invoked above, the this is bound to the global object (window, in the context of a web browser).

So do you need to define g like above? Can you do something such as

(foo.fn)(); 

The answer is no. JavaScript will treat it the same as foo.fn(); as it is just foo.fn with the redundant () that can be removed.

But there is one way to get around it, and it is exactly to use the comma operator, which Mozilla stated as

The comma operator evaluates each of its operands (from left to right) and returns the value of the last operand

So using

(0, foo.fn)(); 

the (0, foo.fn) will get evaluated to a reference to the function, like g above, and then the function is invoked. And then, this is not bound to foo but is bound to the global object.

So the code written this way, is to "cut the binding".

Example:

var foo = {                fullName: "Peter",                sayName:  function() { console.log("My name is", this.fullName); }            };  window.fullName = "Shiny";  foo.sayName();       // My name is Peter  (foo.sayName)();     // My name is Peter  (0, foo.sayName)();  // My name is Shiny

Now why would some code want to cut the binding? I read that in some case, if we have a function:

function foo() {   // using `this` here } 

Then the this would point to the global object. But if foo() together with other functions and values, are packaged into a module, then when the function is invoked using

someModule.foo(); 

Then the this is bound to someModule, and it has changed the behavior of foo(). So to keep foo() as original as it is, we cut the binding, so that inside of foo(), the this is bound to the global object like before.

Answer 2

This syntax is using the comma operator, ,. It evaluate all of its operands and returns the value of the last one. In this case, 0 is just being used as a placeholder so (0, function() {}) will return (function() {}). After it is evaluated, the (args) part is invoking the function and giving it its arguments.

Edit after comment:

The reason one would use this style of coding is so that they can execute the code quickly or on one line. Here is an example:

var a = 0,     b = 1,     c;  c = ( a++, b++, a + 2 ); // a is added, b is added, and a is added then returned  a; // 1 b; // 2 c; // 3