同期処理と非同期処理の実行順序が決まる仕組みについて

Question

こんなコードを書いてみました。

function asyncRun(callback) {
	callback('async');
	console.log('asyncRun is called');
	callback('async');
}

function syncRun(callback) {
	callback('sync');
	console.log('syncRun is called');
	callback('sync');
}

function asyncFunc(value) {
	setImmediate(() => {
		console.log(value);
	})
}

function syncFunc(value) {
	console.log(value);
}

console.log('=1=')
asyncRun(asyncFunc);
console.log('=2=')
syncRun(syncFunc);
console.log('=3=')

ログ出力をみると結果はこうです。

=1=
asyncRun is called
=2=
sync
syncRun is called
sync
=3=
async
async

非同期処理は全ての同期処理が終わってから実行開始されるという解釈で良いのでしょうか？

例えば、同期処理の数がものすごく多い場合は、それらが全て終わってからではないと、非同期処理は実行されないのでしょうか？

あ、あれ？普通、非同期処理が先に走りませんでしたっけ？
なんで、こういう順序になってるんだろ。

Answer 1

Javascriptのプログラミングでは単一スレッドが前提なので同期的な処理は必ず連続して最後まで実行されます。(async/awaitのようなものはこの際除外して考えたほうが混乱しなくてすむと思います）

このコードではasyncFunc内部のsetImmediateの第一引数の関数本体(A)の実行以外が同期的な実行にあたりますので、それらが全て順番に実行されます。最後に実行されるのは'=3='の出力になります。これらすべてが完了するとeventループへ戻り、先ほど登録された(A)が登録順に起動されます。ということで

非同期処理は全ての同期処理が終わってから実行開始されるという解釈で良いのでしょうか？
例えば、同期処理の数がものすごく多い場合は、それらが全て終わってからではないと、非同期処理は実行されないのでしょうか？

どちらもYESです。

普通、非同期処理が先に走りませんでしたっけ？

非同期処理はこんな具合に動きます。例えば

setTimeout(callback, 1000)

を実行するとsetTimeout自体は同期的に実行されます。その第一引数であるcallbackは「1秒経過した以降にeventループから起動されるように登録される仕組みです。1秒経過時に同期処理が動いていたらそれが完了してeventループへ戻ってくるまで起動は待たされます。

「非同期処理が先に走る」というのは「同期部分」「非同期部分」が何かを曖昧に捉えておられることからくる誤解のような気がします。javascriptコードに出てくるのは「非同期処理を起動する関数呼び出し」と「非同期処理が完了した際に起動されるcallbackの実行」だけですので、「起動から完了までの間、Javascriptコードとは別の世界で動作している非同期処理の実行」と「完了時に起動されるJavascriptのコールバック関数の起動契機」をごっちゃにして考えると混乱してしまうと思います。