JavaScript syntax (0, fn)(args)

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.