如何将数组转换为具有每个键的特定名称的JavaScript对象

Question

I'm trying use JavaScript to convert the following array into a JavaScript object but I don't know how to do it.

Here's my input array. For this array each key represents a day of the week (Sunday to Saturday). So key 0 = Sunday, key 1 = Monday ....all the way to key 6 which = Saturday.

var times = [["8:30-12:00","14:00-18:00"],
["6:15-9:30","13:00-16:00","20:00-23:15"],[],["9:00-21:00"],
["9:00-21:00"],[],[]];

This is the JavaScript object I'd like to convert the above times array to:

timeObj = {
  sunday: [
    {
      start: '08:30',
      stop: '12:00'
    },
    {
      start: '14:00',
      stop: '18:00'
    }
  ],
  monday: [
    {
      start: '06:15',
      stop: '9:30'
    },
    {
      start: '13:00',
      stop: '16:00'
    },
    {
      start: '20:00',
      stop: '23:15'
    }
  ],
  tuesday: [],
  wednesday: [
    {
       start: '9:00',
       stop: '21:00'
    }
  ],
  thursday:  [
    {
       start: '9:00',
       stop: '21:00'
    }
  ],
  friday:  [],
  saturday:  []
};

What's the best way to convert the array times into the object timeObj ?

Answer 1

You may create an array of corresponding days and loop over it. In each iteration, create the day's key in result object whose value will be the start and end time.

 var times = [["8:30-12:00","14:00-18:00"],["6:15-9:30","13:00-16:00","20:00-23:15"],[],["9:00-21:00"],["9:00-21:00"],[],[]]; var days = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday']; var result = {}; days.forEach((day, index) => { result[day] = times[index] .map(item => { let [start, stop] = item.split('-'); return {start, stop}; }); }); console.log(result); 

Answer 2

My suggestion is to use Array.prototype.reduce for 1-level list and Array.prototype.map for 2-level lists to create appropriate object of arrays:

const data = [["8:30-12:00","14:00-18:00"],["6:15-9:30","13:00-16:00","20:00-23:15"],[],["9:00-21:00"],["9:00-21:00"],[],[]];
const days = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];

const result = data.reduce((acc, item, index) => { 
  acc[days[index]] = 
    item.map(day => ({ 
      start: day.substr(0, day.indexOf('-')), 
      end: day.substring(day.indexOf('-') + 1)
    }));
  return acc;
 }, {});

Answer 3

Update

As this post is extremely long and goes into the software design and mathematics of the solution, I've posted the final answers here at the top

Recommended Answer (human readable):

var times = [["8:30-12:00","14:00-18:00"],["6:15-9:30","13:00-16:00","20:00-23:15"],[],["9:00-21:00"],["9:00-21:00"],[],[]];
var days = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];

var timeObj = {};

for (var i = 0; i < times.length; i++)
{
    // Create an empty array:
    timeObj[days[i]] = [];

    // For each timespan in the original array, add it to this day
    for (var j = 0; j < times[i].length; j++)
    {
        var timespan = times[i][j];

        // Parse the string
        var timespanArr = timespan.split("-");
        var timespanObj = {
            // I took the liberty of converting "6:15" to "06:15" for consistency
            // This extra step is NOT taken in the "smallest" answer below
            start: ("0" + timespanArr[0]).substr(-5),
            end: ("0" + timespanArr[1]).substr(-5)
        };

        // Append
        timeObj[days[i]].push(timespanObj);
    }
}

console.log(timeObj);

Smallest Answer (best I could do):

var times = [["8:30-12:00","14:00-18:00"],["6:15-9:30","13:00-16:00","20:00-23:15"],[],["9:00-21:00"],["9:00-21:00"],[],[]];
var start, end;
var obj = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"].reduce((acc, el, idx) => (
    acc[el] = times[idx].map(timespan => (
        [start, end] = timespan.split("-"), {start, end}
    )), acc
), {});

