JavaScript Guide
About this guide
This is a complete 11-chapter guide that teaches the fundamentals of JavaScript systematically, from variables to browser manipulation and asynchronous processing. Each chapter comes with code examples and beginner-friendly explanations so that even people new to programming can follow along.
- From the basics, in order: Starting with variables and data types, you learn in a continuous flow through functions → objects → browser manipulation → asynchronous processing.
- Code-example focused: Every code block has comments showing the result, so you can follow "what happens" with your eyes.
- Beginner-friendly explanations: At key points in each chapter,
:::tipnotes add context and address common stumbling blocks ahead of time. - Modern syntax: Covers today's mainstream notation, including arrow functions, destructuring, the spread syntax, async/await, optional chaining (
?.), and the nullish coalescing operator (??).
Structure of the guide
Overview of the 11 chapters
| Chapter | Theme | Overview |
|---|---|---|
| Variables and constants | Containers for data | The difference between let / const / var, scope, hoisting, and the TDZ |
| Data types | Kinds of values | The 7 primitive types and reference types, typeof, Array.isArray() |
| Conditionals | Branching | if / the ternary operator / switch, truthy and falsy, the nullish coalescing operator ?? |
| Loops | Repetition | Choosing between for / while / for...of / for...in |
| Functions | Reusable blocks | Function declarations / function expressions / arrow functions, this, default and rest parameters |
| Objects | Structuring data | Literals, destructuring, the spread syntax, optional chaining ?. |
| Arrays | Ordered collections | Basic operations and higher-order functions (map / filter / reduce), Array.at() |
| DOM manipulation | Driving HTML | Getting, manipulating, and creating elements; choosing between textContent and innerHTML |
| Event handling | Reacting to user actions | Registering listeners, event propagation, event delegation |
| Asynchronous processing | Writing code that waits | Callbacks → Promises → async/await, Promise.allSettled |
| Best practices | Toward good code | Naming conventions, structuring, error handling, modules, debugging |
How to read this guide
- If you are learning for the first time: Read in order starting from Variables and constants, and actually write and run the code as you go.
- If you have already learned the basics: It's fine to jump straight to topics that interest you from the table and read selectively.
- If you only want browser manipulation: We recommend the flow DOM manipulation → Event handling → Asynchronous processing.
Each code example is independent per block. When you try them in something like the browser console, run them one block at a time. Some places reuse the same variable name (such as const user) across different blocks, so pasting them all together can cause an Identifier 'x' has already been declared error.
Where this guide fits
This guide focuses on the fundamentals of the JavaScript language itself. Because all of the other structured learning guides on this site assume knowledge of JavaScript, this guide serves as their entry point.
- TypeScript Guide — Add types to JavaScript to write it safely. The "JS basics" in this guide are a prerequisite.
- Clean Code — Design standards that raise the quality of the code you can now write.
The intended path is to solidify the fundamentals of JavaScript with this guide, pick up types with the TypeScript Guide, and raise quality with Clean Code.
Helpful resources
These are standard resources for deepening your study.
- MDN Web Docs (JavaScript) — The most reliable official reference
- JavaScript Primer — A comprehensive introductory book written in Japanese (free)
- JavaScript.info — A site that organizes everything from basics to advanced topics systematically
Now let's get started with Variables and constants.