JavaScript Scope :

What is JavaScript scope

A Scope can be defined as the region of the execution, where the expressions and values can be referred to. There are different types of scopes in JavaScript that are local, global, block, function scope, and lexical scope.

Local Scope

Variables declared within a JavaScript function, become LOCAL to the function.

     function myFunction() {
 let carName = "Thar";
}

Global Scope

Variables declared Globally (outside any function) have Global Scope.
Global variables can be accessed from anywhere in a JavaScript program.

Variables declared with var, let, and const are quite similar when declared outside a block.

            var x = 10;
            let x = 10;
           const x = 10;

Block Scope :

The scope was created with a pair of curly braces.

Before ES6 (2015), JavaScript had only Global Scope and Function Scope.
ES6 introduced two important new JavaScript keywords: let and const.
These two keywords provide Block Scope in JavaScript.
Variables declared inside a { } block cannot be accessed from outside the block:

                        {
                    let x = "In Within curly braces are called scope"
                            }
                         // x can NOT be used here

Lexical Scope

When a function is defined inside another function, the inner function can access the variables of the outer function. This operation is called Lexical scoping.

                          function init() {
            var name = 'Mozilla'; // name is a local variable created by init
          function displayName() {
         // displayName() is the inner function, a closure
            console.log(name); // use variable declared in the parent function
               }
           displayName();
             }
                init();

Function scope

JavaScript has function scope: Each function creates a new scope.
- Variables defined inside a function are not accessible (visible) from outside the function.
- Variables declared with var, let, and const are quite similar when declared inside a function.
```
    function myFunction() {
     var carName = "Volvo";   // Function Scope
           }
```

2. Single Thread

What does it mean by JavaScript is a single-threaded language? JavaScript is a single-threaded language that can be non-blocking. Single-threaded means it has only one call stack. Whatever is on the top of the call stack is run first.

In the above program, functions are run sequentially.

JavaScript engine runs on a V8 engine that has a memory heap and a call stack JS is single-threaded which means only one statement is executed at a time. an example, you are calling someone and you’re waiting for them to pick up so that you can talk to them. You’re not doing any other thing until they pick up the phone.
```
          const one() => {
        const two() => {
          console.log('4');
                 }
                   two();
                     }
```
So, what happens under the call stack?

             console.log('4')   
               two()    
               one()

Call Stack

This is a feature in Javascript used to keep track of executing functions.

When a new function is to be executed according to the thread of execution in the source code, it is added to the call stack and called to be executed. This allows Javascript to keep track of where it stopped in execution. As execution of the function finishes, it is removed from the call stack and the thread continues.

Example

                          function greeting() {
                // [1] Some code here
                                sayHi();
                   // [2] Some code here
                   }
                function sayHi() {
              return "Hi!";
           }
                     // Invoke the `greeting` function
                  greeting();
                    // [3] Some code here

Hoisting

In JavaScript, hosting is a kind of default behavior in which all the declarations either variable declarations or functions are moved at the top of the scope just before executing the program's code. However, it can be considering an advantage because all functions and variables declarations are placed to top of their scope no matter where they are all declared anywhere in the whole program even regardless of whether they are declared global or local.

Resources;

w3school

Amit Pandit's Blog