JavaScript map()으로 시작·종료 시간 배열을 경과 시간 배열로 변환하는 방법

스톱워치의 시작 시간(startTime)과 종료 시간(stopTime)이 담긴 다음과 같은 객체 배열이 있다고 가정해 보겠습니다.

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

이 배열을 입력으로 받아, 각 항목에 대해 실제로 경과한 시간(종료 시간에서 시작 시간을 뺀 값)만 담은 하나의 최종 배열을 만드는 JavaScript 함수를 작성해야 합니다.

따라서 위 배열에 대한 출력 결과는 다음과 같아야 합니다.

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

예제 코드

이를 구현한 코드는 다음과 같습니다.

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));

실행 결과

콘솔에 출력되는 결과는 다음과 같습니다.

[ 1111, 5852, 5087, 1685 ]

코드 설명

findInterval 함수는 Array.prototype.map() 메서드를 사용해 원본 배열의 각 객체를 순회합니다. 먼저 구조 분해 할당(Destructuring)을 통해 각 객체에서 startTime과 stopTime 값을 추출한 뒤, 두 값의 차이를 계산하여 경과 시간을 구합니다. 그리고 이 값을 새 배열의 요소로 반환합니다.

map()은 원본 배열을 변경하지 않고 새로운 배열을 반환하기 때문에, 이처럼 기존 데이터를 다른 형태로 변환하는 작업에 가장 적합한 메서드입니다. 만약 특정 항목에 종료 시간이 없는 경우 등 예외 상황을 처리해야 한다면, eT ?? 0처럼 기본값(default value) 문법을 활용해 안전하게 처리할 수도 있습니다.