How to create a map (object) from list of strings in Javascript

Question

I have an array of many unique strings and I'd like, without looping if at all possible, to create a map object from it where the key for each element is a unique string and the value is defaulted to some arbitrary setting.

Is there a way I can do this in one line without looping? I.e. I want to go from

var colours = [ "Red", "Orange", "Yellow", "Green", "Blue", "Indigo", "Violet" ];

to

var colourMap = {
    "Red":    VAL,
    "Orange": VAL,
    "Yellow": VAL,
    "Green":  VAL,
    "Blue":   VAL,
    "Indigo": VAL,
    "Violet": VAL
};

You mention in a comment below that you are looking to optimize this for performance since this code will be code repeatedly. First of all, can't you cache this in a variable in a higher scope? Unless the color list or VAL is going to be different every time there is no reason why you cannot. Second - are you sure performance is a problem? Most of the different techniques (for loop, reduce, forEach, underscore) have very similar performance and are unlikely to be your bottleneck. Profile before micro-optimizing! — George Mauer
– George Mauer, Commented Feb 3, 2014 at 15:39
@GeorgeMauer: Yes, good points which I will follow up. I suppose my underlying interest here was whether there is a way of doing this that is not O(n) - It sounds like there isn't. — Component 10
– Component 10, Commented Feb 3, 2014 at 15:46
JS hardly ever neatly follows those ptime predictions you learned in CS. depending on your needs, Object.create() could be a lot faster. — dandavis
– dandavis, Commented Feb 3, 2014 at 15:47
I don't think its even theoretically possible for any operations on each element of an unordered array to be less than O(n). However, isn't O(n) the exact case that most algorithms try to get to? Once you're O(n) you're basically in "not a problem" territory. — George Mauer
– George Mauer, Commented Feb 3, 2014 at 15:49
sure it is, do some repetitive benchmarks in V8 or TraceMonkey and you'll see what i mean. if the routine is compiled and not runtime optimized, the old rules apply. — dandavis
– dandavis, Commented Feb 3, 2014 at 15:50

George Mauer · Accepted Answer · 2014-02-03 15:22:06Z

5

Assuming your browser requirements support Array.prototype.reduce

colours.reduce(function(obj, c){ 
  obj[c] = "VAL";
  return obj;
}, {})

or if you're ok with being a jerk and using syntax most js devs aren't even aware exists

colours.reduce(function(obj, c){ return (obj[c] = "VAL", obj) }, {})

answered Feb 3, 2014 at 15:22

George Mauer

123k140 gold badges400 silver badges632 bronze badges

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

2 Comments

Igor Chubin Over a year ago

The Syntax is ok and I like this solution, +1!

George Mauer Over a year ago

@Cerbrus some languages call it fold, foldl or aggregate, all the same concept.

Cerbrus · Accepted Answer · 2014-02-03 15:41:41Z

4

If you really want to skip loops altogether (Including functions like map), this works:

JSON.parse('{"'+colours.join('":"VAL", "')+'":"VAL"}');

This builds a JSON string, then parses it.

However, I wouldn't use this function. It's ugly, inefficient, hard to maintain, uses loops "under the hood", and it's generally bad form. (I'm not even gonna bother with eval instead of JSON. eval === evil).

Go for something like map instead:

var colours = [ "Red", "Orange", "Yellow", "Green", "Blue", "Indigo", "Violet" ];
var colourMap = {};
colours.forEach(function(c){
    colourMap[c] = "VAL";
});

Yes, it's looping through the colours, but it's more efficient, and easier to understand.

Regarding performance:

map and reduce seem to be similar in execution speed (reduce is slightly faster), in Google Chrome.

edited Feb 3, 2014 at 15:41

answered Feb 3, 2014 at 15:20

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

3 Comments

Igor Chubin Over a year ago

Just a small note: Obviously it will not work with all possible VALs

Cerbrus Over a year ago

Yea, the JSON option has to result in valid JSON. Some VALs might break it. (And that's one of the reasons it's a bad option)

George Mauer Over a year ago

JSON.parse uses loops internally so still looping. If you really want to avoid loops you can eval but that is getting so over the top pedantic its absurd.

Igor Chubin · Accepted Answer · 2014-02-03 15:16:08Z

2

You can do it with jQuery:

colourMap = $.map(colours, function(e){
  return { e: "VAL" };
});

or with Underscore:

var colourMap = {};
_.each(some_object_array, function(val) {
  colourMap[val] = "VAL";
});

Or even better (Thanks to George Mauer):

_.object(_.map(colourMap, function(c) { return [c, "VAL"] }))

answered Feb 3, 2014 at 15:16

Igor Chubin

65.1k14 gold badges132 silver badges148 bronze badges

5 Comments

George Mauer Over a year ago

With underscore: _.object(_.map(colourMap, function(c) { return [c, "VAL"] })) Usually I use this pattern so much that I do _.mixin({ mapObject: _.compose(_.object, _.map) })

Cerbrus Over a year ago

Those are still loops, technically.

Andrea Parodi Over a year ago

Uhm I think your code produce an array of objects, one for each of the colors. Each one has only 1 key...

Component 10 Over a year ago

Yes, I'm afraid I don't have access to jQuery. Pragmatically, I suppose even a one liner could be looping under the covers. I'm really looking for the most efficient way of doing this since it's code which will be called quite frequently.

George Mauer Over a year ago

To @AndreaParodi's point, the jquery example above does not produce what you're after, you would have to do colourMap = $.extend.apply($, ...) to get it all into one object

Collectives™ on Stack Overflow

How to create a map (object) from list of strings in Javascript

3 Answers 3

2 Comments

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related