1. Scope

Literal meaning of SCOPE is the extent or range of the area that something belongs to - in case of JavaScript those components are Variable, Functions, Module & Block. so talking about their scope means from where they are accesible or not accesible.

Lets talk types of scopes

- Global Scope

Global variable needs to define in main script not inside any function or object. so they are accessible to whole script - in every function, object inside script.

let look at below code

let myType = "MySelfGlobal";

function testScope() {
    console.log(`Hi from ${myType} from inside function`);
    function nestedFunction() {
        console.log(`Hi from ${myType} from nested function`);
    }
    nestedFunction();
}
console.log(`Hi from ${myType} within script`);
testScope();

variable MySelfGlobal is global varible. therefore we can call it inside function testScope as well as its nested function (function inside function) nestedFunction also

output will be as follows.

Also note that if variable is used without declaring it it becomes global variable. as in below code

let myType = "MySelfGlobal";
function testScope() {
    console.log(`Hi from ${myType} from inside function testScope`);
    function nestedFunction() {
        console.log(`Hi from ${myType} from nested function nestedFunction`);
        myTypeWithoutDeclaration="global"
    }
    nestedFunction();
}
testScope();

console.log(`Hi from ${myType} within script`);
console.log(myTypeWithoutDeclaration);

let try with code myTypeWithoutDeclaration is used inside nested function nestedFunction but is can called outside it too. we can see it in below output

- Local Scope or Function scope

as name indicates this scope is limited to the area where they are created. for e.g. in above code if we have decalred variable MySelfGlobal inside function testScope we will not be able to call it outside function testScope.

function testScope() {
    let myType = "MySelfGlobal";
    console.log(`Hi from ${myType} from inside function testScope`);
    function nestedFunction() {
        console.log(`Hi from ${myType} from nested function nestedFunction`);
    }
    nestedFunction();
}
console.log(`Hi from ${myType} within script`);
testScope();

now in above code we have moved declaration of variable myType inside function body therefore console.log outside function will throw error as below.

note that console.log got executed without error inside that function. This explains local scope behaviour of the variable.

- block scope

Later in Javascript ES6 - let and const is introduced. with which we can declare variable which scope is just limited to its block - means nearest curly braces. But var is used to define variable to global scope. lets look at below code and output

{
    let iAmBlockScoped = "Hi JavaScript!";
    var iAmVarDeclared = "Hi i am declared using var";
    console.log(iAmBlockScoped);
}
console.log(iAmVarDeclared);
console.log(iAmBlockScoped);

in above output iAmBlockScoped got printed which was called inside blocked, however console.log outside block calling same variable thrown error. Also note that variable declared with var is also printed outside block since it is global scoped.

2. JavaScript is single threaded language

JavaScript is Synchronus single threaded language.

This means JavaScript execute code in linear manner one line at a time. It will not move to next line until current execution is finished.

JavaScript has only one Call Stack and Memory heap for execution of the code.

have a look at the following code

console.log("This is first task");
for (i = 0; i <= 10; i++) {
    console.log(`I value is ${i}`);
}
console.log("Loop ends here");
function test() {
    console.log("Hello World from function");
}
test();
console.log("End of the program");

in above code first console.log get executed followed by for loop, function declaration, function call, finally console.log. this illustraste single threaded behaviour of JavaScript

3. Hoisting

Hoisting in simple english language means raise something upwords. In Javascript the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code.

because of this behaviour we are able to use variable, function before their declaration in code.

hoistingTest()

function hoistingTest(){
    console.log("Test successful");
}

in above code hoistingTest is called first before it is declared in code, but because of declaration if raised to top (hoisted) we are able to call the function before its declaration.

4. CALL STACK

Call Stack is machanism in which Javascript interpreter follows execution of functions. in simple term when code gets executed call stack is empty. when it encounters function it gets added to stack. when it finishesh its all code it is removed from stack, but in between if there is another function called, then that function is added to top of the first function for execution. and in similar way once the execution is completed, it is removed from stack and previous function codes resumes. finally at the end of code call stack is empty.

below simple codes illustrates the same

function helloWorld() {
    console.log("step 1");
    helloJavaScript();
    console.log("step 2 after function call");
}
function helloJavaScript() {
    console.log("Hi from JavaScript function");
}
helloWorld();

in above code first it will execute function helloWorld then it will be added to Call stack. while execution of helloWorld it encounters another function helloJavaScript then interpreter adds this function to stack on top of previous function. After all the code is complete then it is removed from the stack and then resumes the previous function in stack. once this execution is also completed the it removes the function from stack and stack is empty. .