JavaScriptのmap()で新しい要素が保存されない？正しい使い方と実装例を解説

JavaScriptでmap()メソッドを使う際、「新しい要素が配列に保存されない」という問題に直面することがあります。これは多くの場合、map()の戻り値を受け取っていないことが原因です。map()は元の配列を変更せず、新しい配列を返すメソッドだからです。

この記事では、ネストされた配列（2次元配列）の各要素に対して、その配列のインデックス番号を加算した結果を、正しく新しい配列として保存する方法を解説します。

実装例

以下のコードでは、外側の配列に対してforEach()でループ処理を行い、内側の各配列にmap()を適用しています。そして、その結果をupdatedArrayValueという新しい配列にpush()で追加することで、処理結果を確実に保存しています。

const addIndexValueToArrayElement = function (arrObject) {
   const updatedArrayValue = [];
   arrObject.forEach(function (ob) {
      const mapValue = ob.map(function (value) {
         return value + arrObject.indexOf(ob)
      })
      updatedArrayValue.push(mapValue)
   })
   return updatedArrayValue;
};
const output = addIndexValueToArrayElement([
   [4, 5],
   [7, 56],
   [34, 78],
]);
console.log(output);

上記のプログラムを実行するには、以下のコマンドを使用します。

node fileName.js.

ここでは、ファイル名を「demo323.js」として保存しています。

実行結果

上記のコードを実行すると、次のような出力が得られます。

PS C:\Users\Amit\javascript-code> node demo323.js
[ [ 4, 5 ], [ 8, 57 ], [ 36, 80 ] ]

解説

出力結果を見ると、各サブ配列の要素に対応するインデックス番号が加算されていることがわかります。

• 1番目の配列 [4, 5]：インデックス0なので 4+0=4、5+0=5 → 変化なし
• 2番目の配列 [7, 56]：インデックス1なので 7+1=8、56+1=57
• 3番目の配列 [34, 78]：インデックス2なので 34+2=36、78+2=80

ポイントは、map()が返す新しい配列を変数（ここではmapValue）に格納し、それを結果用の配列に追加している点です。もしmap()の戻り値を無視してしまうと、計算結果はどこにも保存されず、「要素が保存されない」という現象が起こります。また、より簡潔に書きたい場合は、map()だけを組み合わせてarrObject.map((ob, i) => ob.map(value => value + i))のように実装することも可能です。