Academy — Sanjib Sikder

One Language, Many Worlds

JavaScript was born in the browser in 1995. For fifteen years that was its only home. Then Node.js arrived in 2009 and moved JavaScript to the server. Today there are four major runtimes — browser, Node.js, Deno, and Bun — each running the same language but exposing different globals, different APIs, and different module systems.

Code that assumes it's in a browser (document.getElementById) crashes in Node. Code that assumes Node (require, process.env) crashes in the browser. Understanding what each environment provides — and how to detect which one you're in — is foundational knowledge for any JavaScript developer.

The Browser Environment

The browser is where JavaScript started. It provides globals for interacting with the page, the network, storage, and the device:

JavaScript

Ctrl+Enter to run

// Globals available in a browser (and this sandbox)
// Note: document and window.parent are blocked in this sandbox for security —
// but these are all standard browser APIs

// Performance timing — high resolution
const t0 = performance.now();
for (let i = 0; i < 1000000; i++) {}
const t1 = performance.now();
console.log(`Loop took ${(t1 - t0).toFixed(3)}ms`);

// Cryptography — browser's built-in crypto
const array = new Uint8Array(16);
crypto.getRandomValues(array);
console.log("Random bytes:", Array.from(array.slice(0, 4)));

// Structured data encoding
const encoder = new TextEncoder();
const decoder = new TextDecoder();
const encoded = encoder.encode("Namaste!");
const decoded = decoder.decode(encoded);
console.log("Encoded:", encoded);
console.log("Decoded:", decoded);

// URL handling
const url = new URL("https://sanjibsikder.com/academy/physics?lesson=3&unit=2");
console.log("Host:", url.hostname);
console.log("Path:", url.pathname);
console.log("Lesson:", url.searchParams.get("lesson"));
console.log("All params:", Object.fromEntries(url.searchParams));

// Globals available in a browser (and this sandbox)
// Note: document and window.parent are blocked in this sandbox for security —
// but these are all standard browser APIs

// Performance timing — high resolution
const t0 = performance.now();
for (let i = 0; i < 1000000; i++) {}
const t1 = performance.now();
console.log(`Loop took ${(t1 - t0).toFixed(3)}ms`);

// Cryptography — browser's built-in crypto
const array = new Uint8Array(16);
crypto.getRandomValues(array);
console.log("Random bytes:", Array.from(array.slice(0, 4)));

// Structured data encoding
const encoder = new TextEncoder();
const decoder = new TextDecoder();
const encoded = encoder.encode("Namaste!");
const decoded = decoder.decode(encoded);
console.log("Encoded:", encoded);
console.log("Decoded:", decoded);

// URL handling
const url = new URL("https://sanjibsikder.com/academy/physics?lesson=3&unit=2");
console.log("Host:", url.hostname);
console.log("Path:", url.pathname);
console.log("Lesson:", url.searchParams.get("lesson"));
console.log("All params:", Object.fromEntries(url.searchParams));

JavaScript

Ctrl+Enter to run

// Browser APIs for data and computation

// Base64 encoding/decoding
const original = "Hello, Kolkata! ₹100";
const encoded = btoa(unescape(encodeURIComponent(original)));
const decoded = decodeURIComponent(escape(atob(encoded)));
console.log("Original:", original);
console.log("Base64: ", encoded);
console.log("Decoded: ", decoded);

// Blob — in-memory binary data
const json = JSON.stringify({ name: "Rahul", marks: 82 });
const blob = new Blob([json], { type: "application/json" });
console.log("Blob size:", blob.size, "bytes");
console.log("Blob type:", blob.type);

// Reading a Blob back as text
blob.text().then(text => {
const parsed = JSON.parse(text);
console.log("Parsed back:", parsed);
});

