Що таке call stack в JavaScript?
Call stack (стек викликів) - це фундаментальний механізм у JavaScript, який відстежує виконання функцій. Це структура даних, яка записує, де саме в програмі ми перебуваємо під час виконання.
Як це працює
Call stack працює за принципом LIFO (Last In, First Out) - останній зайшов, перший вийшов:
- Коли функція викликається, вона додається (push) до стеку
- Коли функція завершується (повертає значення), вона видаляється (pop) зі стеку
- Стек відстежує, яка функція зараз виконується
Візуальний приклад
function first() {
console.log('Перша функція');
second();
console.log('Перша функція знову');
}
function second() {
console.log('Друга функція');
third();
}
function third() {
console.log('Третя функція');
}
first();Еволюція Call Stack:
1. Викликається first()
Стек: [first]
2. Викликається second() з first()
Стек: [first, second]
3. Викликається third() з second()
Стек: [first, second, third]
4. third() завершується
Стек: [first, second]
5. second() завершується
Стек: [first]
6. first() завершується
Стек: []Stack Overflow (переповнення стеку)
Коли функції викликають одна одну рекурсивно без належної базової умови, стек може перевищити свій ліміт:
function recursiveFunction() {
recursiveFunction(); // Немає базової умови!
}
recursiveFunction(); // ❌ RangeError: Maximum call stack size exceededКлючові моменти для співбесід
- Однопотоковість: JavaScript має лише ОДИН call stack
- Синхронне виконання: Код виконується рядок за рядком
- Stack frames: Кожен виклик функції створює новий фрейм
- Максимальний розмір: Зазвичай 10,000-15,000 фреймів (залежить від браузера/движка)
- Відстеження помилок: Stack trace в помилках показує call stack у той момент
Реальний приклад
function processOrder(order) {
console.log('Обробка замовлення:', order.id);
validateOrder(order);
calculateTotal(order);
sendConfirmation(order);
console.log('Замовлення успішно оброблено');
}
function validateOrder(order) {
if (!order.items.length) {
throw new Error('Замовлення не містить товарів');
}
}
function calculateTotal(order) {
return order.items.reduce((sum, item) => sum + item.price, 0);
}
function sendConfirmation(order) {
console.log('Відправка підтвердження на:', order.email);
}
// Call stack:
processOrder({ id: 123, items: [...], email: 'user@example.com' });Типові питання на співбесіді
-
П: Що відбувається, коли call stack порожній? В: Event loop перевіряє чергу колбеків і обробляє очікуючі колбеки.
-
П: Чи може JavaScript виконувати код, поки щось є в call stack? В: Ні, JavaScript однопотоковий. Він повинен завершити поточний call stack перед переходом до наступного завдання.
-
П: Як працюють асинхронні операції, якщо JavaScript однопотоковий? В: Асинхронні операції обробляються Web APIs (у браузерах) або C++ APIs (у Node.js), а не самим call stack.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.