Skip to content
loading...

.bind it's more than just this.

adam_cyclones profile image Adam Crockett github logo Updated on ・1 min read  

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.

twitter logo DISCUSS (10)
Discussion
markdown guide
 

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.

 

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!

 

I think the term is partial application.

 

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)

 

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.

 

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.

 

Thank you Heiker im sure many will find this useful. I kept the language to an accessible level due to the tags.

 

Never knew bind could do this! Thanks 😁
I'm waiting for the series. πŸ₯³

Classic DEV Post from Jul 27 '19

If You Don't Know, Now You Know - GitHub Is Restricting Access For Users From Iran And A Few Other Embargoed Countries

Please help our cause against modern-day discrimination

Adam Crockett profile image
I work at ForgeRock as a Front End Engineer, I play with all sorts really. Lately WASM is my toy of interest.