Underscore creating arrays based on object key

Question

Let's say I have a js object such as this

{
    a: 5,
    b: 1,
    c: 3
}

What I would like to do using Underscore is generate an array which would resemble the following;

["a","a","a","a","a","b","c","c","c"]

I can achieve what I want with the following code

var i = {
    a: 5,
    b: 1,
    c: 3
};

unpack = function (i, item) {
    var items = [];
    _.range(0, i).forEach(function (i) {
        items.push(item)
    })
    return items;
}

console.log(_.flatten(_.map(i, unpack)));

http://jsfiddle.net/VCFZx/ but it doesnt seem the tidiest way of doing it?

Can you clarify what you mean by this [{a}, {a}, {a}, {a}, {a}, {b}, {c}, {c}, {c}]? — Xotic750
– Xotic750, Commented Mar 7, 2014 at 9:49
So this [a, a, a, a, a, b, c, c, c] is actually an array of strings, not objects? — Xotic750
– Xotic750, Commented Mar 7, 2014 at 9:55
So you have a working solution, but are really looking for a code review? — Xotic750
– Xotic750, Commented Mar 7, 2014 at 10:00
I guess I was wondering if it was something built into underscore. Cheers for your version. — GrahamB
– GrahamB, Commented Mar 7, 2014 at 10:08
I don't know of anything, you could go even further with my solution and using underscore methods to replace for example the for loop, but you just add more overhead. Depends on what you want. — Xotic750
– Xotic750, Commented Mar 7, 2014 at 10:11

Lodewijk Bogaards · Accepted Answer · 2014-03-07 12:07:34Z

2

How about this:

var obj = 
{
a :5,
b : 1,
c : 3
};

console.log( 
  _.flatten(_.map(_.keys(obj), function (key) {
      return _.times(obj[key], function() { return key; });  
  }))
);

http://jsfiddle.net/J6bqb/

Note that this solution is purely functional.

Here is a nicely chained version:

  _.chain(_.keys(obj))
    .map(function (key) {
      return _.times(obj[key], function() { return key; });  })
    .flatten()
    .value()

edited Mar 7, 2014 at 12:07

answered Mar 7, 2014 at 10:17

Lodewijk Bogaards

20k3 gold badges30 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

GrahamB Over a year ago

Wonderful, I wasn't aware of the .times utility method.

Xotic750 Over a year ago

Object.keys and native map in the first example? And then Object.keys rather than _.keys in the second?

Lodewijk Bogaards Over a year ago

Good catch. Improved it.

Xotic750 Over a year ago

Better, but the first example is still using native map rather than _.map :)

Lodewijk Bogaards Over a year ago

Thank god for chaining :)

Xotic750 · Accepted Answer · 2014-03-07 13:15:09Z

2

In ECMA5 you could do it like this

Javascript

function createFilledArray(obj) {
    return Object.keys(obj).reduce(function(acc, key) {
        var repeat = obj[key],
            count;

        for(count = 0; count < repeat; count += 1) {
            acc.push(key);
        }

        return acc;
    }, []);
}

var a = {
    'a': 5,
    'b': 1,
    'c': 3
};

console.log(createFilledArray(a));

On jsFiddle

Which in terms of underscore would look like this

Javascript

function createFilledArray(obj) {
    return _.reduce(_.keys(obj), function(acc, key) {
        var repeat = obj[key],
            count;

        for(count = 0; count < repeat; count += 1) {
            acc.push(key);
        }

        return acc;
    }, []);
}

On jsFiddle

Which if you wanted to go further and replace the for

Javascript

function createFilledArray(obj) {
    return _.reduce(_.keys(obj), function(acc, key) {
        _.times(obj[key], function() {
            acc.push(key);
        });

        return acc;
    }, []);
}

On jsFiddle

And now for a little interest factor, lets have a look at the performances of the above 3 functions as we introduce more of Underscores methods, and we'll also compare them against the accepted solution by @mrhobo

Here is the jsPerf

Something else that none of these take into account, and it is unclear from your question, is whether alphabetical order is a must. If it is then a sort will need to be thrown into the mix, as none of these guarantee the ordering.

Finally, in ES3 as mentioned in the comments.

Javascript

function createFilledArray(obj) {
    var acc = [],
        key,
        repeat,
        count;

    for (key in obj) {
        if (obj.hasOwnProperty(key)) {
            for (count = 0, repeat = obj[key]; count < repeat; count += 1) {
                acc.push(key);
            }
        }
    }

    return acc;
}

On jsFiddle

I have added the ES3 method to the jsPerf also.

And if you want to chain the result with other Underscore methods.

_.chain(createFilledArray(a)).forEach(function(element) {
    console.log(element);
});

edited Mar 7, 2014 at 13:15

answered Mar 7, 2014 at 10:05

Xotic750

23.6k8 gold badges59 silver badges81 bronze badges

3 Comments

Lodewijk Bogaards Over a year ago

pushing onto an accumulator is to the functional programming people like cursing in church :)

Xotic750 Over a year ago

Sure, I could ES3 it and roll my own/integrate reduce using for and I could use for..in instead of keys and integrate that too. It would then most likely be faster than the ECMA5 version. But the comparison was more to show what happens when you move away from the native functions (that includes using push) and start using methods from libraries, and as this was a very simple problem then sticking with natives would seem sensible to me.

Lodewijk Bogaards Over a year ago

sure, using libraries and going functional aren't very helpful in terms of performance: +10

Collectives™ on Stack Overflow

Underscore creating arrays based on object key

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related