Day 6: 😢 I don’t trust Javascript

How is this even possible?

😬 What happened?

I was trying one program yesterday, and see what happened…

In first picture I invoked function after function log, and ran the program, It gives me correct output. but….

In below example I invoked function before function log, and ran the program but it still gives me same output.

🧐 How ????????? Is this a bug in Javascript?

😂😂😂😂😂😂 This thing !!

Why are you laughing 🤨 ?

This is valid javascript code, It's called Hoisting in Javascript.

Is this a feature? 🧐 Many programming languages will cry at this point. They will throw nasty errors. How i am suppose to write proper code, if things like this will be part of language? It will create lot of confusion while debugging program, How can I trust it? Its stupid 🤯

😅 You have thrown lot of the questions at me at the same time.
Let's discuss about it today and at the end I will also give you some gotcha question !!

Okay…

So, first of all Hoisting is default behaviour of the Javascript.
Let's take above example.
In the first code snippet, You have invoked function after the actual function is declared.
Let's run this program.
So what happens when we run this program?

This is how it looks like when the program is completely executed.
Let's put a breakpoint at the very first line of the program to see what is going on internally.

I renamed function `log` to `a` so it fits into the screenshot.
So as you already know, Javascript creates Global Execution Context before executing any program. 
And Each execution context has two phases, remember the day 1?

Yeah, I know, In the first phase it will assign undefined value to variables and it will copy whole function, in case of functions.

That is shown in the above screenshot as well.

Hey, wait !!!! I think i got this.

In first phase whole function is already copied to the memory component (variable environment) and when second phase is executed, It already know which function to call.

Exactly 🥳🥳 Can you explain me second screenshot, which you shared?

Sure, It will be exactly same condition, if I put breakpoint on line 1.

So, In this case as well, It has already reference to call which function. So it also outputs I love Javascript .

This is all good, but don’t you think It will create lot of confusion while writing code and also debugging will become much more difficult???

You are right!!
 
Hoisting is (to many developers) an unknown or overlooked behaviour of JavaScript.
If a developer doesn't understand hoisting, programs may contain bugs (errors).
To avoid bugs, always declare all variables at the beginning of every scope.
Since this is how JavaScript interprets the code, it is always a good rule.

Aha !! So you agree with me 😜😜😜😜

😂😂😂😂😂😂😂 
Obviously, When things are right, I will always support 💙.

Hey, Is this hoisting voisting valid for variables too?

😏 It is same like relationship status of Imran Hashmi in "Main Rahoon Ya Na Rahoon" song.

🤨 What??

It's complicated 🤣🤣🤣🤣🤣🤣

😅 Okay, Very funny, Is this really possible for variables too?

Let's take an example.
Variables are declared in Javascript using three keywords.
- var
- let
- const

If you use var keyword, then declarations are moved to the top.
In short, It supports hoisting.
In memory component we have value of x as undefined, So it works as expected. 

Works as expected 😅😅😅😅 First of all this behaviour is unwanted to me.

😂😂😂😂😂😂😂

Things to notice is Only Declarations are moved to top.

yeah, I got this.

Let's check it with `let` keyword.

In this example in both cases, It gives reference error. saying x is not defined.

So this means `let` is not hoisted, right???

Wrong !! 
All declarations like `var`, `function`, `let`, `const`, `class` are hoisted in Javascript.
But in terms of `let` and `const` it behaves differently.

hmmm 🤨, Another stupid thing to remember.

😂😂😂 It's simple thing, Once you read this two or more times, You will have crystal clear picture.
Let me show you this in real, Let's jump to the browser.

Okay….

Now if you try to access variable a, before it has some value initialised, It gives reference error saying you cannot access `a` before initialisation.
but ... 
If i put console log after line 2 and put breakpoint on first line let's see what happens.

If you notice `let a` and `var b` both have the value `undefined` that means it is hoisted.
but ..
`var b` is hoisted on global object and `let a` is hoisted on some script like thing (some different memory space) and the problem is we cannot access this different memory space until it is initialised with some value.
and that's why you get reference error saying cannot access `a` before initialisation because it is in different memory space.

Aha !! So `let` and `const` is also hoisted but they are hoisted in different memory space. Okay.. clear..

Yep...!! So next time interviewer asks you if `let` and `const` are hoisted or not? I hope you can answer it clearly now.

Yeah, I got it but 😕 what is the use of this type of hoisting? If I am still going to get error in program!!

Okay, Imagine I am using `let a` and that is hoisted as undefined in some different memory space.

So,

from the time it was hoisted as undefined

to the time it has initial value let’s say 10.

In between that time, It was useless for me. I cannot access it right?

Yes, You are right !!
Let's say at 07:43:10 PM let is hoisted in different memory space.
and it is initialised with value 10 at 07:43:20 PM.
Difference between this time is called "Temporal Dead Zone".
So in above imaginary example, We have 10 seconds of Temporal Dead Zone.
So whenever you are trying to use variables in between this Temporal Dead Zone, You get reference error.

Aha !! so i got that error because `let a` was in temporal dead zone.

Yep!! That's correct!!
Did you understood the concept clearly?

I believe Yes !!

With `functions` and `var` its easy, It just works.

But with `let` and `const`, It is hoisted in different memory space and it is only accessible once it has some value in it, otherwise it will be in temporal dead zone.

Phewwww 😉
That's correct, I hope you don't have trust issues with Javascript now!! 😂😂😂😂😂😂

I think it is about understanding the concepts correctly. If I understood the concept correctly then I will not have any trust issues because I know the default behaviour of Javascript.

Ahaa!! So you know default behaviour of Javascript?
Tell me what will be the output of the below 👇👇 program with explanation obviously?

Now, What is this?

👻👻👻 You will definitely have trust issues now !!
Hey, don't forget to join me on Twitter, LinkedIn and Github.
I share lot of cool tips and tricks regarding PHP, Laravel, Javascript, Vuejs, Nuxtjs, Reactjs, databases, workflows, productivity etc etc. 
https://twitter.com/rckstrbhushan
https://www.linkedin.com/in/rckstrbhushan
https://github.com/bhushan
Take care and stay safe. Cheers 🥂
See you tomorrow 👋

Hey, Wait what is this?? …