The Problem

So you're actually trying to solve two distinct problems here.

• You're converting indexes to keys. This is a mapping problem. You're actually doing this twice:
  • 0 -> sunday , 1 -> monday , etc.
  • 0 -> start , 1 -> end
• You're parsing a string: "8:30-12:00" -> ["08:30", "12:00"]

Let's write code to solve each of these problems individually, simplify each solution, then combine them.

Also, I'll give you one piece of handy advice that I hope you carry with you in your programming career:

Always write code for humans first

While there may exist some fancy one-liner solution to your problem, if you can't glance at the code and understand what it's doing then you're just causing headaches for future developers who have to maintain your code. It's better to write 20 lines of obvious and simple code than 1 line of garbage that made sense to your last June but now even you don't remember how it works.

Problem 1: Converting indexes to keys

The most straight-forward way to do this is something like the following:

var arr = [1, 2, 3, 4, 5, 6, 7];
var obj = {
    sunday: arr[0],
    monday: arr[1],
    tuesday: arr[2],
    ...
}

Simplifying (part 1)

While not technically impressive, it does work. We can automate some of this task if we have some structure that maps the existing indexes to the desired keys that we can iterate over. So what we want is a structure that:

1. Maps a positional integer index to a string key name
2. Can be iterated

This is the exact definition of an array. So we can simplify our code using an array of key names:

var arr = [1, 2, 3, 4, 5, 6, 7];
var days = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
var obj = {};
for (var i = 0; i < days.length; i++)
{
    obj[days[i]] = arr[i];
}

Neat!

Simplifying (part 2)

Taking an array of multiple objects and converting it to a single object is known as reducing . This is generally used for things like computing a sum (take an array of numbers and reduce it down to a single number which represents the total of all numbers in the array). However since our output is a single javascript object, we can take advantage of reducing to construct our object.

