😳🤯 💡 🚀 🔥 😀

Search... Write a post

Ritik

What the hack is call, apply,

36 @ritik_dev_js

Being a JavaScript Dev.

10

61
bind in JavaScript + FOLLOW

location
Ritik Apr 19 ・3 min read
India

#javascript #react #angular #vue joined

Mar 13, 2020
DISCUSS (2)

Before start looking into call, apply, bind you should understand - how does
"this" keyword works in JavaScript. Where the wild code grows

In short "this" creates a reference to an object. It may refer to global object i.e. Sign up (for free)
{window object} in global scope.

console.log(this);
//Window {parent: Window, opener: null, top: Window, length: 4, frames: Window, …}

And inside an Object to the Object itself.

const student = {
name:"ritik",
getDetails(){
console.log(this);
}
}

student.getDetails();
//{name: "ritik", getDetails: ƒ}

So that is how "this" gets context by its scope automatically.

But what if we want to specify the context(environment) of "this" to a

specific object.
Lets see this in code:

const religion = {
type: "humanity",
property:"greatest"
}

function getDetails(){
console.log(`${this.type} is the ${this.property} religion`);
}

getDetails();
//undefined is the undefined religion

So here "this" is refering to "window" object (according to its default

behaviour in function "this" refers to "window" object).
But we want it to refer to "religion" object.
That is where call, apply, bind comes into picture.

const religion = {
type: "humanity",
property:"greatest"
}

function getDetails(){
console.log(`${this.type} is the ${this.property} religion`);
}

getDetails.call(religion);
//humanity is the greatest religion
getDetails.apply(religion);
//humanity is the greatest religion

Here "call" or "apply "method helps to make connection between "religion"

object and "getDetails" function.
Or we can say "call" or "apply" method helped in creating a reference of
"this" in "getDetails" funtion to "religion" object.

Both "call" and "apply" work in the same way but they handle arguments in
different manner.
Now let us pass some parameters to the function "getDetails".

const religion = {
type: "humanity",
property:"greatest"
}

function getDetails(world,creature){
console.log(`${this.type} is the ${this.property} religion in the ${world} of ${creature
}

getDetails.call(religion,"modern world","human");
//humanity is the greatest religion in the modern world of human

getDetails.apply(religion,["modern world","human"]);
//humanity is the greatest religion in the modern world of human

"call" method takes arguments additional to the "this" context linearly

seperated by comma while
"apply" handles argument as an array.

Now what if you wanted to use "getDetails" function with different

"arguments" in many places of your code.
Using "call" or "apply" method multiple times-can be one of the solution but
"bind" method can make the process more easy.

"Bind" method creates a reference of "this" to the object it has been passed
with, same like "apply" or "call" but returns a function.
Now that function can be used multiple times with different "arguments" in
your code.

const religion = {
type: "humanity",
property:"greatest"
}

function getDetails(world,creature){
console.log(`${this.type} is the ${this.property} religion in the ${world} of ${creature
}

const newgetDetails = getDetails.bind(religion);

newgetDetails("modern world","human");
//humanity is the greatest religion in the modern world of human

newgetDetails("future world","different creatures");

//humanity is the greatest religion in the future world of different creatures

If you dont want to store the returning function than, It can be invoked
directly like this:

const religion = {
type: "humanity",
property:"greatest"
}

function getDetails(world,creature){
console.log(`${this.type} is the ${this.property} religion in the ${world} of ${creature
}

getDetails.bind(religion)("modern world","human")
//humanity is the greatest religion in the modern world of human

TheEnd
In this article we learn about call, apply, bind in JavaScript. Try out the code
samples and play with "this" keyword.
{This post is also available on ritikrana.netlify.com}

Ritik + FOLLOW

Being a JavaScript Dev.

@ritik_dev_js rtktwt ritikrana.in

Add to the discussion

PREVIEW SUBMIT

Apr 20
Michael Tharrington (he/him)

Love the title! "What the hack" would make for a great series.

3 REPLY

Apr 20
emadsaber

Useful article, thanks

2 REPLY

code of conduct - report abuse

Classic DEV Post from Mar 6 '19

Tutorial: How to share code

between iOS, Android &
Bruno Lemos
Web using React Native, + FOLLOW

react-native-web and
monorepo
Bruno Lemos
How to make react-native work in the browser, the right way

553 133

Another Post You Might Like

7 Mistakes That Keep You

Behind
jsmanifest
jsmanifest
Find me on Medium Learning JavaScript isn't fun for + FOLLOW
everybody, especially for people who are impatie...

281 19

Another Post You Might Like

How to Create the Drawing

Interaction on DEV's Offline
Ali Spittel
Page + FOLLOW
Ali Spittel

333 22

Colorize Your Console.Log() Registering Global

Components with Vue 3
ᴄᴀᴛᴀʟɪɴ ᴘɪᴛ - Apr 22 Jake Dohm - Apr 22

Selecting an Element Build a Simple CRUD App

GiandoDev - Apr 22 with Airtable, Vue + Vuetify
Carol Skelly - Apr 22

Home About Privacy Policy Terms of Use Contact Code of Conduct

DEV Community copyright 2016 - 2020