Scope in Javascript

What is Scope

To define something in one line it is always a good idea to see how docs represent it. so let's see what MDN docs see

The scope is the current context of execution in which values and expressions are "visible" or can be referenced.

so it is basically the way you understand how long javascript has access to a variable in memory and at which position of code, variables go out of scope or go out of existence from memory. Understanding this concept will make you get rid of RefernceError which is caused because javascript cannot find a reference to the variable in its lexical scope.

What is the lexical scope and scope chaining

so let's understand both the keyword one by one. Lexical scope is javascript's way of understanding the availability of variables. Lexical scope means its current context and its parent context, so if any variable is not available in the inner function or current context it will go to its outer function or its parent context to get the variable if available.
Scope chain means that if any variable is not available in its current scope it will go to its parent function context and will ask for the variable and if not found there it will try to find the variable in its parent lexical scope which means parent's context and its parent lexical context and will go on until it reaches to the global Execution context or global scope.

types of scope in js

there are a total of three types of major scope in javascript

1. Global Scope
   • any variable that is declared in the global context generally belongs to the Global Scope and the function is available in the whole function body and can be changed or accessed from any location. see the below code example to understand the global scope better. In the below example the variable hello can be accessed from inner function because of lexical scope and can be accessed from global also.

let hello="hello";
function inner(){
console.log(hello); //hello
}
inner();
console.log(hello); //hello

1. Function Scope
   • All scope in javascript is functional Scope by default. This means the variables declared in a function will exclusively stay within the function and cannot be accessed from outside the function or within other functions.

function exampl1() {
  const a= 10;
  console.log(`inside example1 ${a}`);
}
function example2(){
  console.log(`inside example2 ${a}`); // ReferenceError: a is not defined

}
exampl1();
  console.log(`outside example1 ${a}`); // ReferenceError: a is not defined

1. Block Scope
   • any variable declared in a block is called a block scope a block generally means a pair of parenthesis like {}.so if any variable is declared in a block that also can't be accessed outside. but remember Blocks only scope let and const declarations, but not var declarations.

{
  var block = 1;
  let bl=10;
  const bl2=50; 
}

console.log(block); // 1
console.log(bl) //ReferenceError
console.log(bl2)//ReferanceError

it's very crucial to understand the inner working of javascript to understand the proper working of any function if not then it can cause any unexpected error and can become tedious to debug sometimes. for more info read MDN DOCS