JavaScriptでオブジェクト配列から最大値を持つ要素を名前とともに返す方法

例えば、テストの点数情報を格納した学生オブジェクトの配列があるとしましょう。

const students = [
    { name: 'Andy', total: 40 },
    { name: 'Seric', total: 50 },
    { name: 'Stephen', total: 85 },
    { name: 'David', total: 30 },
    { name: 'Phil', total: 40 },
    { name: 'Eric', total: 82 },
    { name: 'Cameron', total: 30 },
    { name: 'Geoff', total: 30 }
];

このような配列を引数として受け取り、total の値が最も高い学生の name と total を持つオブジェクトを返すJavaScript関数を作成する必要があります。

上記の配列の場合、期待される出力は次のとおりです。

{ name: 'Stephen', total: 85 }

実装例

以下がそのコードです。

const students = [
    { name: 'Andy', total: 40 },
    { name: 'Seric', total: 50 },
    { name: 'Stephen', total: 85 },
    { name: 'David', total: 30 },
    { name: 'Phil', total: 40 },
    { name: 'Eric', total: 82 },
    { name: 'Cameron', total: 30 },
    { name: 'Geoff', total: 30 }
];
const pickHighest = arr => {
    const res = {
        name: '',
        total: -Infinity
    };
    arr.forEach(el => {
        const { name, total } = el;
        if(total > res.total){
            res.name = name;
            res.total = total;
        }
    });
    return res;
};
console.log(pickHighest(students));

コードのポイント

• 初期値の total を -Infinity に設定することで、配列内のどんな数値と比較しても必ず1つ目の有効な値が採用されます。これにより、負の点数が含まれる場合でも正しく動作します。
• forEach() で各要素を走査し、分割代入（const { name, total } = el;）でプロパティを取り出して比較しています。
• 現在の最大値よりも大きい total が見つかるたびに、結果オブジェクトを更新していきます。

より簡潔な代替手段：reduce() を使う方法

Array.prototype.reduce() を使えば、同じ処理をもっと短く書くこともできます。

const pickHighest = arr =>
    arr.reduce((max, el) => el.total > max.total ? el : max);
console.log(pickHighest(students)); // { name: 'Stephen', total: 85 }

reduce() は累積値として「これまでに見つかった最大のオブジェクト」を保持しながら配列を処理するため、初期化や一時変数が不要になり、コードが非常に読みやすくなります。

出力結果

いずれの方法でも、コンソールには次の出力が表示されます。

{ name: 'Stephen', total: 85 }