{"id":2414,"date":"2022-12-16T16:19:10","date_gmt":"2022-12-16T15:19:10","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=2414"},"modified":"2022-12-16T16:19:10","modified_gmt":"2022-12-16T15:19:10","slug":"how-to-use-the-call-apply-and-bind-methods-in-javascript","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2022\/12\/16\/how-to-use-the-call-apply-and-bind-methods-in-javascript\/","title":{"rendered":"How to Use the Call, Apply, and Bind methods in JavaScript"},"content":{"rendered":"\n<p><strong>Call<\/strong>&nbsp;is a function that helps you change the context of the invoking function. In layperson&#8217;s terms, it helps you replace the value of&nbsp;<code>this<\/code>&nbsp;inside a function with whatever value you want.<\/p>\n\n\n\n<p><strong>Apply<\/strong>&nbsp;is very similar to the&nbsp;<code>call<\/code>&nbsp;function. The only difference is that in&nbsp;<code>apply<\/code>&nbsp;you can pass an array as an argument list.<\/p>\n\n\n\n<p><strong>Bind<\/strong>\u00a0is a function that helps you create another function that you can execute later with the new context of\u00a0<code>this<\/code>\u00a0that is provided.<\/p>\n\n\n\n<h4>call()<\/h4>\n\n\n\n<ul><li>It calls a function and explicitely speicifies the &#8220;this&#8221; value inside that function. <\/li><li>First argument is the &#8220;this&#8221; value and rest are the individual arguments expected by the function. <\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/12\/image.png\" alt=\"\" class=\"wp-image-2415\" width=\"464\" height=\"207\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/12\/image.png 693w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/12\/image-300x134.png 300w\" sizes=\"(max-width: 464px) 100vw, 464px\" \/><\/figure><\/div>\n\n\n\n<h4>Apply()<\/h4>\n\n\n\n<ul><li>It works similar to the call() method but instead of passing the expected arguments individually, it passes them in an array. <\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/12\/image-1.png\" alt=\"\" class=\"wp-image-2416\" width=\"427\" height=\"212\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/12\/image-1.png 695w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/12\/image-1-300x149.png 300w\" sizes=\"(max-width: 427px) 100vw, 427px\" \/><\/figure><\/div>\n\n\n\n<h4>bind()<\/h4>\n\n\n\n<ul><li>It creates a new copy of the given function and specifies its &#8220;this&#8221; value with the provided value.  This new function then can be called with its expected arguments<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/12\/image-2.png\" alt=\"\" class=\"wp-image-2417\" width=\"446\" height=\"224\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/12\/image-2.png 691w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/12\/image-2-300x151.png 300w\" sizes=\"(max-width: 446px) 100vw, 446px\" \/><\/figure><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Call&nbsp;is a function that helps you change the context of the invoking function. In layperson&#8217;s terms, it helps you replace the value of&nbsp;this&nbsp;inside a function with whatever value you want. Apply&nbsp;is very similar to the&nbsp;call&nbsp;function. The only difference is that in&nbsp;apply&nbsp;you can pass an array as an argument list. Bind\u00a0is a function that helps you [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1963,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[644,185,210],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2414"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=2414"}],"version-history":[{"count":1,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2414\/revisions"}],"predecessor-version":[{"id":2418,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2414\/revisions\/2418"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1963"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=2414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=2414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=2414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}