Understanding Scopes in JavaScript

Musa A. — Mon, 13 Jan 2025 20:37:57 +0000

The concepts of scopes and closures in Javascript are foundational blocks necessary for mastery of the language. They are the unsung heroes behind Constructors, Factory functions, and IIFEs, to name a few.

This article aims to explain scope in JavaScript using practical examples. In a subsequent article, we will discuss JavaScript closures.

Scope and lexical scoping

Scope simply determines where a variable will be available for use in a JavaScript program. Fundamentally, there are two types of scope:

Global Scope
Local Scope

Global Scope

With global scope, a variable is made available everywhere and can be used anywhere within the program. Technically, when a variable is not declared within any function or { curly braces }, they are said to be in the global scope.

Local Scope

On the other hand, with local scope, a variable is only made available in a particular context and can only be used in that context. Technically, when a variable is declared within functions or { curly braces }, they are said to be locally scoped.

let x = 3; // x (global scoped)

function addXY () {
    let y = 5; // y (locally scoped)
    return  x + y; // returns 8 since x is available anywhere in this program
}

More Scoopful of Scope

ECMAScript is the standardized specification that defines the core features of scripting languages like JavaScript, ensuring consistency and interoperability across platforms. Just as the International System of Units (SI) provides a standardized framework for measurements like meters and kilograms to ensure consistency worldwide, ECMAScript sets the standards for scripting languages like JavaScript, ensuring they work uniformly across different platforms and environments.

This standardized specification for JavaScript has evolved through editions, with new features and improvements added in each version. Among these editions is ES6 (ECMAScript 2015) which provided a major update that introduced let/const.

Before ES6, variables were defined in JavaScript with the var keyword. With var, variables can both be redefined and updated. However, var variables are only locally scoped within functions. The extension of local scope to include snippets within { curly braces } was introduced by ES6 through let/const. Simply put, var variables are locally scoped within functions but globally scoped everywhere else.

let and const introduce block scoping which makes a variable to only be available within the closest set of { curly braces } in which it was defined. These braces can be those of a for loop, if-else condition, or any other similar JavaScript construct. Such braces are also referred to as a code block.

Examples:

function addXYZ() {
    var x = 3;
    let y = 4;
    const z = 5;
    return x + y + z; // 12
}

// These log undefined because var, let, and const variables are locally scoped within functions.
console.log(x);
console.log(y);
console.log(z);

let age = 10; // global variable

if (age < 18) {
    let letCandy = 2; // block-scoped variable
    console.log(`You are entitled to ${letCandy} candies`);
} else {
    var varCandy = 4; // function-scoped variable
    console.log(`You are entitled to ${varCandy} candies`);
}

console.log(age); // Logs 10, as age is globally scoped
console.log(letCandy); // Throws ReferenceError, as letCandy is block-scoped
console.log(varCandy); // Logs 4, as varCandy is globally scoped outside of functions

In a subsequent article, we will be discussing lexical scoping and closures. Thank you for reading.

DEV Community: Musa A.

Understanding Scopes in JavaScript

Scope and lexical scoping

Global Scope

Local Scope

More Scoopful of Scope