# Temporal Dead Zone(TDZ) in Javascript

### Temporal dead zone sounds like a sci-fi phrase but yet important to understand. This is the topic which I think every developer should know .

Now lets deep dive in it to know what are TDZ ??

In the beginning there is just one type of variable that is `var` . But after the release of ES6 specification we have come to know about two more  variables and they are `let` and `const`.

The major differences between var , let and const are as follows :

### * Declaration and Initialization differences between them 

When we declare a variable with `var` without intializing it , it will be intialized anyway . The variables which we defined with `var` will have default value that is undefined . Undefined is just the placeholder   assigned till we don't initialize the `var` variable . One more interesting thing about var is that we can re-declare it as many times we want and it will overwrite the older one .
But this is not the case with `let` and `const` if we will try to re-declare in the same scope it will give syntaxError . 


Here is an example :
```  
// Declare variable with var
// This will work perfectly fine
var variable1 = 'shreya'
var variable1 = 'riya'

console.log(variable1)
// Output:
// 'riya'


// Declare variable with let
let variable2 = 'riya'
let  variable2 = 'shreya'
// SyntaxError: Identifier 'variable2' has already been declared


// Declare variable with const
const variable3 = 'riya'
const variable3 = 'shreya'
// SyntaxError: Identifier 'variable3' has already been declared

```


### * Accessing variable before intialization 

In `var` if we will access variable before initialization it will give undefined as output.

Here an example :

``` 
console.log(a);
var a = 20 ;
// output : 20
```
But when we will declare a variable with `let` and `const` they work differently . If we will access variable before initialization  then they will give reference error .

Here an example :

``` 
console.log(a);
let a = 20 ;
// output :
```

So now you must be wondering that if let and const are also hoisted like var then why let and const give reference error  ??🤔🤔

Then temporal dead zone comes into the picture 🤩

Temporal dead zone is the phase between hoisting of variable to initialization it with some value . In short, temporal dead zone describes a zone where variables are un-reachable. These two variables exist in the temporal dead zone from the start until you initialize them.

This is also where the temporal dead zone is. Its beginning  of the current scope at which you declared the variables. The end of it is where the variable is actually declared, where you assign that variable with some value. This phase is temporal dead zone.

```
{
     console.log(age); 

 	// This is the temporal dead zone for the age variable
	// This is the temporal dead zone for the age variable!
	
	let age = 25; // Yayy, we got there! No more TDZ
	
}
```
But because it is in TDZ and we are trying to access it then javascript engine will throw error .
 
![image-5.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1641751742506/ogfi4LTAL.png)

### More examples of the TDZ :

The TDZ can also be created for default function parameters. So something like this:

```
function createTDZ(a=b, b) {
}

createTDZ(undefined, 1); 
```
throws a ReferenceError, because the evaluation of variable a tries to access variable b before it has been parsed by the JS engine. The function arguments are all inside the TDZ until they are parsed.

Even something as simple as let tdzTest = tdzTest; would throw an error due to the TDZ. But var here would just create tdzTest and set it to undefined.

### How to avoid TDZ ??

Relatively simply, always make sure you define your let and const at the top of your scope.

Thanks,
Happy coding😁