再帰関数を変数に代入してそれをreturnする時の挙動が理解できない

Question

わからないこと

以下のJSのプログラムを出力した時の結果が理解できません。
実際の出力結果は以下のようになりますが、なぜプログラムの「ここから」「ここまで」の部分が複数回繰り返されるのかがいまいちよくわかりません。

var x = 0;
var y = 0;

function rec() {
    x += 1
    console.log(`x: ${x}`)
    if(x === 3) {
        return "hogehoge"
    }
    console.log("hugahuga")
    var result = rec();
    // ここから
    console.log(result)
    y += 1;
    console.log(`y: ${y}`)
    // ここまで
    return result;
}

rec();

x: 1
hugahuga
x: 2
hugahuga
x: 3
hogehoge
y: 1
hogehoge
y: 2

以下のように、再帰関数を変数に代入せずにそのままreturnすると上のような繰り返しは起こりません。

var x = 0;
var y = 0;

function rec() {
    x += 1
    console.log(`x: ${x}`)
    if(x === 3) {
        return "hogehoge"
    }
    console.log("hugahuga")
    
    return rec();
}

rec();

x: 1
hugahuga
x: 2
hugahuga
x: 3

Answer 1

挙動を追うのであれば、ステップ実行させてみるのが適当です。
この程度のコードであれば、ブラウザの開発ツールでも良いですが、以下でもわかりやすく表現できます。

http://pythontutor.com

Answer 2

こちらのサイトでコードの処理が追えるので参考にしてください。JavaScript Tutor

繰り返されているのは、

var result = rec();

の行でrec()が呼び出されているからです。以下に、rec()の動作を記述します。

x += 1
console.log(`x: ${x}`)

x: 1

↓

console.log("hugahuga")
var result = rec();

hugauga

ここでrec()が再帰されます。

// 再帰されたrec()の内部挙動
x += 1
console.log(`x: ${x}`)
console.log("hugahuga")
var result = rec();

x: 2
hugahuga

さらに再帰の中でもう一度rec()が呼び出されます。ただし、if (x===3)にひっかかり、"hogehoge"がreturnされますので、そこで再起されたrec()の処理は終了します。

// 再帰されたrec()の内部挙動(2回目)
    x += 1
    console.log(`x: ${x}`)
    if(x === 3) {
        return "hogehoge"
    }

x: 3
hogehoge

そして再帰から抜けて、以下の行が実行されます。すでにx=3なのでif (x===3)にひっかかります。
(なぜここで10行目のconsole.log("hugahuga")がスキップされるのかは、私も分かりません。どなたか補足説明いただけると嬉しいです。)

    var result = rec();
    // ここから
    console.log(result)
    y += 1;
    console.log(`y: ${y}`)
    // ここまで

y: 1

最後の行でreturn result;となっているので、resultがもう一度呼び出されて再帰します。
(ここでもなぜ、13行目から処理が再開するのか私には分かりません。)

    // ここから
    console.log(result)
    y += 1;
    console.log(`y: ${y}`)
    // ここまで

hogehoge
y: 2

どなたか補足で説明をよろしくお願いします。

Comments

[melonattacker]

`rec()`の呼び出しは（rec関数内・外を合わせて）3回ありますが、1、２回目は`var result = rec();`の行で一旦止められ、次の再帰に入ってしまいます。そして、3回目の呼び出しではrec関数は最後まで実行されます。その後に、止められていた１、2回目の実行が2回目、1回目の順で`var result = rec();`の行から再スタートするということだと思いました。