0% found this document useful (0 votes)

75 views

Call, Apply & Bind Methods in JavaScript - by Kunal Tandon - Medium

This article discusses the call, bind, and apply methods in JavaScript. These methods allow altering the context of the "this" keyword in a function to reference a different object. The call method calls a function and sets the "this" context for a single invocation. The apply method is similar but accepts an array of arguments. The bind method returns a new function with "this" permanently set to a given object. Examples are provided to demonstrate how each method works.

Uploaded by

m s reddy

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

75 views

Call, Apply & Bind Methods in JavaScript - by Kunal Tandon - Medium

Uploaded by

m s reddy

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 14

Open in app

Search Medium

Get unlimited access to all of Medium for less than $1/week. Become a member

call, apply & bind methods in JavaScript

An article from www.knowledgescoops.com

Kunal Tandon · Follow

4 min read · May 9, 2018

Listen Share More

If you are a regular JavaScript developer, you must have heard of the methods

call, bind & apply

Do you know what these methods are?

If the answer is no, don’t worry. By the end of this article, you will have a firm knowledge of
these methods.

The “this” keyword

Consider the following method:

function someMethod() {
console.log(this);
}

When someMethod() is executed in chrome’s console window, we get the Window object. As
this keyword refers to the top level Window object in a function’s scope.

Call, bind & apply methods

All these are the JavaScript methods that are used to alter the context of this keyword in a
method. Using these methods changes the reference of this keyword inside a method from
Window object to another object.

To explain this statement, let’s consider the following object:

var student = {
name: "Kunal",
age: 23
};

Consider the following method to Register a student for some course:

function Register(course, fees){

var studentName = this.name;
console.log("Registered student: " + studentName);
console.log("Course Name: " + course);
console.log("Course Fees: " + fees);
}

Notice how we used this keyword as if it is a student object. The method above uses
this.name to access the student object’s data.

But how can we achieve this? Let’s see.

When we try to call the Register function, we did not get the name printed as there is no
property named name in window object:

We will get the following output:

The call method

The call method allows us to call a function by changing the context of this keyword for the
single method call that we have executed with the call method.

The syntax to use call method is:

<FunctionName>.call(<objectToBindWithThis>, <FunctionParam1>,
<FunctionParam2>..)

To call the Register method with the call method, we use the statement:
Register.call(student, “JavaScript”, 99);

Output:

Notice, we get the value of this.name as Kunal . You can try modifying the function to use the
age property of student object as well.

For every call method, we have to send the student object to change the context of this

keyword.

The apply method

Similar to call method, we can change the context of this method with apply method usage.
The only difference is that we need to send function parameters as an array.

To call the Register function with apply , we use the syntax:

Register.apply(student, [ “Kunal”, 99 ]);

Output:
We get the similar output as the call method. The only difference is the syntax of using
apply method.

Similar to call , the context of this keyword is updated only for the executed call.

The bind method

Similar to call & apply , bind method does the same thing but it solves the problem of
sending the object in the method call every time.

The bind method call returns a new function which has the this keyword binded with the
object. We can call the function any number of times to execute the code.

Syntax:

var bindedRegister = Register.bind(student);

Here, we binded the student object with the Register method & stored it in a variable named
bindedRegister .

Logging the bindedRegister in the console window gives a function. This is the binded
register function.
We will call the bindedRegister function with the statement below:

bindedRegister("JavaScript", 99);

Output:

For more such articles, visit www.knowledgescoops.com

Want to read more articles like this?
Follow me on medium @kunaltandon.kt

Connect with me on LinkedIn:

https://www.linkedin.com/in/kunal-tandon/

JavaScript ES6 Programming Coding

Written by Kunal Tandon

1K Followers

Coder • Blogger • Problem Solver • 💁🏼‍♂️ Connect with me on LinkedIn @ http://bit.ly/kunal-tandon

More from Kunal Tandon

Kunal Tandon in Developer’s Arena

Streams and Buffers in Node.js

Explained with examples

5 min read · Nov 18, 2019

1.7K 4

Kunal Tandon in Developer’s Arena

IEnumerable vs ICollection vs IList vs IQueryable in C#

An article from www.knowledgescoops.com

2 min read · Mar 26, 2018

1.1K 7
Kunal Tandon in Developer’s Arena

Node Event Emitters — For Beginners and Experts

Everything you need to know about event emitters in Node.js

7 min read · Nov 15, 2019

2.1K 6

Kunal Tandon in Developer’s Arena

Streams, Piping, and Their Error Handling in Node.js

Explained with examples

6 min read · Nov 18, 2019

1.3K 2

See all from Kunal Tandon

Recommended from Medium

Rémy Villulles in JavaScript in Plain English

Caching with Redis and Node.js

How to connect your Node.js backend to Redis and cache your data

· 4 min read · Nov 22, 2022

40 2
React Dojo in JavaScript in Plain English

Frontend Engineer Technical Interview Preparation: Comprehensive Guide to

General Programming…
In today’s competitive job market, preparing for technical interviews is crucial for frontend engineers
seeking new opportunities. This…

· 7 min read · May 12

Lists

Stories to Help You Grow as a Software Developer

19 stories · 45 saves

Leadership
30 stories · 16 saves

How to Run More Meaningful 1:1 Meetings

11 stories · 21 saves

Stories to Help You Level-Up at Work

19 stories · 36 saves
Juan Cruz Martinez in Level Up Coding

What is a Higher Order Function?

Learn what higher-order functions are and why they are important in functional programming, and code
some examples in Python and…

· 6 min read · Jan 23

React Dojo in JavaScript in Plain English

Mastering Technical Interview: Dynamic Programming and Maximum Subarray
Sum
Part 2: A common question that interviewers ask — and how you should approach it.