Temporal Dead Zone Js

Temporal Dead Zone in Javascript

what is the temporal dead zone before knowing it for a better understanding of TDZ revise some concepts in js?

In javascript, we declare variables in three ways

using var, let, and const

say example

var a="declared by var variable" //creates global variable
let b="declared by let variable"
const c=" declared variable in const "

Scopes:

In general English, scope means the Opportunity or possibility to do or deal with something. where in Javascript, scope determines the accessibility of variables in a program.

Global scope:

which is a default scope and scope created in the entire program.

example:

var userName="Shivani"
function user(){
console.log(userName) //output:Shivani
}
console.log(userName) //output:Shivani
// username in the global scope and  it can be accessed anywhere in the entire program

Function scope:

scope creates within a function

Example

function SayHello(username){
var user=`👏 Hello, ${username}`
console.log(user) //output:👏 Hello, username
return user;
}
console.log(user)  //  Uncaught ReferenceError: user is not defined
sayHello("Shivani")

block scope:

The scope creates with a pair of curly braces (a block)

example:

{
let catName="Kitten"
console.log(catName) //output:Kitten
}
console.log(catName) //output:reference error 'catName' is not defined

How JS Engine executes?

JS Engine allocates the memory for the variables first which is nothing but hoisting. after that it starts the execution of a program.

let's understand hoisting with some examples

console.log(welcomeUser) //output:undefined
var welcomeUser ="hello Programmer";

{
      console.log(userBio)  // Reference error
      let userBio="learning Js"
     console.log(userMessage)  // Syntax error
     const userMessage="Hello Universe';
}

In the above examples when we console the welcomeUser we get it as undefined. if you observe let & const in JavaScript it behaves differently when they are Hoisted. when we console of userBio will gives you a reference error. why ? to understand this we have to know tdz.

What is Temporal Dead Zone(TDZ)?

let and const are hoisted, but there is a period between entering scope and being declared where they cannot be accessed. This period is the temporal dead zone (TDZ). const and let are in a Temporal Dead Zone until some values are initialized. else You might encounter SyntaxError /reference Error etc.

Understand it by some examples:

(function() {
  // Start TDZ for x.
  console.log(x);
  let x ;
  x="hello world" // Declaration ends TDZ for x.
}());

 // Start TDZ for a
let a;  // a in TDZ 
a=10; // ends TDZ

 // Start TDZ
let j;
function sum(a,b=j){   
  j=2+a+b ; // Declaration ends TDZ 
return j 
}

The TDZ is a good thing because it helps to highlight bugs like accessing a value before it has been declared. like to avoid reference/type errors and other errors in JS.

Note: The TDZ also applies to default function arguments. Arguments are evaluated left to right, and each statement is in the TDZ until it is assigned.

Thank you for Reading my blog...👨👨