LoginSignup
0
0

More than 1 year has passed since last update.

@maruqui(maruqui)

JavaScriptのコールスタックと挙動の確認方法

Posted at

どうも。前回の記事で、月に1度更新できたらいいな〜とか言ってて早々に更新し始めました、maruquiです。

今回はJavaScriptのコールスタックについてと挙動の確認についてメモしておきます。

まだまだ技術の経験値が少ないこともあり、ベテランの方から見たら意味が違うような発言をしてしまうかもしれませんが、あたたかく見守ってください。

コールスタックとは

簡単にいうと、どの関数がどの順番で呼び出されているのかを保存しておく仕組みのことです。文字で説明するだけじゃ意味不明だと思うので、コードで。

コールスタック

function a() {
    console.log('a is first.');
}

function b() {
    a();
    console.log('b is second.');
    d();
}

function c() {
    b();
}

function d() {
    console.log('d is last.');
}

c();

// 実行結果
// a is first. → b is second. → d is last.

実行される順番としては、グローバルコンテキスト → c(); → b(); → a(); → console.log('b is second.'); → d(); になります。

グローバルコンテキストは今回のコードに記載がありませんが、JavaScriptがコードを実行する際に最初に生成するものです。

このように、どの関数がどの順番で呼び出されていくかを保存する仕組みがコールスタックと言います。

ブラウザでも確認ができるので、確認していきます。

コールスタックをブラウザで確認する

chromeの場合でお話します。他のブラウザは…頑張ってググってみてください。

検証を開いてsourcesをクリック。jsのファイル内で該当の処理にbreakpointを置いてみましょう。画像ではc(); にbreakpointを置いています。

そして、step into next function callを押して行けば辿ってきた処理を確認することができます。画像で「これ」と案内している箇所です。

callstack.png

これでJavaScriptの処理の順番がどのように実行されているのかがわかるようになりました。他人が書いたJavaScriptの処理などで勉強が捗ることでしょう。

まとめ

今回はUdemyの学習記録として、JavaScriptのコールスタックについてまとめました。

参考にした講座はすでに1周していたのですが、当時全く意味不明なままとりあえず進めていたので、2周目に入っています。

このチャプターだけはメモに残しておきたかったので、講座を参考にして記事にしました（丸パクリはしてません）。

またメモしておきたいものが出てきたら記事にしていきます。最後までご覧いただき、ありがとうございました。

参考

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0