// Structured clone — deep copy anything, including non-JSON types
const original2 = {
name: "Priya",
date: new Date(),
scores: new Map([["physics", 91], ["maths", 88]]),
};
const clone = structuredClone(original2);
clone.name = "Modified";
console.log("Original name:", original2.name); // unchanged
console.log("Clone name: ", clone.name);
console.log("Map cloned: ", clone.scores.get("physics")); // 91

// Browser APIs for data and computation

// Base64 encoding/decoding
const original = "Hello, Kolkata! ₹100";
const encoded = btoa(unescape(encodeURIComponent(original)));
const decoded = decodeURIComponent(escape(atob(encoded)));
console.log("Original:", original);
console.log("Base64: ", encoded);
console.log("Decoded: ", decoded);

// Blob — in-memory binary data
const json = JSON.stringify({ name: "Rahul", marks: 82 });
const blob = new Blob([json], { type: "application/json" });
console.log("Blob size:", blob.size, "bytes");
console.log("Blob type:", blob.type);

// Reading a Blob back as text
blob.text().then(text => {
const parsed = JSON.parse(text);
console.log("Parsed back:", parsed);
});

// Structured clone — deep copy anything, including non-JSON types
const original2 = {
name: "Priya",
date: new Date(),
scores: new Map([["physics", 91], ["maths", 88]]),
};
const clone = structuredClone(original2);
clone.name = "Modified";
console.log("Original name:", original2.name); // unchanged
console.log("Clone name: ", clone.name);
console.log("Map cloned: ", clone.scores.get("physics")); // 91

What the Browser Does NOT Have

JavaScript

Ctrl+Enter to run

// Detecting what's missing in the browser — compared to Node.js

const features = {
// Node.js globals — not in browser
"process": typeof process !== "undefined",
"process.env": typeof process !== "undefined" && !!process.env,
"**dirname": typeof **dirname !== "undefined",
"require": typeof require !== "undefined",
"Buffer": typeof Buffer !== "undefined",

// Browser globals
"window": typeof window !== "undefined",
"document": typeof document !== "undefined",
"navigator": typeof navigator !== "undefined",
"localStorage": typeof localStorage !== "undefined",

// Available in both (part of Web APIs, now in Node 18+ too)
"fetch": typeof fetch !== "undefined",
"crypto": typeof crypto !== "undefined",
"performance": typeof performance !== "undefined",
"TextEncoder": typeof TextEncoder !== "undefined",
"URL": typeof URL !== "undefined",
"structuredClone":typeof structuredClone !== "undefined",
"setTimeout": typeof setTimeout !== "undefined",
"Promise": typeof Promise !== "undefined",
"queueMicrotask": typeof queueMicrotask !== "undefined",
};

for (const [name, available] of Object.entries(features)) {
console.log(`${available ? "✓" : "✗"} ${name}`);
}

// Detecting what's missing in the browser — compared to Node.js

const features = {
// Node.js globals — not in browser
"process": typeof process !== "undefined",
"process.env": typeof process !== "undefined" && !!process.env,
"**dirname": typeof **dirname !== "undefined",
"require": typeof require !== "undefined",
"Buffer": typeof Buffer !== "undefined",

// Browser globals
"window": typeof window !== "undefined",
"document": typeof document !== "undefined",
"navigator": typeof navigator !== "undefined",
"localStorage": typeof localStorage !== "undefined",

// Available in both (part of Web APIs, now in Node 18+ too)
"fetch": typeof fetch !== "undefined",
"crypto": typeof crypto !== "undefined",
"performance": typeof performance !== "undefined",
"TextEncoder": typeof TextEncoder !== "undefined",
"URL": typeof URL !== "undefined",
"structuredClone":typeof structuredClone !== "undefined",
"setTimeout": typeof setTimeout !== "undefined",
"Promise": typeof Promise !== "undefined",
"queueMicrotask": typeof queueMicrotask !== "undefined",
};

for (const [name, available] of Object.entries(features)) {
console.log(`${available ? "✓" : "✗"} ${name}`);
}

