Scope In JS

let a=4;
console.log(a);

In the above code snippet we haven't used any { } to write the code but does this mean that we are not using any scope here NO! code is actually executed in the global execution context.

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

JavaScript has the following kinds of scope

• Global scope
• Function scope
• Block scope
• Module Scope

Different Scopes in JavaScript

Global scope

global scope is the default scope for all code running inside the JavaScript files.

let a=4;
console.log(a);
function sayHi() {
    console.log("Hi");
}
sayHi()
// 4
// Hi

The above code snippet shows the global scope in which entire code is present.

Function scope

A function creates a scope so that variables declared inside the function can't be accessed outside the function.

function exampleFunction(){
    let sayHi="Hi";
    const str1="This is a constant";
    var str2="This is a var";
    console.log(sayHi);
    console.log(str1);
    console.log(str2);
}
exampleFunction();
//Hi
//This is a constant
//This is a var

function exampleFunction(){
    let sayHi="Hi";
    const str1="This is a constant";
    var str2="This is a var";
    console.log(sayHi);
    console.log(str1);
    console.log(str2);
}
exampleFunction();
console.log(sayHi);
console.log(str1);
console.log(str2);
//gives reference error

Block scope

blocks only scope let and const declarations, but not var declarations.

{
    var x=1;
}
console.log(x);

{
    let x=1;
}
console.log(x);
// ReferenceError: x is not defined

Lexical Scope

let's take an example of below code

function a(num){
    var b=10;
    c()
    function c(){
        console.log(b,num);
    }
}
a(20)
//10,20

In the above example code inner function c() has the access to the outer function variables This is only called as the lexical scope. basically lexical scope means whenever execution context is created lexical environment is also created so lexical environment is local memory along with its parents lexical environment

lexical as a term means in hierarchy or in sequence for example in our example above function c() is lexical sitting inside function a() and inturn a() is inside global execution context.

single thread

Everything in JavaScript happens inside an execution context .You can imagine execution context as the big box and it has two components init.

• Memory component: This is the place where all the variables and functions are stored as the key: value pairs there is also a heavy word for this memory component it is know as the variable environment

• Code component: This is the place where code is executed one line at time similar to memory component there is also heavy word for the code component know as the Thread of Execution

Diagram for above Explanation is here:

Javascript being single-threaded language simply means it has just one call stack used in executing the instructions in the program

Last In First Out(LIFO) : call stack works on the principle of LIFO where in last program went into the program is executed first and moved out of the call stack.

function a(){
    var b=10;
    c();
    function c(){
        console.log(b);
    }
}
a()

In the above program when the function a() is called the global execution context is created and moved into the call stack

when we load above program in debugger inside the dev tools we can see how program execution context looks like below screeshot

Anonymous is global execution context

Take example of below

function cube(num){
    let result=Math.pow(num,3);
    return result;
}
var n=2;
var cube2=cube(2);
var cube3=cube(3);
console.log(cube2,cube3);
// gives 8 27

Execution process for the above program looks like below

Hoisting

Hoisting in JavaScript means lifting the function declaration and variable declaration to the top of the scope

console.log(fname);
var fname="elon";
// undefined

variable declarations are initialized with undefined that are declared with var keyword basically only variable decalrations are hoisted to the top of the scope

greet()
function greet(){
 console.log("hi")
}
// hi

surprisingly!!! above code gives the hi in the console because as we saw in the above explanation entire function definition reference is stored in the memory thats why we can call the function before its definition.

greeting();
// TypeError

var greeting = function greeting() {
    console.log("Hello!");
};

By looking at the above example code error it says the type error but it doesn't say Reference Error bassically it is telling it can able to find the variable greeting but it is telling us that we are trying to something with greeitng which is not supposed to be done we are doing something like undefined()(var is initialized with undefine) thats why it says greeting is not a function when try to execute.