Understanding variable scope in JavaScript

Scope defines the context in which a variable can be accessed and used. In JavaScript, scope determines whether a variable is available globally throughout your code or only within a specific function or block. Understanding scope helps you write more efficient code, isolate bugs, and create reusable blocks of logic.

Global vs. local scope

A variable's scope determines from where within the code you can use it. JavaScript defines variables of global or local scope:

  • Global scope: Variables declared outside of any function or block are available from all other scopes within the JavaScript code.
  • Local scope: Variables created with the var, let, or const keywords within a function are available only within that function.

For example, a variable declared outside any function or block has global scope and can be accessed anywhere in the current document:

const greeting = 'hello';
console.log(greeting); // 'hello'

In contrast, declaring a variable with let inside a function gives it local scope. That variable isn't available outside the function:

function greet() {
  let greeting = 'Hello World!';
  console.log(greeting);
}

Block scope

Block scope applies to variables declared with let or const inside a block of curly brackets. The var keyword does not provide block scope. When you declare a variable with let or const within a block, such as an if statement, the variable is only accessible within those curly brackets:

if (true) {
   const greeting = 'hello';
}

console.log(greeting); // ReferenceError: greeting is not defined

Accessing the variable outside the block produces a ReferenceError. To fix this, move the code that uses the variable inside the same block:

if (true) {
   const greeting = 'hello';
   console.log(greeting);
}

You can use block-scoped variables within if, for, or while statements. Consider two for loops, one using var and one using let for the initializer:

for (var i = 0; i < 2; i++) {
    // ...
}

console.log(i); // 2

for (let j = 0; j < 2; j++) {
    // ...
}

console.log(j); // The j variable isn't defined.

The i variable declared with var leaks outside its for loop and retains its final value because var doesn't use block scope. The j variable declared with let is scoped to the for loop block and doesn't exist after the loop finishes.

Global scope and module scope

Global variables are accessible from anywhere in the program. Consider an HTML file that imports two JavaScript files:

<script src="file-1.js"></script>
<script src="file-2.js"></script>

The globalMessage variable, declared outside of any function, is accessible from both files:

// file-1.js
function hello() {
    var localMessage = 'Hello!';
}

var globalMessage = 'Hey there!';

// file-2.js
console.log(localMessage); // localMessage is not defined
console.log(globalMessage); // Hey there!

There's another type of scope worth noting. If you create a variable within a JavaScript module but outside of a function or block, it has module scope rather than global scope. Variables with module scope are available anywhere within the current module, but not from other files or modules. To share module-scoped variables across files, you must export them from the module where they're created and import them in the module that needs access.

Function scope

Variables created with var, let, or const inside a function are local to that function. Local variables are created when a function starts and are effectively deleted when the function finishes execution.

In this example, only code within the addNumbers() function can access the a, b, and total variables:

function addNumbers(a, b) {
    const total = a + b;
}

addNumbers(3, 4);

Within function scope, the let and const keywords behave slightly differently. Variables declared with let can be updated, while those declared with const remain constant:

var variable1 = 'Declared with var';
var variable1 = 'Redeclared with var';
variable1; // Redeclared with var

let variable2 = 'Declared with let. Cannot be redeclared.';
variable2 = 'let cannot be redeclared, but can be updated';
variable2; // let cannot be redeclared, but can be updated

const variable3 = 'Declared with const. Cannot be redeclared or updated';
variable3; // Declared with const. Cannot be redeclared or updated

Reusing variable names across scopes

Scope allows you to reuse the same variable name in different functions without conflicts. Each function's scope isolates its variables from other functions:

function listOne() {
    let listItems = 10;
    console.log(listItems); // 10
}

function listTwo() {
   let listItems = 20;
   console.log(listItems); // 20
}

listOne();
listTwo();

The listItems variables in listOne() and listTwo() each hold their expected values without interfering with each other.

Closures and lexical scope

Closures refer to an enclosed function in which an inner function can access the outer function's scope, also known as the lexical environment. Lexical scope is determined during compilation of the source code, not at runtime. Through closures, you can chain references to outer lexical environments.

In this example, the outer() function creates a closure over its lexical environment, allowing the setTimeout callback to access the hello variable:

function outer() {
    const hello = 'world';

    setTimeout(function () {
        console.log('Within the closure!', hello)
    }, 100);
}

outer();

Organizing code with modules

JavaScript modules provide structure and code reuse. Instead of relying on global variables to share data between files, modules offer a clean way to export and import variables:

// hello.js file
function hello() {
  return 'Hello world!';
}

export { hello };

// app.js file
import { hello } from './hello.js';

console.log(hello()); // Hello world!

Scope isn't a user-facing feature, but knowing how it works helps you debug issues and write more maintainable code. For hands-on practice, try the JS Scope Visualizer, which uses color coding to help you visualize JavaScript scopes in your own code.