関数をconstに代入しないとエラーになる理由

Question

MDNのクロージャについての記事で、以下のコードについて質問があります。

function makeFunc() {
  var name = 'Mozilla';
  function displayName() {
    alert(name);
  }
  return displayName;
}

var myFunc = makeFunc();
myFunc();

この

var myFunc = makeFunc();
myFunc();

の関数の呼び出し部分を、ただ単にmakeFunc();と記述しても同様の結果が得られると思ったのですが、エラーになってしまいました。

なぜmyFuncに代入する必要があるのでしょうか。

ご回答頂けると幸いです。

Comments

[int32_t]

> エラーになってしまいました。

どんなエラーですか?

[退会済みユーザー]

function makeFunc() {
var name = 'Mozilla';
function displayName() {
alert(name);
}
return displayName;
}

makeFunc();

↓

ƒ displayName() {
alert(name);
}

こんな感じで、関数displayNameがそのまま帰ってきてしまいます。
returnでdisplayNameが戻り値になるようになっているので、こうなることは分かるのですが、なんでmyFuncに代入するとエラーが出なくなるのかなと思いました。

[int32_t]

それはふつう「エラーになる」とは言いません。期待通りに動いてないだけで。

Answer 1

関数 makeFunc を 呼び出した(makeFunc())結果が関数で、その関数を実行するには () を付けて呼び出す必要があります。ただ makeFunc(); と書いただけでは返ってきた関数を呼び出していません。

var myFunc = makeFunc();
myFunc;

と書いても myFunc が実行されないのと同じことです。

変数に代入しない同等の書き方は、makeFunc()(); です。

Comments

[退会済みユーザー]

理解するのに大分苦労しましたが、スッキリしました。継続して勉強頑張りたいと思います！！

Answer 2

makeFunc は関数を返す関数です。つまり ()を付けて makeFunc() とすると関数が返されます。やりたいことは、makeFunc() が返した関数を実行することなので、関数の返した値が関数であるときに限らず返された値を使いたいときに

var myFunc = makeFunc();

として、いったん変数に入れて使おうとしています。makeFunc() が返すのは関数なので、それを使うというのは () を付けて、それを呼ぶということなので次に

myFunc();

としています。
なお、関数の返した値をいったん変数に入れることをしないで、コードを削減することはよくあることですが、この場合も

var myFunc = makeFunc();
myFunc();

の2行でやっていることを、中間の変数 myFunc にいったん入れておくということをせずに、1行で

makeFunc()();

と書くこともできます。

補足ですが、Javascript の関数が関数を返すことのできる性質のことを「Javascriptの関数は第一級オブジェクトである」とか「Javascriptの関数は第一級関数である」と言ったりします。また makeFunc() のような関数を返す関数、あるいは関数を引数として取る関数のことを高階関数と言います。

Answer 3

それは、エラーというよりreturnの仕様ですね
returnの内容によると関数を返すという意味になるので
そのまま帰ってきてしまいます
もし、そのまま実行したいのであればこうしてみてください

function makeFunc() {
  var name = 'Mozilla';
  alert(name);
}

makeFunc();

追記
期待どおりに動かないのは
関数を実行する()をつけていないからです

Comments

[Zuishin]

クロージャの学習に使用されているサンプルコードと思われます。
高階関数でなくすのは本末転倒です。