JavaScript - How JS Works Behind the Scenes

Last Updated on: August 30, 2021 pm

How JS Works Behind the Scenes

A High Level Overview of JS

High-level

Low-level - developers have to manage the resources manually

High-level - all things happen automatically

Garbage-collected

Cleaning the memory so we don’t have to do manually

Interpreted / Just-in-time Compiled

Multi-paradigm

Paradigm - An approach and mindset of structuring code, which will direct your coding style and technique.

  • Procedural Programming
  • Objected-oriented Programming
  • Functional Programming

Prototype-based OO

Except for primitive types, everything in JS are objects.

First-class Functions

The functions are treated just as variables.

Dynamic

No data type definitions. - Type becomes know at runtime.

JavaScript with Type - TypeScript

Single-threaded

Non-blocking Event Loop

The JavaScript Engine and Runtime

JavaScript Engine

Program that executes the JavaScript Code.

For example: Google V8 / Node

JS Engine

Call Stack

Execution context

Heap

Object stored

Compilation

Entire code is converted into machine code at once and written to a binary file that can be executed by a computer.

Interpretation

Interpreter runs though the source code and executes it line by line.

Just-in-time Compilation

Entire code is converted to machine code at once, and executed immediately. - No Portable File

Just-in-time Compilation Detail

Modern JavaScript is no longer an interpreted language.

  1. Parsing - Parse the code into AST(Abstract Syntax Tree) - check if any syntax errors
  2. Compilation - Compile the generated AST and compile it into machine code
  3. Execution - Machine code gets executed right away - where Just-in-time Happens in Call Stack
  4. Optimization - the machine code is optimized and recompiled during running program execution - multiple times
  5. All above happens in the special threads inside the engine that are totally separate from the MAIN THREAD running in the Call Stack

JavaScript Runtime

Runtime in the Browser

A big container including all the things that we need to use JavaScript

WEB APIs

Functionalities provided to the engine, accessible on window object.

JS Engine always acts as the heart of the Runtime.

CallBack Queue

Contains all the call back functions that are ready to be executed.

Callback function(onClick) from DOM Event Listener

  1. The call back function(onClick) is put into the call back queue
  2. onClick is passed to the call stack - then be executed.
  3. Event Loop -> Essential for non-blocking concurrency model.

Runtime in Node.js

No WEB APIs

Execution Context and Call Stack

Execution Context

Prerequisite: After compilation, ready for execution.

  • Global Execution Context is created - for top level code(The code that is NOT inside any function)
  • Function body will only be executed when called!
  • There is always only ONE Gobal Execution Context.

Definition -
Execution Context is like an environment in which a piece of JavaScript Code is executed. It stores all the necessary information for some code to be executed.

  • Execution of the Top level Code inside the global EC - the CPU processing the machine code it received.
  • Execution of Functions and waiting for callbacks.

One execution context per function: for each function call, a new execution context is created.

  • All the ECs together make the call stack.
  • After all functions being executed, the engine keeps waiting the callback functions to arrive.

For example - click event call back

Execution Context in Detail

What’s inside?

  1. Variable Environment
    • let, const, var declarations
    • Functions
    • Arguments object
  2. Scope Chain - Next Lecture
  3. this keyword - generated in a so-called “creation phase” right before execution

IMPORTANT: Execution Contexts that belong to Arrow Functions do not get their argument object, nor do they get this keyword