JavaScript Runtime Examples

Lesson content

🎯 Goal By the end of this lesson, you'll understand: What is the JavaScript Runtime? How JavaScript Runtime works Call Stack Web APIs / Node.js APIs Callback Queue Microtask Queue Event Loop Real-world runtime examples Interview questions What is JavaScript Runtime? A JavaScript Runtime is the environment that allows JavaScript code to execute. Examples of JavaScript runtimes: Browser (Chrome, Firefox, Edge) Node.js Deno Bun The runtime provides: Memory Call Stack Event Loop APIs Callback Queue Simple Definition: A JavaScript Runtime is the environment where JavaScript code runs. Why Do We Need a Runtime? JavaScript alone cannot: Read files Access the network Set timers Manipulate the DOM The runtime provides these capabilities. JavaScript Runtime Components JavaScript Runtime │ ┌────────────────────┼────────────────────┐ │ │ │ ▼ ▼ ▼ Call Stack Web/Node APIs Event Loop │ │ │ ▼ ▼ ▼ Execute Code Async Tasks Schedule Tasks Example 1: Simple Execution console . log( "Start" ); console . log( "Middle" ); console . log( "End" ); Output Start Middle End Execution Flow Call Stack console.log(Start) │ ▼ console.log(Middle) │ ▼ console.log(End) Everything runs synchronously. Example 2: setTimeout() console . log( "Start" ); setTimeout (() => { console . log( "Timer" ); }, 0 ); console . log( "End" ); Output Start End Timer Why? setTimeout() is asynchronous. Runtime Flow console.log(Start) │ ▼ setTimeout() │ ▼ Node/Web API │ ▼ Callback Queue │ ▼ Event Loop │ ▼ Call Stack Example 3: Promise console . log( "Start" ); Promise . resolve() . then(() => { console . log( "Promise" ); }); console . log( "End" ); Output Start End Promise Promises use the Microtask Queue . Example 4: Promise vs setTimeout console . log( "Start" ); setTimeout (() => { console . log( "Timeout" ); }, 0 ); Promise . resolve() . then(() => { console . log( "Promise" ); }); console . log( "End" ); Output Start End Promise Timeout Why? The Microtask Queue is processed before the Callback Queue . Example 5: Multiple Timers setTimeout (() => { console . log( "First" ); }, 1000 ); setTimeout (() => { console . log( "Second" ); }, 500 ); Output Second First The shorter timer finishes first. Example 6: Reading a File (Node.js) const fs = require ( "fs" ); console . log( "Start" ); fs . readFile( "data.txt" , "utf8" , ( err , data ) => { console . log( data ); } ); console . log( "End" ); Output Start End (File Content) The file is read asynchronously. Example 7: HTTP Server (Node.js) const http = require ( "http" ); const server = http . createServer( ( req , res ) => { res . end( "Hello" ); } ); server . listen( 3000 ); The runtime waits for incoming requests without blocking other operations. Example 8: Fetch API fetch ( "/users" ) . then( response => response . json()) . then( data => { console . log( data ); }); The network request runs asynchronously. Example 9: Event Listener button . addEventListener( "click" , () => { console . log( "Clicked" ); } ); The runtime waits until the user clicks the button. Example 10: Event Loop console . log( "A" ); setTimeout (() => { console . log( "B" ); }, 0 ); Promise . resolve() . then(() => { console . log( "C" ); }); console . log( "D" ); Output A D C B Execution Flow Call Stack │ ▼ Promise (Microtask Queue) │ ▼ setTimeout (Callback Queue) Runtime Architecture JavaScript Code │ ▼ Call Stack │ ▼ Async API (Web API / Node.js API) │ ▼ Microtask Queue (Promises) │ ▼ Callback Queue (Timers, Events) │ ▼ Event Loop │ ▼ Call Stack Browser Runtime vs Node.js Runtime Browser Runtime Node.js Runtime DOM API File System API Fetch API File System Window Object Global Object Local Storage Process Object Browser Events Server Events Real-Life Example 🏦 Bank Counter Customer │ ▼ Submit Form │ ▼ Waiting Area │ ▼ Bank Officer Calls The waiting area is like the Callback Queue. Common Runtime APIs Browser Node.js setTimeout() setTimeout() fetch() fs.readFile() addEventListener() http.createServer() DOM APIs process Local Storage Buffer Interview Question What is a JavaScript Runtime? Answer A JavaScript Runtime is the environment that executes JavaScript code and provides APIs such as timers, networking, file system access (Node.js), and the Event Loop. Name some JavaScript Runtimes. Answer Browser Node.js Deno Bun Why does setTimeout() not execute immediately? Answer Because its callback is handled by the runtime, placed in the Callback Queue after the timer expires, and executed only when the Call Stack is empty. Which queue has higher priority? Answer The Microtask Queue has higher priority than the Callback Queue. Which runtime component moves callbacks to the Call Stack? Answer The Event Loop . Best Practices ✅ Understand synchronous and asynchronous execution. ✅ Prefer Promises or async/await over deeply nested callbacks. ✅ Avoid blocking the Call Stack with heavy computations. ✅ Understand the difference between the Microtask Queue and Callback Queue. ✅ Use asynchronous APIs for file operations and network requests. ❌ Don't assume setTimeout(..., 0) executes immediately. ❌ Don't block the Event Loop with CPU-intensive tasks. Key Points ✅ A JavaScript Runtime provides the environment to execute JavaScript. ✅ The Call Stack executes synchronous code. ✅ Browser APIs and Node.js APIs handle asynchronous operations. ✅ Promises use the Microtask Queue. ✅ Timers and many asynchronous callbacks use the Callback Queue. ✅ The Event Loop coordinates when queued tasks move to the Call Stack. 🧠 Easy Formula JavaScript Code │ ▼ Call Stack │ ▼ Runtime APIs │ ▼ Microtask Queue (Promises) │ ▼ Callback Queue (Timers, Events) │ ▼ Event Loop │ ▼ Call Stack Runtime = Environment Call Stack = Execute Code Web/Node APIs = Async Work Microtask Queue = Promise Callbacks Callback Queue = Timers & Events Event Loop = Moves Ready Tasks to the Call Stack Remember: 🌍 Runtime = Environment where JavaScript runs 📚 Call Stack = Executes synchronous code ⏰ Timers and events are handled by runtime APIs ⚡ Promises use the Microtask Queue and run before timer callbacks 🔄 The Event Loop keeps the application responsive by coordinating asynchronous tasks