Command Palette

Search for a command to run...

Hectal
PHASE 0Beginner ~20 min· topic 1 of 4

Topic 0.1

What JavaScript Is and Where It Runs

In one line

JavaScript is the programming language of the web: an engine inside your browser (or inside Node.js on a server) reads your code and runs it, and the language itself is defined by a yearly standard called ECMAScript.

0/4 · 0%

Think of it like this

A recipe and a cook. The recipe is your JavaScript code: step-by-step instructions written down. The cook is the engine, the part of the browser that reads the recipe and actually does the steps. The kitchen is where the cooking happens: a browser kitchen has a page to work on, while a Node.js kitchen has files and a network instead. The recipe language is the same in both kitchens; the tools on the counter are different.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

Programming language
A way to write step-by-step instructions that a computer can follow.
JavaScript engine
The program that reads JavaScript and runs it, like V8 in Chrome or SpiderMonkey in Firefox.
Parse
Read code and check its grammar, turning the text into a structure the engine can work with.
JIT compilation
Just-In-Time: turning often-used code into fast machine code while the program is already running.
Host environment
The place JavaScript runs (a browser or Node.js), which adds its own tools like document or files.
Node.js
A program that runs JavaScript outside the browser, used for servers and command-line tools.
ECMAScript
The official standard that defines the JavaScript language. ES2015, ES2020 and so on are its editions.
TC39
The committee of browser makers and other companies that decides what goes into each ECMAScript edition.

Step by step

01You write some code

Code is plain text. Here is a tiny program: it adds two numbers and prints the answer. On its own, this text does nothing; it needs an engine to run it.

app.jswhole filejavascript
const price = 40;
const quantity = 3;
console.log("Total:", price * quantity);

02The engine parses it

The engine reads the whole script first and checks the grammar. If one character is wrong (say a missing bracket), it reports a SyntaxError and runs none of the script, not even the lines before the mistake.

If the grammar is fine, it builds a tree of the code called an AST (Abstract Syntax Tree): "a constant named price, set to 40" and so on.

03It runs, then speeds up

The engine turns the tree into bytecode and an interpreter starts running it straight away. Code that runs many times gets handed to an optimising compiler, which produces fast machine code. In V8 the interpreter is called Ignition and the top compiler TurboFan.

It runs, then speeds updiagram
Rendering diagram…

04The host adds the tools

console.log printed the total. In a browser that line appears in DevTools; in Node.js it appears in your terminal. The same three lines run in both, because they only use the language and console, which both hosts provide.

Ask for document in Node.js, though, and you get an error: Node has no page. Ask for process in a browser and you get an error too.

terminal
$ node app.js
── expected output ──
Total: 120

05Check what your browser supports

Instead of asking "which ECMAScript version is this?" (no browser reports that), professionals check for the feature itself. For example, typeof [].at === "function" tells you whether the ES2022 at() method exists. This is called feature detection.

Try it yourself

  1. 1

    Change the numbers

    In the first example, predict the total if quantity is 5. Change it, press Run and check the console and the page.

  2. 2

    Ask about something that doesn't exist

    In the second example, add console.log("require:", typeof require);. Predict first: require is a Node.js tool for loading files. What does a browser say?

  3. 3

    Look at your own engine

    Open DevTools on any page (F12), go to the Console and type navigator.userAgent. The text mentions your browser. Chrome and Edge both say Chrome, because they share the V8 engine and the Blink renderer.

Code & diagrams

JavaScript running in this page New tab

The engine ran the JavaScript tab: it changed the paragraph and printed to the console.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

Total: 120
Browser or Node.js? Ask the host New tab

`typeof` tells you whether something exists without causing an error. Run the same lines in Node.js and `window` and `document` become `undefined`, while `process` is an object.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

window: object
document: object
process: undefined
globalThis is window here? true
Feature detection: test the feature, not the version New tab

Every current browser prints true four times. An old browser would print false for features it lacks, and your code could fall back to another way.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

Array at() (ES2022) true
Array toSorted() (ES2023) true
Object.groupBy (ES2024) true
structuredClone (browser API) true

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

Use a browser tool where there is no browser

Save console.log(document.title); as page.js and run node page.js in a terminal.

terminal
$ node page.js
── what you'll see ──
ReferenceError: document is not defined

Break #2

One typo stops the whole script

In the first example, delete the closing ) at the end of the console.log line and press Run.

terminal
$ Console
── what you'll see ──
Uncaught SyntaxError: missing ) after argument list

Myth vs fact

Myth

Java and JavaScript are the same language, or related.

Fact

They are different languages made by different people. The name "JavaScript" was a 1995 marketing choice, because Java was popular then. (Hectal teaches Java in its own /java course.)

Myth

JavaScript only runs in browsers.

Fact

Node.js, Deno and Bun run it on servers and laptops; it also runs in desktop apps, phone apps and even databases. The browser is just the most common host.

