В какой последовательности выполняется стек

В какой последовательности выполняется стек

Что такое Call Stack

Call Stack (стек вызовов) - это структура данных, которая отслеживает порядок выполнения функций в JavaScript. Каждый вызов функции добавляется на вершину стека, а когда функция завершается, она удаляется со стека.

Принцип работы стека: LIFO

Call Stack работает по принципу LIFO (Last In, First Out) - последний добавленный элемент первым удаляется:

1. Когда функция вызывается -> она добавляется (push) на вершину стека
2. Когда функция возвращает значение -> она удаляется (pop) со стека
3. Функция внутри функции добавляется выше в стеке
4. Вложенные функции выполняются в обратном порядке их завершения

Простой пример последовательности

function first() {
  console.log("1. first() начало");
  second();
  console.log("4. first() конец");
}

function second() {
  console.log("2. second() начало");
  third();
  console.log("3. second() конец");
}

function third() {
  console.log("2.5. third() выполнение");
}

first();

Вывод:

1. first() начало
2. second() начало
2.5. third() выполнение
3. second() конец
4. first() конец

Состояния Call Stack в процессе

Стек добавляет функции слоями:

• Global контекст (база)
• first() добавляется
• second() добавляется выше
• third() добавляется выше
• third() удаляется при завершении
• second() удаляется при завершении
• first() удаляется при завершении

Более сложный пример с условиями

function a() {
  console.log("a: вход");
  if (true) {
    b();
  }
  console.log("a: выход");
}

function b() {
  console.log("b: вход");
  c();
  console.log("b: выход");
}

function c() {
  console.log("c: выполнение");
  return 42;
}

a();

Порядок выполнения:

1. a() добавляется в стек
2. Выводится "a: вход"
3. Проверяется условие if (true) -> вызывается b()
4. b() добавляется в стек поверх a()
5. Выводится "b: вход"
6. Вызывается c()
7. c() добавляется в стек
8. Выводится "c: выполнение"
9. c() возвращает значение и удаляется со стека
10. Выводится "b: выход"
11. b() удаляется со стека
12. Выводится "a: выход"
13. a() удаляется со стека

Stack Overflow

Если функция вызывает саму себя (рекурсия) без условия выхода, стек переполняется:

function recursive() {
  console.log("recursive");
  recursive(); // Бесконечная рекурсия!
}

recursive(); // RangeError: Maximum call stack size exceeded

Каждый вызов recursive() добавляется на стек, но никогда не удаляется -> переполнение.

Порядок с асинхронным кодом

Делегирование асинхронного кода в Web API не влияет на Call Stack:

function sync() {
  console.log("Синхронный код");
}

setTimeout(() => {
  console.log("Асинхронный код");
}, 0);

sync();

console.log("Конец");

Порядок:

1. setTimeout() передаёт callback в Web API (НЕ в Call Stack!)
2. Выполняется sync()
3. Выводится "Конец"
4. Стек пуст -> Event Loop берёт callback из очереди
5. Выводится "Асинхронный код"

Ключевые моменты

• LIFO порядок - последняя вызванная функция первая завершается
• Синхронное выполнение - функции выполняются одна за одной
• Вложенность - функции, вызывающие другие функции, остаются в стеке
• Возврат значения - функция удаляется из стека при возврате
• Глобальный контекст - всегда в базе стека

Практика с Chrome DevTools

В браузере (Chrome DevTools -> Sources):

1. Установи точку останова (breakpoint)
2. Открой вкладку Call Stack
3. Ты увидишь точный порядок вложенных вызовов
4. Пошагово сможешь трассировать выполнение

Это поможет визуализировать работу стека в реальных проектах.