Arrow functions vs. bind()


ES6 arrow functions are often a compelling alternative to Function.prototype.bind().



Extracting methods

If an extracted method is to work as a callback, you must specify a fixed this, otherwise it will be invoked as a function (and this will be undefined or the global object). For example:



obj.on('anEvent', console.log.bind(console))

An alternative is to use an arrow function:



obj.on('anEvent', x => console.log(x))

this via parameters

The following code demonstrates a neat trick: For some methods, you don’t need bind() for a callback, because they let you specify the value of this, via an additional parameter. filter() is one such method:



const as = new Set([1, 2, 3]);
const bs = new Set([3, 2, 4]);
const intersection = [...as].filter(bs.has, bs);
// [2, 3]

However, this code is easier to understand if you use an arrow function:



const as = new Set([1, 2, 3]);
const bs = new Set([3, 2, 4]);
const intersection = [...as].filter(a => bs.has(a));
// [2, 3]

Partial evaluation

bind() enables you to do partial evaluation, you can create new functions by filling in parameters of an existing function:



function add(x, y) {
return x + y;
}
const plus1 = add.bind(undefined, 1);

Again, I find an arrow function easier to understand:



const plus1 = y => add(1, y);

Further reading


Comments

Popular posts from this blog

Steve Lopez and the Importance of Newspapers

A Treasure Hunt Without The Treasure

Drop a ping-pong ball in the clown’s mouth