.bind it's more than just this.

#javascript #beginners

You might know about bind, it takes a function and binds the this to any object you like. At least that's the common usage. Bind has another hidden super power I didn't know about for years.

function add(a, b){
  return a + b;
}
// With me so far?

const addToFive = add.bind(null, 5);

addToFive(20); // 25

// Okay let's head back to the article

We just, for lack of a better word preloaded one of the arguments of add using the second arg of the bind method, the null just means we bound this to a null object, because null is an object.

The effect is this, we can call a function with a predetermined argument.

Ps
Note I'm still working on the parallel universe series I can't wait to show you.

You don't have to use bind just so you know, you can use a functional technique called currying, see the comments for details.

Top comments (10)

Madeline • May 23 '20

Whoa, this just blew my mind.
Also, I did not know, or forgot, that null is an object.
I have so much to think about today.

Adam Crockett 🌀 • May 23 '20 • Edited

It's the little things 😁.
This is interesting too:

Object.create(null) 
// vs
Object.create({})

The object created from null will be blank, no prototype!

Heiker • May 22 '20

I think the term is partial application.

Xavier Brinon • May 26 '20

well, yes but I wouldn't advise doing it this way, a bound function is quite exotic: ecma-international.org/ecma-262/#s...

showing alternatives would be cool for beginners, like
add5 = x => add(5, x) which is far less confusing,
and even better
add = x => y => x + y;
add5 = add(5)

Adam Crockett 🌀 • May 26 '20 • Edited

I 100% agree it is not idiomatic however that is not the point, The point is, I did not know about this for many years and I probably would have went down the functional path sooner had I known about this, I would then look into currying as you say. If ever there was an edge case where currying could not be used and an arg needed to be passed, this might come in handy. (alot of my posts talk about exotic less than idiomatic things, see operator overloading as an example)

I have added a disclaimer.

Heiker • May 26 '20

I do prefer the first option you mention. Now, I don't think a bound function is exotic anymore. When the class keyword was first introduced in ES6 a lot of people found that .bind helped them keep the methods behavior consistent. Maybe they don't know they can use it to achieve partial application but they know .bind exists.

I actually wrote something about partial application a while ago, here is the link.