How does javascript execute code + call stack | chai aur
HTML-код
- Опубликовано: 22 авг 2024
- Visit chaicode.com for all related materials, community help, source code etc.
#javascript #hindi
Sara code yaha milta h
github.com/hit...
Discord pe yaha paaye jaate h:
hitesh.ai/discord
Instagram pe yaha paaye jaate h:
/ hiteshchoudharyofficial
1.JS creates Global excution context
2.Next it creates memory phase
3.Memory phase - In this phase,the variables are set to undefined
until the execution phase(next phase) and the functions are set to their definitions.
4.Next it creates the execution phase
5.Execution phase - In this phase,the variables are initialsed to given values and
when the function s are called,it creates a memory phase and execution phase for the function
just like the main one.
For live demo:
browser > inspect > Sources
create a snippet with few functions and visually experience the call stack.
correct me if there are any mistakes or add to this if something is missing.
Returned value is passed to the global environment
Execution context gets deleted as well
If you can elaborate a little more on the demo part, like how to do things over there on browser, anyways u've done a good job 👍my friend
Understand call stack with the help of live demo :
browser > inspect > Sources
1.then create a snippet by clicking on the arrow(>>) next to workspace
2.then write down some functions in the created snippet ,do save them by ctrl+S
3.Create breakpoints and run the code and keep eye on call stack to visualize how it works.
correct me if there are any mistakes or add to this if something is missing.
I am having two years experience as a front-end developer but the things cleared here that was no one explain. Even not talked about, so thanks a lot for your way of teaching. 👏👏
Hello,
I know HTML CSS JavaScript and python can I get a job?
@@parimalgurjar9553 yes u can just make a good resume, make good projects and highlight them in your resume and add your skills and projects on the top of every section.
@@parimalgurjar9553 no you cannot
u have 2 years of experience and u don't know the basics concepts .😂
@@tarunpanwar6983 beta tum nhi samjhoge...
That what making this tut standout from other because you're advance concepts in basic and covering all complex concepts in early stage..keep going
Bne rhiye, web development me expert kr denge
Thank you so much for this clear explanation @chaiaurcode hitesh sir.
Outsdanding....
Bas Aapka hi intezar tha sir
🔵The working of the JavaScript works on three phases:
1. Global Execution Context
2. Memory phase / Creation phase
3. Execution phase
🔵Phase 1: Global Execution Context
The value of `this` keyword is set to Global Execution Context (which is an empty Object in NODE environment, & window object in browser environment)
🔵Phase 2: Memory phase
During this phase, JS engine scans the code and assigns the initial values for the variables , functions, etc.. For variables they are 'undefined' and for functions they are set to their function definition
🔵Phase 3: Execution phase
After the creation phase completed, the execution phase begins where actual values of the variables are set. And when the functions are called it creates a new 'Function Execution' context which consists of two phases (they works same as explained above but only for the particular function scope):
1. Memory phase
2. Execution phase
📝The return value of the 'Function Execution' context is passed to the Global Execution Context
Amazing videos Hitesh Sir,
Learning a lot..!!
🔴Correct me if something I explained is Wrong
ap na corse complete kar lia ha?
Honestly, no one has every explained like this before. u really deserve appreciation....
Seen first time how program runs in memory!
Thnx Hitesh ji!
I was waiting for this to understand since 2011...!
Huge respect to you sir for making this
series of java script
🙏🙏🙏🙏🙏
Ek saal se jyada hone ke baad iss video ko dekh raha hu. Pr quality last year se abhi tak mei kahin nahi mili aisi. Isse clearly pata chalta hai ki @chaiaurcode kaafi teachers se 1 saal pehle hi itna cover karke bethe the. Thanks for the work sir. We'll appriciate your work and yes, things will come up. Let's see
Sir this video was much needed. Coding toh theek hai practice se aa jaati hai lekin yeh in depth baatein aage interviews mein kaafi acha impression bana ti hai.
This is a good and in depth video
brilliant video, no one explains such complex topics with such ease, LEGENDARY
very good understanding 💯 with chai aur code thank thanks mr. hitesh choudhary sir ..........
There are three types of execution contexts in JavaScript:
Global execution context: This is the default execution context that is created when the code is executed in a global scope.
Function execution context: This is the execution context that is created when a function is called.
Eval execution context: This is the execution context that is created when the eval() function is called
Amazing video i never seen a educator who teach and talked about any language & in its components in this depth....
Thanku for this and please post more videos like this ...
Clear explanations. ❤From Sri Lanka
hatsoff to you.... I landed to watch your react video , but in react video you said, dont watch it if you dont know javascript.... That was turning point for , coz I never heard a youtuber says, dont watch this if you you dont know that first....
In fact I bought a code on udemy for react , but couldn't complete as the person used all advance concept of JS, but in the begining he said , you can learn react even ifyou are naive to JS...Believe me I couldn't complete... its still there... BIG SALUTE TO YOUR TEACHING STYLE.... WORLD IS RUNNING COZ OF GIVERS LIKE YOU :)
Very depth explanation after 4 years of working today I understand how JavaScript exactly works... Thanks Hitesh sir...i have seen many other videos but not understood
Honestly, no one has explain like this. u really deserve appreciation....👍👍👍
my life is sorted now 😴 , Thank you so much sir for this amazing video , Love from Rajasthan ❤
Thank you so much for such clear explaination of Global context execution,functional context execution and call stack. This video is very helpful.
Glad it was helpful!
Even if this series is one year old, I'm watching it and loving it thank u so much love from BD man!
This free video is more effective and full of real content than paid courses. Really doing the great job with the content and the selection of important topics.
Kafi detailed main sikha sir mja aa gya
Global Execution Context contains two phases 1. memory component 2. code execution component --- In memory component memory is reserved for variables(initially assinged with undefined) and functions(assigned with defination) whereas in code execution component all assignment of variables, calculations etc. are performed.
Sir kitna acche se samjhaya aapne , aapka samjahane ka tarika bhot accha hai Thank You
🙂🙃
IMP DOUBT:
I think variable declared with "let" should be replaced by "var", because on adding breakpoints and running on browser, var is giving "undefined (that is in Global scope)" and let is giving "value unavailable (that is in Script scope)".
Reason behind this is "var" can be accessed before its execution and gives value as "undefiend", whereas "let" and "const" gives error that "they cannot be accessed before initialization"".
REASON: Because of Temporal Dead Zone.
I also have the same doubt.
Very nice and more informative video for me I never listen about that in my 4 year graduation
Sir I am very thank full to you
You always be happy
This chai is getting mysterious day by day😹
Kya baat hai hitesh sir ❤ , kitna depth ma explain kiya hai ...
Aage bhi aise depth mai concept karte rehna ...
Thank you 🙌 sir...
Ye concept maine kahin padha nahi tha. Main ek Google Apps Script ke andar ek project bana raha tha to wahan debugging karte time se notice kiya tha. Abhi aur bhi clear ho gaya.
Thanks a lot Hitesh sir. Aise execution aapne samjhaya, I believe no one can. But after watching your video, I can explain it to others. You are right, teaching is an art. :)
This is the best detailed video in all of youTube , Keep up the Good Work!
You are a great teacher , Thanks!
This is really an amazing video on javascript. This detailed explanation deserves a ❤. thanks Hitesh sir for bringing this js series to the next level really loving this ❤❤❤
Thanks 😊
"This video clearly explains JavaScript code execution and call stack concepts. Informative!"
I knew about this but in bits & pieces, thank you so much sir, now I got to understand it completely
sir aap jaise Guru ji ho to Career Set hai.
Maine last Year WS CUBETECH SE MERN STACK ka Course RS.40000 me kiya tha but itna depth me nhi padha. sirf basic hi padhaya gaya tha jis se mujhe kabhi laga hi nhi ki mujhe JS ati hai .
aab confidence aa rha hai .
Hitesh Sir, honestly i fell very lucky to found this channel. I was struggling to learn JS basics + Depth. But here, Found the exact content i was looking for. You made learning JS a fun activity. Would definately like to proceed further with all your publised content, after JS completion.
Also, i shared on linked. Because:
const Motivation = "zaruri h apke liye bhi" 😁
Now the execution of the JavaScript code is cleared. Thanks hitesh sir for making top quality content❤❤
puri kahani clear ho gai JavaScript ke 😄
Bs iske baad sab speed me ho jayega
@@chaiaurcode super pumped up😁
One of the best js video where you'll now never forget how the JS Execution Context Work. One of the best JS Series.
I'll highly recommend who's complete beginner.
kaash ye video mujhe pehle hi mila tho muje javascript samjneme uthna mushkil nehi hothi(abhee bhee mai Js padaikar raheehuu chai aur code ki jacascript dhekne ko shuru kiya )... Sir esee tharah information vale video bhejthe rahihe .... dhil se bhoth hi Shukriya (from kerala)
whenever i see sir's video notification it makes me feel so good. Even though I know the basics but still i watch it because itna deep teaching koi nai karta.. thanks
Amazing video which is explaining the true meaning of javascript and more important thing in every language is that how to execute the code
Sir literally kahi aisi series ni dekhi
For the first time, I saw such a deep JavaScript memory allocation video on RUclips. ..Thank you very much Sir
Never seen such detailed video on execution context... hats off
Literaaly Sir not even in the paid course. This kind of indepth content. We will not get. Thank you so much sir.
At 15:30 we created Memory Phase and Execution Context for addNum Function
In its memory phase we have val1 and val2 but in execution phase we are assigning value to num1 and num2.
How we are assigning if memory is not allocated to num1 and num2? or it should be num1 and num2 in memory phase
same query,someone please reply!!!
Here we see how code execute in js.
how call Stack work inside memory ?
First we see execution context
Second we see call stack(means how fuction goes inside memory and how function exit from that memory ) We see all it in browser Environment.
Execution Context means how js run and execute the file you made.
js run your program in two phase
If you create js code file , the 1st thing that is created is global EC .
and this global EC refrence is kept inside this . Or Browser ,or diifferent different js environment EC are different . In browser EC this(keyword) contains window object.
Types of EC
1 Global EC
2 Function/Functional EC
or
3 Eval EC (It is property of global object So we say it Global EC )
-> How does js code executed ?
js code run in two phases.
1> Memory Creation phase / Memory Phase
2> Exececution phase
->Here we see Execution phase in detail
Steps Involved:
1> Firstly Global EC are created and stored in this(keyword)
2> Memory Phase - All variables are collected and memory allocated to it.
initially all variables assign with undefined.
and all function assign with its defination.
this step is called first cycle.
3> Execution Phase
variables are assign with its values.
function creats it own New Execution context
(And this context contain variable environment and execution thread that perform all execution )
And inside that Memory creation phase and Execution phase take place for function .
Now function return return-back value to Global/Parent Execution Context.
And the Fuction Exection context after returning values to parent get deleted/vanishes.
function new-Execution context created as many time time as it encounter new function in program.
->Now we explore call Stack.
It is like stack .
First at first at the bottom there is Global EC and further the function EC context are coming as they need to execute and after executing its EC it exit from the stack.
Here Function EC come in LIFO fashion(Last in First Out) in call Stack
Thank You Hitesh Sir , For this amazing Content , Love the way you teaching .
If anyone watching this video lecture even after 5 years from now and reading small amount of official documentation like mdn they got every concept clearly.
Thank you sir, this is what every javascript course lack. I really enjoyed the video.
Hats-Off for your dedication Sir, You are teaching like a maestro! Thank you and continue the same sir.
amazing explanation liked it alot but please please make this kind of videos more frequently
It's amazing explanation on RUclips.. I can't believe this type of content gives you free.. thankyou hitesh sir..
Mind blowing video. I've read the docs on CallStack several times but never had I have this level of clarity.
Simply AMAZING Hitesh ji
➡Creation of the Global Execution Context:
When a JavaScript program starts running, it creates the global execution context. This context consists of two phases: the memory phase and the execution phase.
➡Memory Phase:
During the creation phase, the JavaScript engine sets up the global object (which is the window object in a browser environment), the 'this' keyword, and the outer environment reference.
It also scans through the code and sets up memory space for variables and functions through a process called "hoisting." Variables are set to undefined, and functions are stored in their entirety.
➡Execution Phase:
After the creation phase, the execution phase begins. This is where the actual code is executed line by line.
➡Function Execution:
When a function is called, a new execution context is created for that function. This includes its own memory space for variables and parameters.
The function goes through its own creation and execution phases.
After the function finishes executing, its execution context is popped off the call stack.
➡Call Stack:
The call stack is a data structure that keeps track of the execution context of the program. It follows the Last In, First Out (LIFO) principle.
As functions are called, their execution contexts are added to the top of the call stack.
When a function completes its execution, its context is removed from the top of the call stack.
➡Global Execution Completion:
Once the global execution context completes, the program finishes its execution.
📝Note: the returned value being passed to the global environment, it's more accurate to say that the returned value is passed to the calling context. If a function is called within another function, the returned value is typically used in the context of the calling function.
Great video Hitesh sir.
correct me if something wrong in above text.
sir video me mera yahi doubt reh gya tha functional execution bataye toh par kya hota hai kab use hota hai pta nhi
Really awesome Explanation sir 👍👍
sir kuch dino baad ye chaneel , most subsribed in (it) channel hone wala hai ......diamond ho sir aap .
Aap subscribers ka prabandh kro, hum back to back projects n new tech laate h.
Deal rhi ❤️
I would say
Best teacher on RUclips
thanks a lot sir
thanks a lot sir maja a jata hai apse padne mai m 25 mi ki vdo m jra bhi bore ni hua our ye mene kuch naya seekha hai
#thank_you
"This course is absolutely awesome! The content is top-notch, presented in a way that's both engaging and easy to understand. Kudos to the creator for breaking down complex concepts so simply. Truly a gem for anyone looking to grasp the topic effortlessly!"
React bi start kar le chai k sath please
Ye badiya tha - EC likh deta hu warna bhaut Sara likhna padega😂 btw love the way you teach ....❤️
Great Video. Swaad aa gya chai ka video dekhte dekhte!
That what making this tut standout from other because you're advance concepts in basic and covering all complex concepts in early stage.
everyday when i watched tutorials and the i watching new comments it's giving me a motivation that i am not only one that are learning thank you everyone and hitesh sir
☕️❤️❤️
I know some people don't understand what sir is explain.... he is not tell how it is connected.... suddenly execution context and suddenly call stack how it came... many people have this doubt..... I already know this concept so i know what he is explaining..... if you are not understanding then i recommend you to ones go through the namaste javascript Playlist.... maybe in first time you won't get the concept ... then watch it 2 to 3 times you will definitely get it....
Nice Explanation, One the Sweetest Teacher in the World. ❤❤
Such an epic level of crsytal clear explanation and to the point . This channel is one stop solution for JAVASCRiPT MASTERY !!
After watch this video my all doubt are clear in call stack.
So great explanation and love your explanation style
i just love how in each and evry video he expects ki maine already subcribe karr rakha hai. Sir trust me nahi kiya maine abhi takk. aadhi playlist khatam ho chuki hai abb kafi guilt mujhe bhi ho raha hai magar firr bhi nahi karunga puri playlist khatam karunga and then ek nahii apne 10 accounts use karke saare se subs karungaa....
Sir apko jitna thank u bole utna kam h 😊thank u so much sir 🙏
Great teaching style and doesn't feel any boredom watching this
Thanks 😊☕️
I am watching this lecture second time and everything is crystal clear
Context are of type :
Global Execution Context
Function Execution Context
Eval Execution Context
Javascript code is run in two phases :
Memory creation phase (or called creation phase) : in this phase only memory is allocated to the variables functions
Execution phase : Code is executed in this ohase
For every time the code is execute, a context is created, which consist of :
New Variable Enviorment
Execution Thread
It returns the variable to the parent context, ie. global execution context, and then it is delete to free up the memory
** Plz correct if I missed anything **
ap na corse complete kar lia ha?
I was expecting the indepth content, but This is far beyond my expectation, thanks
Hey Programmers!!
if you are not able to understand this concept then don't worry, it is very ease
for understanding this you should have knowledge of DS,
I am CS student, when I learn DS for my unvirility exam that time I was thinking why I learn this , but now I understand importance of DS,
in this video Hitesh Sir talking about Stack Data structure, if you want to learn this in very ease way then I prefer "Jenny's Lectures CS IT", check their DS playlist ,
in market their are many DS course but I learn form them and I understood most of all concept.
Good Luck👍
very amazing video. I should have discovered this channel before my exams....
Welcome!😊
Thank you so much for the great indepth explanation! It was an excellent explanation!
Glad it was helpful!😊☕️
I never watched this type of deep knowledge video in RUclips. Thank you sir ❤❤
nice explaination totally understood behind the scenes of javascript
Sir Apki motivation bni rehni chhiye 🔥you are changing lives over here 🔥
Really hats off for u sir for such a great explanation ...
Thanks a lot for these awesome lectures ..
The way you teach is just wow ..
Love u 3000
i have come across alot of youtube channels but the way this guy is teaching us Hats Off for you sir love fom pakistan❤
Though i have seen your videos from your main channel completely but jo maja yaha aata hai sikhne me wo waha nai😅
You are a genious teacher , Majak majak pe stack bhi para diya
Hanjiiii.... aise hi samajh aata hai
aise hi samjhaiye❤
I cant thank you enough for giving us free Top Notch quality content for free Thank you so much, sir. Forever Grateful
This is very amazing in depth explanation on global execution. and needing this kind of video for every topics in depth
Hi.
sir,
the way you teach , and elaborate things is awesome,
god bless you.
from pakistan..
i'm frontend and backend developer , working on js and jquery from last 2-3 year i just seen your react videos which is very intertesting so i want to see to js playlist , but the concept i see , i was not learned in my whole career because in the playlist you execute the code in every senrio ether its a error or not . I loved it so much and it clear many concept truly appricated. I shared your channel to my collegue and my known IT student as well
Love you sir no one like you ... late se mile ho aap sir but mile toh shi ❤❤❤
very important information , jo bohot logo ko pata hi nahi hoti,
par aaj samj aa gaya
Thankyou hitesh sir for doing thing much effort for us. Love from ghaziabad❤
That's great! Everything is explained like bread and butter. Btw watching from Bangladesh. Best of luck brother.
ty bhai ,your baap of all coding gurus
Thank you sir for the detailed explanation. I have watched many videos but never seen such method of explanation and offcourse no one teaches such type of content. So, I appreciate you sir. And I hope your channel grow more and more as you make your videos with this type of detailed information. I really like it a lot. I am looking forward to learn with you. Thank you.
Thank you so much sir ji 😊😊 Pure RUclips pe sabse best series hai JS ka😇😇
Summary
1. Whenever any JavaScript code is executed an execution context is created and it is the Global Execution Context.
2. An Execution Context is basically a box which has two components called Memory Component(Variable Environment) and Code Component(Thread Of Execution).
3. The Execution context is created in two phases :
a. Memory Creation Phase : In this Phase, Memory is allocated to all the variables and functions which are present in the global scope. Special keyword Undefined in case of variables and literally the whole function in case of functions.
b. Code Execution Phase : In this Phase, code is executed line by line.
4. Whenever there is a function invocation an all new execution context is created and same process is followed again.
5. If there is any function parameter then it is also allocated memory while creating the execution context of the function.
6. Whenever return keyword is encountered , it means the task of function is over and it returns back the control of the program back to the place where it was invoked. and with this this execution context is deleted from stack.
7. Call Stack is basically a stack which maintains the order of execution of execution context. Whenever a code is executed the Global Execution Context is pushed into the stack first and later on as per the function invocation the execution context is pushed into the stack. When the function code is done executing the execution context is popped out and last the Global Execution Context s also deleted.It uses lifo method.ie last in first out.
your all videos are highly appreciated.... thank you, sir👋👌👍...
You are most welcome🤗☕️
video explanation is very good sir concept is all clear in callstack . Thank You So much sir
literally I'm enjoying doing code, with your playlist. Thank you so much, much love from jaipur
seriously , it's a top-notch content ......