Этап 5 из 19 · ≈ 6 ч

Области видимости и замыкания

Основа с Junior

var, let и const, всплытие, лексическое окружение и замыкания.

Замыкание — функция вместе с окружением, в котором она создана: она помнит переменные внешней функции даже после её завершения.

function counter() {
  let n = 0;
  return () => ++n;
}
const next = counter();
next(); next();   // 2 — n живёт в замыкании

Что важно знать

  • var — область видимости функции, всплывает со значением undefined; let/const — блочная область, до объявления — «временная мёртвая зона» (ReferenceError).
  • const запрещает переприсваивание, но не изменение объекта.
  • Классическая задача: цикл for (var i…) с setTimeout печатает одно и то же число; с let у каждой итерации своя переменная.
  • Где применяются замыкания: приватное состояние, фабрики функций, debounce и throttle, обработчики событий, хуки React.
  • Замыкание удерживает переменные в памяти — источник утечек, если держать ссылку на большие объекты в долгоживущем обработчике.

Критерии освоения

Junior ≈ 6 ч

  • Объясняет разницу var, let и const и временную мёртвую зону
  • Объясняет замыкание и пишет на нём счётчик, debounce и throttle

Практика. Реализовать debounce и throttle с тестами и объяснить задачу с setTimeout в цикле на var и let.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все
Чем var отличается от let и const?Junior

var — область видимости функции, поднимается (hoisting) со значением undefined, допускает повторное объявление. let и const — область видимости блока {}, до строки объявления — временная мёртвая зона (ReferenceError). const запрещает переприсваивание, но не…

Полный разбор
Что такое замыкание в JavaScript и где оно применяется?Junior

Замыкание — функция вместе с лексическим окружением, в котором она создана: она помнит переменные внешней функции даже после её завершения. Применение: приватное состояние, фабрики функций, обработчики событий, debounce, мемоизация, хуки React.

Полный разбор
Чем debounce отличается от throttle?Junior

Debounce — вызвать функцию, только когда события прекратились на N мс: поиск по вводу, сохранение черновика, resize. Throttle — вызывать не чаще раза в N мс, пока события идут: прокрутка, движение мыши, отслеживание позиции.

Полный разбор
Как определяется this в JavaScript и чем стрелочные функции отличаются от обычных?Junior

В обычной функции this определяется в момент вызова: obj.method() — obj; простой вызов f() — undefined в строгом режиме; new F() — новый объект; call/apply/bind — заданный явно. Стрелочная функция своего this не имеет — берёт его из окружения, где создана.

Полный разбор

Документация

← Вся карта «Frontend-разработчик»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования