DEV Community

Cover image for How JavaScript Works
Ravi
Ravi

Posted on

How JavaScript Works

#javascript #react #frontend #webdev

How JavaScript Works

JavaScript is a synchronous, single-threaded programming language, meaning it executes code sequentially, one operation at a time, within a single execution thread. To understand how JavaScript processes code, we need to explore its Execution Context and the Call Stack.

Execution Context

Everything in JavaScript happens inside an Execution Context. When we run a JavaScript program, a new Global Execution Context (GEC) is created. This context consists of two phases:

1. Memory Creation Phase

  • All variables and functions are stored in memory as key-value pairs.
  • Variables are assigned a special placeholder value: undefined.
  • Function declarations are stored as entire function definitions.

Example: 

console.log(x); // Undefined
var x = 10;
function greet() {
    console.log("Hello, World!");
}
Enter fullscreen mode Exit fullscreen mode

Before executing the code, JavaScript sets up memory:

Memory:
x -> undefined
greet -> function definition
Enter fullscreen mode Exit fullscreen mode

2. Code Execution Phase

  • Code is executed line by line.
  • Variables are assigned actual values.
  • When a function is invoked, a new Function Execution Context (FEC) is created.
  • Once the function finishes execution, its execution context is deleted.

Example: 

function add(a, b) {
    return a + b;
}
let result = add(5, 3);
console.log(result);
Enter fullscreen mode Exit fullscreen mode

Steps:

  1. Global Execution Context (GEC) is created.
  2. Memory is allocated for add and result.
  3. When add(5,3) is called, a Function Execution Context (FEC) is created.
  4. Once the function returns a value, its context is removed from memory.

Call Stack

The Call Stack is a data structure that manages execution contexts.

  • When a function is invoked, it is pushed onto the stack.
  • When the function completes, it is popped off the stack.
  • Once all functions finish execution, the Global Execution Context (GEC) is removed.

Example: 

function first() {
    console.log("First function");
    second();
    console.log("First function again");
}
function second() {
    console.log("Second function");
}
first();
Enter fullscreen mode Exit fullscreen mode

Call Stack Execution: 

1. GEC is created
2. first() is called -> Pushed onto the stack
3. "First function" is logged
4. second() is called -> Pushed onto the stack
5. "Second function" is logged, second() completes -> Popped off the stack
6. "First function again" is logged, first() completes -> Popped off the stack
7. GEC is removed
Enter fullscreen mode Exit fullscreen mode

Final Output: 

First function
Second function
First function again
Enter fullscreen mode Exit fullscreen mode

Summary

  • JavaScript is synchronous and single-threaded.
  • Execution Context has two phases: Memory Creation and Code Execution.
  • Call Stack maintains function execution order.
  • When execution finishes, the Global Execution Context is removed.

Understanding these fundamentals is key to mastering JavaScript, especially when dealing with asynchronous operations like callbacks, promises, and the event loop. 🚀

Top comments (0)