Scopes in Javascript

Have you ever wondered how you can possibly be getting a Reference Error stating your variable is undefined if you know you have already declared your variable?

Hmm... let's take a look at the code again... Yep it's there! So how is that possible?! The Scope Chain that's how! Location, location, location matters, or in other words, the environment of where your variable has been declared.

In Javascript, the term scope refers to the location of the variable and how a variable is accessible. Depending on where the variable is stored, it is only accessible in its environment and no one outside that environment can access that variable.

As I have learned in Phase 1, there are 3 types of scopes in Javascript:

- Global Scope

- Local Scope

- Block Scope

Let us go into detail to better understand these scopes...

Global Scope

Variables that are declared with var, const, or let can be accessible when declared outside of a function or a block. We can access these variables outside of any function, which means it's been declared globally.

For example:

const setGlobalVar = "I am declared in the global scope."

function sayHello(){
console.log(setGlobalVar)
}

setGlobalVar
sayHello()

What do you think the above output would be? Let's take a quick look...

Here, you'll notice that I declared the variable outside of the function as well as called it within the function, yet I was still able to access the variable in both places!

Now, let us talk about the Local Scope...

Variables that are created within a function are considered locally scoped. In other words, that variable can only be accessed within that function.

For example:

const num = 9

function print() {
const createLocalScope = "I am declared within a function."
console.log(createLocalScope)
}

print()

if (num < 12) {
console.log(createLocalScope)
}

Can you guess the output?

Let's take a look...

As you can see, when we call the function we can access the variable (createLocalScope) from within the print function. But when we try to access the variable again in the following if statement, we get a Reference Error stating that the variable is not defined. This is because the if statement is outside of the function, therefore has no access to that variable.

Finally, let us discuss Block Scope...

Variables in block scope are usually created with curly braces ({}) where it's used within logic statements, such as
: if statements, else statements, and switch statements. It's also used in loops, such as while, do while, and for loops. This means variables are only accessible within the code block.

NOTE:In ES6, only const and let keywords can declare in the block scope.

Check it out my final examples:

As I have mentioned previously, looking at this code you would say why the ReferenceError? the variable (i) was defined with the let keyword. But take a look at where I am invoking the variable... outside of the block ({}).

Now, let's try invoking it within the block scope and see what returns...

Conclusion

Scoping refers to the location of the variable and how a variable is accessible.

Global variables can be accessed anywhere, locally scoped variables are only accessed within a function, and blocked scope variables using the keywords: let or const, are accessed within the block code in curly braces ({}).

Although the concept of scopes in JavaScript may confuse many new developers (such as myself), understanding the fundamentals is essential because
it will help you, as a developer, become more efficient at writing and executing code!

Thank you for taking the time to read! Hope my examples were able to help understand and visualize how scoping works!