Learning overview
- Estimated time
- 4 minutes
- Difficulty
- Beginner
- Prerequisites
- No prior experience required
- Learning outcome
- Explain javascript using a clear mental model · Apply javascript in practical JavaScript work
- Last updated
- July 18, 2026
Values and bindings
Use const for bindings that are not reassigned and let for intentional reassignment. Use nullish coalescing when zero, false, and empty strings are valid values.
const course = { title: "JavaScript", lessons: 24 };
let completed = 0;
completed += 1;
const displayName = user.name ?? "Anonymous";
const isReady = completed >= course.lessons;Arrays and objects
Map transforms, filter selects, find returns one matching item, some and every answer predicates, and reduce combines values. Spread creates shallow copies.
const lessons = [
{ id: 1, title: "Variables", complete: true },
{ id: 2, title: "Arrays", complete: false },
];
const titles = lessons.map(({ title }) => title);
const remaining = lessons.filter((lesson) => !lesson.complete);
const updated = lessons.map((lesson) =>
lesson.id === 2 ? { ...lesson, complete: true } : lesson
);Functions and modules
Prefer explicit inputs and return values. Use named functions for important domain operations and modules to separate public interfaces from implementation details.
export function completionPercent(completed, total) {
if (total <= 0) return 0;
return Math.round((completed / total) * 100);
}
export default function formatProgress(value) {
return `${value}% complete`;
}DOM and events
Query once when possible, listen for semantic events, validate event targets, and render untrusted strings with textContent.
const form = document.querySelector("#search-form");
const output = document.querySelector("#result");
form.addEventListener("submit", (event) => {
event.preventDefault();
const query = new FormData(form).get("query")?.toString().trim();
output.textContent = query ? `Searching for ${query}` : "Enter a search term";
});Promises, async, and errors
Check HTTP status explicitly, preserve useful error context, and model failure in the interface. Use Promise.all for independent work that should fail together.
async function loadCourse(id, signal) {
const response = await fetch(`/api/courses/${encodeURIComponent(id)}`, { signal });
if (!response.ok) {
throw new Error(`Course request failed: ${response.status}`);
}
return response.json();
}
try {
const course = await loadCourse("javascript", controller.signal);
renderCourse(course);
} catch (error) {
if (error.name !== "AbortError") renderError(error);
}Debugging checklist
Reproduce the failure with the smallest input, inspect types and state transitions, pause at the first wrong value, and distinguish network, parsing, domain, and rendering failures.
- Read the first relevant stack frame
- Check value and type together
- Use breakpoints instead of adding many logs
- Inspect network status and response payload
- Test rejected promises and empty data
- Write a regression test before closing the bug
Frequently asked questions
Does this JavaScript cheatsheet include every API?
No. It focuses on transferable language and browser patterns. Use standards-based documentation for complete API signatures and compatibility.
Should I use map or forEach?
Use map when you need a new array of transformed values. Use forEach for deliberate side effects when no returned collection is needed.
Topic graph
A taxonomy-generated path through this subject.
Related courses
Related learning
Recommended automatically from shared technologies, topics, intent, and difficulty.
Related Guides
Related Tutorials
Related Glossary
Related Cheatsheets
Related Projects
Related Interview Questions
Related reading
Hand-picked companion pages that deepen this topic.
Your next steps