The Node.js Environment

Node.js took V8 out of Chrome and wrapped it with APIs for the server: file system, network sockets, processes, streams. It has dominated server-side JavaScript since 2009.

Key things Node provides that browsers don't:

// File system — read and write files
const fs = require("fs");
const path = require("path");

const content = fs.readFileSync("data.json", "utf8");
const parsed = JSON.parse(content);
fs.writeFileSync("output.json", JSON.stringify(parsed, null, 2));

// Environment variables — configuration without hardcoding
const port = process.env.PORT || 3000;
const dbUrl = process.env.DATABASE_URL;
const isProd = process.env.NODE_ENV === "production";

// Process information
console.log(process.pid); // process ID
console.log(process.platform); // "linux", "darwin", "win32"
console.log(process.memoryUsage().heapUsed); // bytes

// Streams — process data without loading it all into memory
const { createReadStream, createWriteStream } = require("fs");
createReadStream("large-file.csv")
  .pipe(csvParser())
  .pipe(createWriteStream("output.json"));

// Child processes — run other programs
const { exec } = require("child_process");
exec("git log --oneline -5", (err, stdout) => console.log(stdout));

JavaScript

Ctrl+Enter to run

// Node.js patterns you can simulate and understand in any environment

// process.env pattern — config with fallbacks
const config = (function () {
// In Node: process.env.PORT etc.
// Here: we simulate with an object
const env = {
PORT: "3000",
NODE_ENV: "production",
DB_URL: "postgres://localhost/academy",
};

return {
get(key, fallback = null) {
return env[key] ?? fallback;
},
require(key) {
const val = env[key];
if (!val) throw new Error(`Missing required env variable: ${key}`);
return val;
},
bool(key, fallback = false) {
const val = env[key];
return val ? val === "true" : fallback;
},
};
})();

console.log("Port: ", config.get("PORT", "8080"));
console.log("DB URL: ", config.require("DB_URL"));
console.log("Is prod:", config.bool("NODE_ENV" === "production" ? "TRUE" : "FALSE", true));

// Path manipulation — Node's path module logic
function joinPath(...parts) {
return parts.join("/").replace(/\/+/g, "/");
}
function extname(filename) {
const dot = filename.lastIndexOf(".");
return dot === -1 ? "" : filename.slice(dot);
}
function basename(filepath, ext = "") {
const base = filepath.split("/").pop();
return ext && base.endsWith(ext) ? base.slice(0, -ext.length) : base;
}

console.log(joinPath("/home", "claude", "lessons", "26.mdx"));
console.log(extname("lesson-26.mdx"));
console.log(basename("/home/claude/lesson-26.mdx", ".mdx"));

// Node.js patterns you can simulate and understand in any environment

// process.env pattern — config with fallbacks
const config = (function () {
// In Node: process.env.PORT etc.
// Here: we simulate with an object
const env = {
PORT: "3000",
NODE_ENV: "production",
DB_URL: "postgres://localhost/academy",
};

return {
get(key, fallback = null) {
return env[key] ?? fallback;
},
require(key) {
const val = env[key];
if (!val) throw new Error(`Missing required env variable: ${key}`);
return val;
},
bool(key, fallback = false) {
const val = env[key];
return val ? val === "true" : fallback;
},
};
})();

console.log("Port: ", config.get("PORT", "8080"));
console.log("DB URL: ", config.require("DB_URL"));
console.log("Is prod:", config.bool("NODE_ENV" === "production" ? "TRUE" : "FALSE", true));

// Path manipulation — Node's path module logic
function joinPath(...parts) {
return parts.join("/").replace(/\/+/g, "/");
}
function extname(filename) {
const dot = filename.lastIndexOf(".");
return dot === -1 ? "" : filename.slice(dot);
}
function basename(filepath, ext = "") {
const base = filepath.split("/").pop();
return ext && base.endsWith(ext) ? base.slice(0, -ext.length) : base;
}

