How does JavaScript run?

JavaScript in brief

JavaScript follows a standard named ECMAScript. A committee, TC39, adds a new edition every year: that is what “ES6” or “ES2022” means in a tutorial or a config file.

Three traits to know:

• Dynamically typed.

  A variable has no type; its value does. People often say “untyped”.

  the language · same in every engine

  let score = 10;    // a number
  score = 'ten';     // now a string: allowed

• Object-oriented, through prototypes.

  An object can inherit straight from another object. The class keyword is built on this.

  const animal = { breathes: true };
  const cat = Object.create(animal);
  cat.breathes;      // true, found on animal

• Functions are values.

  Store a function in a variable, pass it, return it.

  const greet = (name) => 'Hi ' + name;
  // greet is passed to map like any value
  ['Sara', 'Ali'].map(greet); // ['Hi Sara', 'Hi Ali']

Why an engine?

Your processor runs only machine code; your file is text. The engine bridges the two.

1. Read: parse the whole file and check the syntax (one syntax error, and no line runs), then turn it into bytecode: short, simple instructions.
2. Interpret: the interpreter runs them at once; your program starts fast.
3. Count the calls: a function that runs often becomes “hot”.
4. Compile what is hot: the optimising compiler turns that function into machine code. JavaScript declares no types, so it bets on what it saw: “this function always gets numbers”.
5. Undo if the bet fails: a string arrives? Drop that machine code, back to the interpreter (deoptimisation). The engine changes the speed, never what your code computes.

Interpreted or compiled? Both, while the program runs: that is just-in-time (JIT) compilation.

Engines and their environments

Each browser ships an engine: V8 in Chrome and Edge, SpiderMonkey in Firefox, JavaScriptCore in Safari. Edge used Microsoft’s own engine, Chakra, until 2020.

An engine never works alone: a program carries it and gives it an environment, the extra things your code can use beyond the language, such as the page or the files. Outside the browser:

• Node.js is a runtime environment built on V8, with its own tools, such as fs and process.
• React Native apps (phone apps written in JavaScript) run on Hermes, an engine Meta built for phones. Hermes turns your JavaScript into bytecode ahead of time, when the app is built for release, so the app starts faster.
• VS Code is built with Electron, which packs a browser and Node.js into one app: your editor itself runs on V8.

The core does not change

The language is the same everywhere: variables, arrow functions, promises and objects behave alike in every recent browser and Node.js, because every engine implements ECMAScript.

What changes is what the environment adds:

• a browser adds the page: document, window, clicks;
• Node.js adds the machine: fs for files, process for the running program.

Code works here and breaks there? Ask first: the language, or the environment?

Try it

console.log('Hello');

Web Playground · Console panelHello

Node.js Playground · Console tabStarting Node.js… (the first run takes a few seconds)
▶ node index.js
Hello
✓ Finished (code 0)

console.log(document);

Web Playground · Console panel#document

Node.js Playground · Console tabReferenceError: document is not defined
✗ Crashed (code 1) — the error is above