Function Bind

bind is a method on the prototype of all functions in JavaScript. It allows you to create a new function from an existing function, change the new function’s this context, and provide any arguments you want the new function to be called with. The arguments provided to bind will precede any arguments that are passed to the new function when it is called.

Using bind to change this in a function

The first argument provided to bind is the this context the function will be bound to. If you do not want to change the value of this pass null as the first argument.

You are tasked with writing code to update the number of attendees as they arrive at a conference. You create a simple webpage that has a button that, when clicked, increments the numOfAttendees property on the confrence object. You use jQuery to add a click handler to your button, but after clicking the button the confrence object has not changed. Your code might look something like this.

var nodevember = {
  numOfAttendees: 0,
  incrementNumOfAttendees: function() {
    this.numOfAttendees++;
  }
  // other properties
};

$('.add-attendee-btn').on('click', nodevember.incrementNumOfAttendees);

This is a common problem when working with jQuery and JavaScript. When you click the button the this keyword in the method you passed to jQuery’s on method references the button and not the conference object. You can bind the this context of your method to solve the problem.

var nodevember = {
  numOfAttendees: 0,
  incrementNumOfAttendees: function() {
    this.numOfAttendees++;
  }
  // other properties
};

$('.add-attendee-btn').on('click', nodevember.incrementNumOfAttendees.bind(nodevember));

Now when the button is clicked this references the nodevember object.

Providing arguments to a function with bind

Each argument passed to bind after the first will precede any arguments passed when the function is called. This allows you to pre-apply arguments to a function. In the example below, combineStrings takes two strings and concatenates them together. bind is then used to create a function that always provides “Cool” as the first string.

function combineStrings(str1, str2) {
  return str1 + " " + str2
}

var makeCool = combineStrings.bind(null, "Cool");

makeCool("trick"); // "Cool trick"

The guide on this reference has more information about how what the this keyword references can change.

More details on the bind method can be found on Mozilla’s MDN docs.

Function Length

The length property on the function object holds the number of arguments expected by the function when called.

function noArgs() { }

function oneArg(a) { }

console.log(noArgs.length); // 0

console.log(oneArg.length); // 1

ES2015 Syntax

ES2015, or ES6 as it is commonly called, introduced the rest operator and default function parameters. Both of these additions change the way the length property works.

If either the rest operator or default parameters are used in a function declaration the length property will only include the number of arguments before a rest operator or a default parameter.

function withRest(...args) { }

function withArgsAndRest(a, b, ...args) { }

function withDefaults(a, b = 'I am the default') { }

console.log(withRest.length); // 0

console.log(withArgsAndRest.length); // 2

console.log(withDefaults.length); // 1

More Information on Function.length can be found on Mozilla’s MDN Docs.