console.log(joinPath("/home", "claude", "lessons", "26.mdx"));
console.log(extname("lesson-26.mdx"));
console.log(basename("/home/claude/lesson-26.mdx", ".mdx"));

CommonJS vs ES Modules — The Module System Split

Node.js originally used require() (CommonJS). Browsers and modern Node.js use import/export (ES Modules). This split is still a source of confusion:

// CommonJS (Node.js original — .js files without "type":"module" in package.json)
const fs      = require("fs");           // built-in
const express = require("express");      // npm package
const utils   = require("./utils.js");  // local file

module.exports = { myFunction };         // export
module.exports.myOtherFunction = ...;   // named export

// ES Modules (browsers, Deno, Bun, modern Node with .mjs or "type":"module")

export function myFunction() { ... }    // named export
export default class MyClass { ... }   // default export

JavaScript

Ctrl+Enter to run

// The core difference between CJS and ESM — beyond syntax

// 1. CJS: synchronous, evaluated on require()
// ESM: asynchronous, statically analysed before execution

// 2. CJS: dynamic — require() can be called anywhere, conditionally
function loadPlugin(name) {
// In CJS this works:
// const plugin = require(`./plugins/${name}`);
// In ESM you need dynamic import():
// const plugin = await import(`./plugins/${name}`);
console.log(`Loading plugin: ${name}`);
}

// 3. CJS: **dirname and **filename are available
// ESM: use import.meta.url instead
// const __dirname = new URL(".", import.meta.url).pathname;

// 4. CJS exports are live copies
// ESM exports are live BINDINGS — the importer sees changes

// Simulating live binding vs copy behaviour
const cjsModule = (() => {
let count = 0;
return {
getCount: () => count,
increment: () => count++,
count, // CJS: copies the value at export time
};
})();

const esmLiveBinding = (() => {
let count = 0;
const exports = { getCount: () => count, increment: () => count++ };
// ESM would expose count as a live getter, not a copy
Object.defineProperty(exports, "count", { get: () => count });
return exports;
})();

cjsModule.increment();
cjsModule.increment();
console.log("CJS .count (stale copy):", cjsModule.count); // 0 — copied at export
console.log("CJS .getCount() (live): ", cjsModule.getCount()); // 2 — live via function

esmLiveBinding.increment();
esmLiveBinding.increment();
console.log("ESM .count (live binding):", esmLiveBinding.count); // 2 — live

// The core difference between CJS and ESM — beyond syntax

// 1. CJS: synchronous, evaluated on require()
// ESM: asynchronous, statically analysed before execution

// 2. CJS: dynamic — require() can be called anywhere, conditionally
function loadPlugin(name) {
// In CJS this works:
// const plugin = require(`./plugins/${name}`);
// In ESM you need dynamic import():
// const plugin = await import(`./plugins/${name}`);
console.log(`Loading plugin: ${name}`);
}

// 3. CJS: **dirname and **filename are available
// ESM: use import.meta.url instead
// const __dirname = new URL(".", import.meta.url).pathname;

// 4. CJS exports are live copies
// ESM exports are live BINDINGS — the importer sees changes

// Simulating live binding vs copy behaviour
const cjsModule = (() => {
let count = 0;
return {
getCount: () => count,
increment: () => count++,
count, // CJS: copies the value at export time
};
})();

cjsModule.increment();
cjsModule.increment();
console.log("CJS .count (stale copy):", cjsModule.count); // 0 — copied at export
console.log("CJS .getCount() (live): ", cjsModule.getCount()); // 2 — live via function

esmLiveBinding.increment();
esmLiveBinding.increment();
console.log("ESM .count (live binding):", esmLiveBinding.count); // 2 — live

Deno — The Secure-by-Default Runtime

Deno was created by Ryan Dahl — the same person who created Node.js — to fix Node's design mistakes. Released in 2020:

