Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Side-effect:</p> <p>Think of a side-effect as something that does <b>two things</b> at once. For example:</p> <p>Classic example of a side effect:</p> <pre><code>var i = 1; var j = i++; </code></pre> <p>The side effect happens at <code>i++</code>. What happens here is <code>j</code> becomes 1 <b>and then</b> <code>i</code> gets incremented and becomes 2. In other words, two things happened and the side-effect was that <code>i</code> became 2. </p> <p>Closure:</p> <p>Visualize a chain of links like this: &lt;>&lt;>&lt;>&lt;>&lt;>&lt;>&lt;>. Imagine that the name of this chain of links is called the <b>scope chain</b>. Then imagine that all these links connect <b>objects</b> together like this: &lt;>object&lt;>object&lt;>object&lt;>. Now, keep in mind the following:</p> <p>(1) <b>All scope chains begin with the global object</b>.</p> <p>(2) <b>When a function is defined, a scope chain for that function is stored</b>.</p> <p>(3) <b>When a function is invoked, it creates a new object and adds that to the scope chain.</b></p> <p>Now, please look at the following example:</p> <pre><code>function counter () { // define counter var count = 0; return function () { return count + 1;}; // define anonymous function }; var count = counter(); // invoke counter </code></pre> <p>In this example, when <code>counter()</code> is defined, the scope chain for counter looks like this: &lt;>global object&lt;>. Then, when <code>counter()</code> is invoked, the scope chain looks like this: &lt;>global object&lt;>counter object&lt;>. After that, the function with no name (called an anonymous function) inside counter is defined and invoked. The scope chain for the anonymous function once invoked looks like this: &lt;>global object&lt;>counter object&lt;>anonymous function object&lt;></p> <p>Heres were the closure part comes in. If you notice, the anonymous function is using the variable <code>count</code> which was defined outside of it. The reason is because <b> the anonymous function can access any variables defined in its scope chain</b>. This is what a closure is, a function along with references to any variables in its stored scope chain.</p> <p>However, in the above example, once the functions return, the objects created at invocation are discarded so there really is no point. Now look at the following:</p> <pre><code>function counter () { // define counter var count = 0; function f() { return count + 1;}; // define f return f; // return f }; var count = counter(); // invoke counter </code></pre> <p>In this example, I am returning a function named <code>f</code> and assign that to the variable <code>count</code>. Now the variable <code>count</code> holds a reference to the entire scope chain and it does not get discarded. In other words the variable count stores the scope chain like this: &lt;>global object&lt;>counter object&lt;>anonymous function object&lt;>. This is the power of closures, you can hold a reference to a scope chain, and call it like this: <code>count()</code>.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload