How JavaScript Works
Understanding the fundamentals is Priceless.
Understanding How JavaScript works makes reading and writing code easier and allows you to focus more on logic rather than worrying about the syntax of the language more importantly it will help you understand core concepts.
How Does it Work.
Computers doesn’t understand JavaScript , browsers do.
Beside handling network requests, listening to mouse clicks, and interpreting HTML and CSS on the screen, the browsers have build in JavaScript engine.
The JavaScript engine is a program ,which transforms all the code into something which the computer can understand and execute —
This happens Synchronously, meaning one line at a time and in order ,Hence JavaScript is Synchronous, Single-Threaded language. But you might have heard about AJAX where A stands for Asynchronous, that’s an other topic to discuss.
V8 is a JavaScript engine, which is developed by google and open-sourced in 2008.
Execution Context
Everything in JavaScript happens inside an Execution context. It is defined as the environment in which code is executed. It is divided into two components Variable Environment (memory) and Thread of Execution (code).The memory component all the variables and functions are stored in key : value pair. Code component is the place where code is executed one line at a time.
It is of two types:
1.Global Execution Context (GEC) :
This is the default execution context in which the JS code executes in the browser. All of the global code i.e. which is not inside any function. It is basically whatever code you write outside the function.
2.Function Execution Context (FEC) :
Function Execution context is defined as context created by JS engine whenever it finds any function call. Each function has it’s own execution context. It can be more than one, if JS engine finds a function call , it creates a new execution context for that function
In JavaScript There are 2 Phases:
1. Creation Phase :
In this (first step) creation phase the variables get special value Undefined assigned to them in the code, regardless of what is assigned to them in the code.
2. Execution Phase :
In this (second step) the are assigned the actual value, and this happens when it reaches the assignment line
If you understand this phases how they work, then it will be easy for you to understand the concept Hoisting.
Call Stack :
Maintains the order of execution in the execution context, where all the global execution context are kept and it is pushed into the stack.
Now, when a function is invoked an execution context is created and it is pushed into the stack, after the function is executed it is popped off from the stack. After that Global execution context is executed and it is also popped off from the stack.
I hope you you have got a basic understanding of the concepts, there are a lot more topics to cover like Closures, Hoisting, Promises, this, scope and scope chain, Temporal dead zone and many more..