The reduce function takes two parameters. The first is a function (which we'll get to shortly) and the second is the starting value of what's called the "accumulator". This makes a lot of sense when computing the sum of an array. You have a starting value of zero, and the function takes the current value (the value of the accumulator) and adds the current element to it. The new accumulator is then passed forward to the next step in the reduction.

The function passed as the first parameter has, itself, three parameters. Its signature looks like this:

function( accumulator, element, index ) {
    // ...
}

This function will be called once for each element in the array. The first value is a "running sum", of sorts. The second value will equal whichever element of the array we're currently on. The third value tells you which array element this is. Here's code to explain what reduce does:

var arr = [1, 2, 3, 4, 5, 6, 7];
// arr.reduce(myFunction, 0):
var _accumulator = 0;
for (var _i = 0; _i < arr.length; _i++)
{
    _accumulator = myFunction(_accumulator, arr[_i], _i);
}

Simple, right? In fact, this for-loop structure looks a lot like our previous solution. So let's make them look identical:

var arr = [1, 2, 3, 4, 5, 6, 7];
var days = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
var _accumulator = {};
for (var _i = 0; _i < arr.length; _i++)
{
    _accumulator = (
        // Some function that returns _accumulator, but
        // with the days[_i] key set to arr[_i]
    );
}

This makes it more clear that a reducer can do what we want. In fact, the reducer in question should look like so:

// Some function that returns _accumulator, but
// with the days[_i] key set to arr[_i]
function setKeyValue(_accumulator, _i)
{
    _accumulator[days[_i]] = arr[_i];
    return _accumulator;
}

Writing this using Array.reduce syntax, we get:

var arr = [1, 2, 3, 4, 5, 6, 7];
var days = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
var obj = arr.reduce(
    function(acc, el, idx)
    {
        acc[days[idx]] = arr[idx];
        return acc;
    },
    // The initial value:
    {}
);

Of course if you find reducers difficult to understand you don't need to go this far. Our previous for-loop solution was good enough.

Problem 2: Parsing a string

Given the string "8:30-12:00" you want the object: {start: "08:30", end: "12:00"}

Now there's a lot to be said about checking for bad data. What would you do if someone put in the string "8:30+12:00" ? What if they put in "8:30-12:00-2:00" ?

But we'll ignore those problems for now and focus on the task at hand. We have two distinct values ("start" and "end") which are found in the string, so we need to split our string. Fortunately our values are separated by a hyphen - so we can split on the hyphen!

var str = "8:30-12:00";
var arr = str.split("-");
console.log(arr);
// Outputs: ["8:30", "12:00"]

Now we're back to problem 1: Mapping the indexes to keys ( 0 -> start , 1 -> end ). Since we only have two indexes, the for-loop solution may be overkill. So let's just use the initial solution of manually setting them:

var arr = str.split("-");
var obj = {
    start: arr[0],
    end: arr[1]
};

There's one final thing I noticed, though. You displayed the string as 08:30 instead of 8:30 in your final answer. Once again, we'll go with an easy solution: stick some zeroes on the front and remove them if there are too many:

var str = "12:30"; // 12:30
str = "0" + str; // 012:30
// Grab the last 5 characters
str = str.substr(-5); // 12:30 (again)

Combining the above two blocks of code (splitting the string, creating an object, and appending the 0 ) we get:

var arr = str.split("-");
var obj = {
    start: ("0" + arr[0]).substr(-5),
    end: ("0" + arr[1]).substr(-5)
};

Now that was the final thing regarding parsing the string, but it's not the final thing regarding what code you need to write. Because you're not parsing one string. You have an array of them. Meaning you need code like this:

var arr = ["8:30-12:00", "14:00-18:00"];
var parsedArr = [];
for (var i = 0; i < arr.length; i++)
{
    var splitStr = arr[i].split("-");
    parsedArr[i] = {
        start: ("0" + splitStr[0]).substr(-5),
        end: ("0" + splitStr[1]).substr(-5)
    }
}

Simplifying (part 3)

Just as you can use reduce to convert an array of elements into a single object, there's another function that converts an array of elements into an array of different elements. It's known as map . You can use map to, for instance, double every number in an array.

In our case, we want to convert every string to a parsed object. The result would be something like this:

var arr = ["8:30-12:00", "14:00-18:00"];
var parsedArr = arr.map(function(el)
{
    var splitStr = el.split("-");
    return {
        start: ("0" + splitStr[0]).substr(-5),
        end: ("0" + splitStr[1]).substr(-5)
    };
});

It's not that much shorter than the for-loop version, but it does shave off one line of code at least.

Putting it together

This was a bit long-winded, but we can now combine our answers to write human-friendly code that accomplishes your goal:

var times = [["8:30-12:00","14:00-18:00"],["6:15-9:30","13:00-16:00","20:00-23:15"],[],["9:00-21:00"],["9:00-21:00"],[],[]];
var days = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];

var timeObj = {};

for (var i = 0; i < times.length; i++)
{
    // Create an empty array:
    timeObj[days[i]] = [];

    // For each timespan in the original array, add it to this day
    for (var j = 0; j < times[i].length; j++)
    {
        var timespan = times[i][j];

        // Parse the string
        var timespanArr = timespan.split("-");
        var timespanObj = {
            start: ("0" + timespanArr[0]).substr(-5),
            end: ("0" + timespanArr[1]).substr(-5)
        };

        // Append
        timeObj[days[i]].push(timespanObj);
    }
}

console.log(timeObj);

This has 13 meaningful lines of code (28 if you count whitespace, comments, and closing brackets) but it took very little effort to write, takes very little effort to read, and it's obvious what the code does with a minimal amount of reading.

Now if you feel comfortable with the reduce and map functions then we can take advantage of the "Simplifying (part 2)" and "Simplifying (part 3)" sections to write something like:

