Closures (In JavaScript and Beyond)

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

var 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 var getUniqueId = (function(){ var nextGeneratedId = 0; return function(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 var nextGeneratedId = 0; var getUniqueId = function(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;

Pass Your Interviews with My FREE 7-Day Crash Course

I'll teach you the right way of thinking for breaking down tricky algorithmic coding interview questions you've never seen before.

No prior computer science training necessary—I'll get you up to speed quickly, skipping all the overly academic stuff.

No spam. One-click unsubscribe if you hate it.

Psst. Pass it on.

. . .