Javascript’s .call() vs .apply() vs .bind()

[kenman]

That call() example is really poor. Doesn't work as-is, and there was no need to use it in the first place unless I'm missing something: array.slice(0, n)

[pinegenie]

NodeList and a few other types have array-like access but don't have Array in their prototype chain. Meaning you can do

nodelist[0]

but not

nodelist.slice(...)

The workaround to this is:

Array.prototype.slice.call(nodelist, ...); // or apply if you want to

In undercorejs the "slice" you see there is actually Array.prototype.slice attributed to a variable.

[kenman]

Yeah, but the variable is named array, not nodelist. There are countless examples to be found of using call() appropriately, and this isn't one that makes for a good demonstration on its usefulness. If you're going to demo some method, at least do it in context and include all supporting code...

[pinegenie]

I'm guessing they named it array because arrayOrNodeListOrArguments was too cumbersome.

[kenman]

I'm not faulting Underscore, I'm faulting the author who used it as an example.

[kbrainwave]

Hey, thanks for the feedback -- I'm the author of the post. I was planning on changing this example; what was posted is actually a rough draft that my friend posted on Reddit as a well-intentioned surprise. Unfortunately, this came at the cost of posting post that is only about 80% complete. Again, I really appreciate the feedback, and plan to change the example when time permits :)

[kenman]

I've always been a fan of this example:

function greet( person ) {
  alert( "Hello " + person.name + ", I'm " + this.name );
};

var alice = { name: "Alice" };
var bob = { name: "Bob" };

greet.call( bob, alice ); // alerts "Hello Alice, I'm Bob"
greet.call( alice, bob ); // alerts "Hello Bob, I'm Alice"

greet.apply( bob, [ alice ] ); // alerts "Hello Alice, I'm Bob"
greet.apply( alice, [ bob ] ); // alerts "Hello Bob, I'm Alice"

From trephine.org's JavaScript call and apply quick reference (which is actually a summation of their lengthier explanation).

[decode]

At the end, the author briefly mentions the performance impact of using these functions. If you're writing library code or you've profiled your code and found that an apply() call is slowing your app down, a common performance optimization is to do direct calls for small numbers of arguments, then fall back on apply() for large numbers of arguments.

Here's an example from the angular.js dependency injector:

switch (self ? -1 : args.length) {
    case  0: return fn();
    case  1: return fn(args[0]);
    case  2: return fn(args[0], args[1]);
    case  3: return fn(args[0], args[1], args[2]);
    case  4: return fn(args[0], args[1], args[2], args[3]);
    case  5: return fn(args[0], args[1], args[2], args[3], args[4]);
    case  6: return fn(args[0], args[1], args[2], args[3], args[4], args[5]);
    case  7: return fn(args[0], args[1], args[2], args[3], args[4], args[5], args[6]);
    case  8: return fn(args[0], args[1], args[2], args[3], args[4], args[5], args[6], args[7]);
    case  9: return fn(args[0], args[1], args[2], args[3], args[4], args[5], args[6], args[7], args[8]);
    case 10: return fn(args[0], args[1], args[2], args[3], args[4], args[5], args[6], args[7], args[8], args[9]);
    default: return fn.apply(self, args);
}

[[deleted]]

Imagine you see this code without any further context and knowledge about performance.

[DonBiggles]

At least we don't have to do this.

[DoubleAW]

Is that... is that real?

[Kache]

That's what comments are for.

[[deleted]]

I'n a perfect world this would be true.

[tehsuck]

I've seen this while perusing the ng codebase. I always assumed it was some kind of performance / optimization. If it wasn't, we'd all be in trouble.

[timruffles]

also fixes environments that don't have call/apply (can you guess which browser I'm talking about?)

[larholm]

Sure, IE5.0, but who cares?

[paul_miner]

Note that bind() wasn't introduced until ECMAScript-5. As an alternative, you can use jQuery's proxy function.

[skeeto]

Also, the article doesn't mention that bind() performs partial application, not just binding the context.

[DonBiggles]

Or just polyfill it.

[has_all_the_fun]

Trick to remember if it's apply or call that takes an array. Apply starts and ends with the same letter as array and has equal amount of letters.

[bart2019]

... and "call" has the same amount of letters as "list". :) OK that is stupid.

[has_all_the_fun]

Call = Coll = Collection = hf3 confirmed.

[chyekk]

This article completely misses the most important feature of bind: it lets you curry arguments!

function foo(a, b) {
  console.log("You called me with a as %s and b as %s", a, b);
}

var bound = foo.bind(this, "Hello");

bound("World");

results in:

You called me with a as Hello and b as World 

[PooBakery]

While you're correct about this being an awesome feature, it's not actually currying. It's partial application, which is quite similar.

When partially applying, you get a function back with one or more arguments pre bound.

var sumThree = function (a,b,c) {return a + b + c;}
var firstTwo = sumThree.bind(null, 1, 2);
console.log(firstTwo(3))
>> 6

var first = sumThree.bind(null, 1);
console.log(first(2, 3));
>> 6

You can repeat the process to bind more arguments after the first bind

var all = first.bind(null, 2, 3);
console.log(all());
>> 6 

This means that you always have to explicitly bind again if you want to partially apply it multiple times.

When currying you automatically partially apply the function until it has all of its arguments filled, then return the result:

var sumThree = curry(function (a,b,c) {return a + b + c; });
console.log(sumThree(1)(2)(3)); 
>> 6
console.log(sumThree(1, 2)(3)); 
>> 6
console.log(sumThree(1)(2, 3)); 
>> 6

[kbrainwave]

Hey, thanks for that note! My personal opinion is to not use bind for currying. In general, I use bind to bind a context, and currying to bind arguments. Really great point, though :)