One page
JavaScript cheat sheet
What to keep at hand. If a line is not clear, go back to the matching lesson in the course.
Open the course: JavaScript EssentialsValues
| What | How |
|---|---|
| Declare | const total = 0; let count = 0; |
| Check the type | typeof value // "string" | "number" | ... |
| An array is an array | Array.isArray(value) |
| Empty on purpose | value === null |
| No value | value === undefined |
| Strict equality | a === b // no type coercion |
Strings and numbers
| What | How |
|---|---|
| Build text | `${item}: ${qty} pcs.` |
| Trim spaces | raw.trim() |
| Split and join | text.split(" ") parts.join(", ") |
| Part of a string | text.slice(0, 3) |
| Leading zero | String(5).padStart(2, "0") // "05" |
| String to number | Number("42") parseInt("42px", 10) |
| Round for display | value.toFixed(2) // a string |
| Catch NaN | Number.isNaN(value) |
Arrays
| What | How |
|---|---|
| Last | items.at(-1) |
| Transform | items.map((item) => item.title) |
| Filter | items.filter((item) => item.price > 200) |
| Find one | items.find((item) => item.id === id) |
| Fold into a number | items.reduce((sum, n) => sum + n, 0) |
| Copy | [...items] items.slice() |
| Sorting numbers | [...items].sort((a, b) => a - b) |
| No duplicates | [...new Set(items)] |
Objects
| What | How |
|---|---|
| A key from a variable | user[field] |
| Unpack | const { id, city } = user; |
| In parameters | function label({ id, city }) {} |
| A copy with a change | { ...user, city: "Paris" } |
| Keys and pairs | Object.keys(obj) Object.entries(obj) |
| Safely deep | order.customer?.city ?? "none" |
DOM, events, promises
| What | How |
|---|---|
| Find | document.querySelector("#total") |
| Find all | document.querySelectorAll(".row") |
| Text | el.textContent = "1450 ₽" |
| Classes | el.classList.toggle("is-open") |
| Create and insert | list.appendChild(document.createElement("li")) |
| Subscribe | btn.addEventListener("click", handler) |
| Form | event.preventDefault(); field.value.trim() |
| Wait for it | const data = await load(); |