JavaScript: Let’s talk about Scope!

It’s a good idea to review coding fundamentals to make sure you understand what’s going on and why. If you still fumble over the basics, everything to follow will be much more confusing and difficult. Let’s take a look at JavaScript scope!

In JavaScript, scope determines where your program can see and use certain variables. There are two kinds of scope: global and local.

Global: Variables defined outside of a function are global and are accessible from anywhere in your code.
Local: Variables defined inside of a function are considered local to that function only. It can’t be accessed or used by any of your code outside of that function.

In other words, variables in an inner (local) scope can’t be seen or used by an outer (global) scope but variables defined in an outer (global) scope can be seen & used by an inner (local) scope.

Here’s an example of global and local scope:

var test = “I’m a global variable”;      // global scope variable

function helloWorld(){
    var test = “Hi, my name is local”;   // local scope variable     }

helloWorld();        // output: “Hi, my name is local”
console.log(test);   // output: “I’m a global variable”

Be careful! A variable in your local scope can have the same name as a variable in your global scope (as seen above). However, they are independent from one another so if you change the name or value of the variable in your local scope, it will have no effect on the value of the global variable (and vice versa).

But wait! There is an exception. Let’s take a look…

var test = “I’m a global variable”;

function helloWorld(){
    test = “Hi, my name is local”;
    return test;
}

console.log(test);   // output: “I’m a global variable”
helloWorld();        // output: “Hi, my name is local”
console.log(test);   // output: “Hi, my name is local”

Hey, how come console.log(test); went from being global to local?! The global variable was overwritten by the local variable. Why? Notice in the first example the local variable “test” in our helloWorld() function had the “var” keyword in front of it and in this example it does not.

If a local variable is used without being declared with the “var” keyword, it becomes a global variable.

Therefore, the global variable was re-assigned to what the “test” variable in our helloWorld() function was once we ran the helloWorld() function (since it is now global).

I know this can be very confusing! Just remember:

It’s best (and will help prevent unwanted overwriting of your variables) to put the “var” keyword in front of all your variables to declare them first before using them.

Nesting

Now when it comes to nested functions, the same scope guidelines apply. Whenever you create a new function, you create a new scope specific to that function. However, nested functions have access to the scope before them.

Let’s say you run one of your functions looking for a specific variable. Your code will first look in the scope you are currently in. If it doesn’t find it, it will look in the next scope. If it still can’t find it, it will look in the scope after that, and so on and so on until it finds it.

Let’s look at an example with nested functions:

var x = “testABC”;

function nameA() {
    var x = “testXYZ”;

    function nameB() {
        
        function nameC() {
            return x;
        };
        nameC();
    };
    nameB();
};

nameA();
console.log(x);   // output: “testXYZ”

What’s going on here?

When we ran the function nameA, the code was prompted to run function nameB, which then prompted to run function nameC. In nameC, we were given the request to return x. Since there was no “x” variable in nameC, our code looked in the next scope (nameB) and it still didn’t find a variable called “x” so it then looked in the next scope (nameA) where it found a variable called “x” with a value of “testXYZ”. Therefore, the output of console.log(x) was “testXYZ”.

Scope can definitely be confusing at times, especially when dealing with nested functions. But it’s important to recognize the guidelines in order to read and write code accurately.

Thanks for reading!

This was a very basic run-down to help myself review the topic, but hopefully you took something away from it too! Please comment and let me know if I am misunderstanding anything. As a junior developer new to the industry, I’m definitely still learning! :)

Check out my other post: Give me 100 cc’s of JavaScript STAT!

Follow me on twitter. Cheers!