javascript - Variable Scoping

Hey there, junior coder! Today, we're going to learn about something super important in JavaScript called scoping. Scoping helps decide where you can use your variables and functions in your code.

Think of scoping like the rules of a secret club. Sometimes, only certain parts of your code are allowed to see certain variables. Let’s explore what this means with examples!

Example 1: Proper Scoping

Imagine we’re using let to create a variable inside a function:

    function sayHello() {
        let greeting = "Hello!";
        console.log(greeting); // This works!
    }

    sayHello();
    console.log(greeting); // This will give an error.
        

What's happening here?

The variable greeting is inside the function sayHello(). This means that only the code inside the function can see or use greeting. It’s like greeting is in its own secret club!
If you try to use greeting outside the function, it gives an error because it's not part of the same club.

Example 2: Global Scope

Now let’s see what happens when we create a variable that everyone can see:

    let favoriteColor = "blue";

    function showColor() {
        console.log(favoriteColor); // This works because favoriteColor is outside the function!
    }

    showColor();
    console.log(favoriteColor); // This also works!
        

What's happening here?

The variable favoriteColor is defined outside of any function. This means it's in the global scope — anyone can use it, both inside and outside functions. It’s like favoriteColor is part of a big club that everyone is allowed to join.

Example 3: Improper Scoping

Now let's look at an example where scoping might be a problem:

    function countApples() {
        let appleCount = 5;
    }

    countApples();
    console.log(appleCount); // This will give an error.
        

Why is there an error?

The variable appleCount is only created inside the countApples() function. This means that no one outside the function can see it.
So, when we try to console.log(appleCount) outside the function, JavaScript says, “Hey, I don’t know what appleCount is!”

Tips to Remember:

Local Scope: Variables declared inside a function (using let, const, or var) can only be used inside that function. They’re in a secret club!
Global Scope: Variables declared outside any function can be used anywhere in your code. They’re in a big, open club.
Avoiding Mistakes: If you try to use a variable outside of where it was defined, JavaScript will give you an error because it doesn’t know where to find it.

Practice Time!

Try writing your own function that creates a local variable and see what happens if you try to use it outside the function. Here’s a quick challenge:

Create a function called sayGoodbye() that has a local variable called farewell.
Make the function print farewell to the console.
Then try to print farewell outside the function. What happens?

function sayGoodbye() {
    let farewell = "Goodbye!";
    console.log(farewell); // This works!
}

sayGoodbye();
try {
    console.log(farewell); // This will give an error.
} catch (e) {
    alert("Oops! It looks like 'farewell' is not defined outside the function.");
}
    

Other Resources

W3Schools JS Scope

Web Lessons

Javascript Scoping

javascript - Variable Scoping

Example 1: Proper Scoping

Example 2: Global Scope

Example 3: Improper Scoping

Tips to Remember:

Practice Time!

Other Resources

javascript - Variable Scoping