7 Functions for the master: closures and scopes

JavaScript closures are the mechanism that lets a function keep access to the variables and other functions that were in scope when it was defined, even if it runs much later or in a different place. This makes many everyday patterns possible, especially callbacks for events, timers, and animations, because the function can still “see” its surrounding data after the original scope has finished. Closures behave like a protective bubble around a function and its lexical environment, keeping those values alive as long as the function itself remains reachable.

The chapter then connects closures to the broader rules of scope. It explains that JavaScript scopes are created not only by functions, but also by modules and block structures such as if, for, and switch, with let and const following block scope while var is limited to the nearest function or module. It also shows how loop scoping works with closures, why let gives the expected per-iteration values in timer callbacks, and how execution order matters: variables can be in scope before they are initialized, leading to the Temporal Dead Zone, while function declarations are hoisted and can be used earlier than their appearance in code.

Finally, the text examines the global scope and the scope chain, showing how JavaScript resolves names by searching outward from the local scope to the global object, and how globalThis provides a consistent way to reach that object across environments. It also warns that closures can have memory costs, because engines may keep scope data alive longer than necessary when a function survives, potentially causing leaks with large objects captured indirectly. The practical takeaway is to understand scope and hoisting well, use modern declaration styles, prefer explicit initialization and cleanup, and be mindful that closures are powerful but not free.

Like a protective bubble, the closure for innerFunction keeps the variables in the function’s scope alive for as long as the function exists.

• Closures are a built-in feature of all JavaScript functions that allow a function to access all variables that are in scope when the function itself was defined. They create a “safety bubble” of the function and the variables that are in scope at the point of the function’s definition. This way, the function has all it needs to execute, even if the scope in which the function was created is long gone.
• Any block of code with { and } defines a new scope, unless that block is an object literal.
• Variables defined in a for loop initializer are considered to be in the same scope as the loop body, and each iteration has its own scope.
• The let and const keywords define a variable in the closest scope, as do keywords like function and class. The older var keyword has its own scoping rules, but most JavaScript developers prefer not to use it.
• A variable can’t be referenced until its declaration has been executed, with the exception of function declarations and imports, which are “hoisted” to the top of their scope.
• The global scope in JavaScript contains the properties of an object called globalThis. You can declare global variables by attaching them to that global object.
• JavaScript engines may sometimes avoid garbage collecting variables in a scope with live closures, which can lead to memory leaks.

FAQ