This repository has been archived by the owner on Jul 24, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathapply-call-and-bind-in-javascript.html
34 lines (29 loc) · 3.19 KB
/
apply-call-and-bind-in-javascript.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta name="description" content="Apply, bind, and call are higher order functions that help with `this`."><!-- Bing --><meta name="msvalidate.01" content="45CBBE1BD8265A2217DFDA630EB8F84A" /><title>Tiny Brain Fans - Apply, Call and Bind in Javascript</title><link rel="stylesheet" href="tinystyle.css"></head><body>
<main id="main"><article id="content"><h1 id="title">Apply, Call and Bind in Javascript</h1><p>Apply, bind, and call are <a href="higher-order-functions.html">higher order functions</a> that help with <code>this</code>.They allow you to invoke a function, which would normally be called from and on the same object, and change which object to which it will be applied.</p>
<h2>Apply and Call</h2>
<pre><code class="language-javascript">// functionName.apply(newThis, [arguments, moreArguments]);
// functionName.call(newThis, arguments, moreArguments);
const numbers = [5, 6, 2, 3, 7];
const max = Math.max.apply(null, numbers);
console.log(max); // expected output: 7
const min = Math.min.apply(null, numbers);
console.log(min); // expected output: 2
</code></pre>
<p>While the syntax of apply and call are almost identical, the fundamental difference is that <strong>apply</strong> accepts an <strong>array</strong> of arguments, and <strong>call</strong> accepts a <strong>comma</strong>-separated argument list.</p>
<h2>Bind</h2>
<p>The <code>bind()</code> method <strong>returns a new function</strong> that, when called, has its <code>this</code> keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.</p>
<pre><code class="language-javascript">var num = 2;
var x = { num: 6 };
var addTwo = function () {
return this.num + 2;
};
var addTwoToX = addTwo.bind(x);
addTwo(); // returns 4 since this.num = 2
addTwoToX(); // returns 8 since this.num = 6
</code></pre>
<h2>References:</h2>
<ol>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" target="_blank">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" target="_blank">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind</a></li>
</ol>
<section id="backlinks"><details><summary>Backlinks</summary><ul><li><a href="react.html">React</a></li></ul></details></section><p class="last-modified">Last modified: 202206101419</p></article></main><footer><nav><a href="index.html">Sitemap</a></nav><div class="social"><p>Built using <a href="http://codeberg.org/milofultz/swiki" target="_blank" rel="noopener noreferrer">{{SWIKI}}</a></p><p><a href="http://codeberg.org/milofultz/" target="_blank" rel="noopener noreferrer">Codeberg</a></p><p><a href="http://milofultz.com/" target="_blank" rel="noopener noreferrer">milofultz.com</a></p><p><a href="https://merveilles.town/@milofultz" target="_blank" rel="me noopener noreferrer">Mastodon</a></p></div></footer></body></html>