JavaScript入門 エラーのスタックの見方を覚えておくと役立つ！
JavaScript でプログラムが実行される時に、内部ではどのようなことが起こるのかを知っておくと、エラー発生時に役立ちます。
今回はスタックについて書きます。
エラーが出た
以下のようなコードがあります。
const hoge = str => {
return foo(str + 'hoge');
}
const foo = str => {
return huga(str + 'foo');
}
const huga = str => {
return str.filter(s => s === 'f');
}
const result = hoge('tami')hoge() を実行すると、foo() が実行され、その後huga() が実行されます。
hoge() -> foo() -> huga()
さて、このプログラムを実行するとエラーになります。以下のようなエラーが出力されます。
TypeError: str.filter is not a function
at huga (/Users/tami/project/js-training/stack-test.js:10:14)
at foo (/Users/tami/project/js-training/stack-test.js:6:10)
at hoge (/Users/tami/project/js-training/stack-test.js:2:10)
at Object.<anonymous> (/Users/tami/project/js-training/stack-test.js:13:16)
・・・以下略この内容をスタックを学びながら解析します。
スタックとは
プログラムが実行されると、メモリにスタックという領域が確保されます。
ここには、実行されるコードが順番に積み重なっていきます。
初めの状態
以下がプログラムを実行した直後の状態のスタックのイメージです。
main はこのプログラムの起点になるものと考えてください。
hoge()が実行される
まずhoge()の部分が実行されます。スタックにはhogeが積まれます。
foo()が実行される
次にfoo()です。同様にスタックにfoo()が積まれます。
huga() が実行される
最後にhuga()です。
エラーは huga() で発生します。
そのため、上記のスタックの状態でエラーが発生します。
冒頭のエラー内容に戻ります。
TypeError: str.filter is not a function
at huga (/Users/tami/project/js-training/stack-test.js:10:14)
at foo (/Users/tami/project/js-training/stack-test.js:6:10)
at hoge (/Users/tami/project/js-training/stack-test.js:2:10)
at Object.<anonymous> (/Users/tami/project/js-training/stack-test.js:13:16)
・・・以下略TypeError: str.filter is not a function の下の行を見ると、huga, foo, hoge の順番で並んでいます。
そう、これは現在のスタックの状態を表しています。
エラー出力にはスタックの状態が乗るので、どのような流れでエラーに至ったかを知ることができます。
これはエラーが発生した時の原因調査にはとても役立つことがあります。
全く馴染みのないプログラムでエラーが発生した際も、冷静にエラーのスタックを確認してみましょう。
きっと問題を解消するヒントが得られるはずです。