var times = [["8:30-12:00","14:00-18:00"],["6:15-9:30","13:00-16:00","20:00-23:15"],[],["9:00-21:00"],["9:00-21:00"],[],[]];
var days = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
var obj = times.reduce(function(acc, el, idx)
{
    acc[days[idx]] = el.map(function(timespan)
    {
        var splitStr = timespan.split("-");
        return {
            start: ("0" + splitStr[0]).substr(-5),
            end: ("0" + splitStr[1]).substr(-5)
        };
    });
    return acc;
}, {});

Without a clear understanding of exactly how reduce and map function this code is almost impossible to understand at a glance, and even with that understanding it takes some thinking and struggling to wrap your head around it.

That's not to say that it's a bad answer. Sometimes you're trying to optimize for code size. If you need as few kilobytes as possible to improve page loads, then taking advantage of reduce and map cuts the code down to 1/2 the final size. Although if you end up going that route then I would strongly advise leaving a comment above the code explaining what it does and linking back to the original StackOverflow post. The comment will get stripped by any good build tool so it won't affect final build size, but it will make life a lot easier for future developers.

Reducing Size Further

If you really want a small answer, you can take advantage of arrow functions, destructuring, enhanced object literals, and the comma operator to shrink our previous reduce/map answer even further:

var times = [["8:30-12:00","14:00-18:00"],["6:15-9:30","13:00-16:00","20:00-23:15"],[],["9:00-21:00"],["9:00-21:00"],[],[]];
var days = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
var start, end;
var obj = times.reduce((acc, el, idx) => (
    acc[days[idx]] = el.map(timespan => (
        [start, end] = timespan.split("-"), {start, end}
    )), acc
), {});

Although good luck making heads or tails of that in the morning :)

Edit: Breaking down the above enhancements

Since this answer actually received some attention I thought I'd expand it a bit to describe the four enhancements I used to shrink the code even further:

• Arrow functions

Arrow functions are short-hand which can save you bytes in three ways (two of which we take advantage of here):

var func = x => x * 2

// is functionally equivalent to:

var func = (function(x)
{
    return x * 2;
}).bind(this);

They remove the function keyword, they have an implicit return statement, and they bind the parent's scope (which is unimportant in this context). This means that the simple identity function function(x){return x;} can be reduced from 22 bytes to 4 ( x=>x ). With a few exceptions this 18-byte savings is fairly consistent for the use of arrow functions ( function = 8 bytes, return = 6 bytes, and 4 more bytes are saved from not needing the parenthesis or brackets)

• Destructuring

Destructuring is when you take a structured data type (array or object) and break it out into individual variables. For instances:

var arr = [1, 2, 3];
var first = arr[0];
var second = arr[1];
var third = arr[2];

This has destructured the array into three variables: first , second , and third .

Some languages (including modern javascript) have syntax to automatically destructure things for you:

var [first, second, third] = [1, 2, 3];

The space savings here should be fairly obvious.

• Enhanced object literals

Object literals refer to using squiggly brackets to create a javascript object. For instance: {foo: 1, bar: 2} is an object literal. In modern javascript, object literals have been enhanced with certain short-hands. We take advantage of the following:

var a = 1;
var b = 2;
var obj = {
    a: a,
    b: b
};

// is functionally equivalent to:

var a = 1;
var b = 2;
var obj = {a, b};

Effectively if you provide a key but not a value, it assumes the value resides in a variable with the same name as the key. So {start, end} is short-hand for {start: start, end: end}

• Comma operator

This is a lesser-known feature of javascript that's often abused by code minifiers like UglifyJS. To understand it, it helps to understand the distinction between statements, expressions, and operators.

In programming, a statement is a single "thing" that you want to do. Like var a = 3; -- you want to take the value 3 and put it into the variable a . Code is executed one statement at a time.

