JavaScriptの基本的な処理のされ方や順番について

Question

前提

プログラミングの基本的な質問です。
JavaScriptの勉強をしているのですが、２つのコードの違いというか、処理のされ方の違いについて知りたいのですが、

該当のソースコード

例１
function hello() {
	console.log("Hello");
}

setTimeout(hello, 1000);

// この場合だとHelloが少し時間をおいて１回出力される

しかし、setTimeout(time, 1000); が中に入った場合

例２
function hello() {
	console.log("Hello");
	setTimeout(hello, 1000);
}

hello();

// これだと Hello が永遠に出力される(ループ)

知りたいこと(プログラミングにおいての処理の順番やされ方を知りたい)

プログラミング初心者です。JavaScriptについての質問なのですが、

上に書いたコードと下に書いたコードの違いが分かりません。

上に書いたコードがsetTimeoutで1000ミリ秒後にHelloを出すのは分かるのですが、

下のコードだと永遠にループしてしまいます。

hello();でhello関数の中身を1000ミリ秒後に中で処理をしてそれで終わりという事にはならないのでしょうか？

下のコードの場合は上のパターンとは違って、一度関数の中の処理をした後に外に出て、再度自動的にhello();の処理をするので、また関数内に戻って出て処理をして外に出て外の処理をしての繰り返しになってしまうという意味合いなのでしょうか？

プログラミング初心者で質問の内容も分かり辛いかもしれませんが、回答いただけるとありがたいです。

Answer 1

自分も駆け出しですので間違えていたらご容赦を

先に簡潔に答えますと簡単な訂正としてhello();は一度しか処理されてません。
呼び出されたhello()メソッドの中で処理が無限に生成されループが起きています。

hello();がhello()メソッドを１度だけ呼び出した後、hello()メソッドの中に
setTimeout(hello, 1000);といったhello()メソッドをまた呼び出す処理が入っています。
そうすると、hello()の中のsetTimeoutがhello()を呼び出して今呼び出したhello()の中のsetTimeoutからまた…
hello(){}→setTimeout(hello, 1000)→hello(){}→setTimeout(hello, 1000)→...
といったイメージでループしているかと

上の例１だとsetTimeoutがhello()を呼んでコンソールに出力して終わりなのでループはおきません。

Comments

[cqwbxx]

回答ありがとうございます。今回テラテイルを使うのが初めてなのですが非常に助かりました。プログラミングは難しく未だ理解出来ていない事ばかりです。これからもお互い頑張りましょう。

Answer 2

setTimeout(hello, 1000);

たしかこれは、1000ミリ秒ごとに　この場合　hello という関数を実行するわけですが。

例2の場合

function hello() {　　　　　　←ここで関数 hello を定義している。（タイミング※１）
	console.log("Hello");
	setTimeout(hello, 1000);　←ここで関数 hello を再度実行している（タイミング※2）
}

hello();　←関数helloを実行させている。

JavaScript　は　上から処理が落ちていくので、タイミング※２の時点で、helloをもう一度実行させている（タイミング※１を呼び出している）ので、ものすごい勢いで永遠に　"Hello"　が出力され続けるということかと。

Comments

[cqwbxx]

この場合は関数helloが２回実行されているという事になるのですね。納得がいきました。
今回テラテイルを使うのが初めてなのですが非常に助かりました。親切にご回答ありがとうございます。