関数を引数として使う時のデータの流れがよくわかりません。

Question

下記サイトの例文がよくわかりません。
http://www.ituore.com/entry/javascript-basic

①下記の2つのcallback「func(callback)」「return callback()」の関連が不明です。
また「あ」関数、「い」関数の関連が不明です。
どのようにデータが行き来しているのでしょうか。

// 関数を引数として使う
//「あ」関数
function func(callback) {
  return callback();
}

//「い」関数
func(function (){ return 1; }); // => 1

//ちょっとわかりにくいですが、funcという関数の引数として、名前の無い関数を使っています

② 下記で、「あ」関数は「return function() { return 1; }」の戻り値として「1」をfunc()が保持すると思います。
「い」関数の「func()()」の２番目の「()」の意味が不明です。

//次は関数を、他の関数の返り値として使うときの書き方です。

// 関数を返り値として使う
//「あ」関数
function func() {
  return function() { return 1; };
}

//「い」関数
func()(); // => 1


//funcという関数の返り値として、関数が返ってくるのでそれを実行しています。 

Answer 1

＞①下記の2つのcallback「func(callback)」「return callback()」の関連が不明です。

func(callback) の callback の中に function (){ return 1; } がはいるので
return callback() は return function (){ return 1; } となるはずです。

＞② 下記で、「あ」関数は「return function() { return 1; }」の戻り値として「1」をfunc()が保持すると思います。

func()() の func() は function() { return 1; } なので
それを実行するために、func()の後ろに()をつけています。
()をつけなければ実行されずに、ただ定義 function() { return 1; } が
そこにあるだけというイメージでいいと思います。

Comments

[dreamers]

ご回答ありがとうございます。
matariさんのご説明で概要はわかりました。
下記はあまり細かな質問で、言わずもがな、かもしれませんが一応質問させていただきます。

①の　return callback()；　は　return callback；　でも可能なのでしょうか。
② は　function() { return 1; } ()　となりますが、前半の　function() { return 1; }　が関数名で最後の（）が引数を入れる箇所として、全体で1つの関数。になっている。ということでしょうか。それとも全く違って、() 自体の役割がjavascriptマニュアルで 規定されているのでしょうか。
※あまり細かな質問かもしれません。
　matariさんのご説明で一応概要はわかりました。
　

[matari]

おそらく、「定義」と「実行」を混同されているのかなと思います。

上記の例で言うと、

function func() {
return function() { return 1; };
}

と記述したところで、この関数は「実行」されませんよね？
なぜなら、これは「定義」だからです。

また、

func()

と、記述すると上記の「定義」が実行されることは分かっていただけていると思います。
これは、funcという「定義」に対して、()で「実行」というイメージになります。

func

と記述すると、上記「定義」を返します。
このとき、「実行」されないので、
変数に格納したり引数に指定したりする必要があります。

[参考]
var a = func //「定義」を格納
a()　　　　　//格納した「定義」を実行

a(func)　　　//格納した「定義」を引数に渡して、「定義」を実行
　　　　　　　　※引数に引数なしのfuncを渡し、引数ありのfuncを実行

で、動作させたところ、func()は

function() { return 1; }

という「定義」を返してきます。しかしながら、期待しているのは「実行」なので

func() ()

ということになります。

ということを踏まえまして以下回答となります。

>①の　return callback()；　は　return callback；　でも可能なのでしょうか。
有り無しで動作は異なりますが、可能かどうかでいわれれば、可能だと思います。
この場合は、入れたものをそのまま返すことになりますので、
受け手側で「実行」する必要があります。（意味があるかどうかは別にして）

func(function (){ return 1; })()

>② は　function() { return 1; } ()　となりますが、前半の　function() { return 1; }　が関数名で最後の（）が引数を入れる箇所として、全体で1つの関数。になっている。ということでしょうか。それとも全く違って、() 自体の役割がjavascriptマニュアルで 規定されているのでしょうか。

その理解で、使用上、大方問題ないかと思います。
()の役割はおそらく、javascriptの言語仕様に記載されているものと推測されます。

ここまで書いてなんですが、私はjavascriptはほとんど経験なく、C#の知識で書いていますので、一度手元の環境でお試しください。。。

[dreamers]

お忙しいところ、詳細なご説明ありがとうございました。
よく、理解できました。

Answer 2

二番目の () は return で返された function() { return 1; }; を実行しているのですが、そもそもリンク先のサンプル自体が『関数を返す関数』のサンプルとして適当でないというかやっていることに意味がないというか...。

「こんなこともできますよ」という例として頭のスミにでもとどめておく、という程度でいいとおもいます。

Comments

[dreamers]

ご回答ありがとうございます。
ご説明で概要はわかりました。
matariさんへのコメントのようなこともチト疑問に思っています。