Кратко: поведение полностью детерминировано по спецификации, но неожиданно для многих — `var` поднимает объявление и инициализирует значением `undefined`, `let/const` тоже «поднимаются», но остаются неинициализированными в TDZ (Temporal Dead Zone) и при обращении до объявления бросают `ReferenceError`. В вашем фрагменте результат — сначала `undefined`, затем при вызове `f()` ошибка.
Пошаговая семантика для примера
- Фаза объявления (хостинг):
- `var a` поднимается в глобальную область и сразу инициализируется значением `undefined`.
- Функция `f` (объявление функции) поднимается и инициализируется ссылкой на функцию.
- Внутри `f` идентификатор `b` (через `let`) тоже создаётся для области видимости функции, но остаётся неинициализированным (TDZ) до выполнения строки с `let`.
- Выполнение:
- `console.log(a);` выводит `undefined`.
- `var a = $1$;` присваивает `a` значение `$1$`.
- При входе в `f()` `b` находится в TDZ; `console.log(b);` бросает `ReferenceError`, и присваивание `let b = $2$;` не выполняется.
Предсказуемые последствия
- Поведение одно и то же на всех современных движках, соответствующих ES6+.
- `var` даёт «тихие» ошибки (значение `undefined`), `let/const` дают немедленные ошибки при преждевременном доступе — это полезно для раннего обнаружения багов.
Непредсказуемые/опасные моменты для разработчика
- Ошибки из-за неявного `undefined` труднее отлавливать (тихие баги).
- TDZ может неожиданно бросать ошибки в местах, где раньше (на `var`) код «работал», что усложняет миграцию.
- Транспиляция/бандлинг: некорректные трансформации (особенно «loose» режимы Babel или старые транспайлеры) могут скомпилировать `let/const` в `var`, нарушив TDZ-семантику и приведя к другим runtime-ошибкам/тихим багам.
- Глобальный `var` создаёт свойство глобального объекта (например, `window.a`), `let/const` — нет; это источник тонких различий.
Влияние на стиль кодирования
- Практика: объявлять переменные до их использования; предпочитать `const` там, где значение не меняется, иначе `let`; избегать `var`.
- Избегать опоры на hoisting — лучше читать код сверху вниз: объявление → использование.
- Явно инициализировать переменные при объявлении, чтобы не получать `undefined`.
Инструменты статической проверки и конфигурации
- ESLint:
- Включить правила: `"no-var": "error"`, `"prefer-const": "error"`, `"no-use-before-define": ["error", { "functions": false, "classes": true, "variables": true }]`.
- TypeScript:
- Включить `"strict": true` — поймает многие ошибки и прояснит зависимости.
- Транспилеры:
- Использовать режимы трансформации, сохраняющие семантику (не включать «loose»-режимы, которые могут заменить `let/const` на `var` без TDZ).
- CI/код-ревью:
- Правила стиля (declare-before-use, prefer-const), тесты и линтеры помогают избежать сюрпризов.
Рекомендации
- Пиши объявления перед использованием; используй `const`/`let` вместо `var`.
- Включи строгие правила ESLint/TypeScript.
- Будь осторожен с транспиляцией: проверяй итоговое поведение в рантайме.
Итог для примера: первая строка напечатает `undefined`, затем `f()` вызовет `ReferenceError` из-за TDZ для `b` перед `let b = $2$`.