Day 1: How Javascript Works?
3 min readMay 29, 2021
Let’s start with core, and ask yourself how Javascript Works?
Everything in Javascript happens inside an Execution Context.🤨 Okay, I got this but now what is this Execution Context?
Execution Context is like a box 📦, which has two components in it.Memory Component and Code Component.Memory Component:
- This is the place where all the functions and variables are stored in key value pair.
- It is also known as Variable Environment.Code Component:
- This is the place where code is executed one line at a time.
- It is also known as Thread of Execution.
Wait, one line at a time?
Yes, Javascript is a synchronous single-threaded language.😮 Okay, I see but 🤔 how asynchronous works in javascript then?
TBH, I don't know 🙃, Let's tackle this question later.Okay, fair enough.. It’s just day one.
You said everything in javascript happens inside an execution context but how it is executed inside this box like thing? I want to know how javascript works?
Okay, It happens in two phases actually.First one is Memory Creation Phase. It's kind of a critical phase and the second one is Code Execution Phase.
🤔 What happens in first phase?
In Memory Creation Phase, Javascript will allocate memory space to all the variables and functions within the program.Do you know how much memory space is allocated or reserved?
At this point Javascript doesn't know how much memory space is needed for variable so it allocates special value called as undefined for the variable and literarily stores function code for the functions.
In above image debugger breakpoint is added on first line, So in Global Execution Context you can see both memory creation phase values.which is x is undefined and y has function code.
undefined is value? I thought it was an error 😂😂 .
okay, what happens next?
( Don’t think about line numbers too much, It’s not important ATM )Next phase is Code Execution Phase, In this phase code is literarily executed one line at a time.
- So line 5 will be executed and value of x will be replaced to 10 from undefined in Memory Component.- and then from line 4 to 2 there is nothing to be executed so it is skipped.- and then comes the interesting part on line number 1.- function y is invoked, function invocation happens when we call function with rounded brackets like in line number 1.- Execution control moves to line 4, now this is a function. for each function Javascript creates a separate Execution Context (that same box which we talked about just before), notice Global Execution Context and this Execution Context is different.- Line 3 is executed. It logs "I am inside function y" in console. now inside this function there is nothing to execute after console.log(), so Execution Context of this function is deleted.- Execution Control moves to line 6 and there is nothing to be executed now, so Global Execution Context is also deleted.
Aha! I understood, how Javascript works now 😄. Let me try it on my machine.
Bye Bye !! See you tomorrow with another Javascript question.Hey! wait from where you got all this information?
Sources:https://www.youtube.com/watch?v=ZvbzSrg0afE&list=PLlasXeu85E9cQ32gLCvAvr9vNaUccPVNP&index=2https://www.youtube.com/watch?v=iLWTnMzWtj4&list=PLlasXeu85E9cQ32gLCvAvr9vNaUccPVNP&index=3See you tomorrow 👋
👋
Hey, don't forget to join me on Twitter, LinkedIn and Github.I share lot of cool tips and tricks regarding PHP, Laravel, Javascript, Vuejs, Nuxtjs, Reactjs, databases, workflows, productivity etc etc. https://twitter.com/rckstrbhushanhttps://www.linkedin.com/in/rckstrbhushanhttps://github.com/bhushanTake care and stay safe. Cheers 🥂
