Principles of JavaScript Runtime

💡 Tips Praktis💡 Pro Tip

You've already learned JavaScript basics, but have you ever wondered: - Where exactly does your code run? - Why does the same code behave differently in the browser versus Node.js? - Why does code sometimes "freeze up," while at other times it seems to run "in parallel"? This article will take you deep into the JavaScript runtime environment, including the event loop, call stack, memory management, and more. After reading this, you'll understand why code executes in a particular order, quickly locate async-related bugs, optimize code performance, and avoid memory leaks.You've already learned JavaScript basics, but have you ever wondered: - Where exactly does your code run? - Why does the same code behave differently in the browser versus Node.js? - Why does code sometimes "freeze up," while at other times it seems to run "in parallel"? This article will take you deep into the JavaScript runtime environment, including the event loop, call stack, memory management, and more. After reading this, you'll understand why code executes in a particular order, quickly locate async-related bugs, optimize code performance, and avoid memory leaks.

What will you learn in this article?What will you learn in this article?

Chapter	Content	What you'll be able to do
Chapter 1	Runtime overview	Understand where JavaScript code runs
Chapter 2	Browser runtime	Know what Web APIs the browser provides
Chapter 3	Node.js runtime	Understand the server-side JavaScript environment
Chapter 4	Event loop deep dive	Master the execution order of macrotasks and microtasks
Chapter 5	Call stack and memory	Understand code execution and memory management
Chapter 6	Practical tips	Optimize performance and debug memory leaks

------

1. Runtime Overview1. Runtime Overview

💡 Tips Praktis💡 Pro Tip

What is a "runtime"? JavaScript is just a language — why does the same code behave differently in different environments?What is a "runtime"? JavaScript is just a language — why does the same code behave differently in different environments?

1.1 Overview of a Runtime1.1 Overview of a Runtime

Runtime = JavaScript Engine + Environment-provided APIsRuntime = JavaScript Engine + Environment-provided APIs

If JavaScript is the "programming language," then the runtime is the "operating system" — it determines what your code can and cannot do.If JavaScript is the "programming language," then the runtime is the "operating system" — it determines what your code can and cannot do.

CODE

┌─────────────────────────────────────┐ │ JavaScript Code │ ├─────────────────────────────────────┤ │ JavaScript Engine (V8) │ ← Responsible for parsing and executing code ├─────────────────────────────────────┤ │ Runtime Environment (Browser/Node.js) │ ← Provides additional capabilities └─────────────────────────────────────┘

An analogy: JavaScript is "Mandarin," the runtime is the "city"An analogy: JavaScript is "Mandarin," the runtime is the "city"

JavaScript syntax (Mandarin) is the same everywhereJavaScript syntax (Mandarin) is the same everywhere
But different cities provide different facilities:But different cities provide different facilities:
Browser = has DOM, window, fetch (like a city with malls, libraries)Browser = has DOM, window, fetch (like a city with malls, libraries)
Node.js = has fs, http, path (like a city with factories, highways)Node.js = has fs, http, path (like a city with factories, highways)

1.2 Two Mainstream Runtimes1.2 Two Mainstream Runtimes

Feature	Browser	Node.js
Primary use	Web interaction, user interfaces	Server-side applications, CLI tools
Global object	`window`	`global`
DOM API	✅ Supported	❌ Not supported
File system	❌ Limited	✅ Full support
Module system	ES Modules	CommonJS + ES Modules
Timers	`setTimeout`, `setInterval`	`setTimeout`, `setInterval`
Network requests	`fetch`, `XMLHttpRequest`	`http`, `https` modules

👇 Try it out: Compare the environment differences between the browser and Node.js👇 Try it out: Compare the environment differences between the browser and Node.js

📖 Konsep Penting📖 Core Concept

The runtime determines which APIs you can use. DOM APIs available in the browser won't work in Node.js; file APIs available in Node.js won't work in the browser. That's why some code needs "environment detection."The runtime determines which APIs you can use. DOM APIs available in the browser won't work in Node.js; file APIs available in Node.js won't work in the browser. That's why some code needs "environment detection."

------

2. Browser Runtime2. Browser Runtime

💡 Tips Praktis💡 Pro Tip

What capabilities does the browser provide for JavaScript to manipulate web pages?What capabilities does the browser provide for JavaScript to manipulate web pages?

2.1 Components of the Browser Runtime2.1 Components of the Browser Runtime

CODE