// Deno: TypeScript by default — no compilation step needed
// deno run script.ts

// No require() — ES Modules only, with full URLs

// Security model: NOTHING is permitted by default
// Must explicitly grant permissions at the CLI:
// deno run --allow-read --allow-net --allow-env script.ts

// File reading — same Web API style
const text = await Deno.readTextFile("./data.txt");

// Built-in test runner
Deno.test("addition works", () => {
  const result = 1 + 1;
  if (result !== 2) throw new Error("Math is broken");
});
// deno test

// Built-in formatter and linter
// deno fmt    — formats all files
// deno lint   — lints all files
// deno check  — type-checks without running

// Web-compatible APIs — fetch, WebSocket, crypto, URL all built in
const response = await fetch("https://api.example.com/data");
const data = await response.json();

Key differences from Node:

TypeScript natively — no tsc, no ts-node
Secure by default — no file/network/env access without explicit flags
URL imports — no node_modules, packages imported from URLs or deno.land
Built-in tooling — fmt, lint, test, check ship with the binary
Web-compatible APIs — closer to browser APIs than Node

Bun — The Speed-First Runtime

Bun launched in 2022 with one primary goal: be faster than Node at everything. It uses JavaScriptCore (Safari's engine) instead of V8:

// Bun: compatible with most Node.js code — drop-in replacement for many use cases

// File I/O — faster than Node's fs
const file = Bun.file("./data.json");
const content = await file.json();
await Bun.write("./output.json", JSON.stringify(content, null, 2));

// Built-in HTTP server — faster than Node's http module
Bun.serve({
  port: 3000,
  fetch(request) {
    return new Response("Hello from Bun!");
  },
});

// Built-in SQLite — no external dependency needed
const db = new Database("academy.db");
db.run(
  "CREATE TABLE IF NOT EXISTS students (id INTEGER, name TEXT, marks INTEGER)",
);

// Native TypeScript + JSX — no compilation needed, like Deno
// bun run script.ts

// Drop-in Node.js compatibility
// Most npm packages work — bun install is also faster than npm/pnpm

Key differences from Node and Deno:

Speed — startup, HTTP throughput, and file I/O benchmarks consistently faster
Node compatible — most Node.js code and npm packages work unchanged
Built-in bundler — replaces Webpack, Vite, esbuild for many use cases
Built-in SQLite, test runner, and package manager — single binary
JavaScriptCore — different engine from V8; occasionally different performance characteristics on specific workloads

Environment Detection — Writing Code That Runs Anywhere

Libraries and framework utilities often need to work in multiple environments. The pattern for safe detection:

JavaScript

Ctrl+Enter to run

// Robust environment detection

const env = {
isBrowser: typeof window !== "undefined" && typeof document !== "undefined",
isNode: typeof process !== "undefined" && process.versions?.node != null,
isDeno: typeof Deno !== "undefined",
isBun: typeof Bun !== "undefined",
isWorker: typeof WorkerGlobalScope !== "undefined" && self instanceof WorkerGlobalScope,
};

// Derive what we're in
const runtime =
env.isDeno ? "Deno" :
env.isBun ? "Bun" :
env.isNode ? "Node.js" :
env.isWorker ? "Worker" :
env.isBrowser ? "Browser" :
"Unknown";

console.log("Runtime:", runtime);
console.log("Env flags:", env);

// Universal storage — works in browser and Node
function createStorage() {
if (env.isBrowser && typeof localStorage !== "undefined") {
return {
get: key => {
try { return JSON.parse(localStorage.getItem(key)); }
catch { return null; }
},
set: (key, val) => localStorage.setItem(key, JSON.stringify(val)),
del: key => localStorage.removeItem(key),
};
}
// Node/Deno/Bun fallback — in-memory (or use fs for persistence)
const store = new Map();
return {
get: key => store.get(key) ?? null,
set: (key, val) => store.set(key, val),
del: key => store.delete(key),
};
}

const storage = createStorage();
storage.set("student", { name: "Rahul", marks: 82 });
console.log("Stored and retrieved:", storage.get("student"));

// Robust environment detection

const env = {
isBrowser: typeof window !== "undefined" && typeof document !== "undefined",
isNode: typeof process !== "undefined" && process.versions?.node != null,
isDeno: typeof Deno !== "undefined",
isBun: typeof Bun !== "undefined",
isWorker: typeof WorkerGlobalScope !== "undefined" && self instanceof WorkerGlobalScope,
};

// Derive what we're in
const runtime =
env.isDeno ? "Deno" :
env.isBun ? "Bun" :
env.isNode ? "Node.js" :
env.isWorker ? "Worker" :
env.isBrowser ? "Browser" :
"Unknown";

console.log("Runtime:", runtime);
console.log("Env flags:", env);

// Universal storage — works in browser and Node
function createStorage() {
if (env.isBrowser && typeof localStorage !== "undefined") {
return {
get: key => {
try { return JSON.parse(localStorage.getItem(key)); }
catch { return null; }
},
set: (key, val) => localStorage.setItem(key, JSON.stringify(val)),
del: key => localStorage.removeItem(key),
};
}
// Node/Deno/Bun fallback — in-memory (or use fs for persistence)
const store = new Map();
return {
get: key => store.get(key) ?? null,
set: (key, val) => store.set(key, val),
del: key => store.delete(key),
};
}

const storage = createStorage();
storage.set("student", { name: "Rahul", marks: 82 });
console.log("Stored and retrieved:", storage.get("student"));

JavaScript

Ctrl+Enter to run

// Universal fetch pattern — works everywhere fetch exists
// (All four runtimes now support the Fetch API)

async function fetchWithTimeout(url, options = {}, timeoutMs = 5000) {
const controller = new AbortController();
const timer = setTimeout(() => controller.abort(), timeoutMs);

try {
const response = await fetch(url, {
...options,
signal: controller.signal,
});

    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }

    return response;

} catch (err) {
if (err.name === "AbortError") {
throw new Error(`Request timed out after ${timeoutMs}ms`);
}
throw err;
} finally {
clearTimeout(timer);
}
}

