Introduction

JavaScript is a powerful and flexible language, but its quirks can sometimes be challenging for developers to grasp. Key concepts such as hoisting, variable declarations (var, let, const), and the temporal dead zone play a crucial role in how JavaScript code executes. Let's explore these concepts in detail to understand how everything happens under the hood.

Hoisting

It is a phenomenon in Javascript by which you can access variables and functions even before you've initialised them.

When javascript code is executing variable and function declarations are moved on top of their scope, this means you can use them even before they are declared in our code.

• Variables are declared and made undefined.

• Functions are scanned and made available as Whole

• Arrow functions acts as variable and get undefined as placeholder, thus you cannot call arrow functions before declaration as they’ll be treated as variables.

Code Example.

console.log(hoistedVar); // Output: undefined
hoistedFunction(); // Output: "I am a hoisted function!"

var hoistedVar = "I am hoisted!";

function hoistedFunction() {
    console.log("I am a hoisted function!");
}

In the above code example we can see variable hoistedVar is undefined when logged it is because variables declared and made undefined & Function declarations (function hoistedFunction()) are fully hoisted, so you can call the function before its declaration.

ES6 (2015) introduced the two new JavaScript keywords for declaring variables: let and const.

Variables declared with let and const are Block scoped and cannot be redeclared in the same scope(If you try to redeclare let and const you'll get syntax error) & unlike var they must be declared before use.

Var

// Redeclaration is allowed
var x = 10;
var x = 20; 
console.log(x); // Output: 20

// Reinitialization is allowed
x = 30; 
console.log(x); // Output: 30

In the above code you can see that redeclaration and reinitialization of var is allowed, also var is attached to the global object while let and const are not.

Let

// Redeclaration is not allowed
let y = 10;
// let y = 20; // SyntaxError: Identifier 'y' has already been declared

// Reinitialization is allowed
y = 30; 
console.log(y); // Output: 30

In the above code you can see let variables can be re-initialized but can not be redeclared within the same scope.

Const

// Redeclaration is not allowed
const z = 10;
// const z = 20; // SyntaxError: Identifier 'z' has already been declared

// Reinitialization is not allowed
// z = 30; // TypeError: Assignment to constant variable.
console.log(z); // Output: 10

const cannot be redeclared or reinitialized, meaning it must be initialized at the time of declaration and remains constant thereafter. If you try to re-initialized const you'll get Type Error.

Are Let and Const declaration hoisted?

Yes, let and const declarations are hoisted, for the time being they are in temporal dead zone. You can not access them before initialisation.

When execution context is created memory is assigned to let and const variables but they are kept in a different memory space than global execution context, known as Temporal dead zone.

Temporal dead zone:

It’s the time between when a variable is hoisted and it is assigned a value.

Whenever you try to access a variable inside temporal dead zone it gives a reference error. To avoid temporal dead zone always put declarations on the top.

Different types of error:

Syntax Error:

Violation of javascript Syntax, occurs when you try to run a syntactically wrong code

Type Error:

Occur when the variable exists, but the operation you're trying to perform is not appropriate for the type e.g. re-initialising const variable

Reference Error:

Occur when you are trying to refer to or use variable/functions that does not exist in global memory.

Undefined vs not defined

Undefined:

Undefined is a place holder till a variable is assigned a value.

Not defined:

Not defined means variable is not declared.

Null:

null is an assignment value that represents no value or no object. It is explicitly assigned to a variable to indicate the absence of a value.

Summary:

• Hoisting: Moves declarations to the top of their scope, allowing variables and functions to be used before their declaration.

• var: Function-scoped and can be re-declared within the same scope.

• let and const: Block-scoped, with const also preventing reassignment.

• Temporal Dead Zone (TDZ): The period between entering a block and initializing a variable declared with let or const, during which the variable cannot be accessed.

By effectively using let and const, understanding hoisting, and recognizing the temporal dead zone, you can write clearer, more predictable JavaScript code.