Teach with us

What is the difference between Map and WeakMap in JavaScript?

JavascriptObject Oriented ProgrammingProgramming

Differences between Map and WeakMap

The functional mechanism of Map and WeakMap is same but they have little differences.

1) A WeakMap accepts only objects as keys whereas a Map,in addition to objects, accepts primitive datatype such as strings, numbers etc.

2) WeakMap objects doesn't avert garbage collection if there are no references to the object which is acting like a key. Therefore there is no method to retrieve keys in WeakMap, whereas in Map there are methods such as Map.prototype.keys() to get the keys.

3) There is no size property exists in WeakMap.

Map

It is used to associate a key to a value irrespective of the datatype such as strings, numbers, objects etc.

Example

Live Demo

<html>
<body>
<script>

// Creates a new Map object
   var map = new Map();    

// Defines an object that will be used a key in the ma                
   var objKey = {name: 'tutorialspoint'};    
   document.write("</br>");

// Adds a new element having a String as its key and a String as its value
   map.set('first', 'a');                    
   document.write("</br>");

// Adds a new element having a Number as its key and an Array as its value
   map.set(3, ['c']);      
   document.write("</br>");

// Adds a new element having an Object as its key and a Number as its value
   map.set(objKey, 3);

// Adds a new element having an Array as its key and a String as its value
   map.set(['add', 'mapping'], 'd');          

// Checks whether an element having a key of "2" exists in the map.
   document.write(map.has(2));
   document.write("</br>");

// Checks whether an element having a key of "first" exists in the map.
   document.write(map.has('first'));
   document.write("</br>");

// Retrieves the element having key of "first". Prints "a"
   document.write(map.get('first'));
   document.write("</br>");

// Retrieves the element having as a key the value of objKey.
   document.write(map.get(objKey));
   document.write("</br>");

// Retrieves the element having key of "empty". Prints "undefined"
   document.write(map.get('empty'));
   document.write("</br>");

// Retrieves the map size. Prints "4"
   document.write(map.size);
   document.write("</br>");

// deletes all the value  
   map.clear();
   document.write(map.size);
</script>
</body>
</html>

Output

false
true
a
3
undefined
4
0

WeakMap

In the below example we can find that WeakMap accepts only objects but not any primitive values (strings, numbers)

Example

Live Demo

<html>
<body>
<script>

// Creates a new WeakMap object
   var weakMap = new WeakMap();

// Defines an object that will be used a key in the map
   var obj4 = {d: 4};

// Defines another object that will be used a key in the map
   var obj5 = {e: 5};

// Adds a new element having an Object as its key and a String as its value
   weakMap.set(obj4, 'fourth');

// Adds a new element having an Object as its key and a String as its value
   weakMap.set(obj5, 'fifth');

// Adds a new element having a Function as its key and a Number as its value
   weakMap.set(function(){}, 7);

// Checks whether an element having as its key the value of objKey4 exists in the weak map.
   document.write(weakMap.has(obj4));
   document.write("</br>");

// Retrieve the value of element associated with the key having the value of objKey4. Prints "first"
   document.write(weakMap.get(obj4));
   document.write("</br>");

// Deletes the element having key of objKey4. Prints "true"
   document.write(weakMap.delete(obj4));
   document.write("</br>");

// Deletes all the elements of the weak map
   weakMap.clear();

</script>
</body>
</html>

Output

true
fourth
true
raja
vineeth.mariserla
Updated on 30-Jul-2019 22:30:26

Previous Page Print Page Next Page  
Advertisements