// Network is blocked in this sandbox — but the pattern is correct for all runtimes
// Demonstrating the AbortController mechanism alone:

const controller = new AbortController();
const { signal } = controller;

console.log("Signal aborted:", signal.aborted); // false

signal.addEventListener("abort", () => {
console.log("Abort triggered:", signal.reason);
});

setTimeout(() => controller.abort("Timeout"), 100);

// In real code: pass signal to fetch() — it cancels the in-flight request
await new Promise(r => setTimeout(r, 150));
console.log("Signal aborted:", signal.aborted); // true

// Universal fetch pattern — works everywhere fetch exists
// (All four runtimes now support the Fetch API)

async function fetchWithTimeout(url, options = {}, timeoutMs = 5000) {
const controller = new AbortController();
const timer = setTimeout(() => controller.abort(), timeoutMs);

try {
const response = await fetch(url, {
...options,
signal: controller.signal,
});

if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }

return response;

} catch (err) {
if (err.name === "AbortError") {
throw new Error(`Request timed out after ${timeoutMs}ms`);
}
throw err;
} finally {
clearTimeout(timer);
}
}

// Network is blocked in this sandbox — but the pattern is correct for all runtimes
// Demonstrating the AbortController mechanism alone:

const controller = new AbortController();
const { signal } = controller;

console.log("Signal aborted:", signal.aborted); // false

signal.addEventListener("abort", () => {
console.log("Abort triggered:", signal.reason);
});

setTimeout(() => controller.abort("Timeout"), 100);

// In real code: pass signal to fetch() — it cancels the in-flight request
await new Promise(r => setTimeout(r, 150));
console.log("Signal aborted:", signal.aborted); // true

