All about JAVASCRIPT! This gist contains numerous helpful links, resources and stuff related to JS.

executionContext.md

EXECUTION CONTEXT

Execution context (EC) is defined as the environment in which the JavaScript code is executed.

• JavaScript is a synchronous, single-threaded language.
• Everything in JS happens inside an Execution Context(EC).
• EC is created in 2 phases - memory allocation (Variable Environment) and code execution (Thread of Execution).
• MEMORY ALLOCATION - all the variables and functions are initialised and stored as key-value pairs here.
• CODE EXECUTION - entire code is executed line-by-line here, values are assigned to variables and functions are executed. For every function call, the JS engine creates a new Function Execution Context. The Function Execution Context is similar to the Global Execution Context, but instead of creating the global object, it creates the arguments object that contains a reference to all the parameters passed into the function.
• To keep track of all the execution contexts, including the Global Execution Context and Function Execution Contexts, the JS engine uses a data structure named call stack.

Watch the videos for more details - https://youtu.be/ZvbzSrg0afE and https://youtu.be/iLWTnMzWtj4

Refer the below image for precise steps of memory allocation/creation phase

Source: https://www.javascripttutorial.net/javascript-execution-context/

Notes for reference with example

For more info, check out this Medium article.

hoisting.md

HOISTING

• Process whereby the interpreter allocates memory for variables and function declarations prior to execution of the code.
• Declarations that are made using var are initialized with a default value of undefined. Declarations made using let and const are also hoisted, but not initialized with undefined.
• Key thing to note here is that only the declarations are hoisted.
• Until the line in which variables (declared using let and const) are initialized is executed, any code that accesses these variables will throw an exception.
• The phase between hoisting and variable initialization is referred to as Temporal Dead Zone, and this is where let and const variables are before their initialization.

Hoisting Example

console.log(num); // Returns 'undefined' from hoisted var declaration
var num; // Declaration
num = 6; // Initialize

Below example throws a ReferenceError

console.log(num); // Throws ReferenceError exception
num = 6; // Initialize

Another hoisting example

// Example 1
// Only y is hoisted

x = 1; // Initialize x, and if not already declared, declare it - but no hoisting as there is no var in the statement.
console.log(x + " " + y); // '1 undefined'
// This prints value of y as undefined as JavaScript only hoists declarations
var y = 2; // Declare and Initialize y

// Example 2
// No hoisting, but since initialization also causes declaration (if not already declared), variables are available.

a = 'Cran'; // Initialize a
b = 'berry'; // Initialize b

console.log(a + b); // 'Cranberry'

Temporal Dead Zone (TDZ) example

{ // TDZ starts at beginning of scope
  console.log(bar); // undefined
  console.log(foo); // ReferenceError
  var bar = 1;
  let foo = 2; // End of TDZ (for foo)
}

Another TDZ example

function test(){
   var foo = 33; // Local scope - foo -> 33
   if(foo) {
      // Block scope - foo -> undefined
      let foo = (foo + 55); // ReferenceError
   }
}
test();

Read more about Hoisting on MDN Docs. Read more about Temporal Dead Zone on MDN Docs.

Watch the videos for more details - https://youtu.be/Fnlnw8uY6jo and https://youtu.be/BNC6slYCj50

Notes for reference with example