1. Scope
    2. Single Thread
    3. Callstack
    4. Hoisting

What is scope?

The scope is the current context of execution in which values and expressions are "visible" or can be referenced. If a variable or expression is not in the current scope, it will not be available for use. Scopes can also be layered in a hierarchy, so that child scopes have access to parent scopes, but not vice versa.

Various scopes include:

1. Global scope (a value/function in the global scope can be used anywhere in the entire program)

var name = "Rakshith"/* global scope */

console.log("Line number 3 is", name);

function sayName() {

console.log("Line number 7 is", name);

 }

sayNametwo()

2. File or module scope (the value/function can only be accessed from within the file)

3. Function scope (only visible within the function),

function sayNametwo() {
    var name = "Mr. RJ" /* pulling variable from it's own function */
    console.log("Line number 28 is", name);
}

sayName();

4. Code block scope (only visible within a { ... } codeblock)

Variables declared with let and const can have block scope. They can only be accessed in the block in which they are defined.

Code that emphasizes let block scope:

let Rx = 1;
{ 
  let Rx = 2;
}
console.log(Rx); //1

The var declaration has no block scope:

var Rj = 1;
{ 
  var Rj = 2;
}
console.log(xy); //2

Single Thread:

What does it mean by Javascript is 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.

        const one() {
      console.log("Hello");
}
const two () {
    for(i=0; i<= 100000000000000000000000; i++){
}
const three(){
       console.log("World");
}
one();
two();
three();

Consider the above example, what if our second function has to loop through huge numbers. Does this means three() has to wait till two() is executed. Technically, Yes!

In our small example it may not mean much but if we have to implement in a real project then the users may not be able to do anything until the first process is finished.

Hoisting

JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code.

Hoisting allows functions to be safely used in code before they are declared.

Variable and class declarations are also hoisted, so they too can be referenced before they are declared. Note that doing so can lead to unexpected errors, and is not generally recommended.

tipper("3");

function tipper(a) {
    // var bill = a;
    // parseInt will convert string to integer
   var bill = parseInt(a);

    console.log(bill + 5);
}

// call of function: it place any where in code, because global excution context scans entire code and excutes/
// tipper("3");



// while declaring function through variable name, call of function must after the variable code as below


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

bigtipper(20);

// type-2, this case output will undefined, because as above call of varible is first
// console.log(name);
// var name = "Rakshith";

//call of varible always should after variable declaration
// var name = "Rakshith";
// console.log(name);

// overwriting
console.log(name);  
var name = "Rakshith";


function sayName() {
    var name = "Mr R";
    console.log(name);
}

sayName();
console.log(name);

// output:

// undefined
// Mr R
// Rakshith

Rules to follow JavaScript Hoisting are

    1. functions declaration  are scanned and made aviable
    2. varibale declaration are scanned and made undefined.