Using the JavaScript Playground
The playground/ folder is a ready-made Node project for practising: type the examples, solve the exercises, run them with node, and test them with node --test. This page shows how to set it up once and how to work in it every day.
You will learn
- What the playground contains and why it uses ES modules.
- How to install Node 26, open the folder, and run files.
- The everyday loop: create, run, experiment in the REPL, test.
- Which chapter adds which files, and how they lead to the Chapter 16 project.
- How to compare with the reference solution and fix common problems.
What is the playground?
A small Node project, published as its own repository on GitHub: coder-hop/js-book-playground. Your copy is the playground/ folder:
Because package.json says "type": "module", every .js file you create is an ES module: import/export and top-level await work, and strict mode is on (Chapters 1 and 14). Nothing needs npm install; every exercise uses only built-in features.
One-time setup
1. Get the playground
Clone the repository (or use Code → Download ZIP on the repository page):
The final playground argument names the folder playground/, so every path in this book (playground/hello.js, playground/reference/) matches your copy exactly.
2. Install Node 26 (LTS)
Get it from nodejs.org or a version manager (fnm install 26; see Appendix B). Node 24 works for almost everything, but Temporal and a few ES2025/2026 features need 26.
3. Open the folder
- VS Code understands JavaScript out of the box. Optionally install ESLint and Prettier.
- Add
// @ts-checkat the top of a file to get type checking from JSDoc comments (Appendix B).
4. Check that it works
The everyday loop
- Create the file the exercise names, such as
types.js. - Run it:
node types.js. Usenode --watch types.jsto re-run on every save. - Experiment in the REPL. Start
nodein the playground folder and import your module dynamically:
- Compare with the exercise's Show solution only after you have something running. Different-but-working is fine; read the "why" note.
- Test anything you'll reuse. A file named
something.test.jsis picked up bynpm test:
💡 Read errors from the top line and the first stack frame in your file. Node prints the error type and message first, then the stack, so look for your file name in the stack lines.
What each chapter adds
| Chapter | Files you create in playground/ |
|---|---|
| 1 | hello.js, features.js, env-report.js |
| 2 | types.js, inventory.js |
| 3 | errors.js, checkout.js |
| 4 | ids.js, rate-limit.js |
| 5 | settings.js, update.js |
| 6 | format.js, receipt.js |
| 7 | parse-orders.js, validate.js |
| 8 | catalog.js, sales.js |
| 9 | inventory-map.js, recommend.js |
| 10 | diff.js, model.js |
| 11 | models.js (Book, OutOfStockError) ↻, events.js |
| 12 | payments.js ↻, queue.js |
| 13 | stream-orders.js, pipeline.js |
| 14 | money.js, main.js, lib/index.js (a barrel), plugins |
| 15 | audit.js, transaction.js |
| 16 | the order processor: src/, data/, test/ (↻ = reused here) |
| B | money.test.js, word-count/ |
If the folder gets crowded, create one sub-folder per chapter (ch02/types.js). Imports are relative (./, ../), so moving files only means updating those paths.
Using the reference project
Read its src/ files alongside Chapter 16. To compare your version: diff -ru reference/src src, or code --diff reference/src/processor.js src/processor.js.
Troubleshooting
| Symptom | Likely cause | Fix |
|---|---|---|
No playground/ folder on your machine | you are reading the book online | git clone https://github.com/coder-hop/js-book-playground.git playground |
SyntaxError: Cannot use import statement outside a module | the file isn't treated as ESM | run it from playground/ (where package.json is), or rename it .mjs |
ERR_MODULE_NOT_FOUND for ./money | a missing file extension | import ./money.js |
ReferenceError: require is not defined | CommonJS syntax in an ES module | use import (Chapter 14) |
TypeError: … is not a function for Object.groupBy, using syntax errors, Temporal is not defined | Node is too old | node --version; install 26 LTS |
| The program exits silently halfway | an unawaited promise, or a forEach(async …) | await it, or use Promise.all (Chapter 12) |
| The process never exits | an active setInterval or open handle | clear it, or use using (Chapter 15) |
this is undefined in a callback | a detached method | an arrow function or bind (Chapter 4) |
Recap
playground/is an ESM Node project withnpm start/npm test;reference/is the finished Chapter 16 project.- Install Node 26 LTS, open the folder, and run files with
node file.js(or--watch). - Experiment in the REPL with
await import("./file.js"); test with*.test.jsandnode --test. - Always include
.jsin relative imports, and run commands from the playground folder.