DEV Community

loading...

.bind it's more than just this.

adam_cyclones profile image Adam Crockett ・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
Enter fullscreen mode Exit fullscreen mode

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.

Discussion

pic
Editor guide
Collapse
madeline_pc profile image
Madeline

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.

Collapse
adam_cyclones profile image
Adam Crockett Author

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!

Collapse
vonheikemen profile image
Heiker

I think the term is partial application.

Collapse
xavierbrinonecs profile image
Xavier Brinon

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)

Collapse
adam_cyclones profile image
Adam Crockett Author

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.

Collapse
vonheikemen profile image
Heiker

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.

Thread Thread
xavierbrinonecs profile image
Thread Thread
vonheikemen profile image
Heiker

Today I learned.

Collapse
adam_cyclones profile image
Adam Crockett Author

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

Collapse
shubhamk profile image
Shubham Kamath

Never knew bind could do this! Thanks 😁
I'm waiting for the series. 🥳