Scope Basics in JavaScript

What is scope and why is important? It’s a fundamental concept that can sometimes be difficult for beginners to grasp but it’s especially important to understand it.

Scope is the accessibility of variables, functions, and objects in some particular part of your code during runtime. In other words, scope determines the visibility of variables and other resources in areas of your code. Obviously, comprehending how and where you can use your data is vital.

In JavaScript there's global, local and block scope. Let’s talk a little about each, and some examples to see them in action.

GLOBAL:

Global is the area outside of any functions. The variables you define globally can be accessed and changed by any other scope.

In the code below the variable superHero can be accessed both in and out of the function.

let superHero = "Wonder Woman";
//this code can access and use superHero
console.log(superHero)

function myFunction() {
//this code can also access and use superHero
    console.log(superHero)
}

myFunction();

“Wonder Woman” logs to the console twice.

LOCAL:
If you declare a variable inside of a function, it’s local to that function and can only be accessed within that function. Each function has it’s own scope.

Here, outside the function can’t access the superHero variable and it throws a ReferenceError- superHero is not defined.

console.log(superHero)

function myFunction() {
    let superHero = "Wonder Woman";
    console.log(superHero)
}

myFunction();

If we don’t try to access the variable outside of the function, when we run the function we see the superHero variable (the value of “Wonder Woman”) logged to the console as expected.

function myFunction() {
let superHero = "Wonder Woman";
    console.log(superHero)
}

myFunction(); // “Wonder Woman”

In the below example we can see that we can use the same variable name (superHero) and the value is different dependent on it’s scope.

function myFunction() {
    let superHero = "Wonder Woman";
    console.log(superHero)
}

function yourFunction(){
    let superHero = "Thor";
    console.log(superHero)
}

myFunction(); // “Wonder Woman”
yourFunction(); // “Thor”

BLOCK:
Block scope is defined by curly braces {}, a variable defined within the curly braces has block scope and can only be accessed within the block where they were defined.

let superHero = "Wonder Woman";
// global scope

{
    let superHero = "Thor";
    // block scope
}

console.log(superHero); // “Wonder Woman”

If we remove the global variable superHero, we get a ReferenceError message. If we remove the global variable and console.log with the block, we’ll see “Thor” logged.

{
    let superHero = "Thor";
    console.log(superHero); // “Thor”
}

Playing around with some examples and seeing what logged to the console helped me get a better grasp on how and where I could access my data. If I missed anything, was off base somewhere, or you prefer different superheroes feel free to let me know! Thanks for reading.