Temporal dead zone

Naveen710 — Tue, 20 Sep 2022 19:02:49 +0000

what is the temporal dead zone?

Temporal Dead Zone is the time period between which a variable is inaccessible, to the point where it is initialized. To know it better, we first need to dive a bit into a concept called hoisting

HOISTING

In JavaScript all the variables, let it be initialized with let , var or const are hoisted. Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code. So every variable declared anywhere in the code is moved to the top of the scope by the interpreter before execution of actual code even begins. now, hoisting is different for var and let, const.

In var, the variable gets hoisted in the global object and no TDZ is faced but in let and const the variable is hoisted in script scope and given a memory location that cannot be accessed before initializing the variable. this causes TDZ in let and const.

example:

console.log(a);  // here 'undefined' will be consoled as no TDZ occurs in var
var a=3;

console.log(a);// here TDZ occurs and Reference error is thrown
console.log(b);//gets undefined 
let a=3;
var b=5; // now a is initialized
console.log(a); // No TDZ .

Since in the second example we declared let after the calling so TDZ occurred. A reference error is thrown for the same as we are using the variable before it is initialized and var don't throw any error as we are calling it even before initializing it that is because of hoisting

Var, let and const in Javascript

Naveen710 — Mon, 19 Sep 2022 16:39:29 +0000

While learning javascript, it is important to understand how const, let, and var act. These keywords are used to declare variables in javascript. While understanding these keywords, it is also important to understand the concepts of scope and hoisting in javascript.

var keyword :

When we declare a variable using var keyword, it can be function scoped or global scope. If we declare var outside the function then it is globally scoped and can be accessed anywhere in the code. If var is declared inside a function, then it is function scoped.

var a = 2;     //varable declared gloabally

function localScope() {
   var b = 5;
   console.log(a);   // output 2
   console.log(b);   // output 5
}
localScope();
console.log(a);    // output 2
console.log(b);    // ReferenceError :  b is not defined

In the above code snippet, when we are accessing 'a' inside the function localScope, it works well. Here, 'a' is declared gloablly scoped. But when we are accessing 'b' outside the localScope function, it gives an error because the variable b is declared locally inside a function

We can reassign some new value to variable which is declared with var or we can also redeclare. The variable holds the last assigned value and both the cases work well.

var a = 2;

a = 2;     //  reinitiated with some other value
console.log(a)    // output 2

var a = 20;     // redeclared
console.log(a);   // output 20

We can use the variable even before it is initiated this will show variable is "undefined". This is because of hoisting in javascript which will be discussed soon.

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

let keyword :

The let keyword is block scoped which means variables which declared as let can be accessed only in the block in which it is initialized. If we try to access it outside the block, it gives an error.

{
  let a = 10;
}
console.log(a);   // ReferenceError : a not defined

We can reinitialize value to a variable that is declared using let but we cannot redeclare it. If we use variable before it is declared, it gives an error whereas in case of var, it says 'undefined'.

let a = 10;   // declared

a = 20;    // reinitialized works fine

let a = 30;     // SyntaxError: Identifier 'a' has already been declared

const keyword :

const as the name suggests we can't change the value which is assigned to const variable. Once the value is initialized to a variable, it cannot be redeclared or reinitialized. The variables declared using 'let' are block scoped and variables cannot be used before its declaration.

const x = 10;

x = 20   // TypeError : Assigning to a constant variable.

In case of objects, we can add properties to the object assigned but we cannot change whole object. Same in case of arrays too. We can add values to existing array but cannot assign new array to same variable.