Frontend development

Stage 2 · Lesson 4 of 10

Closures

JavaScript and the browser

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 composables 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 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

  • CoursePaid
    Grokking JavaScript Fundamentals

    Design Gurus · Beginner · $50

    Guided beginner course on the language core, with quizzes after every chapter

  • GuideFree
    JavaScript.info

    Ilya Kantor

    Free and thorough: Part 1 for the language, Part 2 for the DOM and events, Part 3 for fetch

Practise

  • Thirty small browser projects with no framework to hide behind

  • Free JavaScript curriculum exercises for daily reps on the language core

Keep handy

  • JavaScript and Web API reference, including fetch, the DOM and events

Also worth your time

Mark this stage as not done?