Skip to content

Chapter 5 of 8

Scope, Hoisting, and Closures

Scope is the region of code where a variable is accessible. The outermost region is the global scope, available everywhere in a script. Variables declared with var are function-scoped, meaning they are visible throughout the function in which they are declared regardless of block boundaries, while let and const are block-scoped, limited to the block such as a {}, if, or for body in which they appear. Hoisting describes JavaScript's behavior of moving declarations to the top of their scope before code runs. var declarations are hoisted and initialized to undefined, so a variable can be referenced before its declaration line without throwing. let and const are also hoisted but live in the Temporal Dead Zone until their declaration line, which throws if you try to read them earlier.

A closure is a function together with the variables of its outer scope that the function continues to reference, even after that outer function has finished executing. Closures are the basis for data privacy and the module pattern, because an inner function can capture local state that no one else can see. Closures only work because of lexical scope, which is the rule that a function's available variables are determined by where it was written in the source code, not by where it is eventually called. Confusing lexical scope with dynamic scope—for example, assuming a function sees the variables of wherever it is called rather than wherever it is defined—is a common pitfall, especially for developers coming from class-based languages.

Closures and scope rules combine to enable several useful patterns. An IIFE (Immediately Invoked Function Expression), written (function() { ... })();, runs once on definition and creates a private scope that prevents variables from leaking into the global namespace. JavaScript modules extend this idea across files: a module can export values, and another file can import them, organizing code and avoiding global namespace pollution. Each of these techniques—closures, IIFEs, modules—begins with the same principle that scope is determined by the lexical structure of the source.

All chapters
  1. 1JavaScript Foundations
  2. 2Variables, Types, and Operators
  3. 3Control Flow and Functions
  4. 4Data Structures and ES6 Syntax
  5. 5Scope, Hoisting, and Closures
  6. 6Objects, Classes, and Built-in APIs
  7. 7Asynchronous JavaScript
  8. 8Browser Interaction and Best Practices

Drill it

Reading is not remembering. These come from the Javascript Fundamentals deck:

Q

What is JavaScript?

JavaScript is a high-level, interpreted programming language primarily used for web development to make web pages interactive. It is the scripting language of t...

Q

Who created JavaScript and in what year?

JavaScript was created by Brendan Eich in 1995 while working at Netscape. It was initially called Mocha, then LiveScript, before being renamed JavaScript.

Q

What is ECMAScript?

ECMAScript (ES) is the standardized scripting language specification upon which JavaScript is based. The latest stable version is ES2023, with JavaScript implem...

Q

How do you include JavaScript in an HTML file?

Use the <script> tag in the HTML, either inline with code between tags or externally via <script src="script.js"></script>. Place it before th...