What is scope chaining in JavaScript and give an example.

To explain scope chain we go through this function below. We have three scopes here global scope, parent scope and child scope. Since we are adding all the variables, the program will search for variable a in scope of function "second" (child scope). As there is no such variable in "second", the program continues to look for variable a in scope of parent function "first" (parent scope). Not being able to find a here as well the program now exits the scopes of all the functions and goes to the global scope. After finding value of a it goes to the arithmetic problem a+b+c, in the function "second", and searches for the next variable b.

After following the same procedure, the program finds b in scope of parent function "first". Eventually, it searches for the third variable c and finds it in scope of the child function "second".

Ex:

var a = "Hello world";

function first() {
    var b = " I am Vinod";
    second();

    function second() {
        var c = " Follow me on Instagram";
        console.log(a + b + c);
    }
}
first();

o/p- "Hello world I am Vinod Follow me on Instagram"

Why Javascript is Single thread language?

Why because Javascript engine runs on a V8 engine that has a memory heap and a call stack. The V8 Engine has came 2 parts one is Heap memory and second one is Call stack.

What does mean heap memory:

It means your JS code scanned and it allocate memory and store in the Heap memory and made undefined.

What does mean Call stack:

it means when you run your JS code it execute line by line.

That's why Javascript is a single thread language.

Ex: you can see the below diagram.

What is Call stack in Javascript?

The JavaScript execution contexts (Global execution context and function execution context) are executed via the JavaScript engine. In order to manage these execution contexts, the JS engine uses the call stack.

If the user invoke the function for execution specified function gets pushed/added to call stack. And when the user returned the functions it gets poppedout from the call stack the call stack structured followed by LIFO(Last In First Out).

JavaScript Call Stack Example

function getSum(x, y) {
    return x + y;
}
    function totalSum(x,y) {
        return getSum(x,y);
    }
let result = totalSum(10,20);
console.log(result)

o/p-30

How the above code is worked

1. In JS initially creates the global execution context and the global execution moves to the execution phase in order to top.
2. The totalSum (10, 20) function gets invoked, and so the JS engine creates the function execution context for it. Then push it on the top of the call stack.
3. So, now in the call stack, two functions are pushed, global () and totalSum(), and on the top of the stack.
4. The JS engine begins the execution of the totalSum () function because it exists on the top of the stack.
5. Above the code, the getSum () function is invoked inside the totalSum () function, so the JS engine creates a function execution context for the getSum () function and push it on the top of the stack.
6. Now in the stack there are three functions present, which are global (), totalSum (), and getSum () functions.
7. In JS engine executes the getSum () function first and pops it out of the call stack.
8. Same the totalSum () function also gets executed and pop out of the call stack.
9. Now 2 functions are completed, and no other function for execution left in the call stack. The JS engine stops the execution of the call stack.

What is hoisting in JavaScript

Hoisting in JavaScript is a behaviour in which a function or a variable can be used before declaration.

In a simple manner Function declarations are scanned and made ready and Variable declarations are scanned and made undefined.

Hoisting in functions and Variables.

Ex: Function declarations are scanned and made ready

function tipper(a){
    var bill = parseInt(a);
    console.log(bill + 5);
}
tipper("20")

o/p- 25

Ex: Variable declarations are scanned and made undefined

console.log(name)
var name = "Vinod";

function sayName(name){

    console.log(name);
}
sayName("Kumar");

console.log(name)

o/p- undefined, kumar, Vinod

In above code before initializing I have called name but it gives undefined, you can see last global execution phase it gives output as Vinod.

Hoisting using with const and let keywords.

In JavaScript we declare variables with let and const keywords before initializing it gives us reference error.

Ex:

console.log(name);
console.log(results);

var name = "Vinod";
let name = "Kumar"

O/p- ReferenceError: Cannot access 'name' before initialization.
ReferenceError: Cannot access 'results' before initialization.

Thanks for reading