hoistingTDZ.md

[JavaScript] Hoisting and Temporal Death Zone (TDZ)

Hoisting, TDZ, Function Hoisting, Variable hoisting

TDZ:

A let or const variable is said to be in a "temporal dead zone" (TDZ) from the start of the block until code execution reaches the line where the variable is declared and initialized.

While inside the TDZ, the variable has not been initialized with a value, and any attempt to access it will result in a ReferenceError. The variable is initialized with a value when execution reaches the line of code where it was declared. If no initial value was specified with the variable declaration, it will be initialized with a value of undefined.

This differs from var variables, which will return a value of undefined if they are accessed before they are declared. The code below demonstrates the different result when let and var are accessed in code before the line in which they are declared.

{
  // 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)
}

The term "temporal" is used because the zone depends on the order of execution (time) rather than the order in which the code is written (position). For example, the code below works because, even though the function that uses the let variable appears before the variable is declared, the function is called outside the TDZ.

{
  // TDZ starts at beginning of scope
  const func = () => console.log(letVar); // OK

  // Within the TDZ letVar access throws `ReferenceError`

  let letVar = 3; // End of TDZ (for letVar)
  func(); // Called outside TDZ!
}

Hoisting

In colloquial terms, any of the following behaviors may be regarded as hoisting:

• Type 1: being able to use a variable's value in its scope before the line it is declared. ("Value hoisting")
• Type 2: being able to reference a variable in its scope before the line it is declared, without throwing a ReferenceError, but the value is always undefined. ("Declaration hoisting")
• Type 3: the declaration of the variable causes behavior changes in its scope before the line in which it is declared.

console.log(me); // can see `me` as undefined as var is hoisted to type 2
// console.log(job); // error. let, const is non hoisting
// console.log(year); // error

// var declaration is hoisted with type 2 behavior
var me = 'Me Jonas'; 

// let, const, and class declarations (also collectively called lexical declarations) are hoisted with type 3 behavior.
// Some prefer to see let, const, and class as non-hoisting, because the temporal dead zone strictly forbids any use of the variable before its declaration. 
// This dissent is fine, since hoisting is not a universally-agreed term.
let job = 'teacher'; 
const year = 1990;

// FUNCTION
// Function hoisting only works with function declarations — not with function expressions.

// function declaration has hoisting so this works fine
console.log(addDeclaration(2, 3)); 

// Uncaught ReferenceError: Cannot access 'addExpression' before initialization
// function expression doesn't have hoisting 
// console.log(addExpression(2, 3)); 

// Uncaught ReferenceError: Cannot access 'addArrow' before initialization
// arrow function doesn't have hoisting 
// console.log(addArrow(2, 3)); 

// Uncaught TypeError: addArrow2 is not a function
// var is hoisted to undefined so invoking an undefined function will result in this error
// console.log(addArrow2(2, 3)); 

// this is a function declaration
function addDeclaration(a, b) {
  return a + b;
}

// this is a function expression
const addExpression = function (a, b) {
  return a + b;
};

// arrow function
const addArrow = (a, b) => a + b;
var addArrow2 = (a, b) => a + b;

// EXAMPLE
console.log('\n// example');
console.log(numProducts);

// should not be able to invoke deleteShoppingCart() as numProducts is 10 now but due to var has been hoisted so this function invokes creating a subtle bug
if (!numProducts) deleteShoppingCart(); 

var numProducts = 10;

function deleteShoppingCart() {
  console.log('All product deleted');
}

// example 2
console.log('\n// example 2');

var x = 1; // var is hoisted and add to the window object
let y = 2; // let and const aren't
const z = 3;

console.log(x === window.x); // true
console.log(y === window.y); // false
console.log(z === window.z); // false