TodayTools

JavaScript flashcards

The language of the web: values, async code, the event loop and the modern features that remove whole libraries.

Donate
Beginner friendly, starts from zero
Section
How to study
0
JavaScriptStart from zero · 1 of 12

What is JavaScript, in one plain sentence?

JavaScript is the programming language that makes web pages do things: react to clicks, check forms and change what you see without reloading.

HTML is the bones, CSS is the clothes, JavaScript is the muscles.

All topics

JavaScript at a glance

JavaScript is the programming language that makes web pages react to you.

If a web page is a body, HTML is the bones, CSS is the clothes and JavaScript is the muscles that make it move.

Words you will meet

Browser
The app you open websites in, which also runs JavaScript
Console
A panel in the browser where you type code and see messages
Variable
A named box that holds a value
String
A piece of text, written inside quotes
Array
A list of values in square brackets
Object
A group of labelled values in curly brackets
Function
A named set of steps you can run again and again
Event
Something that happens on the page, like a click or a key press

The steps

  1. 1. Start from zero (12 cards): What JavaScript is, where you meet it, your first line of code, and the plain words the core basics use.
  2. 2. Core basics (16 cards): Values, types, comparisons, functions, arrays, objects and your first event handler.
  3. 3. Next steps (16 cards): Array methods, destructuring, async and error handling, modules, closures, this and immutable updates.
  4. 4. Go deeper (17 cards): Event loop, prototypes, scope rules, iterators, ES2025 and ES2026 features, cancellation, memory and threads.
All 12 cards in Start from zero
What is JavaScript, in one plain sentence?
JavaScript is the programming language that makes web pages do things: react to clicks, check forms and change what you see without reloading.
What were web pages like before JavaScript?
Like printed posters. Every click loaded a whole new page, and a form only told you about a mistake after you sent it and waited.
Where do you meet JavaScript in daily life?
A like button that turns red at once, a form saying "password too short" as you type, a map you drag with your finger, a chat that shows new messages. All JavaScript.
What are the browser, the engine and the console?
The browser is the app you open websites in. Inside it, an engine runs JavaScript. The console is a panel in the browser's DevTools where you type code and see messages; press F12 to open it.
What does your first line of JavaScript do?
console.log prints a message in the console, and the text in quotes is the message. Text in quotes is called a string.
What is a variable?
A variable is a named box that holds a value. let makes a box you can refill later; const makes one you will not point at a new value.
What kinds of values does JavaScript have?
Strings (text in quotes), numbers, booleans (true or false), null and undefined (empty), arrays (a list in [ ]) and objects (labelled values in { }).
What is a function?
A function is a named set of steps you can run again and again. You pass it input inside brackets and it can return an answer. A callback is a function you hand over to be run later.
What is an event?
An event is something that happens on the page, like a click or a key press. An event listener is code that waits for that event and runs when it happens.
How does JavaScript get onto a page, and can it run anywhere else?
An HTML <script> tag loads it into the page. It also runs on servers (the computers that send pages and data to you) using Node.
What do you need before starting?
Just a browser and a text editor. Nothing to install: you can even start by typing into the browser console.
What will you be able to do after this topic?
Store and change data in variables, write functions, make decisions with if, loop over lists, react to clicks, and find bugs with the console.
JavaScript cheatsheet

Arrays

  • arr.filter(fn).map(fn) Keep, then reshape
  • arr.reduce((acc, x) => acc + x, 0) Fold to one value, always seed it
  • arr.toSorted((a, b) => a - b) Sorted copy, numbers
  • arr.with(i, value) Copy with one item replaced
  • arr.at(-1) Last item
  • arr.findLast(fn) Search from the end
  • Object.groupBy(arr, fn) Group into an object of arrays
  • [...new Set(arr)] Unique values

Objects and values

  • const { a, b: alias = 1, ...rest } = obj Destructure, rename, default, rest
  • { ...obj, key: value } Shallow copy with update
  • obj?.a?.b ?? fallback Safe read with default
  • Object.hasOwn(obj, key) Own property check
  • Object.entries(obj) Array of [key, value]
  • Object.fromEntries(map) Map or pairs back to object
  • structuredClone(value) Deep copy with Dates, Maps, cycles

Async

  • await Promise.all(list.map(fn)) Parallel, fail fast
  • Promise.allSettled(ps) Parallel, keep every result
  • Promise.any(ps) First success
  • Promise.withResolvers() Promise plus resolve and reject
  • AbortSignal.timeout(5000) Cancel after 5 s
  • AbortSignal.any([a, b]) Cancel on either signal
  • for await (const x of stream) Consume async iterables

DOM

  • el.addEventListener("click", fn, { signal }) Listener removable by abort
  • e.target.closest("[data-id]") Event delegation
  • el.dataset.orderId Read data-order-id
  • el.textContent = text Safe text insert
  • el.append(...nodes) Insert nodes or strings
  • new IntersectionObserver(cb) React to elements entering view
  • requestAnimationFrame(fn) Run before the next paint

Built-ins worth knowing

  • new Intl.NumberFormat(locale, { style: "currency", currency }) Money display
  • new Intl.RelativeTimeFormat("en").format(-3, "day") "3 days ago"
  • crypto.randomUUID() Random v4 id
  • new URL(path, base).searchParams Parse and build query strings
  • Math.sumPrecise(nums) Exact float sum (ES2026)
  • bytes.toBase64() / Uint8Array.fromBase64(s) Base64 without btoa (ES2026)
  • set.difference(other) Set maths (ES2025)
Donate