Javascript 1 - let, var and const in Javascript and What is Temporal Dead Zone?

Hello All,

Good Morning, Afternoon, Evening what ever zone you are in.

In this article we are going to learn the difference between var, let and const

The main difference between var, const and let are scoping rules. I mean Variables declared by var keyword are scoped to the immediate function body so it is called function scope but variable declared with let and const are scoped to the immediate enclosing block denoted by { } so it is called as block scoped.

VAR:

When we create the variable with var keyword, it is directly attached to the global object, because of this we can access the variable before it gets assigned and we get the value as undefined.

console.log(appName)


var appName = "Code With Chakri"


console.log(appName)

When we run the application with breakpoint we could see the detail like below

Output will be

As var variable to attached to global object, hence we can access the variable before initialization it will provide the result as undefined

Try accessing the variable with keyword this and window, screen shown below

One more interesting thing in Var is we can declare multiple time, it will not throw any error. 

But as per my experience it will be problem and confuse the developer.

console.log(appName)

var appName = "Code With Chakri"

console.log(appName)

var appName = "Chakrapani Blog"

console.log(appName)

Above code will work without any issues. below is the output

LET:

When we create the variable with let keyword it is attached to the special memory and it will be displayed under script section. shown below

Good thing in Let variable is we cannot access it before initialization, it will throw the reference error shown below

index.js:1 Uncaught ReferenceError: Cannot access 'appName' before initialization

    at index.js:1:13

Also we cannot declare let variable again as like var, it will throw the error shown below.

Uncaught SyntaxError: Identifier 'appName' has already been declared (at index.js:7:5)

CONST:

Technically speaking const is very much similar to let, but only difference is we cannot re-assign the value to const variable and value should be initialized while declaration.

we get the below error when we re-assign the value to const variable.

Uncaught TypeError: Assignment to constant variable.

    at index.js:3:9

As like let  const variable is attached to the special memory and it will be displayed under script section. shown below

What is Temporal Dead Zone?

Everything in JavaScript happens inside an execution context, context is kind container where whole JavaScript is executed.

JavaScript execution is divided into two phase.

1. Memory Phase

In this JavaScript engine will allocate a memory to the variable and value will be undefined.

2.  Code Execution Phase

This is the phase where code is executed line by line.

Hoisting:

Hoisting is the process of setting up of memory space for our variables and functions. Before the code starts to execute, the JS engine goes thru the code and sets up blocks of memory for functions and variables. 

As like var let and const are also hoisted, but let and const fall under TDZ(Temporal Dead Zone). Temporal Dead Zone is the zone where we cannot access the variable until its assigned that phase we call it TDZ.

The TDZ is a very good thing because it helps to highlight bugs—accessing a value before it has been declared is rarely intentional.

OK we are done....

I hope you enjoyed this article. 

That's it for right now, see you in next article until then take care bye bye 😄