Hoisting in JavaScript 🔥(variables & functions) | Namaste JavaScript Ep. 3
Vložit
- čas přidán 28. 06. 2024
- 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.
My tech gear I use every day - google.peek.link/2pba
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 CZcams. 😊
If you are active on Social Media,
please give a shoutout to Namaste JavaScript and help me reach more people. 🙏
Cheers,
Akshay Saini
akshaysaini.in
Would love to Stay Connected with you ❤️
LinkedIn - / akshaymarch7
Instagram - / akshaymarch7
Twitter - / akshaymarch7
Facebook - / akshaymarch7
#NamasteJS #AkshaySaini
Next Video: How functions work in JS? 🔥 - czcams.com/video/gSDncyuGw0s/video.html
How was the video? Are you feeling excited? Please comment below. ❤️
Very.........excited😘😘😘
like never before
So many of my misunderstandings were cleared today! Great series!!
waiting for ur "this" video. Ur videos are awesome
Super Excited , Hail Akshay
After explaining the Hoisting , the interviewer is like "Are you from Namaste Javascript Academy ?" :P
Haha 😅
Haha true😂
😂😂😂
😁
What if Akshay Sir will be your interviewer?? And he asked something out of Javascript course??
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
Thanks Bro😍😍
one more thing bro, var is initialized with undefined but let is not initialized to undefined
very good bro , Jai shree krishna
Bro in hoisting definition...u mentioned variable declarations moving to the top...nothing is moving to the top and thats the reason he explained all this. When js code runs and execution context is created and 2 phases happens 1)Memory execution phase 2)Code phase.In memory allocation phase it skims the js code and allocate memory to variables(undefined) and function(full code). When u try to access those without initializing those values are printed ...that is the mechanism of javascript called Hoisting.
@@deepaksai3637 came here to say the same thing. This comment killed the purpose of Akshay making this video
It's such a shame that people are not taught this. Thank you for explaining it so well.
I think you will get correct and exact explanation from Brendan Eich. Instead of casting blame or shame, Go and ask him if possible. Don't judge the people who are teaching, that educators teach based on what they've learned.
You are correct 💯
@@meruguvenkatesh1931 She's thanking the guy for teaching this. She's not blaming anyone you absolute dimwit.
@@meruguvenkatesh1931 who is judging him infact she is appreciating him
@@meruguvenkatesh1931 She is praising him
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.
No paid course can match your level, Sir.
Thank You so much for this valuable content.
Namaste 🙏🏻 Sir .
Namaste 🙏🏻 JavaScript
Go watch Front End Masters.
@@DebjitMajumdar Appreciate the efforts bro 😊❤
Have you completed this course how was the course i mean was all the topics covered
Agreed
2 Golden Rules:
1. Variable declarations are scanned and are made undefined
2. Function declarations are scanned and are made available
Awesome bro note this point very important...... clearly understand me
Yes, but not if you are using ES6 feature let or arrow function. You can correct me if I am wrong.
and arrow function and foo = function(){...} type of function also behave like a variable in memory creaton phase.
Yup the value of the variables are assigned in the execution phase, where the code starts executing line by line...
I remember these lines from some other video. Can't recall which one.
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!
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.
mst notes bna diye
Thanks Kunal
Thank you so much 😮
Can we say hoisting is just a process which is done in memory creation phase
@@Aptilover I think it is bcz of memory creation phase hoisting is possible;
The best part: "Working demo of Call Stack with a simple yet important example". Thanks Akshay :)
Akshay, I've DM you on Instagram. Please help me out with it. Thanks in advance :)
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. 🙏🏼
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
let and const variables and functions are also hoisted , hoisting just means that they are present in the memory before code execution , but the point here is that let and const are set to uninitialised during memory creation phase and var variables are initialised with undefined but var let const all are hoisted keep in mind
will u please explain me that @@ravisingh-el8np
even I faced this issue
Everytime I go through this series, I learn something new. I watched this series a lots of time, but never feel bored going through this again and again.
14:15
Akshay: Just give me two more minutes.
Me: YES.
Thank you for your time, brother. ❤️
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 😊
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.
I came here becuase one of my linked in connection suggest me to watch a single video, now I am following Akshay sir
This is probably the most important video for someone who is coding with JS and not just beginners!
For arrow functions, we are storing function inside a variable, and when memory is allocated to variables it store undefined, so when we try to invoke the variable as a function, js finds undefined instead of a function, so it shows error that getName() is not a function as that is actually a normal variable that you're are trying to access as a function............
Thanks to you, now i completely understand this
Yea, this was the best part of this video. Never deep dived into arrow, although using it on a daily basis.
Thanks to make it clear for me.
Kyle Simpson : "You Don't Know JS"
Akshay Saini : Bro, Just Chill
i'm here to reaffirm what i learnt in ydkjs, akshay saini is definitely brilliant in his explanation
Maza aagaya! Working as an Angular Developer since last 6 years, but never really understood these nuances of javascript. Amazing series. Thanks for bringing it to us.
Many JavaScript programmers explain hoisting as JavaScript’s behavior of moving declarations (variable and function) to the top of their current scope (function or global). As if they were physically moved to the top of your code, which is not the case. For example:
console.log(a);
var a= 'Hello World!';
They will say, the above code will transform into this code after hoisting:
var a;
console.log(a);
a = 'Hello World!';
Although this is what appears to be happening (because the code is working fine), this isn’t actually happening, your code isn’t going anywhere. The JavaScript engine is not physically moving your code, your code stays where you typed it.
During compile phase, just microseconds before your code is executed, it is scanned for function and variable declarations. All these functions and variable declarations are added to the memory inside a JavaScript data structure called Lexical Environment. So that they can be used even before they are actually declared in the source code.
What is a Lexical Environment?
A lexical environment is a data structure that holds identifier-variable mapping. (here identifier refers to the name of variables/functions, and the variable is the reference to actual object [including function object] or primitive value).
This is what a lexical environment conceptually look like:
LexicalEnvironment = {
Identifier: ,
Identifier:
}
So in short, a lexical environment is a place where variables and functions live during the program execution.
Legends binge-watching this series!! Akshay bhai OP 🦁
The way he explains things shows how much he loves JavaScript and teaching JS.. just awesome...🔥🔥🔥🔥🔥🔥
You the best teacher on the internet. I've spent a lot in the past on very expensive courses and none compares to your free content. Very impeccable delivery 👌.
The enthusiasm that you brings with each video is just awesome, it doesn't let us feel bored.
I always believe "A great teacher can change a student life", You are a great teacher. I wish you all the best for your next videos :)
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.
Thanks bro
3. Hoisting: Mechanism in JS where the variable declarations are moved to the top of the scope before execution.
Pretty sure this is wrong
yes point 3 is wrong.
During the memory creation phase, JS allocates memory to all variables and functions, and it stores the whole code of function inside memory component. So that's why we can use functions before defining it.
I have learned javascript from many instructors but no one teaches that you are explaining in depth in this videos, thank you so much sir
Each video makes me more excited to learn more about JS. What a great series!
I was struggling with these concepts ever since i started learning js. Has been more than 6 months now. I could'nt believe this is all there is to it.
Really oversimplified!
Thank you so so much!!!
Awesome explanation, Never thought some one can explain JS in this way and it can actually make sense 😅. Bonus is your smile ❤.
Literally Very good stuff. You just changed my thought process of learning by doing on my own by just reading only official docs. All these days I haven't watched any video lectures and highly dependent docs and blogs but after looking at your explanation I got to know someone like tech experts analysis will help us to understand concept in easy and right way.
From today I will give equal importance to Video lectures and Docs
Just want to say your JS series is my favorite! Learning syntax and stuff is cool but I really appreciate you taking the time to instruct us on how the language actually works. Fundamentals are fundamental! Thank you Akshay!
Absolutely true!!
Interviewer: What is function?
(Me after watching Namaste JavaScript series)
Function are beautiful.
Interviewer: Please escort this gentle man outside.
Hahahabbaha
hahahah my answer will be definitely same
Of course, with appointment letter.!
😂
nobody explained it so easily before in a very entertaining way. he is best teacher.
His eyes shine while explaining. I am on the 3rd episode of the series and in love with this already. I wish I found his channel more sooner.
You explained hoisting so clearly that i can explain it to anybody even in my dreams. Thanks for the great explaination🔥🔥🔥
The best code flow explanation I have ever come across all these years.😍😍
Started feeling really confident about hoisting. Man it used to confuse me a lot. But watching every video in line made me clear.
In your next interview, if the interviewer asks about hoisting dont say the pieces of code will be moved here and there 😂😂-- askhay, that was the moment for me, now i can explain about hoisting even better.
😅
@@akshaymarch7 thanks 😍😍
i have also given the same answer..:)
The best teacher I've come across that explains JS so simply - thank you brother!
I love the enthusiasm and clarity by which you approach these topics that can be dry otherwise.
Today was my Internship interview, He asked me about reference error, undefined, closures and Hoisting, I was like "Hosting?", yes I have hosted my project live😂. It was really shameful for me to be like that as being a Web Developer. Now, not anymore. After 1 hour of my interview, I have started learning JS from this Playlist, It is wonderful and best ever playlist on JS. Thanks a lot Akshay Sir for your invaluable playlist. Thankyou a lot.
What is reference error??
@@JaiPrakash-ku7it whenever you try to reference a non existing variable or a variable outside it's determined scope then a reference error is thrown by your host environment
@@shubhendusen721 Thanks I got it.
U got job now ..or not...
@@Shriswamisamarth-sevekari-KgnR Hi.
Yes, its been around 3yrs of this incident.
Even I forgot that someday I commented here.
Thans for reminding ✌🏻😅.
Yes, joined at 7lpa in a service based company 2 months ago.
Thanks for asking.
Getting goosebumps while listening to your lectures as they are so interesting due to clarity and in depth understanding you give. No one can teach like you. Thanks a lot. God bless you.
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.
I can already see your dream of making your viewers fall in love with Javascript live and in action. This is a beautiful course on JavaScript and I'm loving it. Thank you so much for all your efforts. Kudos to you.
❤️
I must say. I am slowly falling in love with JavaScript.
It's so beautiful when you get explanations for concepts that are simply stated in books and taught in online tutorials without justification.
Kindly inform me what book you follow for these concepts. Would love to read more about these concepts in depth.
Thank you, Akshay!
gone though many javascript courses, videos, lectures, but unsatisfied with their explainations finally found the best chanel for learning javascript
It really given a clear picture on the concept, no one till now has explained so well... amazing content
First time i have seen someone going so deep theoretically as well as showing it practically in JS.
It clears all my doubts ❤️❤️👏👏
Man!! now I understood hoisting - moving variables and function declaration to the top--BULLSHIT, it's simply because JS allocates memory for all variables and functions defined in program before execution.
he is soo sweet explaining us all the things and even requesting people like "please wait two i want to show you something more interesting thing" that's soo noble of you sir❤
You've changed my way of thinking in Javascript.Thank you so much❤️
Holy shit. You explain things so well. Like literally the best hoisting explanation I’ve seen so far. Impressive. Please make more videos.
Akshay Saini, this is the best way to explain hoisting. Like I could figure out the answers just with the help of previous video concepts!!! Like mind blowing!!!
i love how passionately you speak of javaScript.... love it
Wow I have not seen this information anywhere else on youtube, also the care you put into making this clearly understandable is super impressive and great!
Loving the series, and loving the love and excitement that you have for javascript😂
Note: var assigns the value in global scope so we're able to see the x key in the window object. Unlike var; let and const are not global scope, they are block scoped so they won't be visible openly in window object. There will be another scope above global called 'Script' where you should see the variables defined with const and let.
yes, i have just tested it . the variable declared with cosnt/let are in script scope. let me search what is this
its write because they are block scoped so they throw the reference error if we use it before initialization.
Wow man. This series is incredible. Each video has its own beauty of simplicity. Thank you very much!!
love how you are very enthusiastic about teaching JavaScript
the laugh between the explaination is amazing
I am new to your channel which was suggested and shared by my friend. I am love the way you explaining things one by one.My experience no one had explained this Javascript like you did... Hats off... You are doing great job
Welcome aboard brother!
generally, I don't comment but the way you teach these things is awesome. I watched 2-3 tutorials having millions of subscribers. but you making understand in so depth no words for you. hats off you man❤❤ writing the code is a different thing and understanding the code is different
i think you're a good teacher to explain the basic concept of js and other tutorial are define the case of js but no one is going to deep to explian this concept. thank you bro.
I used to believe that finding the perfect JavaScript tutor was impossible, but then I stumbled upon this video and I have to say, I'm impressed! The concepts are explained clearly and the tutor does an excellent job of breaking down the code. I appreciate the effort put into making this video and I'm excited to continue learning from you. Keep up the great work!
I have never come across such high-quality content on JS. Thanks for digging so deep.
Namaste Akshay when you first made this playlist, I was in college and I watched them at that time not much effective as i was not using JS but now my corporate journey started and I'm using JS and these concepts are really helping me a lot. Thank you so much for this wonderful playlist ❤
Love your enthusiasm in teaching JavaScript effortlessly. Thank you for sharing these priceless videos with us. Each video is spot on, especially for those who need that extra explanation, like me. You are GOD send!
Thanks for this course, it is extremely helpful !
Wow! Cool demo for call stack and execution context in general, just makes me wish I had seen this earlier 😅
From you previous video I could figure out why. Before the program begins execution the memory phase begins which will allocate spaces to all the variables and functions in the execution context. So for example a variable declared anywhere (for ex: say line number 200) can be accessible in any line before or after it. Thank you man❤️
This was very much required for me. Your answers to these queries were worth a million.
Great explaination for hoisting, also loved the demo of call stack :-)
Only because of you😇 I can learn javascript in depth.
Thank you Akshay Saini❤️.
And
Outro music 🎶 is Awesome.
It feels so good learning what hoisting is, before watching this video when i hear the word hoisting i always think of something more difficult to learn, but with your explanation it becmes more easy.
Hi , I'm Sofia ,this video helps me lot, not only this, every video gives me more interest to move on next. You are passing your energy and enthusiasm to everyone . Thank u so much ,thanks a lot. You will achieve your goal, Your thoughts are pure . You want everyone to learn about this. That's really great.
Thank you for such an amazing video.
Summary:
When you execute your code, an execution context is created. This context has 2 components, which are the memory component and the code component. In the memory component, before the code is executed, the whole code is scanned. And after scanning the whole code 2 things happen:
1. variables are allocated to the memory and are made undefined
2. functions are allocated to the memory and are made available
(
Exceptions:
Arrow functions act as variables.
var x = function(){} also acts as a varibale
Implying x and the arrow function, after being scanned will be made undefined.
)
And when the code starts to execute and the control is now in the code component of the execution component, the variables are now assigned the values.
And hence, even though the function is called without being defined, it will give the response and in the case of variables, it will show undefined.
This whole process is called hoisting.
In brief, hoisting is a phenomenon in JS by which you can access the variables and functions even before initializing them.
And the variables will be made undefined.
While the functions will be made available.
you are doing gods work
you are an angel, believe me you really are ! the best tutorial ever !
Haha 😅
another interesting thing
console.log(function_name) print the whole function along with "comments" .
that's amazing
I've been working with Javascript for the last 10 years, but your videos have helped me understand what the hell is going on behind the scenes. You sir, have a gift of explaining!
Amazing Explanation! Can you make a similar series on react and node js ?
Great job Akshay! Giving back to the community is one of the best things to offer.
A quick suggestion.. you could also cover another scenario where name of variable and function is same. Eg:
var abc = 2;
function abc () {...}
abc();
Yeah, that's a nice corner case which could have been covered. 😅
No issues, I'll see if I can accommodate in some other video in series.
Thank you for your suggestion Nitin. 😇
It won't work right
It returns an error like abc is not function🤔
@@harikrishnang8181 what if we change the order?
Like-
Declare function
Declare variable
Call function
Looked at the title, I thought I knew it, till watching it. I realized how much I don't know.
Thank you very much for the quality content.
I really appreciate it!
Awesome, I am just speechless to know the actual concept behind hoisting, I always understood hoisting meaning and what it does but never knew how it actually happens. Thanks a lot
I have seen a lot of you tube videos for this and honestly no one has explained like you❤ ..it was a great great explanation...and now after learning from you I'm actually feeling like a pro😂😅
Just had one doubt
As we know var , let , const all are hoisted but let and const go yo temporal dead zone and we cannot access it until it is initialized.
Now just will give 3 examples
Eg 1
Let a = 0
Console.log(a)
Output = 0
Eg 2
Console.log(a)
Let a= 3:
Output : cannot access a before initialization.
Eg 3
Let a;
Console.log(a)
a=2;
Output : undefined
I understood 2nd but 3rd as during memory allocation phase a will be undefined and as its declare using let it will go to temporal dead zone and we cannot accept until it is assigned with value , so in this case how we are getting undefined.
Can you give clear idea on this
Just had one doubt
As we know var , let , const all are hoisted but let and const go yo temporal dead zone and we cannot access it until it is initialized.
Now just will give 3 examples
Eg 1
Let a = 0
Console.log(a)
Output = 0
Eg 2
Console.log(a)
Let a= 3:
Output : cannot access a before initialization.
Eg 3
Let a;
Console.log(a)
a=2;
Output : undefined
I understood 2nd but 3rd as during memory allocation phase a will be undefined and as its declare using let it will go to temporal dead zone and we cannot accept until it is assigned with value , so in this case how we are getting undefined.
Can you give clear idea on this
My whole life was a lie😂. Literally i used to say all variables move to top.
Interviewer also selected you for that answer 😁😁 his life is also lie till today pls send him Namaste JavaScript link 😁
@@sudarshankalebere5526 So true 😂😂😂😂😂😂😂😂😂
haha... I think this shouldn't be called as hoisting then. that word making us to think this way
@@sudarshankalebere5526 😂😂😂😂😂
Your videos really made me fall in love with JavaScript. These are world-class explanations!
The hype is worth it. This series is pure gold. 🔥 🔥🔥
when he is speaking I am literally nodding my head. :)
The explanation shows how deep your understanding of the language is. Great job!
P.S Using JS from 1.5 years as a Software Developer but didn't know about these things!!
i am using it for 7+ years, still had no idea till today :P
what sucks is we can use JS for years and not understand it at a deeper level. I feel that this playlist should be linked to all JS tutorials that only focus on syntax. I'm glad I found this playlist.
after 2 years of searching i finaaly understanding js thanks and why you are not famous is beyond me
So happy to watch this videos series about javascript in depth. Hoisting is very important I misunderstood it first as a mechanism to carry variables at the top of the file. But I got light on it chiefly on execution contexte as clearly explained before. Thanks
I hope my like gave you a HUGE motivation 😂😂😂
On a side note: Thanks Akshay, this series is a lifesaver.
Yes, it did. 😌
Just for a note: In JavaScript before execution of code, Execution Context is created which has 2 phases - 1st is Memory creation and 2nd one is Code execution. In the memory creation phase memory is allocated to all the variables, functions and class definitions. So we can use them even before they are declared. Variables are stored as undefined and function definition is stored as it is.
This Tutorial is a Great, I've never seen anyone explain javascript like you
Thank You Teacher
Namaste 🙏🏻 JavaScript
I'm absolutely pumped! Your teaching style is truly groundbreaking.
Will hoisting work with let and const?
`let` and `const` are treated differently than `var` and functions. They are not assigned `undefined` in the memory allocation phase. Instead they are `un initialised` and are stored in a separate space in the memory. I'll cover it in detail when I talk more about es6 concepts. `let` and `const` deserve a separate video altogether 👍
Thanks for your comment, Gowtham. I'll try to cover this soon. 😇
Please do! Can’t wait for it. This is literally the best hoisting explanation I’ve seen. Thanks
@@akshaymarch7 yes, i have the same question now clear...needed video's for this. Please explain..
when the ES6 concepts will start.... first videos this..one only i request.... not i , We Request :)
just "WOWWWW" is not enough. you changed my perspective of understanding programming.
Your passionate way of delivering the concept, Your smile, and Your enthusiasm kept me motivated throughout the lecture...
Whenever i ask others what is hoisting and many of them told hoisting is like pushing up or bubbling up the variable i used to feel meaningless but after watching this video i can confidently explain them this is how hoisting works.
Thank you for such a beautiful explaination😌.