ESLintでexpects a return value from arrow function array-callback-returnと警告が出た時の対処法

expects a return value from arrow function array-callback-return 

現在、もりけん塾の課題20にチャレンジしています。オブジェクトから、配列を作成し、表に出力するという課題です。

このようなオブジェクト作りました。

const UsersTableColumn = {
    "id"     : "ID",
    "name"   : "名前",
    "gender" : "性別",
    "age"    : "年齢",
}

オブジェクトの値をObject.values()で配列にし、map()でループ処理をしたところ、ESLintでexpects a return value from arrow function array-callback-return という警告が出ました。

直訳すると、「アロー関数array-calback-returnは返り値を期待しています。」となります。返り値を記述すれば解決します。

下記は返り値がないので、警告が出ます。

Object.values(UsersTableColumn).map((column) => {
  const th = createAttributedElements({
    tag:"th",
    valuesByAttributes:{
    class:"text-sm text-white px-6 py-4",
    },
    str:column
  })
  tr.appendChild(th);
});

下記は、警告がでません。

Object.values(UsersTableColumn).map((column) => {
  const th = createAttributedElements({
    tag:"th",
    valuesByAttributes:{
    class:"text-sm text-white px-6 py-4",
    },
    str:column
  })
  tr.appendChild(th);
  return th;
});

map(),forEach(),filter()の違い

そもそも警告が出るということは、map()メソッドを使うべきではないのではとなったので、配列のループ処理をするメソッドについて調べました。

map()メソッド

map()メソッドは、与えられた要素から新しい配列を生成します。実行結果が配列として返るので、return文を使うことができます。

MDNのドキュメントには、map()メソッドを使わない方がいい場合について、下記のように記載されています。

mapを使用すべきではない場合

map は新しい配列を作成するので、返された配列を使わない場合、map を使うのはパターンに合いません。代わりに forEach または for...of を使用してください。

map を使用するべきでないのは以下の場合です。

・返された配列を使用しない場合
・コールバックから値を返さない場合

MDN: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map

forEach()メソッド

forEach()は、単純に配列のループ処理を行うだけで、返り値はありません。returnを使っても、underfinedが返ります。

filter()メソッド

条件に一致する要素を検索して、新しい配列を生成して返します。返り値を持つことができます。

条件に一致した要素のみを返します。配列から特定の条件に一致する要素を探すメソッドには、find()メソッドがあります。find()メソッドは条件に一致する配列内の最初の要素しか返しませんが、filter()メソッドは、検索に一致したすべての要素の配列を返します。

find()もfilter()も、条件に一致するものがないときは、underfinedを返します。

返り値を使わないときは、forEachやfor…ofを使おう

map()は、新しく生成された配列の入った返り値を使用しないときは、使うべきではない、ということがわかりました。単純に配列をループ処理させたいだけのときは、forEach()やfor…ofを使いましょう。

ということで、下記のように修正しました。

Object.values(UsersTableColumn).forEach((column) => {
  const th = createAttributedElements({
    tag:"th",
    valuesByAttributes:{
    class:"text-sm text-white px-6 py-4",
    },
    str:column
  })
  tr.appendChild(th);
});

同じように見えるループ処理でも、返り値を意識することが必要だと学びました。用途にあわせて、メソッドを使い分けることができるようにしていきたいと思います。