Closures (In JavaScript and Beyond)

A closure is a function that accesses a variable "outside" itself. Here's an example where "message…

A closure is a function that accesses a variable "outside" itself. For example:

const message = 'The British are coming.';

function sayMessage() {
    alert(message);             // Here we have access to message, even though it's declared outside this function!
}

We'd say that message is "closed over" by sayMessage() .

One useful thing to do with a closure is to create something like an "instance variable" that can change over time and can affect the behavior of a function.

// Function for getting the id of a dom element,
// giving it a new, unique id if it doesn't have an id yet
const getUniqueId = (() => {
    let nextGeneratedId = 0;
    return element => {
        if(!element.id) {
            element.id = `generated-uid-${nextGeneratedId}`;
            nextGeneratedId++;
        }

        return element.id;
    };
})();

Why did we put nextGeneratedId in an immediately-executed anonymous function? It makes nextGeneratedId private, which prevents accidental changes from the outside world:

// Function for getting the id of a dom element,
// giving it a new, unique id if it doesn't have an id yet
let nextGeneratedId = 0;
const getUniqueId = element => {
    if(!element.id) {
        element.id = `generated-uid-${nextGeneratedId}`;
        nextGeneratedId++;
    }

    return element.id;
};

// ...
// Somewhere else in the codebase...
// ...

// WHOOPS--FORGOT I WAS ALREADY USING THIS FOR SOMETHING
nextGeneratedId = 0;

Date: 2020-01-31 Fri 13:52

Author: Jack Liu

Created: 2020-02-08 Sat 21:26

Validate