Let's Talk 'Scopes' in JavaScript

This article is going to be about scopes concept in JavaScript. Without knowing about scopes correctly, our code may work unexpectedly. So, to clear things up and to strengthen our concepts we'll be discussing these two here. I'll try my best to explain it in a beginner-friendly language. 🙌

Scopes

Let's look at the highlighted portion. It says,

the extent of the area or subject matter that something deals with or to which it is relevant.

So basically scope in JavaScript should be something like the area where something deals. Now, who deals is the first question that should pop up in our head after reading the description I gave. 🤔

Who?!! the answer is the variables in JavaScript.

So, in easy words

The Scope is the area in code from where a variable can be accessed.

Types of Scopes in JavaScript

In JavaScript, there are two types of scope.

• Global Scope
• Local Scope

A local scope can be further divided into two types,

• Local Scope
  • Function Scope
  • Block Scope

The above image shows the different types of scopes. The rectangles show the area where the variables are accessible. Now, let's discuss the scopes one by one.

Global Scope 🌏

In Global Scope, the variables can be accessed from anywhere in the program. A variable declared outside all the programs or curly braces is referred to as a Global Scope variable. A variable declared in the global scope can be accessed from any function or nested function in the program.

As we can see from the example, the globally declared number is first called from the global scope, then from a function and after that, it is called from a block scope. I hope this clears the concept of global scope.

Before ES6, the var keyword was used to declare a variable in JavaScript. And var declares all the variables in the global scope, even if the variable is declared inside a function or in block level. This means, any variable declared using thevar keyword or without a keyword is accessible from anywhere in a program. But this causes a problem if the program has the same variable at multiple places. So, usually, it is a good practice not to declare a variable in the global scope. This was another reason behind introducing let and const in ES6.

Another problem with var is that if a variable is already defined with var and if we declare another variable with the same name using var, it'll overwrite the old variable and assign the new value to it whereas let and const will give an error. This can be a huge headache while debugging code.

var number = 5;
var number = 10;
console.log(number); //10

let number = 5;
const number = 10; //SyntaxError: Identifier 'number' has already been declared

Local Scope 🏢

Variables that can be accessed from only a specific part of the code are local variables. If you check the above diagram again, all the variables declared inside the function sum are local variable, including the variable inside the loop. In other words, all variables other than global variables are local variables in JavaScript. Local variables cannot be called from outside of their function or block.

var number = 5;

function sum() {
  const arr = [1, 2, 3];
  let sum = 0;
}
console.log(arr); //arr is not defined

Because a local variable can be declared either in a function or in a block(like a for loop) or inside an if-else / while loops, JavaScript has two types of local scope, function scope, block scope.

Function Scope 🏗

A variable declared inside a function resides in the function scope. The variable can be accessed from functions or blocks inside the function(i.e., nested functions) but not from the outside. In the above code sample, the arr variable is declared inside a function, and when we are trying to call it from outside of the function, we are getting the error arr is not defined. Though the variable can be accessed from a nested function.

Block Scope 🤠

Variables declared inside blocks like for loops or inside curly braces { } with let or const are block-scoped variables.

if(number % 2 === 0) {
  let  even = number;
  console.log("Even", even);
} else {
  let odd = number;
  console.log("Odd", odd);
}
console.log("Even", even); //even is not defined
console.log("Odd", odd); //odd is not defined

I couldn't come up with a better example, so just used this code. 😅

The variables even and odd are declared inside { } braces, they are in block scope. In the first diagram, the variable i declared inside the for loop is also a block-scoped.

function sum() {
  const arr = [1, 2, 3];
  let sum = 0; //sum and arr are function scope
  for(let i = 0; i < arr.length; i++) { //i is block scope
    sum = sum + arr[i];
  }
}

I hope this article somehow helped you understand the concept of scope in JavaScript. If you liked the article, please give a 👍 and comment your thoughts below. 🔥