┌─────────────────────────────────────────────┐ │ JavaScript Engine │ │ (V8 / SpiderMonkey) │ └─────────────────────────────────────────────┘ ↓ ┌─────────────────────────────────────────────┐ │ Web APIs │ │ ┌─────────┐ ┌──────────┐ ┌──────────┐ │ │ │ DOM │ │ BOM │ │ Network │ │ │ │Manipulate│ │Manipulate│ │ Network │ │ │ │ pages │ │ browser │ │ requests │ │ │ └─────────┘ └──────────┘ └──────────┘ │ └─────────────────────────────────────────────┘ ↓ ┌─────────────────────────────────────────────┐ │ Event Loop │ │ Coordinates code execution, event │ │ handling, and task scheduling │ └─────────────────────────────────────────────┘

2.2 Three Categories of Web APIs2.2 Three Categories of Web APIs

1. DOM API - Manipulate page content1. DOM API - Manipulate page content

javascript

// Find elements const title = document.querySelector('h1') // Modify content title.textContent = 'New Title' // Add styles title.style.color = 'red'

2. BOM API - Manipulate the browser2. BOM API - Manipulate the browser

javascript

// Page navigation window.location.href = 'https://example.com' // Browser storage localStorage.setItem('key', 'value') // Browser history history.back()

3. Network API - Network requests3. Network API - Network requests

javascript

// Send HTTP request fetch('/api/data') .then(response => response.json()) .then(data => console.log(data))

2.3 Browser-Specific Event Mechanism2.3 Browser-Specific Event Mechanism

One of the most powerful features of the browser runtime is "event-driven" programming — code doesn't need to run continuously, but executes when the user performs actions.One of the most powerful features of the browser runtime is "event-driven" programming — code doesn't need to run continuously, but executes when the user performs actions.

javascript

button.addEventListener('click', () => { console.log('Button was clicked') })

Common event types:Common event types:

Event type	When triggered	Practical scenario
`click`	Mouse click	Button interaction
`input`	Input field content changes	Real-time search
`scroll`	Page scrolling	Lazy loading
`load`	Resource finished loading	Initialize data
`error`	Error occurred	Error handling

------

3. Node.js Runtime3. Node.js Runtime

💡 Tips Praktis💡 Pro Tip

What enables JavaScript to run on the server side?What enables JavaScript to run on the server side?

3.1 Components of Node.js3.1 Components of Node.js

CODE

┌─────────────────────────────────────────────┐ │ JavaScript Engine │ │ (V8) │ └─────────────────────────────────────────────┘ ↓ ┌─────────────────────────────────────────────┐ │ Node.js Built-in Modules │ │ ┌─────────┐ ┌──────────┐ ┌──────────┐ │ │ │ fs │ │ http │ │ path │ │ │ │ File │ │ HTTP │ │ Path │ │ │ │operations│ │ server │ │ handling │ │ │ └─────────┘ └──────────┘ └──────────┘ │ └─────────────────────────────────────────────┘ ↓ ┌─────────────────────────────────────────────┐ │ libuv Event Loop Library │ │ Cross-platform async I/O support │ └─────────────────────────────────────────────┘

3.2 Node.js-Specific Capabilities3.2 Node.js-Specific Capabilities

1. File System Operations1. File System Operations

javascript

const fs = require('fs') // Read file fs.readFile('./data.txt', 'utf8', (err, data) => { if (err) throw err console.log(data) }) // Write file fs.writeFile('./output.txt', 'Hello', (err) => { if (err) throw err console.log('Write successful') })

2. HTTP Server2. HTTP Server

javascript

const http = require('http') const server = http.createServer((req, res) => { res.writeHead(200, { 'Content-Type': 'text/html' }) res.end('<h1>Hello World</h1>') }) server.listen(3000)

3. Module System3. Module System

javascript

// CommonJS (Node.js default) const fs = require('fs') module.exports = { myFunction } // ES Modules (modern approach) import fs from 'fs' export { myFunction }

3.3 Browser vs Node.js Comparison3.3 Browser vs Node.js Comparison

Feature	Browser	Node.js
Entry file	HTML file	JavaScript file
Global objects	`window`, `document`	`global`, `process`
Module loading

Principles of JavaScript RuntimePrinciples of JavaScript Runtime

1. Runtime Overview1. Runtime Overview

1.1 Overview of a Runtime1.1 Overview of a Runtime

1.2 Two Mainstream Runtimes1.2 Two Mainstream Runtimes

2. Browser Runtime2. Browser Runtime

2.1 Components of the Browser Runtime2.1 Components of the Browser Runtime

2.2 Three Categories of Web APIs2.2 Three Categories of Web APIs

2.3 Browser-Specific Event Mechanism2.3 Browser-Specific Event Mechanism

3. Node.js Runtime3. Node.js Runtime

3.1 Components of Node.js3.1 Components of Node.js

3.2 Node.js-Specific Capabilities3.2 Node.js-Specific Capabilities

3.3 Browser vs Node.js Comparison3.3 Browser vs Node.js Comparison