Stage 2 · Lesson 4 of 10
Closures
A is a function that remembers the variables from the place it was created, even after the outer function has finished. function counter() { let n = 0; return () => ++n; } gives back a function that keeps its own private n. Closures are everywhere in frontend code.
Every or that uses a variable from around it is one, and framework hooks and are built on them. They also cause a classic bug. A function captures a value, the value changes later, and the function still sees the old one.
In React this shows up as inside an effect or a timer. Once you understand closures, those bugs look obvious instead of mysterious.
A question to check yourself, an AI practice session and 1 cheat sheet entry come with the full roadmap. Unlock
Resources for this stage
Start with· follow one of these
- CoursePaidGrokking JavaScript Fundamentals
Design Gurus · Beginner · $50
Guided beginner course on the language core, with quizzes after every chapter
- GuideFreeJavaScript.info
Ilya Kantor
Free and thorough: Part 1 for the language, Part 2 for the DOM and events, Part 3 for fetch
Practise
Keep handy
Also worth your time
- You Don't Know JS YetGo deeper
For when scope, this, coercion or async behaviour still feel like magic