The Web Platform API Convergence

The most important trend: Node, Deno, and Bun are all converging on browser-compatible Web APIs. Writing to these APIs means your code works everywhere:

JavaScript

Ctrl+Enter to run

// Web Platform APIs — available in browser AND modern Node 18+ AND Deno AND Bun

// fetch — HTTP client
// URL — URL parsing
// URLSearchParams — query strings
// TextEncoder / TextDecoder — string ↔ bytes
// crypto — cryptography
// performance — high-res timing
// structuredClone — deep clone
// AbortController — cancellation
// ReadableStream / WritableStream — streaming
// FormData — multipart form data
// Blob / File — binary data
// WebSocket — real-time connections
// queueMicrotask — microtask scheduling

// Example: hashing with the Web Crypto API — works in all four runtimes
async function sha256(message) {
const encoder = new TextEncoder();
const data = encoder.encode(message);
const hashBuf = await crypto.subtle.digest("SHA-256", data);
const hashArr = Array.from(new Uint8Array(hashBuf));
return hashArr.map(b => b.toString(16).padStart(2, "0")).join("");
}

const inputs = ["Rahul", "Priya", "Arjun"];
for (const name of inputs) {
const hash = await sha256(name);
console.log(`${name.padEnd(8)} → ${hash.slice(0, 16)}…`);
}

// URLSearchParams — parse and build query strings
const params = new URLSearchParams();
params.set("lesson", "26");
params.set("unit", "3");
params.append("tag", "runtime");
params.append("tag", "environment");

console.log("Query string:", params.toString());
console.log("Tags:", params.getAll("tag"));

// Web Platform APIs — available in browser AND modern Node 18+ AND Deno AND Bun

// fetch — HTTP client
// URL — URL parsing
// URLSearchParams — query strings
// TextEncoder / TextDecoder — string ↔ bytes
// crypto — cryptography
// performance — high-res timing
// structuredClone — deep clone
// AbortController — cancellation
// ReadableStream / WritableStream — streaming
// FormData — multipart form data
// Blob / File — binary data
// WebSocket — real-time connections
// queueMicrotask — microtask scheduling

// Example: hashing with the Web Crypto API — works in all four runtimes
async function sha256(message) {
const encoder = new TextEncoder();
const data = encoder.encode(message);
const hashBuf = await crypto.subtle.digest("SHA-256", data);
const hashArr = Array.from(new Uint8Array(hashBuf));
return hashArr.map(b => b.toString(16).padStart(2, "0")).join("");
}

const inputs = ["Rahul", "Priya", "Arjun"];
for (const name of inputs) {
const hash = await sha256(name);
console.log(`${name.padEnd(8)} → ${hash.slice(0, 16)}…`);
}

// URLSearchParams — parse and build query strings
const params = new URLSearchParams();
params.set("lesson", "26");
params.set("unit", "3");
params.append("tag", "runtime");
params.append("tag", "environment");

console.log("Query string:", params.toString());
console.log("Tags:", params.getAll("tag"));

Choosing a Runtime

JavaScript

Ctrl+Enter to run

// Decision framework — not rules, tradeoffs

const runtimes = {
Browser: {
use: ["Web apps", "PWAs", "browser extensions", "WebAssembly"],
gives: ["DOM", "Web APIs", "localStorage", "WebWorkers"],
missing: ["File system", "process.env", "native modules"],
avoid: ["Server-side secrets", "heavy CPU work on main thread"],
},
Node: {
use: ["APIs", "CLI tools", "build scripts", "long-running servers"],
gives: ["fs", "child_process", "cluster", "npm ecosystem (2M+ packages)"],
missing: ["Native TypeScript (needs tsc/ts-node)", "security-by-default"],
avoid: ["When you need Deno's security model or Bun's speed"],
},
Deno: {
use: ["TypeScript-first servers", "security-sensitive code", "scripts"],
gives: ["Native TypeScript", "secure-by-default", "built-in toolchain"],
missing: ["Full npm compatibility (improving)", "Bun-level speed"],
avoid: ["When you need the full npm ecosystem without workarounds"],
},
Bun: {
use: ["High-throughput APIs", "replacing Node with no code changes", "monorepos"],
gives: ["Fastest startup + HTTP", "Node compatibility", "built-in SQLite"],
missing: ["Maturity (youngest runtime)", "some edge cases differ from Node"],
avoid: ["When stability > speed is the priority"],
},
};

