Javascript Fundamentals: call() and apply()

Manipulating the this

Photo by Negative Space from Pexels

In order for us to manipulate the this keyword, there are three important methods that you have probably seen out in the wild: call(), apply() and bind().

call()

Underneath it all, functions use call() when you invoke a function.

Let's look at an example.

If we run the function we get hi!

So underneath the hood, we see that all functions when created have this property call that allows us to call the function. a() is just a shorthand that we can use.

But what about a.apply()?

Again we get hi! — same thing.

call() and apply() do the same thing — for now at least.

But let's see how call() and apply() can be useful besides just calling functions.

Let's say we are building a game.

Let's run the function and see what happens. We get 100.

Here even if Merlin’s health becomes 50, as long as we run heal, it's still going to be 100.

Now let's add another character to our game called archer.

Robinhood doesn’t do much but can we perhaps give him the healing power of the wizard by borrowing a function heal?

Because that’s real power. If we can borrow methods of other objects, we keep our code dry — we neither repeat ourselves nor add to memory. We have one place where the method is and one place where we can change it. That way, we create fewer bugs in our code.

So how can we do this?

Since archer isn’t part of the same object, we can't just do this.heal() because well, this object doesn't have it. Or we can just copy the code but the best way would be to use call and apply to borrow the methods.

I can simply say that Wizard.heal() but instead of calling it like before, I use call(). The first parameter of call should be what this is bound to.
So instead of using Wizard to call heal, we use archer.

We can see that at the beginning, archer had health 30 but after we used Merlin’s healing power, health became 100.

Now call() can receive other parameters. It can receive arguments so that we can give the heal method parameters.

For example, let's say the heal method took parameters num1 and num2.

So whatever two numbers we give, it adds to our current health. Now, let's call archer with the parameters.

I have 110 because to my current health of 30, I have added 50 + 30.

That's all call is useful for.

apply()

apply() does the same thing with one exception; it takes an array of parameters. So that if I run the function, it's still going to work.

Choosing which one to use depends on which one is easier to pass the arguments in. Just have to decide whether its an array of arguments or a comma-separated list of arguments.

Next time you want to copy a method from another object, use call() or apply(). Just ensure that the function contains this keyword because its only then that its dynamic.