The syntax in JavaScript of (0, fn)(args) is used to call

Question

The syntax in JavaScript of (0, fn)(args) is used to call

I came across an interesting piece of JavaScript code in Google's codebase that I wanted to discuss:

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

Do you know what the significance of this syntax is? I'm struggling to see the difference between (0, myVar)(args); and myVar(args);.

Let me provide a specific example for context

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

And later on

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

javascript

Answer 1

Answer №1

I had a similar inquiry and eventually uncovered the solution, which goes as follows:

The situation is this

(0, foo.fn)();

It's important to note in JavaScript, when foo.fn() is executed, the context of this within fn is linked to foo. If you attempt

var g = foo.fn;
g();

when g is called above, the reference for this will be tied to the global object (window, in a web browser setting).

Do we need to define g in that manner? Could we do something like

(foo.fn)();

The answer is negative. JavaScript interprets it similarly to foo.fn(); since it is just foo.fn with the redundant () that can be omitted.

However, there is a workaround, involving the use of the comma operator, as described by Mozilla

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

So by using

(0, foo.fn)();

the expression (0, foo.fn) gets assessed as a reference to the function, akin to g previously, before being executed. Consequently, this isn't connected to foo but rather to the global object.

This approach essentially "cuts the binding".

For instance:

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

Why would one want to cut the binding in certain scenarios? I came across a case where if we have a function:

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

Then this would refer to the global object. However, if foo() along with other functions and values are enclosed within a module, upon calling the function using

someModule.foo();

The this would be bound to someModule, altering the behavior of foo(). To maintain the original behavior of foo(), we sever the binding so that within foo(), this remains connected to the global object as before.

Answer 2

I had a similar inquiry and eventually uncovered the solution, which goes as follows:

The situation is this

(0, foo.fn)();

It's important to note in JavaScript, when foo.fn() is executed, the context of this within fn is linked to foo. If you attempt

var g = foo.fn;
g();

when g is called above, the reference for this will be tied to the global object (window, in a web browser setting).

Do we need to define g in that manner? Could we do something like

(foo.fn)();

The answer is negative. JavaScript interprets it similarly to foo.fn(); since it is just foo.fn with the redundant () that can be omitted.

However, there is a workaround, involving the use of the comma operator, as described by Mozilla

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

So by using

(0, foo.fn)();

the expression (0, foo.fn) gets assessed as a reference to the function, akin to g previously, before being executed. Consequently, this isn't connected to foo but rather to the global object.

This approach essentially "cuts the binding".

For instance:

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

Why would one want to cut the binding in certain scenarios? I came across a case where if we have a function:

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

Then this would refer to the global object. However, if foo() along with other functions and values are enclosed within a module, upon calling the function using

someModule.foo();

The this would be bound to someModule, altering the behavior of foo(). To maintain the original behavior of foo(), we sever the binding so that within foo(), this remains connected to the global object as before.

Answer 3

Answer №2

The use of the comma operator in this syntax evaluates all operands and returns the value of the last one. In this scenario, 0 acts as a placeholder so that (0, function() {}) will return (function() {}). Once evaluated, the (args) part calls the function and provides its arguments.

Update following a comment:

This coding style is employed for quick execution or to keep code concise on a single line. Consider this example:

var a = 0,
    b = 1,
    c;

c = ( a++, b++, a + 2 ); // Increments a twice and then adds it

a; // 1
b; // 2
c; // 3

Answer 4

The use of the comma operator in this syntax evaluates all operands and returns the value of the last one. In this scenario, 0 acts as a placeholder so that (0, function() {}) will return (function() {}). Once evaluated, the (args) part calls the function and provides its arguments.

Update following a comment:

This coding style is employed for quick execution or to keep code concise on a single line. Consider this example:

var a = 0,
    b = 1,
    c;

c = ( a++, b++, a + 2 ); // Increments a twice and then adds it

a; // 1
b; // 2
c; // 3

The syntax in JavaScript of (0, fn)(args) is used to call

Answer №1

Answer №2

Similar questions

Setting nodeIntegration to false led to an Uncaught ReferenceError: require is not defined when trying to access Object.url (external "url":1) in the electron-react-typescript environment

Is your Bootstrap input displaying the has-error class with a glyphicon, but the alignment is not vertically centered?

Replace all instances of the same word with the word "and" using regular expressions

"Enhance Your Sublime 3 Experience with a Jade Syntax Highlighter, Linting, Auto Complete, and

Combining the power of ExpressJS with a dynamic blend of ejs and React for an

Fixing Laravel 5.2 and jQuery validation issue: Accessing a property from a Non-Object

The property 'createDocumentFragment' is not defined and cannot be read in JavaScript code

Is there a way to create a div that resembles a box similar to the one shown in the

Experiencing slow loading times with a Next.js app in the development environment

What is the best way to extract data from the ajax.done() function?

The process of generating collection names dynamically based on user information

Issues with expanding all nodes in the Angular Treeview function by Nick Perkins in London are causing difficulties

The build process encountered an error while processing the module vue-router.esm.js in a Vue.js

Utilize JavaScript to trigger a div pop-up directly beneath the input field

Why isn't this working? I'm attempting to trigger a sound when I hover with my cursor, but it only plays when I click instead

I'm looking to develop a custom CKEditor plug-in that will allow users to easily drag and drop elements within the editor interface

How can I use jQuery to add styling to my menu options?

Apigee Usergrid: Absence of bulk delete feature

Replacing JS/CSS include sections, the distinction between Debug and Release versions

Understanding Vue.js: Effectively communicating updates between parent and child components using scoped slots