An expression is a single computation. Sometimes a statement consists of multiple expressions. In the above example ( var a = 3; ) the numerical literal 3 is an expression. If we had instead written var a = 3 * 2 * 1; then 3 * 2 * 1 is an expression which itself can be decomposed into the expressions 3 * 2 and x * 1 (where x is the output of the previous expression)

An operator is a symbol or keyword that tells the processor to do a thing -- like add, subtract, or read from memory. For instance, * is an operator that says to multiply. Some operators are known as unary operators because they take one parameter. For instance, the increment operator ( ++ ) takes a single variable and adds one to it: a++; . Some operators are known as binary operators because they take two parameters. For instance, the addition operator ( + ) takes two variables and adds them together: a+b; . To my knowledge there's only one ternary operator which takes three parameters: The if-else operator ( ?: ) which looks like so: a ? b : c a ? b : c -- this is kind of like if (a) { b } else { c }

So now understanding the difference between statements, expressions, and operators, we can say that the comma is an operator that processes expressions from left-to-right, then returns the right-most value. So the expressions a,b,c will always evaluate to c . Meanwhile the expression var d = (a=1,b=a+1,c=b+1); will evaluate like so:

1. Set a equal to 1
2. Read a (1), add 1 to it, and store the result in b
3. Read b (2), add 1 to it, and store the result in c
4. The = operator, after storing a value in memory, returns the value that was stored (this is why a=b=c=1 will properly set all three variable). So the = operator now returns 3
5. The , operator on the right will return the result of the = expression: 3
6. The , operator on the left will return the result of the , operator on the right: 3
7. 3 is stored into d

We take advantage of the comma operator to extend our arrow functions. Normally in order for an arrow function to implicitly return a value, the arrow function must contain only a single statement:

// Implicit return:
x => x * 2;

// No implicit return:
x => {
    y += x;
    return x * 2;
}

By using the comma operator we can keep the implicit return while still executing multiple statements:

x => (
    y += x,
    x * 2
)

We do this in the reducer to simultaneously set a value on our accumulator ( acc[day] = ... ) and return the accumulator ( , acc )

Putting all of these tricks together we took:

var obj = times.reduce(
    function(acc, el, idx)
    {
        acc[days[idx]] = el.map(
            function(timespan)
            {
                var splitStr = timespan.split("-");
                return {
                    start: ("0" + splitStr[0]).substr(-5),
                    end: ("0" + splitStr[1]).substr(-5)
                };
            }
        );
        return acc;
    },
    {}
);

And changed it to the following:

var obj = times.reduce(
    // Arrow function
    (acc, el, idx) =>
    // Instead of {}, we use () with the comma operator
    (
        acc[days[idx]] = el.map(
            // Arrow function
            timespan =>
            // Instead of {}, we use () with the comma operator
            (
                // Destructuring
                var [start, end] = timespan.split("-");
                // Comma operator, return "{start, end}"
                ,
                // Enhanced object literal
                {start, end}
            )
        )
        // Comma operator, returns "acc"
        ,
        acc
    ),
    {}
);

When I tested this code it threw a syntax error, effectively saying that you can't use var within the comma operator. I wasn't aware of this, but I corrected it by defining start and end up above:

var start, end;
var obj = times.reduce(
    // ... Lots of stuff
                [start, end] = el.split("-");
    // ... Lot sof stuff
);

After that I just removed comments and whitespace to get:

var start, end;
var obj = times.reduce((acc, el, idx) => (
    acc[days[idx]] = el.map(timespan => (
        [start, end] = timespan.split("-"), {start, end}
    )), acc
), {});

Potential for Further Reduction

I toyed around with a few ideas that may be able to shrink the code even smaller , but couldn't quite make anything work.

Using the object spread operator you can avoid the need to call the comma operator on reduce like so:

var obj = times.reduce((acc, el, idx) => ({
    ...acc, [days[idx]]: el
}), {});

// is functionally equivalent to:

var obj = times.reduce((acc, el, idx) => {
    acc[days[idx]] = el;
    return acc;
}, {});

