Scopes in Javascript

#javascript #webdev #programming #tutorial

Hi everyone, Welcome to my Blog

I am Swarnendu. In this blog, I will explain the concept of Scopping in JavaScript.

Javascript is one of the most interesting languages and it does some interesting things in the case of Scopping. If you master the scopes in Javascript, it will help you write more bug-free code. Stay with this article, we will deep dive into the Scopes of Javascript.

What is Scopes ??
Scope is the concept of Javascript which refers to the current execution context in which values and expressions are accessible. In simpler terms, scope determines where variables and functions can be accessed or referenced in your code.

Don't worry if you can't get these technical definitions. Throughout this article, I will give real-life practical examples for better understanding.

Scopes are mainly two types-- 1. Global Scope
2. Local Scope

Two types of Local Scopes are -- Block Scope and Functional Scope.

Imagine you are organizing your friend's Wedding event, and you have different work to manage such as decorations, invitations, catering, etc. Each of these works/tasks has specific things you need to do, and
obviously, you don't want to interfere with these tasks with each other. So we solve this problem using the javascript scopes concept.

Global Scope:

Global Scope is like the Main Organizer of the Wedding event, for this case, you are the global scope who has access to all the tasks(variables) like decorations, invitations, catering, etc. you can see and control every part of the event.

When variables declared outside of any function/block are in the global scope. These global variables can be accessed from anywhere in the code.

`var globalVariable = "I am a global variable";

function func() {
console.log(globalVariable);

}

func(); // "I am a global variable"
console.log(globalVariable); // Accessible here as well
`
In the above example, globalVariable is declared in the global scope of the code so it is accessible anywhere in this code.

Local Scope:

When variables declared inside a function or a block are in local scope. These variables can be accessed only inside the function or the block.

Now at your friend's wedding, there must be a task manager for every task. For catering there will be a catering manager, similarly decoration manager, and invitation manager. Each manager works independently and does not interfere with others.

A. Functional Scope:

Var: Whenever we use a var anytime inside a function the variable gets function scope if we use an outside function no matter if it is closed in a block or not it will give a variable global.

`function func() {
var localVariable = "I am from local variable";
console.log(localVariable); // localVariable is Accessible here
}

func();
console.log(localVariable); //Give Error: localVariable is not defined
`
For my above example, you can imagine the catering manager has a list of menu items(variable) that is only relevant to catering. Similarly, a variable declared inside a function is only relevant(means accessible) for that function.

B. Block Scope:

Let: whenever we initialize a variable with let it always gets the scope of the enclosing block. 'let' also does not allow redeclaration.

Const: It is similar to 'let' but can't reassign a new value to a variable(Which is possible in 'let').

`function func() {
if (true) {
let blockVariable = "I am from block-scoped variable";
console.log(blockVariable); // blockVariable is Accessible here
}
console.log(blockVar); // Error: blockVariable is not defined
}

func();
`
Here blockVariable is only accessible within the if block because it is declared with 'let'.

For the above example, Now within the catering job, there might be smaller tasks like "Prepare desserts", and "Prepare Chicken". If the catering manager writes down a list of spices/desserts(a variable in a block), that is only relevant/useful when preparing chicken/desserts and is put away once the task is end.

In summary, Socpe in Javascript is about controlling where the variables can be accessed, similarly, you manage the task at your friend's wedding.

I hope you understand the scope of Javascript and the main difference between let and var. If you like, You can follow for upcoming Javascript Blog and also commend what are the things I should improve in my writing.

Thank You 😊.