intermediate

Understanding Scope

Learn about variable scope and how it affects your JavaScript code.

Scope determines where variables are accessible in your code. Understanding scope is critical for avoiding bugs and writing predictable, maintainable JavaScript. This exercise explores global scope, function scope, block scope, and how variables behave in different contexts. Mastering scope will help you write cleaner code and debug issues more effectively.

📚 Concepts & Theory

Global Scope:

let globalVar = "I'm global!";

function showGlobal() {

    console.log(globalVar); // Accessible here

}

Function Scope:

function myFunction() {

    let localVar = "I'm local!";

    console.log(localVar); // Works!

}

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

Block Scope (let/const):

if (true) {

    let blockVar = "Inside block";

    const blockConst = "Also inside";

}

// blockVar is not accessible here

var is Function-Scoped (not block):

if (true) {

    var varVariable = "I escape blocks!";

}

console.log(varVariable); // Works! (but bad practice)

Nested Scope:

let outer = "outer";

function parent() {

    let middle = "middle";

    

    function child() {

        let inner = "inner";

        // Can access: outer, middle, inner

    }

    // Can access: outer, middle

}

// Can only access: outer

Closures:

function createCounter() {

    let count = 0;

    return function() {

        count++;

        return count;

    };

}

const counter = createCounter();

counter(); // 1

counter(); // 2

🎯 Your Challenge

Create a function called `createMultiplier` that takes a number `factor` as a parameter. It should return a new function that takes a number `n` and returns `n * factor`. This demonstrates closures! Use it to create a `double` function (factor of 2).

📝 Starter Code

JavaScript

// Create the multiplier factory
function createMultiplier(factor) {
    return function(n) {
        // Return n multiplied by factor
        
    };
}

// Create a double function
let double = 

// Test it: double(5) should return 10
let result = double(5);

The inner function can access variables from the outer function
Return the inner function from createMultiplier
Call createMultiplier(2) to create the double function
factor will be "remembered" by the returned function

Solution

JavaScript

function createMultiplier(factor) {
    return function(n) {
        return n * factor;
    };
}

let double = createMultiplier(2);

let result = double(5);

Explanation

This exercise demonstrates closures. When createMultiplier(2) is called, it returns a new function that \"remembers\" factor = 2 even after createMultiplier has finished executing. The inner function closes over the factor variable, keeping it accessible whenever double is called.

⚠️ Common Mistakes to Avoid

Not understanding that the inner function remembers the outer variables
Forgetting to return the inner function
Confusion between the two different n and factor variables
Not calling createMultiplier when assigning to double

❓ Frequently Asked Questions

A closure is a function that remembers and can access variables from its outer scope even after that outer function has finished executing. It "closes over" those variables.

Closures enable data privacy (private variables), factory functions, and maintaining state in functional programming. They are essential for callbacks and event handlers.