JavaScript Scopes

Understanding where variables can be accessed

🎯 What is Scope?

Scope determines where variables can be accessed in your code. Think of it like rooms in a house - some things are private to a room, others are shared. 


let globalVar = "I'm accessible everywhere!";

function myFunction() {
    let localVar = "I'm only accessible inside this function!";
    console.log(globalVar); // Works!
    console.log(localVar);  // Works!
}

console.log(globalVar); // Works!
console.log(localVar);  // Error! Not accessible here

Types of Scope

🌍

Global Scope

Accessible everywhere in your code 

var globalVar = "Global!";
// Accessible anywhere
⚡

Function Scope

Only accessible inside the function 

function test() {
    var funcVar = "Function!";
    // Only accessible here
}
🧱

Block Scope

Only accessible inside the block {} 

if (true) {
    let blockVar = "Block!";
    // Only accessible here
}
🔍

Module Scope

Accessible within the module file 

// In a module file
let moduleVar = "Module!";
export { moduleVar };

🔹 Global Scope Example

Variables declared outside any function have global scope: 

// Global variables
let userName = "John";
var userAge = 25;

function showUser() {
    console.log("Name: " + userName); // Can access global
    console.log("Age: " + userAge);   // Can access global
}

function updateUser() {
    userName = "Jane"; // Can modify global
    userAge = 30;      // Can modify global
}

showUser();    // Name: John, Age: 25
updateUser();
showUser();    // Name: Jane, Age: 30

Output:

Name: John

Age: 25

Name: Jane

Age: 30

🔹 Function Scope Example

Variables declared inside a function are only accessible within that function: 

function calculateTotal() {
    var price = 100;        // Function scoped
    var tax = 0.08;         // Function scoped
    var total = price + (price * tax); // Function scoped
    
    return total;
}

console.log(calculateTotal()); // 108
console.log(price); // Error! price is not defined outside function

Output:

108

ReferenceError: price is not defined

🔹 Block Scope with let and const

let and const have block scope (within curly braces {}): 

function testBlockScope() {
    if (true) {
        let blockVar = "I'm in a block!";
        const blockConst = "Me too!";
        var functionVar = "I'm function scoped!";
        
        console.log(blockVar);    // Works!
        console.log(blockConst);  // Works!
        console.log(functionVar); // Works!
    }
    
    // Outside the block
    console.log(functionVar); // Works! (var is function scoped)
    console.log(blockVar);    // Error! (let is block scoped)
    console.log(blockConst);  // Error! (const is block scoped)
}

testBlockScope();

Output:

I'm in a block!

Me too!

I'm function scoped!

I'm function scoped!

ReferenceError: blockVar is not defined

🔹 Scope Chain Example

JavaScript looks for variables from inner to outer scope: 

let globalVar = "Global";

function outerFunction() {
    let outerVar = "Outer";
    
    function innerFunction() {
        let innerVar = "Inner";
        
        // Can access all three!
        console.log(innerVar);  // "Inner"
        console.log(outerVar);  // "Outer" 
        console.log(globalVar); // "Global"
    }
    
    innerFunction();
    // console.log(innerVar); // Error! Can't access inner variable
}

outerFunction();

Output:

Inner

Outer

Global

🧠 Test Your Knowledge

Which keyword creates block-scoped variables?