Myth

JavaScript is slow because it's interpreted.

Fact

Modern engines compile hot code to machine code while it runs (JIT). For most tasks JavaScript is fast; slow pages are usually caused by too much code or too much work on the page, not by the language.

Myth

ES6 is the latest JavaScript.

Fact

ES6 (ES2015) was a big update, but a new edition has come out every year since. Today's browsers support features up to the latest editions.

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

  • ▸

    V8's pipeline today has four tiers: Ignition (interpreter), Sparkplug (a fast baseline compiler), Maglev (a mid-tier optimiser) and TurboFan (the top optimiser). Optimised code relies on guesses about types; if your code breaks a guess (a function that always got numbers suddenly gets a string), the engine deoptimises back to bytecode. Keeping types stable keeps code fast.

  • ▸

    A proposal goes through TC39 stages 0 to 4. Stage 4 means it is finished, shipped in at least two engines and goes into the next June edition. Browsers often ship features at stage 3, before the edition that officially contains them.

  • ▸

    The host defines the event loop (how timers, clicks and network replies are queued and run). The browser's comes from the HTML standard; Node's comes from a library called libuv. That's why some timing details differ between them. You'll study it in depth later in this course.

  • ▸

    globalThis (ES2020) is the one name for the global object in every host: window in a page, self in a web worker, global in Node.js. Use it in code meant to run anywhere.

Remember this

  1. 1

    JavaScript is a programming language: a way to write instructions that a computer follows, one after another. HTML says what is on a page and CSS says how it looks (see Hectal's /html and /css courses). JavaScript makes the page do things: react to a click, check a form, change text, fetch new data, remember a setting. It was created in 1995 at Netscape by Brendan Eich, in about ten days, and it is now built into every web browser.

  2. 2

    A computer can't run your text directly. A program called a JavaScript engine does it: it reads your code, turns it into instructions the processor understands, and runs them. The main engines are V8 (in Chrome, Edge, Opera, and in Node.js and Deno), SpiderMonkey (in Firefox) and JavaScriptCore (in Safari, and in Bun). They all follow the same rulebook, so the same code gives the same result in each.

  3. 3

    Modern engines are fast because of JIT compilation (Just-In-Time). The engine first parses your code (checks the grammar and builds a tree of it), turns it into simple bytecode, and starts running that with an interpreter right away. While it runs, the engine watches which functions are used a lot ("hot" code) and compiles those into fast machine code in the background. That's why JavaScript starts quickly and still gets fast on heavy work.

  4. 4

    The engine is only the cook. The host is the kitchen around it, and it provides the extra tools. In a browser, the host gives you window, document (the page), fetch (talk to servers), timers and localStorage. In Node.js, a program that runs JavaScript outside the browser (on servers and your own computer, created in 2009), the host gives you process, the file system and network servers instead, but no document, because there is no page. The language part (if, loops, functions, arrays) is the same everywhere.

  5. 5

    The official name of the language standard is ECMAScript, published by a standards group called Ecma International; the committee that designs it is TC39. Browsers then implement that standard. Key editions: ES5 (2009) and the huge ES2015 update, also called ES6 (which added let, const, arrow functions, classes, promises and modules). Since 2015 a new edition comes out every June, named by year: ES2016, ES2017 (async/await), ES2020 (??, ?.), ES2022, and so on. On Hectal, lessons tag newer features like this: since: ES2015.

  6. 6

    JavaScript keeps backward compatibility: a rule called "don't break the web" means new editions almost never change what old code does. Code written in 1999 still runs in a 2026 browser. That's why some old mistakes in the language (like typeof null being "object", which you'll meet in Phase 1) can never be fixed, only avoided.

Explain it without notes

01

What is a JavaScript engine, and can you name three?

02

What is the difference between the JavaScript language and the browser it runs in?

03

What is ECMAScript, and how are its versions named?

04

Why does a single syntax error stop a whole script, while a runtime error only stops it partway?

Practice

01

In the second example, add a line that prints whether fetch exists, labelled fetch:. What does it print here, and what would old Node.js (before version 18) print?

02

Write two lines that print the ECMAScript edition that introduced let/const and the one that introduced async/await, each as a sentence.

Trade-offs

  • ↔

    Using the newest language features gives shorter, clearer code; supporting very old browsers then needs a build step that rewrites it into older syntax (a transpiler such as Babel or TypeScript), which adds tooling and bundle size.

  • ↔

    Code that uses only the language (no document, no process) runs in every host and is easy to test; code that touches the page or the file system is tied to one host.

Done when you can

  • I can explain what a JavaScript engine does and name V8, SpiderMonkey and JavaScriptCore.

  • I can say which things come from the language and which from the browser or Node.js.

  • I know what ECMAScript, ES2015 and TC39 mean.

  • I can use typeof to check whether a feature exists.

  • I know a syntax error stops the whole script from running.