Как выполняется код JavaScript

Технический фундамент выполнения

Для устойчивой отладки важно понимать механику исполнения:

код выполняется в порядке инструкций с учетом ветвлений и вызовов;
объявление и инициализация переменной — разные этапы;
область видимости и момент чтения значения критичны для результата;
неверное предположение о порядке выполнения часто дает "странный" баг.

Эта модель нужна, чтобы объяснять поведение кода фактами, а не интуицией.

Почему порядок выполнения важнее «красоты» записи

Главный фокус — понять, как движок проходит код шаг за шагом. Когда этот процесс прозрачен в голове, ты быстрее находишь причину ошибки и меньше полагаешься на догадки.

Ключевой момент: в JS важно уметь объяснить поведение кода порядком шагов, а не фразой "оно почему-то так".

Проверь себя: чем отличается "код не запустился" (синтаксис) от "код упал на конкретной строке" (ошибка во время выполнения)?

Базовая модель выполнения

JavaScript читает инструкции сверху вниз. Каждое присваивание и каждое выражение имеет конкретный момент вычисления.

const base = 10;
const bonus = 5;
const total = base + bonus;

console.log(total);

Здесь сначала создаются base и bonus, затем вычисляется total, и только после этого вызывается console.log.

Условия и ветвление в порядке выполнения

В ветвлениях движок сначала оценивает условие, и только потом выполняет нужный блок.

const score = 68;
let status = 'retry';

if (score >= 70) {
  status = 'passed';
}

console.log(status);

Если условие ложно, блок if не выполняется. Это простое правило часто спасает от неверных ожиданий.

Важный минимум: hoisting и стек вызовов

JavaScript сначала подготавливает объявления (phase подготовки), а потом выполняет код (phase исполнения). На beginner-уровне важно запомнить:

function-объявления можно вызвать до места в файле, где они написаны
let и const нельзя безопасно использовать до объявления

sayHello();

function sayHello() {
  console.log('hello');
}

// console.log(userName); // ReferenceError
const userName = 'Nika';

Также код функций выполняется через стек вызовов (call stack): сначала текущая функция, потом вложенные вызовы, затем возврат обратно.

Частые ошибки новичков

Одна из самых частых ошибок — забыть фигурные скобки и получить "строка вышла из ветки".

const hasAccess = false;
let screen = 'locked';

if (hasAccess) screen = 'content';
console.log('Переход выполнен');

console.log(screen);

console.log('Переход выполнен') выполнится всегда, потому что без {} в if попадает только одна строка.

Другие частые ошибки по теме:

Думать, что отступы меняют логику (в JS решают скобки, а не форматирование).
Читать переменную до объявления (особенно с let/const) и получать неожиданный ReferenceError.
Забывать, что вызов функции — это "прыжок" по стеку, а потом возврат обратно.

Что будет, если изменить входные данные

Иногда проблема не в порядке строк, а в том, как вычисляется условие на конкретном входе.

const attempts = '0';
const hasAttempts = attempts > 0;

console.log(hasAttempts);

Здесь строка сравнивается с числом, и поведение может быть неочевидным для новичка. Надежнее сначала нормализовать тип и уже потом принимать решение.

Проверь себя: как изменится результат, если attempts = 0 (число) или attempts = '1' (строка)?

Анти-провал: не полагайся на "интуитивный" порядок выполнения без явной проверки типов и области видимости.

Краткий итог

Код выполняется как последовательность шагов: объявление → вычисление → проверка → ветка → вывод.
Ветвления исполняют только выбранную ветку, поэтому важно понимать границы { ... }.
function-объявления и let/const ведут себя по-разному из-за hoisting и TDZ.
Стек вызовов объясняет, почему выполнение "уходит" внутрь функций и возвращается обратно.
Неявные преобразования типов могут менять итог условий на "похожих" входах.