Czym Jest Call Stack w Javascript?

11 lutego 2022JavaScript
2 min187 wyświetleń

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 🚀

Przeczytaj także inne artykuły

Gatsby.js vs Next.js - Który Framework React.js Wybrać?

W porównaniu Gatsby.js vs Next.js ciężko wyłonić jednego zwycięzcę. Gatsby.js jako Static Site Generator dzięki licznym starterom i prostocie pozwala w szybki sposób stworzyć proste strony internetowe. Next.js natomiast pozwala nam skorzystać zarówno z generowania statycznych stron, jak i z Server Site Renderingu. Oba frameworki opierają się na React.js. Którego w takim razie wybrać do swojego projektu? Sprawdźmy to!

14 stycznia 2022React
3 min255 wyświetleń

Jak Next.js Może Poprawić SEO Twojej Strony?

Next.js to obecnie najbardziej popularny framework React.js, który pozwala budować statycznie generowane, bądź renderowane po stronie serwera aplikacje, które cechują się świetnym SEO, oraz niskim czasem ładowania. W tym artykule omówimy, dlaczego Next.js tak dobrze wpływa na SEO, oraz w jaki sposób możemy dodatkowo poprawić pozycjonowanie naszej aplikacji.

4 lutego 2022Next
7 min72 wyświetleń