Czym Jest Call Stack w Javascript?

Call Stack to struktura danych, która przechowuje informacje na temat wywoływanych i wykonywanych funkcji. Działa on na zasadzie "Last In First Out", co oznacza, że najpierw zostaną wywołane funkcje, które ostatnie zostały dodane do stosu.

Najlepiej jest to zrozumieć na przykładzie, tak więc poniżej opiszę kroki, w jakich Javascript śledzi wywoływanie funkcji w Call Stack.

Przykład

function f1() {
  console.log( 'f1' );
}
  
function f2() {
  f1();
  console.log( 'f2' );
}
  
f2();

Po wywołaniu tego kodu w naszej konsoli zobaczymy:

"f1"
"f2"

Dlaczego się tak dzieje?

Zgodnie z zasadą "Last In First Out" każda nowa funkcja trafia na górę stosu i jest pierwsza wykonywana. W naszym wypadku poszczególne kroki będą wyglądały następująco:

1. Do stosu zostanie dodana funkcja f2().

f2();

2. Po wywołaniu funkcji f2() Javascript napotyka funkcję f1() i ją wywołuje. Nasz stos prezentuje się tak:

f1();
f2();

3. Javascript jest teraz wewnątrz funkcji f1(), w której trafia na funkcję console.log(), którą również dodaje do stosu:

console.log( 'f1' );
f1();
f2();

4. W tym momencie w konsoli pojawia się log o treści 'f1', oraz ze stosu usuwamy wcześniej dodanego console.log( 'f1' );

f1();
f2();

5. W funkcji f1() nie ma już dalszego kodu do wywołania, więc usuwamy go ze stosu:

f2();

6. Zostaje nam już tylko dodać do stosu console.log( 'f2' ), który znajduje się w funkcji f2();

console.log('f2');
f2();

7. Po wywołaniu console.log( 'f2' ) usuwamy go ze stosu:

f2();

8. W tym kroku Javascript zauważa, że w funkcji f2() również nie ma już żadnego kodu do wywołania i usuwa ją ze stosu.

// Empty

Stack Overflow

Co się wydarzy, jeśli do stosu przekażemy za dużo funkcji?

Jak wiesz, pamięć komputera nie jest nieskończona. Jeśli przekażemy do naszego stosu ogromną ilość funkcji, to najzwyczajniej w świecie otrzymamy błąd.

Najprostszym przykładem będzie wywołanie dwóch funkcji, które wywołują siebie nawzajem:

function a() {
  b();
}

function b() {
  a();
}

a();

W tym przypadku natychmiast otrzymamy błąd:

Maximum call stack size exceeded

Dzieje się tak, ponieważ każda z tych funkcji dodaje drugą do stosu, a jednocześnie żadna z nich nie jest rozwiązywana.

Nauka Javascript na wysokim poziomie jest szczególnie istotna na początku kariery jako Frontend Developer, a dlaczego dowiesz się tutaj 🚀