More than 3 years have passed since last update.

JavaScriptのコールスタックを理解する

Last updated at 2021-12-07Posted at 2021-11-14

JavaScriptエンジンはコールスタックという仕組みを通して、JavaScriptがどのように実行されたか追跡しています。

コールスタックとは

実行中のコードが辿ってきたコンテキストの積み重ねのこと

言い換えると、JavaScriptエンジンがどのような経路を辿ってコードに辿り着いたのか記録しているものです。

function a() {}
function b() {
  a();
}
function c() {
  b();
}
c();

上記コードは、まず関数c(　)が実行されて、その中で関数b(　)が実行されます。さらに関数b(　)の中で関数a(　)が実行されます。

この時、生成されるコンテキストの順番は以下のようになります。

1. グローバルコンテキストが生成される。
2. cの関数がよばれる際に、cのコンテキストが生成される。
3. cの関数の中でbの関数がよばれ、bのコンテキストが生成される。
4. bの関数の中でaの関数がよばれ、aのコンテキストが生成される。

このようなコンテキストの積み重ねのことをコールスタックと呼びます。

コールスタックの特徴として、**LIFO(Last In, First Out)があります。
LIFOとは「後入れ先出し」**のことで、後から入ったコンテキストが先に実行されて消滅します。

グローバルコンテキスト ⇨ cのコンテキスト ⇨ bのコンテキスト ⇨ aのコンテキスト

aのコンテキスト ⇨ bのコンテキスト ⇨ cのコンテキスト ⇨ グローバルコンテキスト

JavaScriptエンジンはコールスタックという仕組みを通して、JavaScriptがどのように実行されたか追跡しています。

コンテキストが積まれた際、最初に実行されるのはaのコンテキストであり、常にコールスタックの一番上に積まれているコンテキストが実行中のコンテキストになります。

そして、aの処理が終わるとaのコンテキストが消滅し、bの関数へと移ります。そして、bの処理が終わるとbのコンテキストが消滅し、cの関数へと移ります。

最終的にグローバルの処理が全て完了した時点でグローバルコンテキストが消滅します。