Кратко и по делу — как семантика пространств имён и области видимости в JavaScript (var / let / const, глобальная область) влияет на утечки памяти и ошибки в больших приложениях, и какие практики уменьшат риски.
Краткое напоминание по семантике
- $...$ var: function‑scope (или global, если вне функций), поднимается (hoisting) — объявление доступно до места объявления с значением $\text{undefined}$. Можно повторно объявлять.
- $...$ let / const: block‑scope, имеют TDZ (temporal dead zone) — недоступны до момента объявления; const запрещает переназначение связывания (но не делает объект неизменяемым).
- $...$ top‑level в модуле: объявления let/const не присоединяются к глобальному объекту; в скрипте top‑level var становится свойством глобального объекта (globalThis).
- Неявные глобальные: присваивание без объявления (например, $\text{foo = 1}$) создаёт глобальное свойство — плохая практика.
Как это приводит к ошибкам (логические баги)
- Замыкания + var в циклах: var для счётчика приводит к тому, что все замыкания видят одно и то же переменное значение (классическая ошибка). Использование let решает её.
- Hoisting: ожидание, что переменная недоступна до строки объявления, может приводить к undefined‑ошибкам при var.
- Глобальные конфликты имён: var/неявные глобальные создают коллизии и взаимозависимости модулей, усложняют тестирование и рефакторинг.
Как это приводит к утечкам памяти
- Долговечные корневые ссылки: объекты, доступные из глобального объекта (globalThis) или из долгоживущих замыканий/одиночек, не собираются сборщиком мусора. Примеры:
- Большие кэши, хранящиеся в глобальной переменной или единственном объекте.
- Таймеры (setInterval/setTimeout) и активные промисы, которые удерживают ссылки.
- Обработчики событий, не снятые с DOM‑элементов — если JS хранит ссылку на DOM узел, узел не удалится из памяти даже после удаления из дерева.
- Замыкания, сохраняющие большую область: замыкание может захватить все локальные переменные функции; если замыкание живёт долго, то удерживаются все эти значения, даже если нужны только некоторые.
- «Утечки» через свойства глобального объекта: var в top‑level (в скриптах) или неявные глобальные становятся доступными навсегда.
- Кеши и карты: использование обычного Map/Array для кэша удерживает объекты; слабо‑связанные структуры (WeakMap/WeakSet) решают это для ключей‑объектов.
Тонкости GC
- Современные движки JS собирают циклические ссылки (GC не только счётчик ссылок). Тем не менее объекты достижимы из корней (roots) — сборщик не удалит их.
- Корни включают глобальные объекты, стек вызовов, активные таймеры/коллбэки и некоторые нативные структуры, привязанные к DOM.
Практические рекомендации (коротко и применимо)
- $...$ Всегда предпочитайте const по умолчанию, let при необходимости; избегайте var.
- $...$ Не создавайте неявные глобальные (включайте "use strict" / используйте модули).
- $...$ Используйте модульную систему (ES modules): топ‑левел переменные не лезут в globalThis.
- $...$ Минимизируйте срок жизни переменных: не храните большие объекты в замыканиях дольше, чем нужно; освобождайте ссылки ($\text{obj = null}$) при завершении работы.
- $...$ Удаляйте слушатели событий и таймеры при демонтировании компонентов (removeEventListener, clearInterval/clearTimeout).
- $...$ Для кэшей используйте WeakMap/WeakSet, когда ключи — объекты, и вы хотите позволить GC высвободить неиспользуемые элементы.
- $...$ Избегайте глобальных синглтонов с большими состояниями; если нужны, предоставляйте API очистки.
- $...$ Инструментируйте: профилирование памяти (heap snapshot), отслеживание retained size, timeline, allocation sampling — находите объекты, удерживаемые глобально.
- $...$ При работе с DOM: не храните ссылки на удалённые элементы (особенно в глобальной области); используйте делегирование событий там, где уместно.
- $...$ При необходимости — применяйте WeakRef и FinalizationRegistry осторожно (плохо переносимо и усложняет логику).
Короткие примеры проблем и исправлений
- var‑в цикле (проблема):
code: for (var i = 0; i console.log(i), 100);
— выведет 3 три раза.
Решение: заменить var на let.
- Неявный глобал (утечка): code: function f(){ cache = {}; /* cache — глобальная */ }
Решение: объявить const/let cache внутри нужной области или модуле.
Итог
- Семантика scope/namespace напрямую влияет на то, какие объекты становятся частью корневого множества и живут долго: var/глобали повышают риск удержания данных, let/const + модули уменьшают. Ошибки (замыкания, hoisting) чаще возникают при неправильном выборе var. В больших приложениях дисциплина: const по умолчанию, модульность, явная очистка ресурсов и слабые коллекции — ключ к снижению утечек и багов.