JavaScript bindメソッドについて

Question

二次元配列を引数にとり、各配列の最大値を要素とする配列を返す関数を作れ、という課題がありました。
例）largestOfFour([[13, 27, 18, 26], [4, 5, 1, 3], [32, 35, 37, 39], [1000, 1001, 857, 1]]) should return [27,5,39,1001]

function largestOfFour(arr) {
  return arr.map(Function.apply.bind(Math.max, null));
}

模範解答の一つにこのようなものがありました。
基本的にはMath.max.apply(null, [9, 43, 20, 6])のような機能を実装しようとしているおようですが、「bind」の引数にnullを入れているのが腑に落ちません。
Math.maxをapplyのthisとし、nullがその第一引数となる、ということでしょうか？
Math.max.apply(null)
このようになると思うのですが、この場合、null以降の引数はどのようにして入れられるのですか？
支離滅裂になってしまいすみません。よろしくお願いいたします。

Answer 1

まず、Function.prototype.applyは、引数を配列として与えて、それを多数の引数として元の関数に渡せるメソッドですが、これの第1引数はthisにする値、第2引数が引数の配列、という形で引数を取ります（MDN）。

そして、Array.prototype.mapは、第1引数に処理中の値、第2引数にインデックス、第3引数に配列全体を渡してきます（MDN）。

この引数位置のズレを解消するために、「Math.max.applyの第1引数を固定する」必要があるので、Function.prototype.applyを、bind経由で呼び出しています。

なお、Function自体も関数なので、Function.applyはFunction.prototype.applyと同一の関数です。

Comments

[退会済みユーザー]

詳しいご回答ありがとうございます。
map()についてですが、
var array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);
\
console.log(map1);
// expected output: Array [2, 8, 18, 32]
今回の場合、「map(x =>」の部分のように引数を指定する必要はないのはどうしてでしょうか？

[maisumakun]

なお、「null」で動いているのは「Math.maxがたまたまthisを使っていなかった」だけなので、本来thisになるべき「Math」を渡すことをおすすめします。

[maisumakun]

「x => x * 2」は（微妙な違いはありますが）「function(x){ return x*2 }」という関数の短縮形です。

Function.bindで生成する結果も「関数」なので、mapにそのまま渡す必要があります。

[退会済みユーザー]

承知しました。
質問にも答えていただき、大変助かります。
ありがとうございました。

[m.ts10806]

質問者さんとは別の人が返事を…？

[Lhankor_Mhy]

ほんとだ、気がつかなかった。

第7条（禁止事項）
登録ユーザーは、本サービスの利用にあたり、以下の各号のいずれかに該当する行為または該当すると当社が判断する行為をしてはなりません。
...
(11) 複数のユーザーIDを1人で保有する行為
https://teratail.com/legal

複アカは規約違反です。ご注意されたい。

[退会済みユーザー]

申し訳ありません。
消しておきます。

Answer 2

applyの第一引数はthisObjだから、Math.max.apply(null, [9, 43, 20, 6])はMath.max([9,43,20,6])と解釈されると思います。Math.max()はthisを参照しないでしょうし。

Comments

[退会済みユーザー]

ありがとうございます。
null,undefinedにするとglobalObjectをthisとみなすということですか？

[papinianus]

> globalObjectをthisとみなす
仕様上そうですね(https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)

私が書いたのは、質問者さんが、Math.max.apply(null, [9, 43, 20, 6])はMath.max.apply(null)になると認識されていた(がゆえに奇妙に思われていた)ことへの回答なので、globalObjectがthisにあると理解のある方には、無用の回答かと思います。

[papinianus]

参考までに、おそらくの出典
https://forum.freecodecamp.org/t/chaining-function-apply-bind-in-return-largest-number-in-arrays/105438

[退会済みユーザー]

ご返信が遅くなりました。
リンク、ありがとうございます！