Hoisting in JavaScript 🔥(variables & functions) | Namaste JavaScript Ep. 3

Hoisting in JavaScript is the most famous Interview Question. And it is also one of the most misunderstood concepts in JS. This video will cover in-depth knowledge and fundamentals behind variable and function hoisting.

Hoisting as a core concept relies on the way how Execution Context is created. In the first phase i.e. the Memory Allocation Phase all the variables and functions are allocated memory, even before any code is executed. All the variables are assigned undefined at this point in time in the local memory.

Topics Covered:
00:00 - Introduction to Hoisting in JavaScript (with examples)
00:54 - Variable and Function Hoisting in JS
03:02 - Definition of Hoisting
03:52 - Functions Hoisting Behind the Scenes
04:37 - Diving Deep under the hood of the JavaScript code
13:37 - Summary and Interview tip
14:12 - Demo of Call Stack in the Browser
18:23 - Teaser of the next video - How functions work in JavaScript?
18:38 - Thank you for watching Namaste JavaScript 🙏

Support this video series, NOT BY MONEY, but by sharing it with your friends. 🙏
I'll give my best to come up with great content and everything absolutely for free on YouTube. 😊

If you are active on Social Media,
please give a shoutout to Namaste JavaScript and help me reach more people. 🙏

Cheers,
Akshay Saini

Would love to Stay Connected with you ❤️

#NamasteJS #AkshaySaini

[akshaymarch]

How was the video? Are you feeling excited? Please comment below. ❤️

[PraveenReddy-nkzn]

After explaining the Hoisting, the interviewer is like "Are you from Namaste Javascript Academy ?" :P

[erinkahn]

It's such a shame that people are not taught this. Thank you for explaining it so well.

[jayjani]

The best part: "Working demo of Call Stack with a simple yet important example". Thanks Akshay :)

[AmanMishra-pncq]

Things Learned:

1. In JS, before the code is executed, the variables get initialized to undefined.
2. Arrow functions enact as variables and get "undefined" during the memory creation phase while functions actually get run.
3. Hoisting: Mechanism in JS where the variable declarations are moved to the top of the scope before execution. Therefore it is possible to call a function before initializing it.
4. Whenever a JS program is run, a global execution block is created, which comprises of 2: Memory creation and Code execution.
5. Variable declarations are scanned and are made undefined
6. Function declarations are scanned and are made available

[XiaoxingHu]

I love the passion of this guy. You can feel the excitement of talking about the stuff. Dude begs you for two more minutes of your time to teach you something cool. Love it!

[aayush]

2 Golden Rules:
1. Variable declarations are scanned and are made undefined
2. Function declarations are scanned and are made available

[pankhurigandhi]

after the hype of linkedin i came here and believe me it was worth it all...the way of your presentation and the feeling that instead of a teacher a friend is teaching, makes the videos more and more interesting.thanks a lot for sharing your precious knowledge with us and that too for free of cost.

[nabilparakatta]

After some research what I understood is -> When a JavaScript program runs, a global execution context is created. This context consists of two phases:
a) Memory Creation Phase :
.Variable declarations are scanned and allocated memory, initialized with the value 'undefined'.
.Function declarations are scanned and stored in memory with their entire code.
b) Code Execution Phase:
The code is executed line by line.

Hoisting is not about physically moving code to the top, but rather about how JavaScript allocates memory for variables and functions during the memory creation phase of the execution context. This mechanism allows for certain behaviors like using functions before they appear in the code, but it's crucial to understand that variables are initialized as 'undefined' until they're assigned a value during code execution. You can call a function before its declaration in the code because the entire function is available in memory from the start. Trying to access a variable before its declaration will result in 'undefined'.
Function expressions and arrow functions, being treated as variables, hence cannot be called before their declaration in the code. Variable and function declarations are processed before any code is executed. However, only the declarations are processed, not the initializations. This gives the impression that declarations are "moved to the top" of their scope, but it's more accurate to say they're processed early in the execution context's creation.

[theblackelephant]

Hoisting will work with a variable ONLY when it is declared using the var keyword, but will not work when a variable is declared using the let keyword which is now the standard of declaring variables in JavaScript as of the year 2023. This is really a great video for one who is starting JavaScript or professionals who are refreshing up their knowledge on JavaScript

[kunal]

1. Hoisting in JavaScript is a process in which all the Variables, Functions and Class defination are declared BEFORE execution of the code
3. Variables are initialised to UNDEFINED when they are declared and Function defination is stored AS IT IS.
4. They are declared in Memory Allocation Phase in the Memory Component of Execution Context, so we can use them even BEFORE they are declared.
5. UNDEFINED means Variable has been declared but value is not ASSIGNED but NOT DEFINED means Variables is NOT DECLARED.
6. When we assign Variable to a Function defination, we CAN NOT call this Variable as Function BEFORE declaration as it will behave as Variable with UNDEFINED value.

[ashutoshdwivedi]

No paid course can match your level, Sir.
Thank You so much for this valuable content.
Namaste 🙏🏻 Sir .
Namaste 🙏🏻 JavaScript

[codecrook]

Ohh my God, Man!! 🔥 Heavy stuffs. I literally had goosebumps when you showed practical example of "Call Stack".📚 Thank you so much for these awesome contents. 🙏🏼

[narasimharao]

One of the interviewer suggested your channel - I studied bits and pieces of the concepts not fully understood now you made it clear.
14:18 here you're asking a person to stay for more minutes so kind of you, that you are teaching people with no personal gain. Thank you.
I will recommend your channel to my friends.

[garimapandey]

Amazing video, nobody explained javascript like this!!! which is why it looked so complicated but this video gave the crux of it! thanks you @Akshay Saini

[vishnugajulapalli]

Even after taking 20 min of break time, my lecturer never says, just give 2 more minutes, I will finish this. But you are different. You deserve a lot of respect bro. Thank you for educating us 😊

[arnavsingh]

14:15
Akshay: Just give me two more minutes.
Me: YES.

[avikkundu]

Summary:

1. In JS, before the code is executed, the variables get initialized to undefined.
2. Arrow functions enact as variables and get "undefined" during the memory creation phase while functions actually get run.
3. Hoisting: Mechanism in JS where the variable declarations are moved to the top of the scope before execution. Therefore it is possible to call a function before initializing it.
4. Whenever a JS program is run, a global execution block is created, which comprises of 2: Memory creation and Code execution.

[atharv]

From your previous 2 videos and this one, what I liked most is how you skipped details about writing variables, functions because it can be learned anywhere. You directly went on intricate details of how JavaScript works. This is what I generally look when I wish to study new language. I mean learning syntax or how to write functions I don't need a video on that. What I really wish to know is how exactly the functioning of this program different from others.
In fact before you explained reason behind hoisting I got to know it right away because of how precisely you went though with details of execution context and its phases in previous video.

[ShaniPawar-sfzf]

This is the first time someone has taught it so well and your energy is so good that we feel really positive. And it really feels like we are learning JS the pro way. Thanks for the lessons!