こんにちは、さるまりんです。
JavaScriptを書いていると、
「なんでこうなるんだろう？」
と思うことがあります。
今日は、その中でも一つ、不思議に感じているコードを見てみます。
このコード、どうなると思いますか？
console.log("こんにちは");
setTimeout(() => {
console.log("あとで");
}, 1000);
console.log("さようなら");少し考えてから実行してみてください。
どうなりましたか？
結果は、
こんにちは
さようなら
あとでとなったのではないでしょうか。
「あれ？」
と思いませんでしたか？
JavaScriptは一つずつ仕事をしています
実は、
JavaScriptは基本的に、一つずつ順番に仕事をします。
例えば、
console.log("A");
console.log("B");
console.log("C");なら、
A
B
Cという順番になります。
これはイメージしやすいですね。
では、最初の setTimeout() が入ったコードはどうでしょう。
途中で別の仕事を始めたようにも見えます。
でも、実際にはそうではありません。
「あとでお願いします」とお願いしているだけ
setTimeout() は、
「今すぐ実行してください」
ではなく、
「あとでお願いします」
とお願いしているようなものです。
つまり、
setTimeout(() => {
console.log("あとで");
}, 1000);を書いた瞬間に、
すぐ console.log("あとで") が実行されるわけではありません。
setTimeout() に渡した処理は、
「あとで実行する仕事」として予約されます。
そしてJavaScriptは、
そのまま次の行へ進みます。
だから、
console.log("さようなら");が先に実行されます。
そして、
あとから
あとでが表示されます。
画面の中でも、同じようなことが起きています
この「あとで実行する」という考え方は、
setTimeout() だけのものではありません。
例えば、Webページでボタンをクリックしたときの処理もそうです。
ボタンは、ページを開いた瞬間に全部押されるわけではありません。
「クリックされたら、この処理をしてね」
という形で、あとから実行されます。
データを読み込んだあとに画面を変える、
入力された文字に合わせて表示を変える、
そういう場面でも、JavaScriptは「今すぐやる仕事」と「あとでやる仕事」を扱っています。
だから、この考え方を少し知っておくと、
JavaScriptのコードを読むときに、
「どの順番で動いているんだろう？」
と考えやすくなります。
実は途中で止まっていたわけではありません
最初は、
「途中で待っている」
ように見えます。
でも実際には、
JavaScriptは止まっていたわけではありません。
今できる仕事を最後まで進めてから、
あとでお願いされていた仕事を実行しています。
つまり、
JavaScriptは最初から最後まで、
一つずつ順番に仕事をしているんです。
ここが、JavaScriptを理解するときの、とても大切な考え方になります。
今回のまとめ
今回は、
JavaScriptは一つずつ仕事をしていて、
setTimeout() は「あとで実行してね」とお願いしているだけ、
というところを見てきました。
だから、
こんにちは
さようなら
あとでという順番になるんですね。
不思議なことではなくなってきましたね。
この続き
でも、一つ疑問が残ります。
「あとでお願いします」
と言われた仕事は、
いったい誰が呼び戻しているのでしょう？
実は、JavaScriptにはそのための仕組みがあります。
この続きは、またJavaScriptの記事で一緒に見ていこうと思います。
読んでくれてありがとうございます。
それではまた！