In this blog, I'll go over the very basics of javascript, such as hoisting and temporal dead zone. You will understand how variables and functions are hoisted in javascript, as well as what happens if we try to access variables before they are declared or initialised. You'll also learn about the temporal dead zone (TDZ) and what precautions you should take to avoid it. Let's begin!

Hoisting

Prior to executing the code, the interpreter appears to relocate the declarations of functions and variables to the top of their scope, a process known as hoisting.

In many other languages, this would have been a clear error because it is impossible to access something that isn't even declared. But in JavaScript, hoisting allows us to use to variables and functions prior to their declaration or initialization.

var hoisting

When it comes to variables, JavaScript only hoists variable declaration, not variable initialization. When we try to access a variable before it has been declared /initialized, it returns an undefined value in the case of var (otherwise uninitialized). Initialization of value doesn't happen until the given line of code is executed.

console.log(language);
console.log(getNumber);

var language = "Javascipt";
var a = 10;

function getNumber(Number) {
  return console.log(Number);
}
console.log(language);
console.log(getNumber);

When we try to access language before the variable initialization is executed, we receive undefined in the console. This is because a variable is created in memory before a single line of code is executed.

function hoisting

Hoisting has the advantage of allowing you to use a function before declaring it in your code. In the case of function whole function expression is stored in memory before the actual execution of code.

getNumber()
console.log(language);

function getNumber(){
    console.log(10)
}

If you try to access a variable that hasn't been declared in code, as demonstrated in the above code snippet, you'll get a reference error.

Arrow function hoisting

In the instance of the arrow function, which was introduced in ES6, the function is hoisted as if it were a variable, with undefined assigned before initialization. When we try to call the function before it has been defined, we get a reference error, as shown below.

console.log(getNumber);
getNumber();

var getNumber = ()=>{
    console.log(10)
}

let and const hoisting

Variables declared in let and const are not hoisted like variables declared in var. Variables declared using var are saved in a memory space named global, whereas let and const variables are maintained in a separate memory space called script shown in the below image.

The variable language which is initialised with let isn't accessible in window or this keyword since it isn't available at the global level. Window.language or this.language, on the other hand, returns undefined as shown following.

console.log(number); 
let language = "javascript"
console.log(language); 
var number = 10;
console.log(window.language); 
console.log(window.number)

Temporal dead zone

From the time the variable declared in let and const is hoisted until code execution reaches the line where the variable is declared, it is considered to be in a "temporal dead zone" (TDZ).

If we try to access a variable declared in let and const before the initialization is completed in the temporal dead zone, a reference error is thrown. The variable will be initialised with the value undefined if no initial value was provided with the variable declaration.

console.log(language); 

let language = "javascript"

We can claim that the zone above the initialization of variable language to "javascript" is in a temporal dead zone in the above code. As a result, we can't refer to it in TDZ, and attempting to do so results in a reference error.

Some good practices

• To avoid problems and reduce the temporal dead zone window to zero, declare and initialise all variables with let and const at the top of the code.

• Const should be used whenever possible. If const isn't an option, let can be used instead.

• However, whenever possible, avoid declaring variables in var.

From the perspective of a newcomer, this blog may appear overwhelming. Try running the provided code on your computer and experimenting with that to gain a better understanding of the topics. I hope you found this blog to be informative. Please pass it forward to your contacts and share your ideas in the comments section below. Thank you!