forEachの関数の呼び出しについて

Question

関数を呼び出すときは 関数名()のように呼び出すと思うのですが、
どうして以下の一つ目コードのように ()を使わないで呼び出さないといけないんですか？

２つ目のコードだとエラーが出ます。
それぞれのコードでの処理を違いを教えていただきたいです。

var numbers = [1,2,3,4,5];

var sum = 0;

function adder(number) {
	sum += number;
}

numbers.forEach(adder);

var numbers = [1,2,3,4,5];

var sum = 0;

function adder(number) {
	sum += number;
}

numbers.forEach(adder());

Answer 1

２つ目のコードだとエラーが出ます。

forEachの引数には関数自体を渡す必要があるからです。
adder()と渡してしまうと、その場で実行した返り値をforEachに渡すことになります。

var numbers = [1,2,3,4,5];
var sum = 0;

function adder() {
  return function (number) { // 返り値に関数を返せば動く。
    sum += number;
    console.log(sum);
  };
}
numbers.forEach(adder());
```**動くサンプル：**[https://jsfiddle.net/drznq3jo/](https://jsfiddle.net/drznq3jo/)

---

【Array.prototype.forEach() - JavaScript | MDN】
[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)

Comments

[退会済みユーザー]

forEachは関数自体を渡す必要があるのですね。
動くサンプルなども用意していただきありがとうございました。

Answer 2

それはJavaScriptが関数を引数に渡して実行してもらう特殊な言語だからです。

まずはやることを関数として作ってしまいます。
この時、adder関数はTODOリストであり、数値を入れて実行すればsumの数値が増える仕組みになっています。

var sum = 0;
function adder(number) {
    sum += number;
}

Array.prototype.forEachは関数を引数としてくださいと言っています。

// こういう風に実行すると
var numbers = [1,2,3,4,5];
numbers.forEach(adder);

// =====forEachの実行をエミュレート=====
for (var i = 0; i < numbers.length; i++) {
  var num = numbers[i];
  adder(num, i, numbers);
}

２つ目のコードだとエラーが出ます。

それぞれのコードでの処理を違いを教えていただきたいです。

当然の話をしますが、関数はお尻に()を付ければ実行として扱います。
adderは引数を1個取りますが、returnを書いていないのでundefinedが帰ってきます。

// undefinedを実行してみよう！
var fn = undefined;
fn(1); // VM102:2 Uncaught TypeError: fn is not a function

エラーが出て起こられました。
関数実行が出来るのは当然ながら関数だけです。

つまり、どういうことだってばよ？

var numbers = [1,2,3,4,5];
numbers.forEach(adder());

// =====forEachの実行をエミュレート=====
var fn = adder(); // この時点でfnにはundefinedが格納される
for (var i = 0; i < numbers.length; i++) {
  var num = numbers[i];
  fn(num, i, numbers); // fnは関数じゃないのでエラーになって死ぬ
}

知ってれば当然の話ですね。
なのでforEachには関数を渡してあげましょう。

他のコールバック関数も同様で、関数を実行してしまうと値に変化してしまうので、
実行せずに渡してあげてください。

Comments

[退会済みユーザー]

詳しく回答して頂きありがどうございます。勉強になります。