JavaScript 배열 가공하기: 시간 문자열을 [시, 분] 형태로 변환하는 방법

문제 상황

다음과 같이 시간 정보를 담고 있는 객체 배열이 있다고 가정해 보겠습니다.

const arr = [
    {"time":"18:00:00"},
    {"time":"10:00:00"},
    {"time":"16:30:00"}
];

이러한 배열을 입력으로 받아 아래 작업을 수행하는 JavaScript 함수를 작성해야 합니다.

• JSON 데이터에서 시간 값을 추출합니다. 예: 18:00:00, 10:00:00, 16:30:00

• 시간을 [18, 0], [10, 0], [16, 30]과 같은 형태로 변환합니다.

• 변환된 값들을 하나의 배열에 담습니다.

• 최종 배열을 반환합니다.

예제 코드

위 요구 사항을 구현한 코드는 다음과 같습니다.

const arr = [
    {"time":"18:00:00"},
    {"time":"10:00:00"},
    {"time":"16:30:00"}
];
const reduceArray = (arr = []) => {
    let res = [];
    res = arr.map(obj => {
        return obj['time'].split(':').slice(0, 2).map(el => {
            return +el;
        });
    });
    return res;
};
console.log(reduceArray(arr));

실행 결과

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

[ [ 18, 0 ], [ 10, 0 ], [ 16, 30 ] ]

코드 동작 원리

핵심 로직을 단계별로 살펴보면 다음과 같습니다.

• map(): 배열의 각 객체를 순회하면서 새로운 배열을 생성합니다.

• split(':'): "18:00:00" 같은 시간 문자열을 콜론(:) 기준으로 분리해 ["18", "00", "00"] 배열을 만듭니다.

• slice(0, 2): 분리된 배열에서 앞의 두 요소, 즉 시와 분만 잘라냅니다.

• +el: 단항 더하기 연산자를 사용해 문자열을 숫자로 변환합니다.

이처럼 map, split, slice 메서드를 조합하면 복잡한 반복문 없이도 간결하고 가독성 좋은 코드로 시간 데이터를 원하는 형식으로 손쉽게 변환할 수 있습니다.