Faster Implementation of C++ like Map in Javascript

Question

I am only a beginner in javascript. I needed something similar to C++ map. So, I used this -

var map = new Object();
map['key'] = 'value';

Although it worked fine, I was unhappy with the performance. It takes a long time when I tested it with a data set of about 100000 entry. Can you suggest a better solution to improve the performance?

Did you compare the performance with [Map](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Map)? — t.niese, Sep 28 '16 at 17:24
I am not sure about javascript map performance. I am in search of something like C++ map in comparison with the performance. — froghramar, Sep 28 '16 at 17:27
javascript is a high level language and does have speed issues with large quantities of data, particularly if you're referring to js in the browser, as opposed to server-side JS. Much of that is your browser's fault I'm sorry to say. — deltree, Sep 28 '16 at 17:29
It takes about 1 minute on my pc. Same code runs for less than 1 second on C++ — froghramar, Sep 28 '16 at 17:29
Comparing the performance of Javascript to C++ is like comparing a Smart Car to a Maserati. — Matt Clark, Sep 28 '16 at 17:30
If it takes one minute, you're doing something seriously wrong. It should take less than a hundred milliseconds. — , Sep 28 '16 at 17:31
What runs about 5 seconds? var map = {}; for(var x =0; x< 100000; x++){ map['value'+x] = Math.random(); } runs 200ms in console. — Vladimir M, Sep 28 '16 at 17:31
@VladimirM That "benchmark" is dominated by the time for `Math.random()`. — , Sep 28 '16 at 17:31
I have some other functions to add some complexity though. But the difference is very clear. — froghramar, Sep 28 '16 at 17:35
If you want C++ performance, then write in C++. In this case, what you see is what you get. — , Sep 28 '16 at 17:36
@t.niese `Map` is unlikely to be faster. Actually, it's most likely 3-4 times slower. — , Sep 28 '16 at 17:39
C++ application compiles and runs native. JS, even compiles by the engine, still runs by that engine within a sandbox. On top of that, C++ may even optimize for multi-thread/multi-processor. Javascript is a single-threaded. But, all above doesn't also mean that your code is optimal. Who knows, may be you can make use of web workers to run your calculations in parallel. — Vladimir M, Sep 28 '16 at 17:41
I'd like to thank the OP for making a post which encouraged so many interesting discussions — deltree, Sep 28 '16 at 17:43
BTW, just a wild guess... does your methods by any chance produce any output on the page, while doing the calculations. If you are inserting 100000 DOM elements, then you may very well get into minutes. — Vladimir M, Sep 28 '16 at 17:43
I think the difference comes from the internal data structure and implementation of C++ map. And I was expecting some better javascript implementation to make it fast enough. — froghramar, Sep 28 '16 at 17:44
can show your code? Honestly, 100k of simple data items is not such a big deal. — Vladimir M, Sep 28 '16 at 17:45
sorry, I misjudged it. It runs for approximately 20 seconds on my pc — froghramar, Sep 28 '16 at 17:54

deltree · Accepted Answer · 2016-09-29T05:28:51.657

Here's a shot at what you're seeing. It sounds like you're a C++ guy who's new to JS, so I'm going to walk you through some of the basics and we'll wrap up with a nice demo.

1) Map is not the term for what you're doing.

Using the word map is confusing some people here because in JS, map is actually a function on an array that you can use to change the shape of it's data. What you're doing instead is creating an Object. Javascript objects are dynamic, and so adding properties on the fly is completely reasonable, and that's the premise of your situation. You want to add lots of properties to a dynamic object.

2) Without an example, your question is vague

It's hard to decipher what is taking "a long time" to run on your machine. Is this server-side JS or client-side? Have you used the cool new multi-core stuff? Are you creating 100,000 objects or simply adding 100,000 properties to a single object? As a C++ guy, you should know better than to be so vague. Creating an object allocates memory, and everyone in C++ knows that memory allocation is heavy. So that one bit of information can make a huge difference.

3) The speed of JS is slower than C++

Period. C++ is a lower level language. In order to do things automatically for you (like allocating memory) higher level languages are inherently slower. This is not to mention the overhead imposed by your browser.

4) Most optimizations are out of your hands

Unless you're working in binary (note: not assembly, binary) the commands you're working with are interpreted by software. That interpreter's speed is not something you can make a huge impact on. As a lightweight example, client-side JS is affected by the speed of the browser, the speed of the user's processor, the speed of the user AND server's networks in unison, the number of requests, lag time for AJAX calls, and even the number of other things the user is doing on their computer at a given time.

5) It's not that slow. Let's look at some real data points.

Below you'll see that it's less that 1/10th of a second (on my machine atm) to add 100,000 properties to one object, and only slightly slower (still less than 1/10 of a second) to create 100,000 objects and add 1 property to each.

We up the time (almost 2/10 of a second) a lot by logging it to the console, but even that isn't our fault, or something you should be encountering in optimized code.

WARNING, RUNNING THIS CODE SNIPPET WILL HANG YOUR BROWSER FOR A FEW SECONDS

var start = new Date().getTime();
var obj1 = {};
for (var i = 0; i < 100000; ++i) {
  obj1[i.toString()] = 'test';
}
var end = new Date().getTime();
var time1 = end - start;
console.log(obj1);
end = new Date().getTime();
var time2 = end - start;

start = new Date().getTime();
for (var i = 0; i < 100000; ++i) {
  var obj2 = {};
  obj2[i.toString()] = 'test';
}
end = new Date().getTime();
var time3 = end - start
console.log(time1);
console.log(time2);
console.log(time3);

By not wrapping these in functions, are you not preventing JIT-style optimizations? — , Sep 28 '16 at 18:03
I was not trying to build a benchmark, because benchmarks are both hard to do, and rarely accurate. I was merely creating actual data points for our OP to look at. I suspect his code looks nothing like mine anyway, so just seeing some code may help him. — deltree, Sep 28 '16 at 18:05
Not gonna lie, when I clicked _Run code snippet_ I was not expecting my browser to hang ;) 45 / 271 / 84 — Matt Clark, Sep 28 '16 at 22:13

score -2 · Answer 2 · answered Sep 28 '16 at 17:27

-2

This is the same:

var map = {};
map.key = 'value';

answered Sep 28 '16 at 17:27

dnviveros

60
2

And therefore...what? – Sep 28 '16 at 17:28
Good practices tell us this way have a better performance – dnviveros Sep 28 '16 at 17:29
2

No difference in performance whatsoever. – Sep 28 '16 at 17:30
1

http://stackoverflow.com/questions/4292048/why-use-instead-of-new-object-and-use-instead-of-new-array-and-true-fa – dnviveros Sep 28 '16 at 17:31
2

The post you quote says "**possibly** faster". But in this case that statement is being executed only once, so it doesn't matter. – Sep 28 '16 at 17:34
@torazaburo that is an assumption. The OP didn't specify whether he was creating 100,000 objects or not. – deltree Sep 28 '16 at 17:36
If you don't know, then ask him in a comment instead of making your own assumption. – Sep 28 '16 at 17:36
By the way, he said "**a** data set of about 100000 **entries**". Note the word "**a**", which refers to a **single** object. – Sep 28 '16 at 17:45

Faster Implementation of C++ like Map in Javascript

2 Answers2