// which we used the comma operator to reduce to:

var obj = times.reduce((acc, el, idx) => (
    acc[days[idx]] = el, acc
), {});

Once white space is removed the object spread version is 6 bytes smaller than the standard solution (with return acc; ). Meanwhile our comma operator solution is actually the smallest with 2 additional bytes removed. Although keeping the object spread operator in our back pocket may be helpful later.

By using Map we can eliminate the call to reduce and also eliminate the default value of the accumulator like so:

var map = new Map(times.map((el, idx) => [days[idx], el]));

// is *kind of the same* (but not identical) as:

var obj = times.reduce((acc, el, idx) => (
    acc[days[idx]] = el, acc
), {});

This saves us 10 bytes on our comma operator solution, but comes at the cost of returning a Map instead of an Object . To convert a Map back to an Object currently requires the use of the reduce method - but there have been a few proposals for a fromEntries method or similar ( UPDATE: Object.fromEntries has been finalized and included in many browsers, but it didn't end up saving space. See below)

In general if you can create an array of the form:

[[key, value], [key, value], ...]

Then this matches the output of:

var obj = {...};
obj.entries();

It's useful for initializing Map s, and may eventually be useful for creating Object s.

Using Object.assign we can convert an array into an object very quickly, but the keys will be wrong:

var obj = Object.assign({}, [1, 2, 3]);
console.log(obj);
// {0: 1, 1: 2, 2: 3}

It may be possible to take advantage of this if we could somehow adjust the keys after the fact

So at the moment the answer I gave earlier is the best I've got, but additional byte savings may be possible if you're willing to make your code even less human readable

Object.fromEntries

With Object.fromEntries now available in many browsers, I remembered this post and wanted to see if it could be improved. So I gave it a try:

var times = [["8:30-12:00","14:00-18:00"],["6:15-9:30","13:00-16:00","20:00-23:15"],[],["9:00-21:00"],["9:00-21:00"],[],[]];
var days = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
var start, end;
var obj = Object.fromEntries(new Map(times.map((el, idx) => 
    [
        days[idx],
        el.map(timespan => (
            [start, end] = timespan.split("-"), {start, end}
        ))
    ]
)));

This replaces:

• times.reduce((acc,el,idx) with new Map(times.map((el,idx) (4 additional bytes after variable minification, actually)
• acc[days[idx]]= with [days[idx],] (1 byte saved after variable minification)
• ,acc with nothing (2 bytes saved after minification)
• ,{} with nothing (3 bytes saved)

But required I add the additional Object.fromEntries() (20 bytes, can't be minified). That's a net gain of 22 bytes. Still, it was fun to try.

Removing the days variable

While we do want an array to map indexes to day names, we don't have to store this into a variable. We can therefore save a teensy bit of space like so:

var times = [["8:30-12:00","14:00-18:00"],["6:15-9:30","13:00-16:00","20:00-23:15"],[],["9:00-21:00"],["9:00-21:00"],[],[]];
var start, end;
var obj = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"].reduce((acc, el, idx) => (
    acc[el] = times[idx].map(timespan => (
        [start, end] = timespan.split("-"), {start, end}
    )), acc
), {});

This removes var days= (6 bytes saved after minification), replaces days[idx] with el (3 bytes saved), and replaces el with times[idx] (3 bytes gained) for a net 6 bytes savings.

Note on minfication

I plugged the three answers (my original, with Object.fromEntries , and with the days array removed) into UglifyJS to verify my theory on variable minification (every variable name will be reduced to 1 byte, other symbols will remain as-is) and UglifyJS seems to have found a few other optimizations along the way.

• Original answer: 314 bytes
• Object.fromEntries 330 bytes (only 16 more, not 22)
• Removing days array: 304 bytes (saved 10, not 6)

It's worth noting that UglifyJS detected start and end as global variables (since I copied the code directly without encapsulating it in a function) so they were not minified, and it seems to have replaced my enhanced object literal with a simpler object literal ( {start,end} was converted to {start:start,end:end}

var start,end,times=[["8:30-12:00","14:00-18:00"],["6:15-9:30","13:00-16:00","20:00-23:15"],[],["9:00-21:00"],["9:00-21:00"],[],[]],obj=["sunday","monday","tuesday","wednesday","thursday","friday","saturday"].reduce((a,t,d)=>(a[t]=times[d].map(a=>([start,end]=a.split("-"),{start:start,end:end})),a),{});

With minification my "recommended" answer (human readable) came out to 475 bytes. It's 56% larger, but I think the clarity in your source code is worthwhile.

for(var times=[["8:30-12:00","14:00-18:00"],["6:15-9:30","13:00-16:00","20:00-23:15"],[],["9:00-21:00"],["9:00-21:00"],[],[]],days=["sunday","monday","tuesday","wednesday","thursday","friday","saturday"],timeObj={},i=0;i<times.length;i++){timeObj[days[i]]=[];for(var j=0;j<times[i].length;j++){var timespan=times[i][j],timespanArr=timespan.split("-"),timespanObj={start:("0"+timespanArr[0]).substr(-5),end:("0"+timespanArr[1]).substr(-5)};timeObj[days[i]].push(timespanObj)}}

One Final Thought

I touched briefly on the possibility of bad data in your strings. For instance, what would you do if someone put in: 8:30+12:00 instead of 8:30-12:00 ? In the case of my code:

• The split would fail (not finding a hyphen) so we'd produce an array of one element: ["8:30+12:00"]
• splitStr[0] would be "8:30+12:00"
• "0" + splitStr[0] would be "08:30+12:00"
• ("08:30+12:00").substr(-5) would be "12:00"
• splitStr[1] would be undefined
• "0" + splitStr[1] would just be "0"
• ("0").sustr(-5) would again just be "0"
• The resulting timespan would be: {start: "12:00", end: "0"}

Notice that it didn't actually throw an error, no exceptions were raised, and the code didn't complain. Now you'll have all sorts of bugs in the future and have trouble tracking them down, because this code silently failed . Silent failure is the worst.

The general solution to reduce such silent failures is to minimize the number of possible values that all data can take. An integer can't take decimal values, so if you don't need decimal values then you use an integer instead of a float when writing code in C++ or Java. By allowing decimals you create a possible failure state. JavaScript doesn't have "integers" and "floats" (it just has "Number"), but it does still have types:

• Number
• String
• Object
• Array
• Date
• etc

By using the right type, you avoid a lot of errors. In your code, you're using an anti-pattern that's commonly known as Stringly Typed Variables . That is - you're using strings to represent something that probably shouldn't be a string.

Instead of "08:30" , consider using either a Number (to represents milliseconds or seconds since midnight) or a Date

As for which to use, that's up to you. Using a Date provides many conveniences like being able to add and subtract times efficiently ( 11:30 + 2:00 = 1:30 PM ) but it comes with the added complexity that JavaScript dates imply both a time and day. Since you don't care about the day you'll likely have to do something like "set the day to 1970-01-01 (epoch)". Furthermore, the JavaScript Date object brings with it a timezone -- something else you'll have to work around.

So long as you're parsing and converting the object, anyway, you might as well get it into a more reasonable type to prevent future string-related problems.

Answer 4

Here you go:

 let dayNames = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'] let times = [ ["8:30-12:00", "14:00-18:00"], ["6:15-9:30", "13:00-16:00", "20:00-23:15"], [], ["9:00-21:00"], ["9:00-21:00"], [], [] ] const res = {} for (let i = 0; i < 7; i++) { const items = [] res[dayNames[i]] = items times[i].forEach(pair => { const parts = pair.split('-') items.push({ start: parts[0], end: parts[1] }) }) } console.log(res);