JavaScriptのarray.map()で直前に処理した要素にアクセスする方法

JavaScriptでmap()メソッドを使って配列を処理する際、直前に処理した要素（前の要素）の値を参照したいケースはよくあります。map()のコールバック関数には第2引数として現在のインデックス（index）が渡されるため、このインデックスを利用して元の配列から前の要素にアクセスできます。

次のような配列を例に考えてみましょう。

var details = [
    {subjectId:110, subjectName: 'Java' },
    {subjectId:111, subjectName: 'JavaScript' },
    {subjectId:112, subjectName: 'MySQL' },
    {subjectId:113, subjectName: 'MongoDB' }
];

サンプルコード

それでは、map()を使って各要素に「直前の要素の科目名」を追加するコードを見てみましょう。

var details = [
    {subjectId:110, subjectName: 'Java' },
    {subjectId:111, subjectName: 'JavaScript' },
    {subjectId:112, subjectName: 'MySQL' },
    {subjectId:113, subjectName: 'MongoDB' }
];
var output = details.map((detailsObject, index) =>
{
    var tempObject = {};
    tempObject.subjectId = detailsObject.subjectId;
    tempObject.subjectName = detailsObject.subjectName;
    const getThePreviousObject = index != 0 ? details[index-1] : null;
    tempObject.previousSubjectName = getThePreviousObject ?
        getThePreviousObject.subjectName : 'Not Available'
    return tempObject;
})
console.log(output);

コードのポイント

• map()のコールバック関数の第2引数indexで、現在処理中の要素の位置を取得します。
• 三項演算子を使い、indexが0以外の場合はdetails[index-1]で前の要素を取得します。
• 先頭の要素（indexが0）には前の要素が存在しないため、nullを代入し、最終的に「Not Available」という文字列を設定しています。

上記のプログラムを実行するには、Node.jsで次のコマンドを使用します。

node fileName.js

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

実行結果

このプログラムを実行すると、次のような出力が得られます。

PS C:\Users\Amit\javascript-code> node demo204.js
[
    {
        subjectId: 110,
        subjectName: 'Java',
        previousSubjectName: 'Not Available'
    },
    {
        subjectId: 111,
        subjectName: 'JavaScript',
        previousSubjectName: 'Java'
    },
    {
        subjectId: 112,
        subjectName: 'MySQL',
        previousSubjectName: 'JavaScript'
    },
    {
        subjectId: 113,
        subjectName: 'MongoDB',
        previousSubjectName: 'MySQL'
    }
]

このように、各オブジェクトにpreviousSubjectNameプロパティが追加され、直前の要素の科目名が格納されていることが確認できます。先頭の要素には前の要素が存在しないため、「Not Available」が表示されます。

なお、この手法はmap()に限らず、forEach()やfilter()など、インデックスを受け取れる配列メソッド全般で応用できます。また、元のオブジェクトをそのままコピーしたい場合は、スプレッド構文{ ...detailsObject }を使うと、より簡潔に記述できます。