Next Video: How functions work in JS? 🔥 - ruclips.net/video/gSDncyuGw0s/видео.html How was the video? Are you feeling excited? Please comment below. ❤️
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.
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
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.
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!
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.
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 😊
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
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.
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. 🙏🏼
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
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.
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.
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!!!
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.
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.
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.
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
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.
@@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
@@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.
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.
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 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!
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❤
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.
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😌.
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.
Bhai trust me , i don't want to share your lecture , Reason "Bhai gold hai hm devs ke liye and my selfish mind don't want to distribute it" . It was how i feel , but in real i share your videos. SO much clear and just wow. Brother Thanks.
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
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!
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!
Great explanation! I come from a Java background, and I'm currently learning JavaScript. In Java, memory is managed by the JVM, while in JavaScript, the execution context handles memory management. Your teaching helped me understand this concept completely. Thank you, sir.....😍
I am so happy I found you sir. Great teaching style. So simple. So effective. The way you don't just say something is the way it is, you back it up with the dev tools so anyone can see the truth of your words. Perfect.
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.
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 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 👌.
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❤️
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.
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.
It was Remarkable ,marvelous and so important concepts that you covered just in 20 minutes in very easy and clear and practical way . thank you so much for sharing your knowledge. Love❤ from Pakistan.
Interviewer: What is function? (Me after watching Namaste JavaScript series) Function are beautiful. Interviewer: Please escort this gentle man outside.
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
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!!
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.
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. 😇
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
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.
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.
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
`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. 😇
@@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 :)
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.
men this guy just explain sometime that takes some people years to final understand and so he teaches with a smile that gives confidence that he knows what he is really teaching which he of course does. Thanks a lot @Akshay
I am suggesting this channel to my professor , so that they will be able to learn how to teach coding. mind blowing with real time execution example a big thanks to akshay sir
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!
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 ❤
Akshay bhai, you did a fantastic job by explaining this, this was insanely helpful, being a 5 year experienced Javascript react front end developer, I dint know any of this clearly, thank you so much for the very expensive knowledge shared for free,
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!
After over a year of trying to understand "WHY does JS behave this way" and joining people in pelting stones at JS (figuratively) because it's stupid, today I realized that I am the idiot. Akshay, amazing content. You're a legend. Bade shabd (context, call stack, hoisting) toh kayi log bolte hain but unka matlab nahin batate. Aapne aag hi laga di is explanation se.
Next Video: How functions work in JS? 🔥 - ruclips.net/video/gSDncyuGw0s/видео.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
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
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
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!
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
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
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 :)
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 😊
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
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.
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. 🙏🏼
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??
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.
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;
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.
The way he explains things shows how much he loves JavaScript and teaching JS.. just awesome...🔥🔥🔥🔥🔥🔥
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!!!
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.
This is probably the most important video for someone who is coding with JS and not just beginners!
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.
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.
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 :)
Started feeling really confident about hoisting. Man it used to confuse me a lot. But watching every video in line made me clear.
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.
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
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.
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 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!
You explained hoisting so clearly that i can explain it to anybody even in my dreams. Thanks for the great explaination🔥🔥🔥
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❤
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.
❤️
Legends binge-watching this series!! Akshay bhai OP 🦁
The enthusiasm that you brings with each video is just awesome, it doesn't let us feel bored.
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😌.
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.
First time i have seen someone going so deep theoretically as well as showing it practically in JS.
It clears all my doubts ❤️❤️👏👏
Awesome explanation, Never thought some one can explain JS in this way and it can actually make sense 😅. Bonus is your smile ❤.
14:15
Akshay: Just give me two more minutes.
Me: YES.
Thank you for your time, brother. ❤️
The best code flow explanation I have ever come across all these years.😍😍
Bhai trust me , i don't want to share your lecture , Reason "Bhai gold hai hm devs ke liye and my selfish mind don't want to distribute it" . It was how i feel , but in real i share your videos. SO much clear and just wow. Brother Thanks.
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!
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!
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!!
Great explanation! I come from a Java background, and I'm currently learning JavaScript. In Java, memory is managed by the JVM, while in JavaScript, the execution context handles memory management. Your teaching helped me understand this concept completely. Thank you, sir.....😍
I am so happy I found you sir. Great teaching style. So simple. So effective. The way you don't just say something is the way it is, you back it up with the dev tools so anyone can see the truth of your words. Perfect.
Each video makes me more excited to learn more about JS. What a great series!
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.
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 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 👌.
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❤️
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.
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..:)
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
It was Remarkable ,marvelous and so important concepts that you covered just in 20 minutes in very easy and clear and practical way .
thank you so much for sharing your knowledge.
Love❤ from Pakistan.
One of the best js series I've ever found on the internet.
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.
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
Holy shit. You explain things so well. Like literally the best hoisting explanation I’ve seen so far. Impressive. Please make more videos.
The way you teach is just amazing, kitna bhi thankyou karo uske liye kum hai. The way you showed the call stack demo I just loved it.
gone though many javascript courses, videos, lectures, but unsatisfied with their explainations finally found the best chanel for learning javascript
Loving the series, and loving the love and excitement that you have for javascript😂
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.
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🤔
@@harikrishnang33 what if we change the order?
Like-
Declare function
Declare variable
Call function
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
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.
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.
the laugh between the explaination is amazing
Great explaination for hoisting, also loved the demo of call stack :-)
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
Thanks for your help without getting back anything
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 😂😂😂😂😂
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 :)
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.
You've changed my way of thinking in Javascript.Thank you so much❤️
just "WOWWWW" is not enough. you changed my perspective of understanding programming.
What an incredible teacher you are. I don't think anyone can explain these concepts of js as you do
men this guy just explain sometime that takes some people years to final understand and so he teaches with a smile that gives confidence that he knows what he is really teaching which he of course does. Thanks a lot @Akshay
It really given a clear picture on the concept, no one till now has explained so well... amazing content
I am suggesting this channel to my professor , so that they will be able to learn how to teach coding.
mind blowing with real time execution example a big thanks to akshay sir
Why are u telling a lie bhgwan s dar bhai 😂
This Tutorial is a Great, I've never seen anyone explain javascript like you
Thank You Teacher
Namaste 🙏🏻 JavaScript
This video is the practical of the previous ep; it clears the concept perfectly. Thanks
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!
i love how passionately you speak of javaScript.... love it
I love the enthusiasm and clarity by which you approach these topics that can be dry otherwise.
OMG, the way you broke down how functions work made it SO easy to grasp! 🛠 Can't wait to practice writing both variables & functions ➡ ( #NamasteJS 🎯)
another interesting thing
console.log(function_name) print the whole function along with "comments" .
that's amazing
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 ❤
The best teacher I've come across that explains JS so simply - thank you brother!
after 2 years of searching i finaaly understanding js thanks and why you are not famous is beyond me
You are great teacher. Best teacher I have seen till now.
Akshay bhai, you did a fantastic job by explaining this, this was insanely helpful, being a 5 year experienced Javascript react front end developer, I dint know any of this clearly, thank you so much for the very expensive knowledge shared for free,
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!
Finally someone who explains, how js is executed instead of how to write code.
love how you are very enthusiastic about teaching JavaScript
Best tutorial video...premium course pe bhi aise nahi shikhata..love you dada...you are best
Isse jyada tagda content nahi dekha .... Really in love with javascript
After over a year of trying to understand "WHY does JS behave this way" and joining people in pelting stones at JS (figuratively) because it's stupid, today I realized that I am the idiot.
Akshay, amazing content. You're a legend. Bade shabd (context, call stack, hoisting) toh kayi log bolte hain but unka matlab nahin batate. Aapne aag hi laga di is explanation se.
Best teacher ever.....the efforts you put in just to make the things understandable to us in depth, is appreciable 😊
"Next time in interview, don't say it moves that code to top of the file" Caught me off-guard, What a gem of a video, Thanks!