JavaScript 関数をreturnする際の挙動

Question

前提

お世話になっております。
クロージャーを使った実装について学んでいた際、例に上がった下記コードの挙動について質問させていただきます。
(関数の内部に変数を持ちながらも外部からはアクセスできないようにする、かつincrement()を呼び出すたびに値に1ずつ加算されるコードです。)

function incrementFactory() {
    
    let num = 0;
 
    function increment() {
        num = num + 1;
        console.log(num);
    }
 
    return increment;//←ココ
}
 
const increment = incrementFactory();
 
increment();
increment();
increment();
increment();

質問

returnの部分をincrement()にするとエラーになるのは何故なのでしょうか？
挙動がいまいちよく分かりません。

Answer 1

()ってのは、関数に付ける単なる目印、ではなくて、関数を実行せよという指示だからです。

「ココ」では、incrementを実行して、その結果を返したいのではなく、increment自体を返したいので、()は付けません。

Comments

[..o]

ご回答ありがとうございます。
return increment();とする場合は関数の実行結果、return increment;の場合はincrement関数の参照をreturnで返却しているという考え方で大丈夫でしょうか?

[Daregada]

「incrementFactoryを実行したときのincrement関数のインスタンス(実体)」への参照ですね。こいつはレキシカル環境への参照を保持しており……という話になるので、詳しくは学んでいるメディア(本? Webサイト?)の説明をご覧下さい。

[..o]

なるほど！
ご丁寧にありがとうございます。調べてみます。

Answer 2

クロージャ内でincrement()を実行するとreturnがないのでundefinedが返るため、クロージャの外のincrementにはundefinedが入り、increment()はundefined()ということになり、undefinedは関数ではないのでエラーになります。

Comments

[..o]

ご回答ありがとうございます。
returnがないというのは、increment関数の中にreturnがない為
という事でしょうか？

[Lhankor_Mhy]

はい、その通りです。
return文で戻り値を明示しなかった関数は、undefined を返すのです。

[..o]

ありがとうございます！