Binding a callback function in Javascript? ( NOT to be confused with Function.prototype.bind() )

Question

I've been dipping my toes into Javascript and now looking at the following piece of code:

    var router = new(journey.Router)({  
    ...
    });

    router.root.bind(function (res) { res.send("Welcome") });

Question: What is the root function above bound to? What does this binding do?

I understand that 'bind()' is supposed to bind the execution of a function to a specified object as a context. I do not understand how a function/method can be bound to an other function. All of the references I have looked at are talking about binding to an object.

Rob Raisch · Accepted Answer · 2011-06-23 23:08:42Z

4

'root' is a getter method defined in journey.js (at line 145) as

get root() {
    return this.get('/');
},

which is simply an expedient shorthand for

get('/')

And in this context, the call to bind will associate the provided callback function with the route defined as root, such that any requests that match the root path ('/') will be answered by the string 'Welcome'.

UPDATED

Upon further examination of the journey.js source, it appears the use of bind() in this context is not an example of currying at all.

Rather this particular bind() is defined as a function of the object returned by route() (which in turn is called by get()) in journey.js at line 131, and is simply used to set (or bind) the handler for a particular route.

IMPORTANT: This call to bind() IS NOT the same as Function.prototype.bind().

I'm leaving my previous answer below because I believe the information regarding currying still has value in this situation.

This use of Function.prototype.bind() is called 'currying' and is used to provide a new function which has values already provided for one or more of its expected arguments. A simple example of currying would be if you assume: function addSome(amount, value) { return value + amount; } which could be curried to produce a new function: var addOne=addSome.bind(1); and is exactly the same as: function addOne(value) { return addSome(1,value); } Currying is a feature from [functional programming]. See [bind - MDN Docs] for an explanation of bind() and [currying] for a formal definition of this technique. [functional programming]:http://en.wikipedia.org/wiki/Functional_programming [bind - MDN Docs]:https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind [currying]:http://en.wikipedia.org/wiki/Currying

edited Jun 23, 2011 at 23:08

answered Jun 23, 2011 at 21:30

Rob Raisch

17.4k4 gold badges51 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Raynos Over a year ago

That's way out of context. How did you know what snippet of code it came from? How does that even work, isn't the function returned from .get('/') passed by value and your binding it to a local copy of that function. That's some horrible magic API for that library.

Rob Raisch Over a year ago

@Raynos, just updated with further information regarding 'currying' which is the technique this library uses. And I knew where it came from because I looked at the source. ;)

Raynos Over a year ago

@RobRaisch you realise the first parameter to .bind is context and the second (and onwards) are curried parameters. There's still the problem that the bound function is not saved anywhere. Binding seems useless if your not going to store the bound function in a variable.

Raynos Over a year ago

@RobRaisch How can you set a handler using .bind. He's still not saving the (new function) return value from .bind anywhere.

Crocodile Over a year ago

Thanks! It makes more sense now. So this is not the bind function defined in the spec(as per the mozilla developer link you sent) but instead it is a 'custom' function. (I just renamed it to 'bindit' and it still works) I did't know that Javascript allows reusing names like this...

|

Lucent Fox · Accepted Answer · 2011-06-23 21:27:20Z

Not totally familiar with the object that you're using, but it's using javascript "anonymous functions" to create an object that contains a chunk of code so it can be passed around like a variable. It can later be called by appending the () onto the end.

See: http://helephant.com/2008/08/23/javascript-anonymous-functions/

Probably the most common use of this sort of thing is for setting a callback function, that is, when you call a function on router, when that function completes, it will finish by calling whatever you bound to it in the first place.

Say I'm using a generic javascript library (such as colorbox) to pop up a dialog on the screen and prompt the user for information. Once that gets done, or if the user closes the box without entering anything, I want the box to do something custom. I don't want to have to dig around in colorbox's source code to do this, so they allow places for all sort of callback functions. Say when the users enters the information and hits a button, it'll close the colorbox, submit ajax, and refresh the underlying page.

Collectives™ on Stack Overflow

Binding a callback function in Javascript? ( NOT to be confused with Function.prototype.bind() )

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related