How functions work in JS â€ïž & Variable Environment | Namaste JavaScript Ep. 4
VloĆŸit
- Äas pĆidĂĄn 30. 06. 2024
- Understand how Functions work behind the scenes in JavaScript.What happens when a function is executed/invoked inside the JS Engine. This video covers an in-depth analysis of function execution and its variable environments.
Whenever a function is invoked in JavaScript a functional Execution Context is created and memory is allocated. Once the memory is allocated to the variables and functions, then the code is executed synchronously, one line at a time. Let's check all that with examples in the video :
My tech gear I use every day - google.peek.link/2pba
Topics covered:
00:00 - Introduction - Function Invocation and Variable Environment in JS
02:43 - Deep Dive Explanation of the code of function Invocation
04:16 - How the Call stack works behind the scenes in JS
14:57 - Demo of Variable Environment and Call Stack in Browser
20:39 - Summary of JS fundamentals covered
21:08 - Teaser of next video - Shortest JavaScript Program
21:16 - 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: Shortest JavaScript Program & Global Execution Context đ„ - czcams.com/video/QCRpVw2KXf8/video.html
How was the video? Are you feeling excited? Please comment below. â€ïž
Hey Akshay, all your videos are really helpful. Can you explain how let and const work begin the scene ?
When everything executes and after that global execution and all memory which was allocated all this deleted then if we run this whole code again then new memory will be allocated to variables??
sir,how console.log() function execution context is invoked and kept in call stack?
@@ABHISHEKKUMAR-kp5qd which console.log you're referring to ? If it's from line no. 4: It stays in Global Execution context. when Execution Context of b() is finished and popped out of stack then Global exe. context resumes and then logs it to the console. Why this happens because JS is single threaded language and only 1 thing happens at a time in call stack. (If you're still confused, in stack last In first Out happens 1: GEC push , 2nd a() ec push : pop, 3rd b()ec push: pop, GEC pop)
@@SirLovePeach thanks man
If you teach anyone can learn coding. Youâre a gem to the community. Please teach reactjs next. Please! đđ»đŻ
We need react js
Yes bhai react also please
Yaa react js
yes plss akshay bhai
much needed, especially react Hooks
Summary:
1. We learnt how functions work in JS.
2. At first a global execution context is created, which consists of Memory and code and has 2 phases: Memory allocation phase and code execution phase.
3. In the first phase, the variables are assigned "undefined" while functions have their own code.
4. Whenever there is a function declaration in the code, a separate local execution context gets created having its own phases and is pushed into the call stack.
5. Once the function ends, the EC is removed from the call stack.
6. When the program ends, even the global EC is pulled out of the call stack.
I think in point 4 it should be rather on function invocation rather than function declaration a local EC is created and pushed to the call stack having its own local and global scope
i just cant remember what is ment by function are first class citizens ?
Thanks for providing summary . I am just starting JS
In first phase function variables point to what please explain i didn't get it and when functions are called what is stored inside variable a and variable b please reply
@@jigneshnayak7870 hey.. In first phrase
incase of variables it shows as UNDEFINED
And incase of Function.. new EC is formed .
After 5 years working with Javascript, im understanding the basics with the help fo you !
Same here
@@Varunkumarmca then how did you work 5 year
@@tusharsolanki8564 bruhhhhhhhhh
@@shivomsrivastava6540 he is explaing core of javascript, you dont need to learn a language if u just want to implement cuz with experience you memorise code
@@Gangbuster74 I completely agree
This guy is crazy about JS and a gem to the teaching fraternity .Explaining all the minute details with such high energy and enthusiasm.The hand gestures, the smile of satisfaction just proves his intentions of helping . #SharingisCaring
Yes he loves his job. Rare to see such kind of enthusiastic people.
Awesome man, I am stuck to my chair to complete this playlistđ„
Glad to know that you're enjoying it! â€ïž
yeah seriously, I am just fall in love with your way of teaching
@@yousufbabashaik3314 me too
I am going to be honest with you. You are literally so good at this. I get excited to watch your content after full time work. Please keep going.
So happy to know that. â€ïž
I spent months to get this insight! Such well crafted video every detail went straight into our heads! Thanku so much for your priceless efforts bhaiyađ§Ą
I teach high school students JavaScript programming and I love these videos. They are fantastic and really help my students understand how JS works so they can create quality code and increases their troubleshooting skills. Thank you!!
After school, this is the kind of teaching I was missing! Awesome presentation and explanation Akshay! The phobia of JS is reducing further after completing each video.
â€ïž
@@akshaymarch7 i am in love with his look and styleđ
Eagerly waiting to understand the ""THIS"" concept
I can write reasonably good JS code (I spend a lot of time with serverside stuff) but I have to admit, I never understood what was going on behind the scenes. Suddenly, tiny little bugs I used to experience are starting to make more sense. This playlist is extraordinary! Iâm binging the entire thing! Iâm so glad I can finally explain the local and global execution contexts! Onward đđđŻâ€ïžđđœâš
With this series of videos, I'm finally on the path of understanding JS once for all! Thanks a lot bro!
The only teacher where after the lecture we move happily to another video without having any doubts â€â€ kudos to you !!
loving your content !!
thank you for making JavaScript so easy for us!!đđ
You don't have to say keep watching it for 2more minutes or please bear with me. Viewers are totally glued to your series. It is that amazing. Thanks so much for these insights.
I've been fumbling around with learning Javascript for the last year, video after video of watching people build projects,and not learning a thing. You're videos are the first I have found that teach me all the things about JS that I have been wanting to learn, and missing with all the other peoples videos. Thank you so much for making me love learning this language again. I had nearly lost hope.
Brother....never stop creating such videos.....I am trying to learn JavaScript though some paid courses but they literally confused me and then I came across your videos I have to tell, you are a life saver, Please create more such videos or even a Js course. Will share this as much as I can
I'm having industrial experience of working with javascript based projects in NodeJS. But I'm here to sharpen my knowledge and get in-depth or actual working on the program.
Though I have working experience, I'm listening many new things in Namaste Javascript series.
I'm really enjoying your videos. Thank you! :)
These series teach me more about JS in an hour than I've learned in 8 hours copying and writing along other videos.
There is so much theory behind it, and it's all structured like the whole program is structured in JS.
If there is a "right way" to learn a language, this is the closest it can get.
7:30 in the morning and i have never been so excited to study something so complicated. Hands down , best explanation ever. Thank you so much Akshay. Appreciate your hard work.
â€ïž
We need teachers like you , who are passionate about teaching and make things understand easily
Great series, this is my first comment on video in past 5 years :) Love it
This is literally awesome, I started loving your videos. I haven't got such a nice explanation anywhere about Execution Context.
This playlist will be something different from usual javascript tutorials!!
Loved the way you explain it so simply â€ïž
I have my first FE interview in a week and I'm binge watching the entire channel! Loving the content. Hope it's enough :)
I just learned something which might be asked in the interview wo bhi itnaa asani se đđ Thank you bhaiya
Difficult to skip a single video or a single concept from your video. I am taking notes along watching it. All episodes have been very interesting so far and appear very connected to subsequent episodes. Thank You!
Man this is evergreen content u have created on JavaScript and it's 2022 u made me fall in love with js â€ïž
Excellent content đ.. Your contribution has saved lot of our time and possible confusion that used to happen while reading other online materials.. cheers and success & good luck be with you..â„ïžâ„ïžâ„ïžđȘ [Knowledge sharing or Vidya daan is one amongst the biggest offerings one could perform]
Love you, Scooby Man â€ïž
I have never come across such high-quality content on JS. Thanks for digging so deep.
Then you never used CZcams before? There are plenty of courses dude.
@@Utubewonderful please STOP spreading HATE.
@@Utubewonderful There weren't any 3 years back DUDE
No one on youtube explain this topic in such a clear way. Kudos to you my friend .
after watching this whole namaste javascript, interviews became so smooth specially knowing how js works in terms of js engine, eventloop, call stack. All thanks to your efforts of creating this beautiful playlist.
For revision:
1) The higher level of the GEC on the stack, higher its preference
2) GEC is created as the function is invoked and destroyed as its execution is completed
3) same variable names but different scope of execution separates the variable values
If I'm not wrong, instead of GEC, it will be local execution context of the function
the GEC term is used to simplify understanding the execution of main function, same execution context is created if function is created inside the global function, as its stack priority is high, given its preference and worked under the main (GEC) context same thing happens when you create function > inside a function > inside a function (consider it as staircase where upper step person is taller than person in lower step and hence it has given preference ) local execution context introduced when inner function is in execution
var x =7;
a();
b();
console.log(x);
function a() {
var x=10;
console.log(x);
}
function b(){
x=45;
console.log(x);
}
//mine returns 10 45 45 instead of 10 45 7 yet GEC in the last function is destroyed before going to the global var X initialised to 7
@@ropkb Because in func b() you haven't declare a new local variable. And you changed the value of global var x.
I wish you to come my college and teach to my faculties đđđ
You're explanation is perfect that's enough nothing to say
frankly speaking..
You are seriously killing it Bro. I mean the way you explain concepts is way awesome then so many tutorials, which in the name of JavaScript Engine just confuse as they themselves are confused.
this is by far the best explaination I have seen . i feel so happy that creators like you exist on youtube making content available for free .Thank you so much
I know this acts in 4 different ways like,
1. dynamically scoped inside a function
2. lexically scoped inside arrow functions
3. Defaults to global scope when used in an inner function
4 i dont remember will update once i remember,
But im very eagerly waiting for your take on 'this' keyword.
This is Also very interested topic I love it...Akshay's...you also consider please
Hi Akshay,
6:54 : After you mentioned var x will be created again in the function execution context I got little confused about var. Then I remember about closure which cleared that if the variable not found in the function scope of the function it will check to its parent scope.
Yes you are absolutely right!
Parent scope = global scope
The global execution context
your knowledge is exclusive...I can't imagine how much effort you had put in to learn all these and you are teaching all this in free
A good thing in your video is ....you never waste the time of your viewers ..hats of to you sir, superb explanation
Someone:exist
Akshay: Global Execution is created.
Things Learned:
1. We learnt how functions work in JS.
2. At first a global execution context is created, which consists of Memory and code and has 2 phases: Memory allocation phase and code execution phase.
3. In the first phase, the variables are assigned "undefined" while functions have their own code.
4. Whenever there is a function declaration in the code, a separate local execution context gets created having its own phases and is pushed into the call stack.
5. Once the function ends, the EC is removed from the call stack.
6. When the program ends, even the global EC is pulled out of the call stack.
Please Like & Comment If it is Helpfulđâ
So it can be Useful for Others Too
I have seen other tutorials, but nowhere the explanation is this clear. Loving JavaScript!
Never seen this kind of in-depth knowledge for free, you are just awesome
Sir i have WERID DOUBT! Consider this program:
a();
var x=2;
function a(){
console.log(x);
}
In the above program when we console.log x in function a() it should print undefined right because inside the function there is no variable x so it will look for the variable in the global execution context but still in the GEC it is undefined. Now the problem is when i run this code using Node it gives me undefined as expected BUT when i run the code in browser it gives me 2. How is this happening? Does JS behave differently when run on browser and when run using node??? Please clear my doubt sir Thank You !
Lovely doubt, Aayush and it shows how well you have seen the videos. â€ïž
The concept is covered in the Ep.7 i.e. The Scope Chain. You'll 100% get your answer after watching how Scope works.
Link to the video - czcams.com/video/uH-tVP8MUs8/video.html
But thank you so much for watching it patiently, shows your passion and dedication brother. đ„
@@akshaymarch7 Thank you sir it means a lot! :)
I think should print undefined
@@satyampatidar5848 yes in node it prints undefined but in browser in prints 2
If x is not available in current block of code than , JavaScript look for it on above that function and if JavaScript find that X than console log that X value
when he asked
x will have?
I shouted toxicity :|
đđđalways
This is undoubtedly the best Js series i have encountered so far
I feel I should have known about your channel much before. Your videos are as interesting and addictive as of any favourite tv series. This makes us fall in love with JS đ
I am on this series so far and there no dislike at all , in a single video, This is the way of teaching Thanks Man for this series . I am really enjoying .
I haven't seen this type of wonderful explanation,the joy of you while explaining is awesome.
Your eyes đ are clearly mentioning,how much you are happy to share your knowledgeđ.
Awsome brotherđ
I appreciate your hard work in explaining these key, fundamental javascript concepts. I am learning a lot from this series. Thanks a lot.
Hi Akshay, thanks alot. You made life easy especially for the ones like me who are coming from noncoding background. You have explained so beautifully covering every aspect in and out. All whys and whats are covered. The magic is like you are teaching in such a way that anyone can understand. Really head bow for the amazing talent and sharing your knowledge around the globe.
The way you teaching and giving back to the community is really unimaginable â€
This playlist is golden!! THANK YOU FOR ALL YOUR HARD WORK â„ïž
The way you cover every concept is just amazing and the simple language đ
Akshay, I'm honestly speaking you are explaining the concepts so well and I searched for a specific module in CZcams and I found you and I'm grateful to that. After completing the first video in Namaste Js, I felt like I subscribed to a right channel, right person and watching a right video.
You are doing an extreme work and I hope my comment will be boost you to do more videos.
The way you are teaching is just amazing. When watching this Video i was feeling like i am in the live class and when you forgot to add execution context in stack i was like sir sir you forgot to do that, please do it. Just amazing feeling to learn from you.
Way of your teaching is just great, indeed you are a very very good teacher, blessed to be your student, keep doing this great thing of teaching sir.
The best part: "Exact working of Call stack and that small SCOPE tab where GLOBAL & LOCAL scopes are created & destroyed". I would never come to know its working at this particular time otherwise. Thanks Akshay :)
So great content â€ïž, I executed the whole code with line by line visualization of execution context, memory part , execution thread part and callstack at very beginning of video just by using learning of previous videos of this series.
hats off to you man, you are great.
I am loving your videos...please teach us more...you are like such a great teacher...never understood JS so much and now after understanding things...falling in love with JS..come up with React,Redux and Node JS videos plzzzzzz
Great work Akshay, being a backend developer havent worked much with JS, but your tutorials are coming as great help now that I am brushing up the concepts. Kudos and Thanks!
The way you explain is so natural and common. It looks like my close friend is explaining to me. The best thing is the excitement on your face while teaching the interesting and important things. It's gold â€ïžâ€ïžđđ
I had to stop half way to drop a comment. I really like your method of teaching bro, you repeat and point out every little detail while teaching and that's what makes you so understandable. As requested by by most here, React JS PLEASEEEEEEEE!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
I now have understood how closure is handled by JavaScript and how the local execution scope has its pointer referenced to the outer lexical environment(In the video you mentioned function a's scope has the global scope attached it)Many many thanks.
I love how much positive energy you exhibit, such a great course, keep on keeping on doing you!!
Beautifully explained!đ„đ„ I'm hooked on to your Namaste JavaScript playlist! I was searching for a course that could teach me behind-the-scenes of JS and this seems to be more than perfect! Awaiting your ReactJS course (if it's inline anytime soon!)... Much love and respect from yet another JavaScript developer â€ïžâ€ïž
such simple and clear explanation.I think I will never forget these concepts.thank you so much !
Seriously never learnt javascript this way thank you very much feeling more confident now may god bless you and give you all the success đ
Oh boy ! Only best javascript playlist which can even crush all paid courses in one go ... in-depth explain, after completing all videos no interviewer can reject u ..... thank you for giving such detail course free of cost.
A person can reveal the level of his knowledge by the clarity and confidence in his words, you convey what you want to right to the point bro. Thanks for such no-shit content .
You are a genius in teaching, really am understanding the basics now after my 5years of experience in UI
Finally clear the concept how to debugging. I tried many time to by showing other video in youtube. Finally its worked.
A clear cut explanation on functions Akshay. The smile you give at the end is really motivating me to go and see the next session of videos.
Thank you so much. I really like the way you link it to the concepts explained in the previous video and continue the flow.
It's give me the actual knowledge of the javascript working.I am happy to see your videos.
I have seen plenty of videos on javascript but No one teaching like you in a fun way and step by step.looking for more videos.
Well, it took three of his videos to fall in love with JavaScript. Excellent content man. keep it up.
when you teaches then I think everyone is excited.
You love JavaScript man.
Thanks a ton.
your are such a great guy,your way of explanation makes the topics understand so easy.Thank u
Very clear and very easy to understand........too good ....gone through the lots of stuff but you are amazing
Thanks a Ton Akshay!!! I was always confused where Var scope starts & ends. Now I have good clarity.
Really due to this clarity & your series "Namaste Javascript", Javascript is looking really interesting to learn now. I was never interested in JS before, like I am right now after watching this amazing video.. Thanks a ton again!!!
You're awesome teacher Akshay. I'm not a big fun video guides preffering more text format, but you change my view. Thank you. For one hour i understand what is Call Stack, Execution Context, How JS Engine Works and what hoisting is. You are a gem. Please keep working on youtube! Subscribed
really loving this playlist making my concept clearer and how javascript works
What a way of teaching man!! đđ I learned everything in one gođ
Great job Akshay :)
Second video clears everything so brilliantly that others become easy.
I'M BACK, was cool to see how much i understood from the prev videos. thank sm
best video ever, when I found out when you return something to a function and function ends.
Oh my God, its midnight and i am so excited to watch all your videos now itself đ Best Explanation ever. Loving your style and end music also đ”
This playlist is pure gold for every web developer.
your way of explanation is just amazing...
You making me fall in love with Javascript.
Thank you brother
Your so much high patience level and great teaching attitude make you so much great. Thanks a lot...
It's such an amazing experience to learn with your videos sir.
Thanks for making things easy.
everything awsm... the way you explained by drawing things, by explaining on the browser. priceless effort.. thank you very much Akshay and grateful for this playlist .
finally clear this concept and I never forget this concept.
Wow this is superb explaining of code with line by line that how does the code work in the backend and I literally want to say that before watching this, I watched many tutorials of JS but in that these things were not included what u explained in your video which actually shows that how does the code work in the backend. â€đ Thanks for making such videos.
I was not a big fan of JS, but dude you just changed my mind! Exceptional work đđ»â€ïž
Made those deep concepts so much interesting and easily understandable đđ„đ„đđđ
You're the first youtuber in coding to whom i recommended to all of my co-worker and friends. Kudos to you bro.
â€ïž
I learned different here from other videos of JavaScript. Thanks giving such a different and deep knowledge.