Javascript Notes, Part-01 - Principles of JS

There are five big areas of JS which are foundational pieces to understand JavaScript in-depth:

1. Principles of JavaScript
2. Callbacks & Higher-order functions
3. Closures
4. Asynchronous JavaScript & the event loop
5. Classes & Prototypes (OOP)

In this blog let's talk about Principles of JavaScript. These principles are basic building blocks that you need to remember all the time. These will be foundations for understanding complex concepts later and will also help you in effective technical communication.

Principles of JavaScript

Thread of Execution

• JS is a single-threaded programming language hence only one thread handles the code execution, therefore the code is executed line by line known as the thread of execution(TOE).
• Right now with one thread and without complex code, JS has a synchronous programming style.

Execution Context

• Then there is something called execution context(EC) which is an abstract concept that holds information about the environment within which the current code is being executed. Some notes on EC
• easy definition: In the execution context, we go and compartmentalize any data we're storing while we're inside that function
• There are two main components in EC, they are
  • A Thread of Execution(TOE)
  • Memory (A new memory store for each EC)
• Global EC is created before any code is executed.
• A new function always creates a new EC.
• With a new EC, a TOE is now in that function and also a new local memory store(where all data related to function are stored) is created for each new function.
• When TOE completes in function, it is cleared from memory except for a returned value from the function.
• There is always one TOE alive until the program is exited.
• JavaScript keeps track of the function which it is currently running by using a call stack.
• TOE is always in the function which is on top of the stack.
• There is always a global context on the call stack.

Functions and call stack

• JavaScript keeps track of what function is currently running using a call stack.
• In JS code, i.e in JS engine, a new function means a new execution context is created and when we call that that function using parenthesis '()' we push that function onto the call stack then our TOE runs the code in the topmost function of the call stack.
• When finished running the function we remove it from the call stack and TOE is also returned to the parent function.
• As call stack is a stack we have the functionality of LIFO(Last In First Out), we execute functions which are most recent.
• Therefore there is a chance of code getting blocked for a longer period of time in the parent function(a function calling another function) when the child function(a function which is being called) takes longer time to be executed and return the TOE to the parent function.