What is the reason behind .bind() adding the optional arguments at the beginning?

Question

What is the reason behind .bind() adding the optional arguments at the beginning?

My first encounter with .bind() left me puzzled by the fact that the optional arguments passed to the bound function are prepended. This issue arose when I was attempting to delegate tasks to anonymous event handling functions, similar to this:

$('#example').on('change', function(arg1, arg2, evt) {
    console.log(evt, arg1, arg2);
}.bind(null, arg1, arg2));

The MDN reference page for .bind() mentions the preppending multiple times but does not explain why. It has left me wondering - why do I need to place arg1 and arg2 before evt in the function arguments? Wouldn't it be more intuitive and potentially faster if they were appended instead?

javascript ecmascript-5

Answer 1

Answer №1

In the scenario where additional bound parameters were appended to the call time arguments, the resulting behavior would unfold as follows:

function foo(bar, baz) {}
const b = foo.bind(null, 42);

b();          // bar = 42
b('c');       // bar = 'c', baz = 42
b('c', 'd');  // bar = 'c', baz = 'd'

This means that it becomes uncertain where your bound arguments will be placed, which can be considered somewhat nonsensical.

On the other hand, if you consider bind as a form of partial application or currying, then prepending makes more sense: essentially, foo.bind(null, 42) gives you a partially applied function,
turning a -> b -> c (a function that takes two values and produces a third)
into b -> c (a function that only requires one more value and returns another).

Answer 2

In the scenario where additional bound parameters were appended to the call time arguments, the resulting behavior would unfold as follows:

function foo(bar, baz) {}
const b = foo.bind(null, 42);

b();          // bar = 42
b('c');       // bar = 'c', baz = 42
b('c', 'd');  // bar = 'c', baz = 'd'

This means that it becomes uncertain where your bound arguments will be placed, which can be considered somewhat nonsensical.

On the other hand, if you consider bind as a form of partial application or currying, then prepending makes more sense: essentially, foo.bind(null, 42) gives you a partially applied function,
turning a -> b -> c (a function that takes two values and produces a third)
into b -> c (a function that only requires one more value and returns another).

Answer 3

Answer №2

bind() creates a fresh function that, when called, triggers the function on which .bind() is invoked.

For the purpose of this explanation, let's call the function you utilize in your code as f:

var g = function f(arg1, arg2, evt) {
    console.log(evt, arg1, arg2);
}.bind(null, arg1, arg2)

bind() generates a new function (saved in variable g) that accepts any number of arguments (one in this instance).
g can be invoked with no arguments or multiple arguments.

The only mandatory argument for bind() is the object to be referred to as this within the function produced by bind(). The other arguments passed to bind(), if provided, are always accessible in g.

In this case, those additional arguments are arg1 and

arg2</code, which are consistently handed over to <code>f

. When g is invoked, its arguments become the parameters of f; they could be absent, singular, or multiple.

Placing arg1 and arg2 at the start of the call to

f</code, followed by the rest of the arguments sent to <code>g

, is the logical choice.

If arg1 and arg2 are positioned as the final arguments to f</code, then within <code>f you would need to inspect arguments.length to locate the last two arguments, resulting in more complex code.

Answer 4

bind() creates a fresh function that, when called, triggers the function on which .bind() is invoked.

For the purpose of this explanation, let's call the function you utilize in your code as f:

var g = function f(arg1, arg2, evt) {
    console.log(evt, arg1, arg2);
}.bind(null, arg1, arg2)

bind() generates a new function (saved in variable g) that accepts any number of arguments (one in this instance).
g can be invoked with no arguments or multiple arguments.

The only mandatory argument for bind() is the object to be referred to as this within the function produced by bind(). The other arguments passed to bind(), if provided, are always accessible in g.

In this case, those additional arguments are arg1 and

arg2</code, which are consistently handed over to <code>f

. When g is invoked, its arguments become the parameters of f; they could be absent, singular, or multiple.

Placing arg1 and arg2 at the start of the call to

f</code, followed by the rest of the arguments sent to <code>g

, is the logical choice.

If arg1 and arg2 are positioned as the final arguments to f</code, then within <code>f you would need to inspect arguments.length to locate the last two arguments, resulting in more complex code.

What is the reason behind .bind() adding the optional arguments at the beginning?

Answer №1

Answer №2

Similar questions

Take charge of JavaScript over CSS using Flash technology

Capture selected items from checkboxes and incorporate them into the CSS styling

JavaScript, JQuery, and the Observer Design Pattern

jsonAn error occurred while attempting to access the Spotify API, which resulted

What is the best way to deactivate buttons with AngularJS?

Collaborate using JavaScript SDK V2 to share folders on Dropbox

jQuery Files in Conflict

Documenting React Native Components: Best Practices and Tips

Error message: The property or method "Name" is not defined on this object, but it is being referenced during the rendering process

Guy discussing the ins and outs of JavaScript variables

JavaScript has hindered cross-origin response due to Cross-Origin Read Blocking (CORB)

Django Website Experiencing Issues with Google Analytics Integration

receiving a pair of components instead of just one

Issue with PHP retrieving initial value of post data

Determining focus on file picker dialogue using JavaScript

Error: The JSONP request encountered an unexpected token, causing a SyntaxError

Tips for Cancelling Multiple Subscriptions

What could be causing this JSON variable to be undefined?

Enhancing traditional functions with Javascript annotations or decorators

Tips on removing previously selected files from a Bootstrap 4 input file