Here I wrote my self note regarding JavaScript variable lifecycle. I hope this will make a quick recap to you.

Let’s consider below code block.

sayMyName('Rasika')functionsayMyName(userName){console.log(`Hello${userName}`);}

Simply this function identifier hoisted. That means every identifier created at the beginning of its scope. But there is another thing. Have you ever thought that however thatsayMyName got the value when the relevant scope starts to run.

This is because offunction hoisting. Whenever function’s name identifier registered on the top of the scope that it belongs, it will also initialize that moment.

Note: This will happen if you declare a function with function declaration. Not for the function assign to variable.

If you try below code you will getReferenceError that sayingCannot access ‘sayMyName’ before initialization

sayMyName();constsayMyName=(userName)=>{console.log(`Hello${userName}`);};

If you usevar insteadconst you will get aTypeError.

TypeError:sayMyNameisnotafunction

Moreover, we are consideringvar scenario in here. Okay, with that errorsayMyName have a value but it is not a function reference. That is what can we get from the error message.

Whenever we declared withfunction it will be hoisted and initialize the function value to itself.

functionsayMyName(userName){...}

But…, if we define avar variable and assign anfunction expression it will hoised and assignundefined to the variable value. Until in the runtime that assignment happened, it will not have the function reference. (like below code block)

varsayMyname=functionsayMyName(userName){...}

Hoisting rule is, hoist the function declaration first, the hoist variables.

As the example consider this example.

myName="Rasika";sayMyName()functionsayMyName(){console.log(`My name is${myName}`);}varmyName;

Basically, it will execute like this.

functionsayMyName(){console.log(`My name is${myName}`);}varmyName;myName="Rasika";sayMyName()

But if you uselet orconst this will not run the code. It will throwSyntaxError.

Consider the below example.

constmyFavoriteFruit="Mango";console.log(myFavoriteFruit);myFavoriteFruit="Ba na na"

In here first, you will get the console output and then get theTypeError. NOT aSyntaxError.

Also infor loop, the inner variable will declare once per scope instance. Not a re-declaration.

for(leti=0,i<5,i++){// in here i will be declare in five separate scope instances}

Also, this is works withfor..in andfor..of same like this.

But if you useconst infor loop it will fail after the first iteration.

for(consti=0;i<5,i++){// will give an error after 1st iteration }

But const will work withfor..in andfor..of.

Temporal Dead Zone

Consider below code block.

console.log(myFavoriteFruit);letmyFavoriteFruit="Mango";

This will gives below error.

ReferenceError:Cannotaccess'myFavoriteFruit'beforeinitialization

So we can come to the conclusion that we cannot use a variable at any time prior to its initialization that if we are usinglet orconst. Basically, this is referring to asTemporal Dead Zone (TDZ).

Make sure that let and const also, hoist the variable.

But it will not auto-initialize. It is basically auto-register the variable top of the scope.

We can avoid this TDZ by defining variables top of the scope.

Reference:
The (Not So) Secret Lifecycle of Variables I highly encourage you to go and check this article.

MDN - var

MDN - let

MDN - const

If you have anything to ask regarding this please leave a comment here. Also, I wrote this according to my understanding. So if any point is wrong, don’t hesitate to correct me. I really appreciate you.

That’s for today friends. See you soon. Thank you

Coverimage credit