Skip to main content

Function Bind Syntax

· 3 min read
James Kyle

Babel 5.4 was just released and with it comes support for a new experimental ES7 syntax proposed by Kevin Smith (@zenparsing) and implemented in Babel by Ingvar Stepanyan (@RReverser).

Warning: This syntax is highly experimental and you should not use it for anything serious (yet). If you do use this syntax, please provide feedback on GitHub.

The function bind syntax introduces a new operator :: which performs function binding and method extraction.

Virtual Methods​

Using an iterator library implemented as a module of "virtual methods":

JavaScript
/* ES7 */
import { map, takeWhile, forEach } from "iterlib";

getPlayers()
::map(x => x.character())
::takeWhile(x => x.strength > 100)
::forEach(x => console.log(x));
JavaScript
/* ES6 */
import { map, takeWhile, forEach } from "iterlib";

let _val;
_val = getPlayers();
_val = map.call(_val, x => x.character());
_val = takeWhile.call(_val, x => x.strength > 100);
_val = forEach.call(_val, x => console.log(x));

Note: Babel's output looks different than this in order to be more concise.

Using a jquery-like library of virtual methods:

JavaScript
/* ES7 */
// Create bindings for just the methods that we need
let { find, html } = jake;

// Find all the divs with class="myClass", then get all of the
// "p"s and replace their content.
document.querySelectorAll("div.myClass")::find("p")::html("hahaha");
JavaScript
/* ES6 */
let _val;
_val = document.querySelectorAll("div.myClass");
_val = find.call(_val, "p");
_val = html.call(_val, "hahaha");

Method Extraction​

Using method extraction to print the eventual value of a promise to the console:

JavaScript
/* ES7 */
Promise.resolve(123).then(::console.log);
JavaScript
/* ES6 */
// Which could be written in ES6 as:
Promise.resolve(123).then(console.log.bind(console));

Using method extraction to call an object method when a DOM event occurs:

JavaScript
/* ES7 */
$(".some-link").on("click", ::view.reset);
JavaScript
/* ES6 */
$(".some-link").on("click", view.reset.bind(view));

Note: You can read more about this syntax in the Function Bind Syntax proposal.

Usage​

Enable by stage:

Shell
$ babel --stage 0

Enable by transformer:

Shell
$ babel --optional es7.functionBind

The function bind syntax will only make it into ES7 if there is enough interest. If you would like to see this syntax make it in, please give it a star on GitHub and provide any feedback you have on GitHub issues.

Special thanks to Ingvar Stepanyan (@RReverser) for the implementation in Babel.

— The Babel team