A compact reference for what the course teaches. For details, follow the links.
Variables and types
| Task | Code |
|---|---|
| Constant / changing value | const x = 1; / let y = 2; (let and const) |
| Types | string, number, bigint, boolean, undefined, null, symbol, object |
| Check type | typeof x, Array.isArray(x) |
| Default if null or undefined | x ?? "default" (??) |
| Safe property access | user?.address?.city (?.) |
| Strict equality | a === b (equality) |
Strings
| Task | Code |
|---|---|
| Template literal | text between backticks with ${name} placeholders (template literals) |
| Search | s.includes("a"), s.startsWith("a"), s.indexOf("a") |
| Cut | s.slice(0, 3), s.trim(), s.padStart(5, "0") |
| Replace and split | s.replaceAll("a", "b"), s.split(",") |
Arrays
| Task | Code |
|---|---|
| Add / remove at end | push(x) / pop() |
| Transform | map(fn) (map) |
| Keep some | filter(fn) (filter) |
| Combine to one value | reduce(fn, start) (reduce) |
| Find | find(fn), findIndex(fn), includes(x), some(fn), every(fn) |
| Sort a copy | [...a].sort((x, y) => x - y) or a.toSorted(...) |
| Copy / merge | [...a], [...a, ...b] |
| Unpack | const [first, ...rest] = list |
Objects
| Task | Code |
|---|---|
| Keys, values, entries | Object.keys(o), Object.values(o), Object.entries(o) |
| Copy / merge | { ...a, ...b } (spread) |
| Unpack | const { name, age = 18 } = user |
| Has own property | Object.hasOwn(o, "key") |
| Deep copy | structuredClone(o) |
Functions
| Task | Code |
|---|---|
| Arrow function | const add = (a, b) => a + b; (arrows) |
| Default / rest | function f(a = 1, ...rest) {} |
| Callback | items.forEach(item => ...) |
| Closure | a function that remembers outer variables (closures) |
DOM and events
| Task | Code |
|---|---|
| Select | document.querySelector(".x"), querySelectorAll(".x") (selecting) |
| Text / HTML | el.textContent = "..." (safe), el.innerHTML (careful) |
| Classes | el.classList.add("a"), .toggle("a") (classList) |
| Create and add | document.createElement("li"), parent.append(el) |
| Listen | el.addEventListener("click", fn) (addEventListener) |
| Delegate | list.addEventListener("click", e => e.target.closest("li")) (delegation) |
| Stop default | event.preventDefault() |
| Data attributes | el.dataset.id |
Async and fetch
script.js
JS
const wait = ms => new Promise(r => setTimeout(r, ms));
async function load(url) {
try {
const response = await fetch(url);
if (!response.ok) throw new Error("HTTP " + response.status);
return await response.json();
} catch (error) {
console.error(error);
return null;
}
}| Task | Code |
|---|---|
| All must succeed | await Promise.all([a(), b()]) (Promise.all) |
| Handle each result | await Promise.allSettled([...]) |
| Cancel / timeout | AbortController, AbortSignal.timeout(ms) (abort) |
JSON and storage
| Task | Code |
|---|---|
| Object to text / back | JSON.stringify(o) / JSON.parse(text) (JSON) |
| Save / read | localStorage.setItem(k, v) / getItem(k) (storage) |
Errors
script.js
JS
try { risky(); } catch (error) { console.error(error.message); } finally { cleanUp(); }
throw new Error("Something went wrong");Modules
script.js
JS
export const PI = 3.14;
export default class Logger {}
import Logger, { PI } from "./lib.js";
const module = await import("./lazy.js");Where to look things up
MDN Web Docs is the best reference for every method, with compatibility tables. The lessons in this course explain the ideas, and MDN gives the complete details.