JavaScript & TypeScript
Same element, different language. Nothing on this page
loads Pyodide — open the network tab and you will not see an 11MB
download, because no widget here asked for Python.
JavaScript
No runtime to fetch at all: the engine is already in the browser.
console.log is captured, and a trailing expression prints
its value like a REPL.
const people = [
{ name: "Ada", born: 1815 },
{ name: "Alan", born: 1912 },
];
for (const p of people) {
console.log(`${p.name} was born in ${p.born}`);
}
people.map((p) => p.name).join(" & ")
TypeScript
Types are stripped by a transform fetched on first use — nothing is
bundled for it, and a page that never runs TypeScript never downloads
it. Types are erased, not checked: this runs your code, it is not a
type-checker.
type Shape =
| { kind: "circle"; r: number }
| { kind: "rect"; w: number; h: number };
const area = (s: Shape): number =>
s.kind === "circle" ? Math.PI * s.r ** 2 : s.w * s.h;
const shapes: Shape[] = [
{ kind: "circle", r: 1 },
{ kind: "rect", w: 2, h: 3 },
];
shapes.map(area).map((n) => n.toFixed(2))
Several files, real imports
Relative imports resolve against the widget's own files — including
export default, re-exports, cycles and .json
data — and stack traces name the file and line you are looking at. Each
tab is highlighted by its own extension: the JSON file is JSON, not
JavaScript.
import { formatRow } from "./table.js";
import inventory from "./data.json";
for (const item of inventory) {
console.log(formatRow(item));
}
console.log("total:", inventory.reduce((n, i) => n + i.qty, 0));
export function formatRow({ item, qty }) {
return `${item.padEnd(10)}${String(qty).padStart(4)}`;
}
[
{ "item": "bolts", "qty": 120 },
{ "item": "nuts", "qty": 340 },
{ "item": "washers", "qty": 75 }
]
Reading input
input() is provided as a global and returns a promise, so
await works at the top level — the same blocking prompt the
Python widgets use.
const name = await input("your name? ");
const n = Number(await input("a number? "));
console.log(`${name}, your number squared is ${n * n}`);
Errors point at your code
function parseAge(value: string): number {
const n = Number(value);
if (Number.isNaN(n)) throw new TypeError(`not a number: ${value}`);
return n;
}
parseAge("thirty");
All the widgets on this page share one Worker, exactly as the Python
ones do — and the JavaScript worker is a different worker from the
Python one, so neither language pays for the other.