JavaScriptでデフォルト引数とmap()を使って配列を経過時間の新しい配列にマッピングする方法

問題の概要

ストップウォッチの開始時刻（startTime）と停止時刻（stopTime）をペアで保持する、次のようなオブジェクトの配列が与えられたとします。

const arr = [
    { startTime: 1234, stopTime: 2345 },
    { startTime: 3452, stopTime: 9304 },
    { startTime: 2345, stopTime: 7432 },
    { startTime: 4567, stopTime: 6252 }
];

ここで求められているのは、このような配列を1つ受け取り、各エントリーごとに実際に経過した時間（stopTime − startTime）を計算し、その結果を要素とする新しい配列を返すJavaScript関数を作成することです。

上記の配列の場合、期待される出力は次のようになります。

const output = [ 1111, 5852, 5087, 1685 ];

解決策：map()メソッドによる実装

この問題は、Array.prototype.map()メソッドを使うことで簡潔に解決できます。関数の引数にはデフォルト値として空の配列を設定しておくことで、引数が渡されなかった場合でもエラーにならず安全に動作するようにしています。

コードは以下の通りです。

const arr = [
    { startTime: 1234, stopTime: 2345 },
    { startTime: 3452, stopTime: 9304 },
    { startTime: 2345, stopTime: 7432 },
    { startTime: 4567, stopTime: 6252 }
];
const findInterval = (arr = []) => {
    let res = [];
    res = arr.map(el => {
        const { startTime: sT, stopTime: eT } = el;
        const interval = eT - sT;
        return interval;
    });
    return res;
};
console.log(findInterval(arr));

コードのポイント

• デフォルト引数：(arr = []) のように引数に初期値を設定することで、引数なしで呼び出された場合にも安全に動作します。
• 分割代入：オブジェクトからstartTimeとstopTimeを取り出しつつ、より短い変数名（sT、eT）にリネームして可読性を高めています。
• map()：元の配列を破壊的に変更せずに、各要素を計算結果である経過時間へと変換した新しい配列を生成します。

実行結果

コンソールには次のように出力されます。

[ 1111, 5852, 5087, 1685 ]