{"componentChunkName":"component---src-templates-blog-post-js","path":"/what-is-call-bind-apply-in-javascript","result":{"data":{"markdownRemark":{"id":"d9d55ecf-df73-5be1-af1f-ddcb87a5cfe4","html":"

Hey guys,

\n

So you might have heard about these famous methods especially the bind method as it used so much, so let's try and understand about these

\n

Call and Apply

\n
function greeting(){\n  console.log(\"hello\")\n}\ngreeting() // hello\ngreeting.call() //hello\ngreeting.apply() //hello
\n

This is a very simple code that I have written, it's just a function named greeting but at the end, you might realize something you could have not seen before, I am not talking about the normal function call greeting but when we use call and apply

\n

As you see from the code snippet that I have also written the output of the function call so the first that we regularly use is the normal function call and it outputs hello but the next is also a function call which we use doing the call method and it gives the same output as hello and lastly using apply method we also get the same output

\n

Well underneath the hood JS uses .call() method where a function is invoked that means greeting.call() is always used and greeting() is just the shortcut way to write that\nAnd when we use apply it gives the same result

\n

We have seen the result of using call and apply but now let's see how they can be useful

\n
const student1 = {\n\tname: \"Harry\",\n\tpercent:60,\n\tincrement(){\n\t\t return this.percent = 100\n\t}\n}\nstudent1.increment()
\n

What I have done here is I have defined an object named student1 and given name and percent and also an increment method to it so that the percent can be incremented whenever the method is called( if you don't know about the \"this\" keyword please refer to this article)

\n

Now what I want to do is used use increment method of the student1 and use it for another object named student2

\n
const student1 = {\n\tname: \"Harry\",\n\tpercent:60,\n\tincrement(){\n\t\t return this.percent = 100\n\t}\n}\n\nconst student2 = {\n\tname:\"Marry\",\n\tpercent:30\n}\n\nstudent1.increment()\nstudent1.increment.call(student2)
\n

If you run this code in your editor, you will find out that the percent of student2 has increased to 100 and that is the benefit of using the call function is that we don't have to repeat the method in every object that needs it and helps in writing DRY code

\n

Also, the call method can accept parameters like so

\n
const student1 = {\n\tname: \"Harry\",\n\tpercent:60,\n\tincrement(num1, num2){\n\t\t return this.percent += num1 + num2\n\t}\n}\n\nconst student2 = {\n\tname:\"Marry\",\n\tpercent:30\n}\n\nstudent1.increment(10,20)\nconsole.log(student1.percent) //90\nconsole.log(student2.percent) //30\nstudent1.increment.call(student2, 20,50)\nconsole.log(student2.percent) //100
\n

And the output will be 100 for student2 and 30 for student1

\n

Now we know what call does and now let's see what apply does differently from the same example

\n
const student1 = {\n\tname: \"Harry\",\n\tpercent:60,\n\tincrement(num1, num2){\n\t\t return this.percent += num1 + num\n\t}\n}\n\nconst student2 = {\n\tname:\"Marry\",\n\tpercent:30\n}\n\nstudent1.increment(10,20) //90\nconsole.log(student2.percent) //30\nstudent1.increment.apply(student2, [20,50])\nconsole.log(student2.percent) //100
\n

Well apply doesn't do anything much different it just changes the way we pass argument using apply we pass arguments through an array but it returns the same result

\n

Now if you want to choose whether to use call or apply it depends on how to want to pass the arguments, if you want to pass them as an array then use apply, if you want to pass normally use call

\n

Also as you can see from the above example the method increment has the \"this\" keyword which helps us to use it in other objects as well, if a method doesn't have that can't use it

\n

Bind method

\n

Moving on to the bind part and what it does let's see

\n

Well unlike call and apply which instantly give the output, bind on the other hand return a function

\n
const student1 = {\n\tname: \"Harry\",\n\tpercent:60,\n\tincrement(num1, num2){\n\t\t return this.percent += num1 + num2\n\t}\n}\n\nconst student2 = {\n\tname:\"Marry\",\n\tpercent:30\n}\n\nstudent1.increment(10,20) //90\nconsole.log(student2.percent) //30\nconst incrementedStudent2 = student1.increment.bind(student2, 20,50)\nincrementedStudent2()\nconsole.log(student2.percent) //100
\n

So bind helps us to store the borrowed method for later use in form of a new function

\n

You might have seen the bind method being used for the 'this' keyword, which is a common thing that bind method is used for

\n

Let me explain the bind method passes the \"this\" keyword which refers to a certain object as an argument to itself, it's like storing the \"this\" keyword for later use and returning a function

\n
const singer = {\n  name:\"Joy\",\n  sing(){\n    console.log(\"1\", this)\n    var singAgain = function() {\n\t\tconsole.log(\"2\", this)\n  }\n  return singAgain.bind(this)\n  }\n}\n\nsinger.sing()()
\n

This is an example that I used while explaining the \"this\" keyword

\n

So in this, as you can see I have used the bind method to store or bind the \"this\" keyword which refers to the object singer because if you see carefully it is not inside the function singAgain( ) it's inside the sing function where the \"this\" keyword still refers to the object singer

\n

Now as we know that the bind function stores the value for later use and binds it to the particular function it is attached to and then returns a function

\n

If you run this code inside the console you will see that both the first console.log and second refer to the same object which is the singer object

\n

And if any of you are wondering why is singer.sing()() is called twice well because if you only do like singer.sing() then it just returns the singAgain function it doesn't invoke it, so to invoke we have to again call it

\n

Was the article helpful? Do you have any doubts? Any topic you would like us to cover?

\n

Reach out to us on Twitter and Instagram where we try to provide more value in threads and carousal formats

\n

Thank You for your time

\n

Keep learning, Keep coding :)

\n","excerpt":"Hey guys, So you might have heard about these famous methods especially the bind method as it used so much, so let's try and understand about these…","frontmatter":{"date":"April 10, 2021","slug":"/what-is-call-bind-apply-in-javascript","title":"Call, Bind and Apply In Javascript","description":"Many developers get confused or don't understand the basics of call, bind, and apply, in this article, you will understand everything related to call, bind and apply","featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsTAAALEwEAmpwYAAADA0lEQVQ4yz1TyW4TQRTsnhnP4m1sJ2PjOLEdiBOCQ4z3sU2iBBKyO4vBZAEEQYhFICSEuIEEggsXLiAhbiBx4Wf4Cm5IfEJRbZbDU4+m36v3qrqekOlVCO8CRGIOItaGiDYgwhXIUAlacBYyWIQePAPDOQNpz0BaZbhOE6bdhIjMQ3obkCM9iLEDiNwRhJa9DJnZgklgk8CaAnZ9mATWIxUI/RyEqDIaf8JuwLJ9BgFDbcihS9BObBPjCsToVeZMHkOOH8DO9mBnNqGlliGGFyAT5yGCDVTrZfR2Sri8O4tqrQwRaMCItmE5PjSLDaLzMIZXIVNdyPQuAYuPIaYfwCocwzp5CC27x44r0F3Sly18+TAF/BoFfo7i8/tJFjRhhJrQSDsYalEGRX0OMr7EaVd4P3UHcvo+pDrzhxBJUg+fR4DJqvjrxwJ+fE/h3csInj7MQ1gEMGsIRNqw3Q5MTmko0KA/kEDI/BH0LPl7q4NOglQGYdd52cS7NzP49imDt8+TuHHACamfsOr/Q6OmAaUrv0317x+AyUSTpyQVEahBD/nwxlY4hY8TuUXEkj7cZAeJ9NJgwj+P04TDOiPUoUuWoKW3CUhUdaEzDGUHswEnNockwQxFW68SiMmKjlZFmA8WV6BsGqA0treGQH4fonAL4vQ95rDTwFMBWkMvIza0AG9keUBFmIpCCRFvgZ78m8N/0dQFuNk1iBRjjHLlDv4C3iUgdTOdDlwmqe6FqR2kc0zUygTxkSt0USjuIUWARObSgK6RmMeUfxPRiR6GTu9jpHobBq0nT11jnbcO6S5jfLqPRvsWdnpPUazQoHoFDmmubzzC1s4T7F15hprPAqcGy1vEYvcx9m+/wu61F+gdv4ZXug6RoQ81tTbJLuITfcSzNCd1M8ItOE4Ldphi0xaSD6SFOVm0DsdtQYu3EcxchDe+zpo1RPKbXD+yGtmkRGoHM31YuT705Ab3eA4GH8pQtnG4enaJ5yzjLL02y5Ws8eWbg/UUUboixqZx2o1TC27Zb22AcYspd3rUAAAAAElFTkSuQmCC","aspectRatio":1.502145922746781,"src":"/static/1ba1fbf35cd04d930f9ecfbf2612f45f/03979/callbindapply-cover.png","srcSet":"/static/1ba1fbf35cd04d930f9ecfbf2612f45f/6cdeb/callbindapply-cover.png 350w,\n/static/1ba1fbf35cd04d930f9ecfbf2612f45f/b1dd8/callbindapply-cover.png 700w,\n/static/1ba1fbf35cd04d930f9ecfbf2612f45f/03979/callbindapply-cover.png 800w,\n/static/1ba1fbf35cd04d930f9ecfbf2612f45f/1783d/callbindapply-cover.png 1050w,\n/static/1ba1fbf35cd04d930f9ecfbf2612f45f/942ca/callbindapply-cover.png 1400w,\n/static/1ba1fbf35cd04d930f9ecfbf2612f45f/b5274/callbindapply-cover.png 3000w","sizes":"(max-width: 800px) 100vw, 800px","maxHeight":533,"maxWidth":800},"sizes":{"src":"/static/1ba1fbf35cd04d930f9ecfbf2612f45f/ee604/callbindapply-cover.png"}}}}}},"pageContext":{"id":"d9d55ecf-df73-5be1-af1f-ddcb87a5cfe4","previous":{"id":"75ee8fb3-5387-5211-8eb5-4e4aed5f336f","frontmatter":{"slug":"/how-this-keyword-works-in-javascript","template":"blog-post","title":"This Keyword In JavaScript"}},"next":{"id":"cca980b8-bdd7-5605-9e65-5ae67841853e","frontmatter":{"slug":"/what-is-closures-in-javascript","template":"blog-post","title":"Closures | Javascript"}}}},"staticQueryHashes":["228695001","3868140423"]}