Call, Apply and Bind in JavaScript are very powerful function that allows you to borrow object properties and method. To understand this I am going to put a very simple example to output same result using all three function. (call, apply and bind). Let us look at the code below:-<\/p>\n\n\n\n
let obj = {\n num : 2\n}\nlet addToThis = function(a, b, c){\n return this.num + a + b + c;\n}<\/code><\/pre>\n\n\n\nIn the above code we have an object with name obj<\/code> which has property called num<\/code> and its value is 2<\/code>. And another function with a name addToThis<\/code> which has parameter of a, b and c. It return the sum of a, b and c parameter along with property name called num<\/code> which is neither available in that function nor defined as global variable. num<\/code> is available in the global object named obj<\/code>. Now with the help of call<\/code> function we will try to access the property of obj<\/code> and perform the sum action and return the result.<\/p>\n\n\n\nCall<\/h2>\n\n\n\nconsole.log( addToThis.call(obj, 2, 3, 4) ); \/\/ output:- 11\n--------------------------------\nlet obj = {\n num : 10\n}\nfunction add(...args) {\n let sum = 0 + this.num;\n for(let i=0; i<args.length; i++) {\n sum = sum + args[i];\n }\n return sum;\n}\nlet num = [1,2,3,4,5];\nconsole.log(add.apply(obj, num)) \/\/ 25\n<\/code><\/pre>\n\n\n\nReal use case of Call function can be done in this way.<\/p>\n\n\n\n
let car = function(wheels) {\n this.wheels = wheels\n}\nlet Maruti = function(wheels, isBS4Engine) {\n car.call(this, wheels);\n this.isBS4Engine = isBS4Engine;\n}\n\nlet bmw = new Maruti(4, true)\nconsole.log(bmw) \n\/\/output \n{isBS4Engine: true, wheels: 4}<\/code><\/pre>\n\n\n\nLet us suppose we have car constructor. A car may have 4 wheels in common. So I gave the property of wheels. We have one more constructor called Maruti which has wheels and engine type. In this constructor we have derived wheels property from car constructor and assign engine type. When the bmw car is created using Maruti constructor having wheels and isBS4Engine. Here’s another example of call.<\/p>\n\n\n\n
let argsToArray = function(){\n console.log(arguments);\n console.log([].slice.call(arguments));\n}\nargsToArray(1,2,3)<\/code><\/pre>\n\n\n\nAbove code we have a function that no parameter defined. But while calling the function we pass 3 params. Now in order to access these 3 params we can use arguments<\/code> keyword of JavaScript. The only problem is that, it return those params as an array object with no Array prototype such as slice, push, splice etc. With this line of code [].slice.call(arguments)<\/code> we are trying to borrow all the prototype of an array (blank array still have array prototypes) to the arguments. Now when you console log it will return a perfect array.<\/p>\n\n\n\n Apply<\/h2>\n\n\n\n
Its same as Call but Apply accept function arguments as an array form. See the below example.<\/p>\n\n\n\n
let arr = [2,3,4]\nconsole.log(addToThis.apply(obj, arr)); \/\/ output:- 11<\/code><\/pre>\n\n\n\nReal use case of Apply function<\/p>\n\n\n\n
Math.min(1,2,3); \/\/output : 1<\/code><\/pre>\n\n\n\nIn order to get minimum value out of the given parameter value we can use Math.min() method with split digits. Now using Apply function we can achieve same like this.<\/p>\n\n\n\n
let num = [1,2,3]\nlet min = Math.min.apply(null, num);\nconsole.log(min) \/\/ output: 1<\/code><\/pre>\n\n\n\nBind<\/h2>\n\n\n\n
JavaScript function becomes too complicated with this keyword when you have nested functions. Instead of borrowing obj the bind will get the entire object available for the local scope.<\/p>\n\n\n\n
let obj = {\n num : 2\n}\nlet addToThis = function(a, b, c){\n return this.num + a + b + c;\n}\nlet bound = addToThis.bind(obj);\nconsole.log(bound(2,3,4));<\/code><\/pre>\n\n\n\nReal use case of bind can be done like this.<\/p>\n\n\n\n
let app = {\n getUser : function(cb){\n cb();\n },\n parseUserData : function(){\n console.log(\"Parse use\");\n },\n renderGetUser : function(){\n this.getUser(function(){\n this.parseUserData();\n }.bind(this))\n }\n}\napp.renderGetUser()<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"Call, Apply and Bind in JavaScript are very powerful function that allows you to borrow object properties and method. To understand this I am going to put a very simple example to output same result using all three function. (call, apply and bind). Let us look at the code below:- In the above code we […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-218","post","type-post","status-publish","format-standard","hentry","category-javascript"],"yoast_head":"\n
Call, Apply and Bind in JavaScript - Santosh Kumar Shah<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/santosh-shah.com\/blog\/call-apply-and-bind-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Call, Apply and Bind in JavaScript - Santosh Kumar Shah\" \/>\n<meta property=\"og:description\" content=\"Call, Apply and Bind in JavaScript are very powerful function that allows you to borrow object properties and method. To understand this I am going to put a very simple example to output same result using all three function. (call, apply and bind). Let us look at the code below:- In the above code we […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/santosh-shah.com\/blog\/call-apply-and-bind-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Santosh Kumar Shah\" \/>\n<meta property=\"article:published_time\" content=\"2021-02-10T13:27:13+00:00\" \/>\n<meta name=\"author\" content=\"Santosh Kumar Shah\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Santosh Kumar Shah\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/call-apply-and-bind-in-javascript\/\",\"url\":\"https:\/\/santosh-shah.com\/blog\/call-apply-and-bind-in-javascript\/\",\"name\":\"Call, Apply and Bind in JavaScript - Santosh Kumar Shah\",\"isPartOf\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/#website\"},\"datePublished\":\"2021-02-10T13:27:13+00:00\",\"author\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f\"},\"breadcrumb\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/call-apply-and-bind-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/santosh-shah.com\/blog\/call-apply-and-bind-in-javascript\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/call-apply-and-bind-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/santosh-shah.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Call, Apply and Bind in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#website\",\"url\":\"https:\/\/santosh-shah.com\/blog\/\",\"name\":\"Santosh Kumar Shah\",\"description\":\"JavaScript Developer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/santosh-shah.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f\",\"name\":\"Santosh Kumar Shah\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g\",\"caption\":\"Santosh Kumar Shah\"},\"description\":\"I am JavaScript developer.\",\"sameAs\":[\"https:\/\/santosh-shah.com\/blog\"],\"url\":\"https:\/\/santosh-shah.com\/blog\/author\/sks7yu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Call, Apply and Bind in JavaScript - Santosh Kumar Shah","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/santosh-shah.com\/blog\/call-apply-and-bind-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Call, Apply and Bind in JavaScript - Santosh Kumar Shah","og_description":"Call, Apply and Bind in JavaScript are very powerful function that allows you to borrow object properties and method. To understand this I am going to put a very simple example to output same result using all three function. (call, apply and bind). Let us look at the code below:- In the above code we […]","og_url":"https:\/\/santosh-shah.com\/blog\/call-apply-and-bind-in-javascript\/","og_site_name":"Santosh Kumar Shah","article_published_time":"2021-02-10T13:27:13+00:00","author":"Santosh Kumar Shah","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Santosh Kumar Shah","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/santosh-shah.com\/blog\/call-apply-and-bind-in-javascript\/","url":"https:\/\/santosh-shah.com\/blog\/call-apply-and-bind-in-javascript\/","name":"Call, Apply and Bind in JavaScript - Santosh Kumar Shah","isPartOf":{"@id":"https:\/\/santosh-shah.com\/blog\/#website"},"datePublished":"2021-02-10T13:27:13+00:00","author":{"@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f"},"breadcrumb":{"@id":"https:\/\/santosh-shah.com\/blog\/call-apply-and-bind-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/santosh-shah.com\/blog\/call-apply-and-bind-in-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/santosh-shah.com\/blog\/call-apply-and-bind-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/santosh-shah.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Call, Apply and Bind in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/santosh-shah.com\/blog\/#website","url":"https:\/\/santosh-shah.com\/blog\/","name":"Santosh Kumar Shah","description":"JavaScript Developer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/santosh-shah.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f","name":"Santosh Kumar Shah","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g","caption":"Santosh Kumar Shah"},"description":"I am JavaScript developer.","sameAs":["https:\/\/santosh-shah.com\/blog"],"url":"https:\/\/santosh-shah.com\/blog\/author\/sks7yu\/"}]}},"_links":{"self":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts\/218","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/comments?post=218"}],"version-history":[{"count":0,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts\/218\/revisions"}],"wp:attachment":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/media?parent=218"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/categories?post=218"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/tags?post=218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}