Hoisting

Wherever a var appears inside a scope, that declaration is taken to belong to the entire scope and accessible everywhere throughout.

Metaphorically, this behavior is called hoisting, when a var declaration is conceptually “moved” to the top of its enclosing scope.

var x=2;
foo();  // works because `foo()` declaration is hoisted.

function foo(){
    a=3;   // `a` declaration hoisted at the top of function.
    console.log(a);
    var a;
}

It’s not common or a good idea to rely on variable hoisting to use a variable earlier in its scope than its var declaration appears; it can be quite confusing. It’s much more common and accepted to use hoisted function declarations, as we do with the foo() call appearing before its formal declaration.

When it comes to variables, hoisting only moves the variable declaration, not the initialization. This means that you can use a variable before it is declared, but the value will be undefined. For example:

console.log(x); // undefined
var x = 5;

The let keyword in JavaScript provides block scope for variables.

Like var, let variables are hoisted to the top of their containing block. However, the actual assignment (initialization) remains in its original position. You can use a let variable before it’s explicitly declared, but its value will not be initialized until assigned.

// Accessing 'age' before its initialization
console.log(age); // ReferenceError: Cannot access 'age' before initialization

let age = 12;

The concepts of hoisting in JavaScript for var and let are indeed similar but not exactly the same. Here's how they differ:

• var: When JavaScript compiles all of your code, all variable declarations using var are hoisted/lifted to the top of their functional/local scope (if declared inside a function) or to the top of their global scope (if declared outside of a function) regardless of where the actual declaration has been made. This is what we mean by “hoisting”. After hoisting, if the variables are not initialized yet, they will be assigned the undefined value.

• let: Similar to var, let declarations are hoisted to the top of their block scope. But there's a key difference: let variables are not initialized until their definition is evaluated. Accessing them before the initialization results in a Reference Error. This is sometimes called "Temporal Dead Zone," a period between entering scope and being declared where they can't be accessed.

Here's an example to illustrate this:

console.log(a); // undefined
var a = 5;

console.log(b); // ReferenceError: b is not defined
let b = 5;

In the first part, a is undefined because var a is hoisted and automatically initialized with undefined. In the second part, b is not defined because let b is hoisted but not initialized, leading to a ReferenceError.

console.log(i); //undefined
console.log(job); //ReferenceError
console.log(company);
var i = 1;
let job = 'enginner';
const company = 'self';

Temporal Dead Zone

The Temporal Dead Zone (TDZ) is a concept in JavaScript that relates to the hoisting and visibility of variables declared with let and const.

In JavaScript, when you declare a variable using let or const, it is hoisted to the top of its block scope. However, it is not initialized until the line where it was declared is executed. This period from the start of the block until the initialization is known as the Temporal Dead Zone.

During the TDZ, the variable exists but cannot be accessed or used. If you try to access a variable in its TDZ, you will get a ReferenceError. This is because the JavaScript engine has set aside memory for the variable but hasn't assigned it a value yet.

Here's an example to illustrate this:

console.log(a); // ReferenceError: a is not defined
let a = 12;

In this example, a is in the TDZ from the start of the block until let a = 12; is executed. If you try to access a before it's initialized, you get a ReferenceError.

The TDZ is a mechanism to catch potential issues where a variable is accessed before its declaration, promoting cleaner and more predictable code. Understanding the TDZ can help you write code that follows best practices and reduces the probability of runtime errors in JavaScript.