I have seen a few different resources explaining the new ES2016 (ES7) bind (::) operator. Many of them are focusing on how far you can take them to create elegant code but I feel like their examples were overly complex in showcasing exactly what it is doing.

So here is a very easy to understand example:

let getName = function() {  
  return this.name;
};

let person = {name: "JD"};

person::getName(); // JD  

In the code above, the line:

person::getName();  

is equivalent to:

getName.call(person);  

However, if you do not invoke it like so:

person::getName;  

It then becomes equivalent to:

getName.bind(person);  

Additionally, you can also use the :: operator to bind a function in place like so:

$.getAjax(url).then(::console.log);

Here the ::console.log part is equivalent to:

console.log.bind(console);  

So the result would be the same as:

$.getAjax(url).then(console.log.bind(console));

Hopefully that clears up any confusion as to what this operator is doing.

© 2017. All Rights Reserved.

Proudly published with Ghost