for (const [name, info] of Object.entries(runtimes)) {
console.log(`\n=== ${name} ===`);
console.log(" Use for: ", info.use.join(", "));
console.log(" Unique: ", info.gives.slice(0, 2).join(", "));
}

// Decision framework — not rules, tradeoffs

const runtimes = {
Browser: {
use: ["Web apps", "PWAs", "browser extensions", "WebAssembly"],
gives: ["DOM", "Web APIs", "localStorage", "WebWorkers"],
missing: ["File system", "process.env", "native modules"],
avoid: ["Server-side secrets", "heavy CPU work on main thread"],
},
Node: {
use: ["APIs", "CLI tools", "build scripts", "long-running servers"],
gives: ["fs", "child_process", "cluster", "npm ecosystem (2M+ packages)"],
missing: ["Native TypeScript (needs tsc/ts-node)", "security-by-default"],
avoid: ["When you need Deno's security model or Bun's speed"],
},
Deno: {
use: ["TypeScript-first servers", "security-sensitive code", "scripts"],
gives: ["Native TypeScript", "secure-by-default", "built-in toolchain"],
missing: ["Full npm compatibility (improving)", "Bun-level speed"],
avoid: ["When you need the full npm ecosystem without workarounds"],
},
Bun: {
use: ["High-throughput APIs", "replacing Node with no code changes", "monorepos"],
gives: ["Fastest startup + HTTP", "Node compatibility", "built-in SQLite"],
missing: ["Maturity (youngest runtime)", "some edge cases differ from Node"],
avoid: ["When stability > speed is the priority"],
},
};

for (const [name, info] of Object.entries(runtimes)) {
console.log(`\n=== ${name} ===`);
console.log(" Use for: ", info.use.join(", "));
console.log(" Unique: ", info.gives.slice(0, 2).join(", "));
}

What You Have Learned

JavaScript is not one environment. It is one language running in four distinct worlds, each with different capabilities, APIs, and design philosophies.

The key ideas:

Browser: DOM, Web APIs, localStorage — no file system, no process, no secrets
Node.js: file system, child processes, huge npm ecosystem — CommonJS legacy, security opt-out
Deno: TypeScript native, secure by default, URL imports — smaller ecosystem, different module system
Bun: fastest runtime, Node-compatible, built-in SQLite and bundler — youngest, still maturing
Web Platform APIs (fetch, URL, crypto, TextEncoder, AbortController) are the convergence point — write to these and your code works in all four runtimes
CommonJS vs ESM: require() is synchronous and dynamic; import is static and enables tree-shaking — modern projects use ESM
Environment detection: check for process, Deno, Bun, window — never assume, always detect
For your Astro site: you write browser-targeted code in components, Node-targeted code in API routes — Astro handles the boundary

In the next lesson: Data Structures from Scratch — linked lists, stacks, queues, trees, graphs, and hash maps. Not as academic exercises but as tools: understanding why Map is O(1) and why Array.includes is O(n) changes how you write code at scale.

Runtime Environments

One Language, Many Worlds

The Browser Environment

What the Browser Does NOT Have

The Node.js Environment

CommonJS vs ES Modules — The Module System Split

Deno — The Secure-by-Default Runtime

Bun — The Speed-First Runtime

Environment Detection — Writing Code That Runs Anywhere

The Web Platform API Convergence

Choosing a Runtime

What You Have Learned