関数について分からない部分があります

以下のコードにつきまして、分からない部分があります。

javascript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5
6</head>
7<body>
8    <script>
9    function closure(init) {
10        var counter = init;
11        
12        return function(){
13            return ++counter;
14        }
15    }
16    
17    var myClosure = closure(1);
18    
19    console.log(myClosure()); //結果:2
20    console.log(myClosure()); //結果:3
21    console.log(myClosure()); //結果:4
22    </script>
23</body>
24    
25</html>

上記のコードにおきまして、「var myClosure = closure(1);」としている部分で、既に変数counterは、下記の部分で2となっているのではないかと思うのですが、下記の部分の変数、counterがインクリメントされている、部分はなぜ実行されず、最初のconsole.log(myClosure()); で、「2」が出力されるのでしょうか？

 return function(){
            return ++counter;
        }

どなたかご解説頂ける方いましたら、よろしくお願いいたします。

行動規範の内容に同意します

回答3件

関数作っただけでは実行はされませぬ

js
1    function closure(init) {
2        var counter = init;
3		console.log('create closure');
4        return function(){
5			console.log('execute closure');
6            return ++counter;
7        }
8    }
9
10    var myClosure = closure(1);
11    console.log('created closure');
12
13    console.log(myClosure());
14    console.log(myClosure());
15    console.log(myClosure());
16/*
17結果
18[Log] create closure
19[Log] created closure
20[Log] execute closure 
21[Log] 2
22[Log] execute closure
23[Log] 3
24[Log] execute closure
25[Log] 4
26*/

投稿2018/09/02 02:17

KazuhiroHatano

総合スコア7804

ベストアンサー

先行回答からすると蛇足にも思えるのですが、補完的に。

関数closureは、「「値を返す関数」を返す関数」です。なので、closure(something)を=の右に書いて左辺で得られるのは、「関数」です。

javascript
1function add(a, b) { //値を返す関数
2  return a + b;
3}
4const c = add(1, 2); // cは値
5function adder(a) { //「値を返す関数」を返す関数
6  return function(b) { return a + b;}
7}
8const d = adder(1); //dは関数
9const e = d(2); //e = 3;

var myClosure = closure(1);の1ですが、細かくはclosureは「自身が受け取った値を渡し「渡された値を初期値として保持し、保持している値から計算した値を返す関数」を返す関数」ということになっているので、"初期値"という理解は強ち間違いではないと思います。

returnを実行した結果、ソースコードに書いてあるような関数宣言から、実行可能な関数オブジェクトが作成されて、返されています。ただfunctionの本体({}の中身)は、"関数呼び出し"が起こるまで実行されませんので、関数に紐付いた名前が関数に付けられた名()のように関数呼び出しされないと、計算されません(なので、++が最初に起こるのは、console.log(myClosure()); //結果:2の場所ということになります)

投稿2018/09/03 01:57

papinianus

総合スコア12705

newyee

2018/09/03 10:19

ご回答いただきありがとうございます。僕自身、関数を返すという部分で混乱してしまっていたのですが、　return function(){ 　　return ++counter; 　　　} 上記の部分で、returnされているものは関数であり、関数そのものを変数、myClosureに代入しているだけなんだなと、ようやく理解することができました。ご丁寧にご回答いただけましたおかげで、理解することができました。ありがとうございました。

行動規範の内容に同意します

「var myClosure = closure(1);」としている部分で、既に変数counterは、下記の部分で2となっているのではないかと思うのですが、

closure(1) のタイミングでは、内包関数は実行されていないので、++counter のインクリメントは発生しません。
関数式を関数呼び出しするには、下記のように () を付与しなければなりません。

JavaScript
1(function(){
2  console.log('execute closure');
3  return ++counter;
4}());

Re: newyee さん

投稿2018/09/02 02:18

編集2018/09/02 02:23

think49

総合スコア18162

newyee

2018/09/02 06:59

ご回答いただきありがとうございます。すみません。ご回答頂いたのに、度々で申し訳ないのですが、理解することができず２点程お聞きしたいことがございます。 var myClosure = closure(1);の部分なのですが、「closure(1)」の「１」というのは初期値のようなものなのでしょうか？そして、内包されている関数が実行されていないという部分に関してなのですが、return文は実行されなければ、値が返らないため、++counterインクリメントも発生しないという解釈で合っていますでしょうか？

think49

2018/09/02 07:44

> var myClosure = closure(1);の部分なのですが、「closure(1)」の「１」というのは初期値のようなものなのでしょうか？それは実引数です。実引数は関数定義側の仮引数に渡されます。関数の基本的な部分なので、関数定義方法から見直して下さい。 https://ja.wikipedia.org/wiki/%E5%BC%95%E6%95%B0 > そして、内包されている関数が実行されていないという部分に関してなのですが、return文は実行されなければ、値が返らないため、++counterインクリメントも発生しないという解釈で合っていますでしょうか？ return 文は実行されており、返り値に「関数オブジェクト」が指定されています。 return parseInt() と return parseInt の違いです。

newyee

2018/09/03 10:25

僕自身、関数を返すという部分で混乱してしまい、まったく見当違いなことを聞いてしまい、すみませんでした。実は、return文が２つあり、そこの部分で変に混乱してしまっていました。最初のreturn文で関数が返されているということが理解できていれば、混乱することもなかったと反省しております... 長々とご解説頂き、ありがとうございました。

行動規範の内容に同意します

あなたの回答