The horror-scope - Global, Local and Block scope in JS

#javascript #beginners #webdev #explainlikeimfive

In programming, the scope of a variable determines its lifetime and accessibility throughout the program. The scope defines whether a variable, function, or object is accessible or inaccessible in different parts of the program during runtime.

In this article, we will explore the different types of scopes in JavaScript: global, local, and block scopes.

What are these blocks?

Before diving into scope categories, let's first define what a block is. A block is a piece of code enclosed within curly braces {} that groups code statements together. For example, a function is a type of block:

function greet() {
    console.log("Hello, World!");
}

The Global scope

A variable exists inside or outside a block. If a variable is declared outside all functions or curly braces ({}), it exists in the global scope. Global variables can be accessed from anywhere in the program, including inside functions and other blocks.

let globalVar = "I am global";

function showGlobalVar() {
    console.log(globalVar); // Accessible
}

showGlobalVar();
console.log(globalVar); // Accessible

The Local scope

A variable declared inside a function is in the local scope. Local variables are only accessible within the function where they are declared. Trying to access them outside their function will result in a ReferenceError.

function greet() {
    let message = "Hello!";
    console.log(message); // Accessible within the function
}

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

The Block scope

So far, we’ve seen variables defined with the var keyword. Var can declare a variable either in the global or local scope. The variables that are declared within the block scope are comparable to local ones. They are available within the block that they are defined.

The main difference between the local scope and block scope is that the block statements (e.g. if conditions or for loops), don't create a new scope. So the var keyword will not have an effect, because the variables are still in the same scope.

if (true) {
    var x = 10;
}

console.log(x); // Accessible, because var is function-scoped, not block-scoped

ES6 introduced block scope by using the let and const keywords. These two keywords are scoped within the block which are defined.

if (true) {
    let y = 20;
    const z = 30;
    console.log(y, z); // Accessible inside the block
}

console.log(y, z); // ReferenceError: y is not defined

Unlike var, let and const respect block boundaries, making them safer to use.

Why Scoping Matters?

Understanding scoping is important for several reasons:

Security: Variables are only accessible where needed, reducing unintended modifications.
Namespace Collisions: Scoping prevents conflicts between variables with the same name.
Memory Optimization: Local and block-scoped variables are destroyed once their scope ends, saving memory.

Summary

✅ Global Scope: Variables exist as long as the program runs and are accessible everywhere.
✅ Local Scope: Variables exist within functions and cannot be accessed outside.
✅ Block Scope: Variables declared with let or const exist only within the block they are defined in.
✅ var does not follow block scope, while let and const do.

References:

Understanding scope in JS

JavaScript: A Basic Guide to Scope

Scope in Javascript

Understanding Variables, Scope, and Hoisting in JavaScript

JavaScript Scope and Closures

Top comments (5)

Akira • Sep 22 '20

Love this. I'm writing a similar article rn and I came across yours while researching; great work!! I'm curious if const can also be used to declare global variables? I thought yes since that would guard against mutating global variables by accident, but I could be mistaken.

Also, I really like how you formatted your code blocks!! I def want to figure out how to make my code blocks interesting and colorful like yours :)

Prof Great Wonder • Mar 5 '20 • Edited

This is an amazing writeup, with great code examples. With this, my confusion about scopes in JavaScript has been cleared. Thank you so much for taking out the time to write this article. It is indeed horror-scopes, lolzzz.