Untitled

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/darcula.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style2.css">
</head>

<body>
    <section class="header">
        <h1>A <span class="yellow">BraveDuck</span> Adventure</h1>
        <h4>Into Closures</h4>
    </section>

    <section class="content">
        <h1>Functions within functions</h1>
        <p class="quote" data-who="- Some Wordy Pants">A closure is formed when an <em>outer</em> function encloses an
            <em>inner function</em>, and that inner function accesses the variables defined in the enclosing function's
            scope after the enclosing function has finished invoking.</p>
        <p>Now, I love word-salad as much as the next fellow, but that's a heap and a half to understand if we're only
            just learning about function scopes.</p>
        <p>So, rather than focusing on whether we can <em>talk the talk</em> let's just go walk the walk with a bit of
            code.</p>
        <h2>The humble returnStr function</h2>
        <p>Observe the following very simplistic function. It accepts a single parameter str, and returns that
            parameter without doing anything else.</p>
        <pre><code>
                function returnStr(str) {
                    return str;
                }
                console.log(returnStr("BraveDuck")) // prints 'BraveDuck'
            </code></pre>
        <p>So far so good: However, let's now modify our returnStr function. Now, instead of returning the <em>str
                parameter</em> the function will return a new <em>function definition</em> which then returns str.</p>


        <pre><code>
                function returnStr(str) {
                    return function() {
                        return str;
                    }
                }
                // definitely does not print 'BraveDuck'
                console.log(returnStr("BraveDuck"))
        </code></pre>

        <p>So, what happens? The important thing to note is that when we <em>Invoke returnStr</em> we get <em>a new
                function definition</em> which is <b>not</b> automatically invoked.</p>
        <p>So, if we wanted to return to a point where our function correctly printed <em>str</em> we could immediately
            invoke the newly returned function.</p>
        <pre><code>
            function returnStr(str) {
                return function() {
                    return str;
                }
            }
            //notice: the double function call inside the console log.
            console.log(returnStr("BraveDuck")());
        </code></pre>
    </section>
    <section class="content">
        <h1>Further illustrating the point of returning a function definition</h1>
        <p>To further illustrate the point of returning a function definition, let's try to break it into a few more
            steps.</p>
        <em>We utilize the following knowledge:</em>
        <ul>
            <li>variables can store anything, even functions.</li>
            <li>a function stored in a variable can be invoked later.</li>
        </ul>

        <pre><code>
            function returnStr(str) {
                return function() {
                    return str;
                }
            }

            var savedMethod1 = returnStr('BraveDuck');
            var savedMethod2 = returnStr('BraveReader');
        </code></pre>
        <p>Okay, so in the above snippet, we call returnStr twice and store the <em>function definition</em> returned by
            returnStr in savedMethod1 and savedMethod2.</p>
        <p>Note: we invoked the method with two different text strings. BraveDuck, and BraveReader.</p>
        <p>Because the function returned from returnStr exists inside a <em>closure</em> of returnStr, it still holds a
            reference to the specific value of <em>str</em></p>
        <p>So now when we invoke either savedMethod1, or savedMethod2, it returns the "memorized" string from when those
            methods were defined.</p>
        <pre><code class="js">
                console.log(savedMethod1()); //prints 'BraveDuck'
                console.log(savedMethod2()); //prints 'BraveReader'
        </code></pre>
        <p>So as seen from the snippet we are now able to print both BraveDuck and BraveReader without ever referencing
            the <em>str</em> parameter directly in our print statement.</p>
    </section>
    <section class="content">
        <h1>Lets add a bit more complexity</h1>
        <p>Now that we have seen that its possible to create a "closure" by returning a function definition and saving
            it, we'll add a little more complexity.</p>
        <p>Observe the following code, which returns a new function that will repeat a text.</p>
        <pre><code>
        function numberRepeater(times) {
            return function(text) {
                let repeatedText = "";
                for(let i = 0; i &lt; times; i++) {
                    repeatedText += text;
                }
                return repeatedText;
            }
        }
    </code></pre>
        <p>Now this example is fairly similar to the previous one, with one notable example of an added parameter to the
            <em>inner function</em>.</p>
        <p>The point that might be a bit confusing at this part if you are unused to reading code is understanding where
            <em>text</em> is defined</p>
        <p>The answer, simply put is: Later.</p>
        <p>Because <em>numberRepeater</em> is returning a <em>function definition</em> we can give this function a
            parameter, exactly as if we were writing a function normally, and then, when we invoke this returned
            function definition later. That is when <em>text</em> is defined.</p>
        <pre><code class="js">
        //print hello 3 times by immediately invoking the returned inner function.
        numberRepeater(3)("hello"); //print 'hellohellohello';
    </code></pre>
        <p>Now to break it up into a few more steps, let's use our <em>numberRepeater</em> function to make a new
            function that always repeats a text 5 times.</p>
        <pre><code>
        const repeatFive = numberRepeater(5);
    </code></pre>
        <p>Because repeatFive is not immediately invoked, the function definition gets saved to <em>repeatFive</em> in a
            closure with a reference to times instantiated to the value 5.</p>
        <pre><code class="js">
        // prints 'BraveDuckBraveDuckBraveDuckBraveDuckBraveDuck'
        repeatFive('BraveDuck');
        // prints 'SnuggumsSnuggumsSnuggumsSnuggumsSnuggums'
        repeatFive('Snuggums');
    </code></pre>
        <p>and the full code listing looks as follows:</p>
        <pre><code>
            function numberRepeater(times) {
                return function(text) {
                    let repeatedText = "";
                    for(let i = 0; i &lt; times; i++) {
                        repeatedText += text;
                    }
                    return repeatedText;
                }
            }

            numberRepeater(3)("hello");
            const repeatFive = numberRepeater(5);
            repeatFive('BraveDuck');
            repeatFive('Snuggums');
    </code></pre>
    <p>With this we can begin to see the potential of closures being able to refer to the variables of their parent scope, even after the outer function has finished being invoked.</p>
    </section>
    <section class="content sign-off">
        I hope this write-up has been useful to you. Thanks for reading.
    </section>
    <script>
        hljs.initHighlighting();
        console.log(hljs);
    </script>
</body>

</html>