> Как устроены стек вызовов и куча в JavaScript (JavaScript)

Короткий ответ

Стек вызовов (call stack) - это структура LIFO, где хранятся активные вызовы функций, их локальные переменные и аргументы. Куча (heap) - неструктурированная область памяти для объектов, массивов и замыканий. Примитивы хранятся в стеке, объекты - в куче, а ссылки на них - в стеке. Стек ограничен по размеру и может переполниться (stack overflow), куча управляется сборщиком мусора.

Подробное объяснение

Стек вызовов работает по принципу "последним пришёл - первым вышел". Каждый вызов функции создаёт новый фрейм (frame) в стеке, который содержит:

• локальные переменные (примитивы и ссылки на объекты)
• аргументы функции
• адрес возврата (куда продолжить выполнение после завершения)

Когда функция завершается, её фрейм удаляется из стека. Стек ограничен - в типичном браузере это около 10 000-15 000 фреймов, после чего возникает RangeError: Maximum call stack size exceeded.

Куча - это большая область памяти без строгой структуры. В ней хранятся:

• объекты и массивы
• функции (как объекты)
• замыкания (closures) - их окружение
• строки (в некоторых реализациях)

Куча не имеет ограничений по размеру, кроме доступной памяти системы. Управление памятью в куче происходит через сборщик мусора (garbage collector), который удаляет объекты, на которые больше нет ссылок.

Ключевое различие: примитивы (number, string, boolean, null, undefined, symbol, bigint) хранятся в стеке по значению. Объекты хранятся в куче, а в стеке - только ссылка (указатель) на них.

Взаимодействие с event loop: стек - это место, где выполняется синхронный код. Асинхронные операции (setTimeout, промисы, fetch) не блокируют стек - их колбэки попадают в очередь и выполняются только когда стек пуст.

На практике

Для frontend-разработчика понимание стека и кучи важно в нескольких сценариях:

1. Отладка ошибок - стек трейс (stack trace) показывает последовательность вызовов, которые привели к ошибке. Это помогает быстро найти источник проблемы.

2. Производительность - глубокие рекурсии могут переполнить стек. Например, рекурсивный обход большого дерева DOM может упасть с stack overflow. В таких случаях лучше использовать итеративный подход или хвостовую рекурсию (если она поддерживается).

3. Утечки памяти - объекты в куче, на которые остались ссылки (например, через глобальные переменные или забытые обработчики событий), не будут удалены сборщиком мусора. Это приводит к росту потребления памяти.

4. Замыкания - создают скрытые ссылки на внешние переменные, которые остаются в куче даже после завершения внешней функции. Это нужно учитывать при массовом создании функций в циклах.

Пример кода

JAVASCRIPT
// Пример: стек вызовов и куча

function outer() {
  const primitive = 42; // хранится в стеке
  const obj = { name: 'test' }; // объект в куче, ссылка в стеке
  
  function inner() {
    // замыкание: obj остаётся в куче, пока inner существует
    console.log(obj.name, primitive);
  }
  
  return inner;
}

const closure = outer(); // outer завершилась, но obj живёт в куче

// Рекурсия, которая переполнит стек
function infiniteRecursion() {
  return infiniteRecursion();
}

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

// Правильный подход для глубокой рекурсии - итерация
function sumTo(n) {
  let sum = 0;
  for (let i = 1; i <= n; i++) {
    sum += i;
  }
  return sum;
}

Как отвечать на собеседовании

Начните с краткого определения, затем переходите к деталям. Обязательно упомяните:

• разницу между хранением примитивов и объектов
• ограничение стека и проблему stack overflow
• роль сборщика мусора для кучи
• связь с event loop и асинхронностью

Если спросят про утечки памяти - приведите пример с глобальными переменными или забытыми обработчиками событий. Если спросят про оптимизацию - упомяните, что избегание глубокой рекурсии и аккуратное обращение с замыканиями помогают управлять памятью.

Что проверяет интервьюер

Интервьюер оценивает:

• понимание базовой модели памяти в JavaScript
• умение объяснять абстрактные концепции простыми словами
• знание практических последствий (stack overflow, утечки памяти)
• способность связать теорию с реальными сценариями разработки

Для уровня middle ожидается уверенное объяснение с примерами и понимание того, как это влияет на повседневную работу.

Типичные ошибки

• Путаница между стеком и кучей - например, утверждение, что все переменные хранятся в куче.
• Игнорирование замыканий - непонимание, что замыкания удерживают объекты в куче дольше, чем ожидается.
• Неверное объяснение event loop - утверждение, что асинхронный код выполняется в куче или стеке.
• Забывают про примитивы - не упоминают, что строки и числа хранятся в стеке по значению.
• Перепутывание ссылок и значений - непонимание, что при присваивании объекта копируется ссылка, а не сам объект.