@yurihyp (yu ryp)posted at 2022-04-17

Javascriptのmapがis not a function

Q&A

Javascriptでmapを使ってみたところ、関数名 is not a functionと怒られてしまいました。
アロー関数の書き方が悪いでしょうか？
ご教示ください。

const arr = [1,2,3];

const mapMultyply = arr.map((value, num) => {
    return value * num;
});

console.log(mapMultyply(arr, 3));

2Answer

まず第一にarray.mapに引き渡すコールバックの引数は、Arrayの内側から提供されるもので、外部から直接提供するのもではありません。

mapMultyplyはArray.mapを適用された後のArrayであるということがわかります。

そのmapMultyplyに対して、引数を2つ渡したのだからエラーとなったというわけ。

ではどうすればよいかと言えば、何が内側から提供され、なにを外側から提供すべきかを整理する。

ARray.mapのコールバックの引数は、上述のページに

と書かれています。

そうすると

となる。

整理すると

const mapMultyply = function (arr, num) {
    arr.map(value => {
        return value * num;
    });
}

という感じでしょうかね（たぶん）

0Like

最近JavaScriptについて調べることが多く、質問を拝見させていただきました。
すでに解決していたようでしたが、少し別の方向からこの質問をお答えしたいと思います。
map()関数は、配列に走査し、値として配列を返しますので、
返り値を直接コンソール出力か

const arr = [1, 2, 3];
const num = 3

console.log(arr.map(value => value * num))

変数で値を受け取ってから出力か

const arr = [1, 2, 3];
const num = 3

let result = arr.map(value => value * num)
console.log(result)

同じく問題を解決することができると思います。
ただ、map()関数は.の前に指定した配列に作用するしかないので、二つ目以上のパラメータを入れるときには、どうしてもグローバルで宣告してから、です。
ご質問にお役に立てれば幸いです。

補足：毎回変数を変えるより、関数で呼び出したいなら、

const arr = [1, 2, 3];

let result = function (arr, num) {
  return arr.map(value => value * num)
}

console.log(result(arr, 3))

無名関数を変数resultとして宣告し、map()からの返り値をresult()で呼び出すとき返してもらいます。

0Like