⚙️ JavaScript Execution Environment

What Is an Execution Environment?

An execution environment is the "world" your JavaScript lives in. The core language — variables, functions, loops, objects — is defined by ECMAScript and is identical everywhere. But the language on its own can't open a file, draw on the screen, or make a network request. Those powers come from the environment wrapped around the engine.

💡 Same skills, different fields. A tennis player uses the same strokes on clay, grass, and hard courts, but adapts to each surface. JavaScript keeps its syntax everywhere, but the browser and Node.js give it very different surfaces to play on.

The two environments you'll meet constantly are the browser and Node.js. Each hands JavaScript a different toolbox:

The Browser Environment

The browser is JavaScript's original home. Here the global object is window, and the browser exposes a rich set of Web APIs for interacting with the page and the device.

• window — the global object representing the browser tab; global variables and functions hang off it.
• DOM (Document Object Model) — a live, tree-shaped representation of the HTML that JavaScript can read and change.
• Web APIs — fetch for network requests, localStorage for storage, geolocation, canvas, audio, notifications, and more.

// In the browser, the global object is window
window.location.href;          // the current URL
window.localStorage;           // key/value storage API

// Feature-detect before using an API
if ('localStorage' in window) {
  localStorage.setItem('theme', 'dark');
} else {
  console.log('This browser has no localStorage');
}

The DOM as a tree

The DOM turns your HTML into a tree of nodes. JavaScript walks and edits that tree to build interactive pages.

// Read and change the DOM
const heading = document.querySelector('h1');
heading.textContent = 'Updated by JavaScript';

// Create and insert a new element
const note = document.createElement('p');
note.textContent = 'Added at runtime';
document.body.appendChild(note);

// React to user input
document.querySelector('button')?.addEventListener('click', () => {
  console.log('Button clicked!');
});

The Node.js Environment

Node.js (Ryan Dahl, 2009) took Chrome's V8 engine out of the browser and paired it with system-level APIs, so JavaScript could run on servers and command-line tools. There is no window and no DOM here — instead you get access to the machine.

• global — the global object, in place of window.
• fs — read and write files.
• http / https — create web servers and clients.
• process — details about the running process (version, platform, environment variables).
• npm — a registry of millions of installable packages.

A minimal web server in Node.js:

// server.js — a bare-bones HTTP server
const http = require('http');

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World\n');
});

server.listen(3000, '127.0.0.1', () => {
  console.log('Server running at http://127.0.0.1:3000/');
});

💡 Tour guide vs. general contractor. Browser JavaScript is like a tour guide who knows one museum (the page) inside out and helps visitors interact with it. Node.js JavaScript is like a general contractor who can build whole structures and manage utilities. Same language, very different jobs.

Browser vs. Node.js

The language is the same; the surroundings differ. This table captures the differences you'll hit most often.

globalThis is worth remembering: it's the standardized name for the global object that works in every environment, so you no longer have to guess between window and global. (And note that fetch is now built into modern Node.js too, so that gap has narrowed.)

Writing environment-aware code

Some code runs in both places — this is called isomorphic or universal JavaScript, and frameworks like Next.js and Nuxt rely on it. You branch on what's available:

async function loadProduct(id) {
  if (typeof window === 'undefined') {
    // Server (Node.js): talk to the database directly
    const db = require('./database');
    return db.query('SELECT * FROM products WHERE id = ?', [id]);
  } else {
    // Client (browser): call our own API
    const response = await fetch(`/api/products/${id}`);
    return response.json();
  }
}

Inside the Runtime

Whichever environment you're in, a JavaScript engine does the actual work of parsing and running your code. The famous ones are V8 (Chrome, Node.js), SpiderMonkey (Firefox), and JavaScriptCore (Safari).

The call stack

JavaScript is single-threaded: it does exactly one thing at a time, tracked by the call stack. Calling a function pushes a frame on top; returning pops it off. The last function pushed is the first to finish — last in, first out, like a stack of plates.

function first() {
  console.log('first: start');
  second();
  console.log('first: end');
}
function second() {
  console.log('second: start');
  third();
  console.log('second: end');
}
function third() {
  console.log('third');
}

first();
// first: start
// second: start
// third
// second: end
// first: end

The Event Loop

If JavaScript can only do one thing at a time, how does it fetch data or wait for a timer without freezing? The answer is the event loop. Slow operations are handed off to the environment's APIs; when they finish, their callbacks wait in a queue. The event loop moves a waiting callback onto the call stack only once the stack is empty.

console.log('First');

setTimeout(() => {
  console.log('Second — after the delay');
}, 2000);

console.log('Third');

// Output:
// First
// Third
// Second — after the delay

Microtasks jump the line

There are actually two queues. Promise callbacks go on the microtask queue, and the event loop empties all microtasks before touching the ordinary callback (macrotask) queue used by timers. That's why promises resolve ahead of a setTimeout(..., 0):

console.log('Start');

setTimeout(() => console.log('Timeout'), 0); // macrotask

Promise.resolve().then(() => console.log('Promise')); // microtask

console.log('End');

// Output:
// Start
// End
// Promise   ← microtasks run before timers
// Timeout

Hands-on Exercise

console.log('1');

setTimeout(() => console.log('2'), 0);

Promise.resolve()
  .then(() => console.log('3'))
  .then(() => console.log('4'));

console.log('5');

1
5
3
4
2

Summary & Quiz

📚 Further Reading

• MDN — The event loop
• Node.js — The event loop, timers, and process.nextTick
• MDN — Web API reference

🚀 What's Next?

You now know where JavaScript runs and how it schedules work. Next you'll get hands-on with the single most useful tool for exploring all of this live — the browser console.