JavaScript を学ぶ際に一番重要なのに、誤解されがちな setTimeout 系の概念

おそらく、JavaScript を使いこなす肝は

setInterval、setTimeout、イベントによる関数の実行を理解することだと思う

例えば

次のコードの結果を考えたとき

document.write("hoge\n");
setTimeout(function(){ document.write("fuga\n") }, 1000);
document.write("piyo\n");

普通に JavaScript を使いこなしてる人なら、hoge → piyo と表示して、 1 秒後に fuga が表示されるな。って思うはずなんです。
でも、 JavaScript を始めたばっかりの人の中には、 hoge と表示したあと 1 秒後に fuga → piyo と表示するな。って思ってる人が非常に多い。(経験的に)

何故か？

たぶん、どのサイトの setTimeout の説明を見ても

指定された時間後(ミリ秒)に関数を実行します。

と書いてあるからだ。こう書かれていたら誤解されてもしょうがない。

ぶっちゃけ、

関数は指定された時間後に実行されるとは限らない。

どういうことなの？

たとえば、以下のようなソースの場合、hello と表示されるのはいつだろうか

setTimeout(function() { alert("hello") }, 10);

〜ここに重くて、1秒の時間を有する処理を書く〜

答えは 1000 ミリ秒後である。確実に 1000 ミリ秒後である。

つまり

JavaScript には実行キューがあり、setTimeout は指定秒後にそれに関数を登録している、ということなのである。

これが理解できていると、何が嬉しいのか

var a;
var id = setTimeout(function() { alert(a) }, 10);
ここに、複雑な a の初期化処理を書く

こうしたときに、 a は確実に初期化されてることが保証される。
実は簡単なことだが、これを自信満々で言い切れると言い切れないとではおおちがいである。

なぜこういう話題を今さら書いたのか

この特殊な関数呼び出しを説明するのに、いつも物凄い労力を要するのです。
このひとつの実行単位に何か良い名前はないものでしょうか？
スレッドでもないしなぁ。。。。
なんだろう。スレッドとかなり近い概念なんだけどなー。