How is a JavaScript hash map implemented?

JavascriptHashHashmap

Javascript Problem Overview


I currently work with OpenLayers and have a huge set of data to draw into a vector layer (greater than 100000 vectors).

I'm now trying to put all these vectors into a JavaScript hash map to analyze the performance. I want to know how is the hash map in JavaScript implemented, is it a real hash function or just a wrapped function that uses a simple data structure and a search algorithm?

Javascript Solutions


Solution 1 - Javascript

every javascript object is a simple hashmap which accepts a string or a Symbol as its key, so you could write your code as:

var map = {};
// add a item
map[key1] = value1;
// or remove it
delete map[key1];
// or determine whether a key exists
key1 in map;

javascript object is a real hashmap on its implementation, so the complexity on search is O(1), but there is no dedicated hashcode() function for javascript strings, it is implemented internally by javascript engine (V8, SpiderMonkey, JScript.dll, etc...)

2020 Update:

javascript today supports other datatypes as well: Map and WeakMap. They behave more closely as hash maps than traditional objects.

Solution 2 - Javascript

JavaScript objects cannot be implemented purely on top of hash maps.

Try this in your browser console:

var foo = {
    a: true,
    b: true,
    z: true,
    c: true
}

for (var i in foo) {
    console.log(i);
}

...and you'll recieve them back in insertion order, which is de facto standard behaviour.

Hash maps inherently do not maintain ordering, so JavaScript implementations may use hash maps somehow, but if they do, it'll require at least a separate index and some extra book-keeping for insertions.

Here's a video of Lars Bak explaining why v8 doesn't use hash maps to implement objects.

Solution 3 - Javascript

Here is an easy and convenient way of using something similar to the Java map:

var map= {
    'map_name_1': map_value_1,
    'map_name_2': map_value_2,
    'map_name_3': map_value_3,
    'map_name_4': map_value_4
    }

And to get the value:

alert( map['map_name_1'] );    // fives the value of map_value_1

......  etc  .....

Solution 4 - Javascript

Should you try this class Map:

var myMap = new Map();

// setting the values
myMap.set("1", 'value1');
myMap.set("2", 'value2');
myMap.set("3", 'value3');

console.log(`Map size: ${myMap.size}`); // 3

// getting the values
console.log(`Key: "1", Value: ${myMap.get("1")}`);    // "value associated with "value1"
console.log(`Key: "2", Value: ${myMap.get("2")}`);    // "value associated with "value2"
console.log(`Key: "3", Value: ${myMap.get("3")}`);    // "value associated with "value3"

Notice: key and value can be any type.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

Solution 5 - Javascript

While plain old JavaScript objects can be used as maps, they are usually implemented in a way to preserve insertion-order for compatibility with most browsers (see Craig Barnes's answer) and are thus not simple hash maps.

ES6 introduces proper Maps (see MDN JavaScript Map) of which the standard says:

> Map object must be implemented using either hash tables or other mechanisms that, on average, provide access times that are sublinear on the number of elements in the collection.

Solution 6 - Javascript

<html>
<head>
<script type="text/javascript">
function test(){
var map= {'m1': 12,'m2': 13,'m3': 14,'m4': 15}
     alert(map['m3']);
}
</script>
</head>
<body>
<input type="button" value="click" onclick="test()"/>
</body>
</html>

Solution 7 - Javascript

I was running into the problem where i had the json with some common keys. I wanted to group all the values having the same key. After some surfing I found hashmap package. Which is really helpful.

To group the element with the same key, I used multi(key:*, value:*, key2:*, value2:*, ...).

This package is somewhat similar to Java Hashmap collection, but not as powerful as Java Hashmap.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionPatrick HillertView Question on Stackoverflow
Solution 1 - JavascriptotakustayView Answer on Stackoverflow
Solution 2 - JavascriptCraig BarnesView Answer on Stackoverflow
Solution 3 - JavascriptMilos CuculovicView Answer on Stackoverflow
Solution 4 - JavascriptNguyen Tan DatView Answer on Stackoverflow
Solution 5 - Javascriptmb21View Answer on Stackoverflow
Solution 6 - Javascriptrajendra kumarView Answer on Stackoverflow
Solution 7 - Javascriptdd619View Answer on Stackoverflow