Skip to content

Files

Latest commit

SunJieMingSunJieMing
SunJieMing
and
SunJieMing
Feb 8, 2018
7367e68 · Feb 8, 2018

History

History
This branch is 1 commit ahead of, 13 commits behind bloominstituteoftechnology/Precourse:master.

Lesson10-JS-VII

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Feb 8, 2018
Feb 6, 2018

Lesson 10: Javascript VII (Closure)

(Attention: These are the class notes for the Lambda School pre-course instruction workshop. This is meant to serve as an accompaniment to the class)

In this lesson we will cover:

  • Closure

Closure

In JavaScript functions are first-class objects. What this means is that we can use functions in a very flexible manner. You've already seen how we can assign functions to variables:

    const foo = function() {};

We can put functions on objects:

    const obj = {};
    obj.foo = function() {};

We can put functions in arrays:

    const functions = [
        function() {},
        function() {},
    ];

We can pass functions into other functions (these are called callback functions):

    function foo(cb) {
        cb();
    }

    foo(function() {
        console.log('I am a callback function!');
    });

And finally, we can return a function definition from a function:

    function outer() {
        return function() {
            console.log('hi!');
        };
    }

    const inner = outer();
    inner(); // logs 'hi'

The function that retuns the new function is called a "Higher Order Function" or HOF. The idea of closure is simply that inner that's defined up above is able to look back into outer for variables that it needs. It's scope chain is going to look inside of outer before it looks at the global scope.

Here's another example:

    function outer() {
        const name = 'Ben';
        return function() {
            console.log(name);
        };
    }
    const name = 'Dan';
    const inner = outer();
    inner(); // logs 'Ben'

As you can see from the example above the function inner is able to look back into outer's scope to retrieve the name variable. It looks inside of outer before it checks the global scope so the name that is printed is 'Ben' instead of 'Dan'.

This also applies to the function's parameters:

    function makeMultiplier(x) {
        return function(y) {
            return x * y;
        }
    }

    const multiplyByFive = makeMultiplier(5);
    const product1 = multiplyByFive(10);

    const multiplyByTwo = makeMultiplier(5);
    const product2 = multiplyByTwo(7);

    console.log(product1); // logs 50
    console.log(product2); // logs 14

In the example above the x and the y are both set by their respective function calls. This can be used in many interesting ways. You can make cache functions, private variables, and you can customize a function's behavior as we did in the example above. We are able to produce a custom multiplication function.

Additional Resources: