snippetjavascriptTip

Formatting day and hour ranges with JavaScript

Submitted by: @import:30-seconds-of-code·Mar 2, 2026·

Viewed 0 times

javascriptrangesformattingandhourwithday

Problem

I've long held the belief that algorithmic challenges are sort of a rarity in the world of web development, especially in frontend. But every now and then, you come across a problem that makes you think a little harder. This is exactly the case for a sort of formatting problem I recently encountered.
Instead of boring you with all the details, I'll get straight to the specifics. Given an array of objects, containing day names and respective working hour ranges, I needed to format this data into an array of human-readable strings.
Let's look at an example to make things clearer:
Before even attempting to implement a solution, it's a good idea to break down the problem. In my head, this translates to the following subproblems:

Group the days with consecutive working hours.

Solution

// Sample input:
const inputData = [
  { day: 'Tuesday', from: '09:00', to: '17:00' },
  { day: 'Wednesday', from: '09:00', to: '17:00' },
  { day: 'Thursday', from: '09:00', to: '17:00' },
  { day: 'Friday', from: '09:00', to: '17:00' },
  { day: 'Saturday', from: '10:00', to: '14:00' }
];

// Expected output:
const outputData = [
  'Monday: Closed',
  'Tuesday - Friday: 09:00 - 17:00',
  'Saturday: 10:00 - 14:00',
  'Sunday: Closed'
];

Let's look at an example to make things clearer:
Before even attempting to implement a solution, it's a good idea to break down the problem. In my head, this translates to the following subproblems:

Group the days with consecutive working hours.
Format the grouped days into human-readable strings.
Add the missing days to the final output.

While my initial thoughts were to tackle these subproblems in order, I quickly realized that the third subproblem could be solved in parallel with the first one. This would make the solution more efficient and easier to implement.

Code Snippets

// Sample input:
const inputData = [
  { day: 'Tuesday', from: '09:00', to: '17:00' },
  { day: 'Wednesday', from: '09:00', to: '17:00' },
  { day: 'Thursday', from: '09:00', to: '17:00' },
  { day: 'Friday', from: '09:00', to: '17:00' },
  { day: 'Saturday', from: '10:00', to: '14:00' }
];

// Expected output:
const outputData = [
  'Monday: Closed',
  'Tuesday - Friday: 09:00 - 17:00',
  'Saturday: 10:00 - 14:00',
  'Sunday: Closed'
];

const weekdays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

const formatDayRanges = (data) =>
  weekdays.reduce((acc, day) => {
    const dayData = data.find((d) => d.day === day);

    const hours = dayData ? `${dayData.from} - ${dayData.to}` : 'Closed';

    if (acc.length && acc[acc.length - 1].hours === hours) {
      acc[acc.length - 1].days.push(day);
    } else {
      acc.push({ days: [day], hours });
    }

    return acc;
  }, []);

// Given the sample input from the problem definition
const result = formatDayRanges(inputData);
// [
//   { days: ['Monday'], hours: 'Closed' },
//   {
//      days: ['Tuesday', 'Wednesday', 'Thursday', 'Friday'],
//      hours: '09:00 - 17:00'
//   },
//   { days: ['Saturday'], hours: '10:00 - 14:00' },
//   { days: ['Sunday'], hours: 'Closed' }
// ]

Context

From 30-seconds-of-code: formatting-day-hour-ranges

Revisions (0)

No revisions yet.