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

Sharing an object's attributes as props in Vuejs

Displaying a dynamic flag icon in a span element based on the selection from a mat-select

What could be causing the issue with "class not being recognized as a constructor" error that I am encountering?

Creating objects based on interfaces

Retrieve information from a JSON file within a Vue.js application rather than entering data manually

Displaying Errors from Controllers in React Hook Forms

What causes the discrepancy in results between the quoted printable encoding operation in JavaScript and Oracle?

Leveraging Polymer web components without the need for a package manager

uib-datepicker-popup allowing for changing minimum mode dynamically

Looking to tweak the date format in a Vue.js template?

Struggling to get getInitialProps working in dynamic routes with Next.js?

Issues with clickable links within a table cell

Encountering an issue with top-level await in Angular 17 when utilizing pdfjs-dist module

Tips for sending textarea data via AJAX with TinyMCE

Implementing JavaScript: Grouping JSON Response by Date and Category in a Table

There appears to be no data available from the Apollo Query

The conditional statement for multiplying in JavaScript

Navigating websites: Clicking buttons and analyzing content

Using inertia-links within the storybook framework

Having trouble sending an HTTPS request in NodeJS only to receive an HTTP response instead