Scope in JavaScript Explained

Scope help us to answer the question: “Where are my variables and functions available me?” In this article, I’ll be explaining in detail what scoping means and the different types of scopes in JavaScript.

There are basically 4 types of scopes in JavaScript:

1. Global Scopes
2. Function Scopes
3. Block Scopes
4. Lexical & Static Scopes

GLOBAL SCOPES

Anytime we declare a variable, it’ll be available anywhere in your application. For instance:

const myName = "Victor";

This type of variable can be called anywhere in your application, script or console and it will definitely work. This is what is referred to as a global variable.

To see every single thing attached to the global scope, type the keyword window on your console.

One important thing to take note of is that var variables are attached to the window object and they are globally scoped whereas const and let variables when declared as a global scope are not attached to the window. It means that anything that is in the global scope is attached to the window object with the exception of const and let variables.

FUNCTION SCOPES

Anytime we create a variable inside a function, those variables are only ever available inside of that function. For instance:

const myAge = 50;

function beauty() {
  const eyes = "black";
}

console.log(myAge);
console.log(eyes);

The curly brackets are like gates. They keep the variables in and don’t allow them to leak out.

One important thing to note is that, if a variable is not found inside of a function, they will go up a level higher and look for a variable in that scope. If it’s not available in that scope, it will go up a level higher. That is why console.log(myAge) print out 50 even though myAge variable is not available in the beauty() function.

At this point, I will like to explain what Shadowed variables means in JavaScript

Shadow variables is when you name a global variable and function variable the same thing and the name is called within the function, the global variable gets shadowed (meaning that it has been over-written). For instance:

const myAge = 50;

function beauty() {
  const myAge = 100;

  console.log(myAge);
}
beauty();

In this example, we first created a global variable myAge with the value of 50. Then we create a function called beauty with a function variable of myAge but with a different value of 100. Then we console.log(myAge). After that, we call the function.

A good measure is to give your global and function variable almost similar but different name so you can have access to both inside the function. In this case, the global variable can be named age while the function variable can be named myAge.

BLOCK SCOPES

Anytime we have a set of curly brackets {} in loop statements like if, while, etc, they are referred to as block. Variables declared inside the block scopes are only available within the block scopes except for var variables which can leak out of the block scopes. For instance:

for(var i = 0; i < 5; i++) {
  console.log(i);
}

Let’s talk about the differences between const, let and var in JavaScript:

const variables

• We cannot reassign const
• They must always be equals to a value

let variables

• We can reassign let
• We can use it to create a variable name without assigning any value to the variable
• It’s best used in loop statements like for loop, while loop
• It’s values don’t leak out outside the block scope it’s declared

var variables

• We can reassign var
• They are not block scoped, they are only function scoped
• They leak out values outside the block scope but not outside function scope

LEXICAL & STATIC SCOPES

These are buzz words used in JavaScript. What it really means is the way variables or scope look-up happens. It happens where funtions gets defined not where they are run. For instance:

const myAge = 50;

function juga() {
  console.log(myAge);
}

function freeze() {
  const myAge = 100;
  juga();
}

freeze();

It prints out 50 because even though the juga() was run inside of the freeze function which was having a function variable myAge set to 100, it doesn’t care about where it was run, all it cares about is where it was defined.

I hope this article has been helpful to you. Don’t forget to give me a clap 👏 and follow me on twitter , facebook and youtube.