JS First-class functions & call, apply and bind methods
Tags: Javascript Tips, JavaScript

These are the 4 Javascript concepts every interviewer more likely asks In this article, we’ll see these 4 concepts in a simple and easy to understand way

First-class function

A function can simply be treated as variable. This makes a function return another function and hence the returned function can be called anywhere down the line. Let’s take a simple example:

We might know that addFunction can be executed by passing a and b values and that value can be stored in other variable. But, the concept of first-class function is that it allows us to return the addFunction to store it in a variable and can be printed it like this.

addFunction itself is stored in add variable and hence we can say that addFunction is the first-class function, and you see we can execute add which in-turn executes addFunction.

Call method

Let’s consider an employee object — john

john object has two properties (name & organization) and a method (getEmail). We can call these properties and method as shown.

Let’s now create another employee — james

Now, of course we can create the getEmail() method in james object as well. But let’s assume there are thousands of employees and do you think getEmail() should be in all of them? Absolutely not! Because, that violates DRY (Don’t Repeat Yourself) principle as we are duplicating the code.

So, what do we do to get james email? Ah, remember first-class functions which we discussed above! Let’s try that here on getEmail() from john object.

why the hell do we get an error here 🤨 It had worked fine for the addFunction above.

Well, john.getEmail() will give john’s email because ‘this’ keyword in getEmail() method is referring to john. So, john = this in john.getEmail().But what about just email() function? It is a normal function now and not a method anymore. Always remember that normal function like email() will not have this keyword. In other words, this keyword in normal function will be undefined.

Here comes call, apply and bind methods to rescue

We need a way to make email() function have this keyword. We can do that by calling call method on email().

A few things to note here:

call, apply and bind are the methods that can be called on any function because, ultimately, all functions are objects in Javascript

In email.call(john), the ‘this’ keyword is the first argument which is john and hence we now get the result john@google.com because getEmail() is called with john as this keyword

Now we can use this technique to call getEmail() on james like this,

Notice that in the third line above, even though james object doesn’t have getEmail() method, we still got the getEmail() method called on james using call method.

Let’s look at another method with arguments and then wrap up call method

We have a new method to get the address which takes street and city as arguments. Let’s call that like we did before.

Note that even though the getAddress() method takes two arguments, we are passing three arguments when calling that. As you already know, this is because the first argument is always the object referring to this keyword which is john in this case.

Well, that’s pretty much you need to know about call method

Apply method

apply() method is similar to call() with only one difference. The arguments that must be passed in to the method must be an array rather than a list as shown.

Notice we are wrapping street and city in an array unlike call method.

Bind Method

call() and apply() methods immediately calls the respective methods whereas bind() method will return a function after binding the passed argument to this keyword.

Sounds confusing right? Well, not really if we take a look at the example below.

In the first line we get email (first-class function) which is nothing new to you at this point. Notice the second line where we then bind that email to john object which returns another first-class function which we store it in johnEmail variable. At this point, johnEmail is the function which has this keyword bound to john. Hence, executing johnEmail() gives us john@google.com.

Similarly, we bind email to james and store the bound first-class function in jamesEmail. This, on execution, gives james@facebook.com. Hope this makes sense.

Let’s take a look at the address now to get more clarity on bind.

The address is a first-class function and we are binding it to john in second line. This gives a first-class function which is stored in johnAddress. Now, johnAddress can be called as a normal function by passing remaining arguments.

Can you bind second argument as well along with john?

Well yes! You can. Let’s see how.

Now you see we have combined / bound this keyword john which is first argument and Wall street which is second argument. we got a first-class function johnStreet and we then execute this function by calling remaining argument/s which is city in this case.

Note that we can do this for any or all arguments.