JavaScript: apply and call

What are apply() and call() in JavaScript?#

apply and call are two of the less encountered and less well understood aspects of JavaScript, primarily because of their unfamiliarity.

Why are they unfamiliar?

Most of the learning materials (tutorials and books) available for JavaScript tend to teach JavaScript from the C/Java point of view.

JavaScript beginners typically endeavor to find out the closest C/Java equivalents in JavaScript and assume that they have covered everything JavaScript has to offer as a programming language.

They almost always miss an amazing aspect of JavaScript - it is also a functional programming language. There is no sensible equivalent of that aspect in C/Java. It is a completely different programming paradigm.

apply and call are two of the functional aspects of JavaScript. JavaScript as a functional programming language is a topic for another post, for now let's see what apply and call are.

It may sound very strange, but apply() and call() are function methods.

Not making sense?

Then try this: all JavaScript functions have two functions attached to them - apply and call.

I want to show you what apply() and call() are and what they do by the means of an example.

Let's create two functions:

function vocalize(quality) {
  console.log(this.name +' '+ this.sound +'s '+ quality);
}

function act(when, why) {
  console.log(this.name +' is a '+ this.type +' who '+ this.sound + 's ' + when +' '+ why);
}

Now run this code:

Everything working as expected?

Next, run this:

Analyze the result and see if it makes sense to you, or if you can make any sense out of it.

Notice how the functions vocalize() and act() aren't actually hard-wired to anything?

When you first executed the script it might have looked like the functions were hard-wired to the this (window or global) object, but then it turned out that the functions can be used by other objects as effectively.

Isn't that a drastic paradigm shift from Object-oriented programming (OOP)?

In OOP you have objects with tightly bound methods, in this case (functional programming) we have "free-floating" functions that can be tapped by any object and use them as if they were truly their methods.

That is the magic of apply() and call(). They both can change the context of this and make functions usable by different objects. They allow you to execute functions as methods of different objects.

The first parameter of both apply() and call() is the object that is to be used as the context for this. The second parameter, in case of apply, is an array of parameters; in case of call, it is a list of comma-seprated values.

Summary#

apply and call are function methods that allow a function to be executed in a dynamic context. apply accepts an array as the function arguments, call accepts a list of of comma separated values as the function arguments.

Refrences#

1. MDN - apply
2. MDN - call
3. WikiPedia - Object-oriented programming
4. WikiPedia - Functional programming