Implementing Map Class

Rahul Rana
Webtips
Published in
3 min readJul 18, 2021

We are aware of the Object in javascript, it's similar to map. When we talk about maps in general it's saving data as `key:value` pair.

Well If we talk major difference between an Object and a Map is

Object: It's keys can be strings and numbers only
Syntax: {} or new Object(null)
Map: You can use anything as keys that means object ,function as references
Syntax: new Map()
- it has get , set method

Now okay, that’s great 😎 that we can use anything as keys using a map.
The example is as follows here:

that’s cool right 😎.

But how does it works in the back? what is going on here in the implementation? How do we do it? 🤔

The basic data type we have is object or array (to store any random data like date, number, string, boolean). We know but we can’t use {} to store objects as it does not support them. Let’s do it for other than object first 🙃

you can see that it's simple using objects other than function and object, now how we should do it for object references? Stringify?: No❌ it will not work as two objects with diff references will be the same, so it will not work. How about creating and setting keys in the object itself ☁ ️? Let’s try:

Wooo, 😯 it’s so many lines of code. Nope, it's very simple 😀. Now we know that the problem is of saving the reference of obj and function, let’s go through the above code.

We will check if our getKey function, which is most important, what we are doing is if a key is not an `object or function` simple returning a new string, simple.

For object and function, we know we can set properties in them [if they are extensible], we have created a simple uniqueKey using Symbol that will be 100% unique, we will set this unique key in the object passed to us. Now we will set its value to a counter that we are maintaining.
and corresponding to that counter we will save our value in a map.

Obj > Obj[uniqueyKey] : counter, counter-> value

So getKey will return a key for the keys passed to us as arguments, like counter and we set the value. Awesome. 🎉

while using the same key method if find the unique key in obj/func passed to us, get the counter and read the value from the counter map else from a simple map.

This way we have 2 basic methods of class implemented. So take away here is to use symbol and setting in obj passed to us. Here is a catch what object is frozen? what?? now what’s this, it means if object can’t be overridden.

We need to modify our logic a bit, then we save ref in an array and iterate over it [we will still maintain counter as our obj in the array will look {key: obj/func, value: counter}], here time complexity will change from O(1) to O(n) worst case.

if (!Object.isExtensible(key)) {
// use array here to push and check if it exist ot not, use same counter
return;
}

If you guys like it please press claps and share. Will write more articles on some interesting topics.

Catch me here on Twitter: https://twitter.com/rahulrana_95

--

--

Rahul Rana
Webtips

Application Engineer @Flock @Directi, Frontend Engineer, VanillaJs, ReactJs, Performance, Debugger.