Map And Weakmap In Javascript | Sự Khác Biệt Map Và Weak Map

7 Answers

They both behave differently when a object referenced by their keys/values gets deleted. Lets take the below example code:


var map = new Map(); var weakmap = new WeakMap(); (function(){ var a = {x: 12}; var b = {y: 12}; map.set(a, 1); weakmap.set(b, 2); })()


The above IIFE is executed there is no way we can reference

{x: 12}

and

{y: 12}

anymore. Garbage collector goes ahead and deletes the key b pointer from “WeakMap” and also removes

{y: 12}

from memory. But in case of “Map”, the garbage collector doesn’t remove a pointer from “Map” and also doesn’t remove

{x: 12}

from memory.

Summary: WeakMap allows garbage collector to do its task but not Map.

References: http://qnimate.com/difference-between-map-and-weakmap-in-javascript/

• 20Why is it not removed from memory? Because you can still reference it!
  
map.entries().next().value // [{x:12}, 1]

  May 29, 2015 at 2:42
• 8It’s not a self invoked function. It’s an immediately invoked function expression. benalman.com/news/2010/11/… Jul 21, 2015 at 14:53
• then what’s a difference between weakmap and object Aug 12, 2016 at 15:37
• 2@MuhammadUmer: object can only have string ‘keys’, while
  
WeakMap

  can only have non-primitive keys (no strings or numbers or
  
Symbol

  s as keys, only arrays, objects, other maps, etc.). Aug 28, 2016 at 5:41
• 2@nnnnnn Yes that’s the difference, it’s still in the
  
Map

  but not in the
  
WeakMap

  Aug 2, 2017 at 9:58

Maybe the next explanation will be more clear for someone.


var k1 = {a: 1}; var k2 = {b: 2}; var map = new Map(); var wm = new WeakMap(); map.set(k1, 'k1'); wm.set(k2, 'k2'); k1 = null; map.forEach(function (val, key) { console.log(key, val); // k1 {a: 1} }); k2 = null; wm.get(k2); // undefined


As you see, after removing

k1

key from the memory we can still access it inside the map. At the same time removing

k2

key of WeakMap removes it from

wm

as well by reference.

That’s why WeakMap hasn’t enumerable methods like forEach, because there is no such thing as list of WeakMap keys, they are just references to another objects.

• 14in the last line, of course, wm.get(null) will be undefined.– DaNeShAug 12, 2016 at 21:39
• 9Better answer than copying and pasting from the mozilla site, kudos. Dec 4, 2016 at 13:03
• 3in the
  
forEach

  ,
  
(key, val)

  should be actually be
  
(val, key)

  Jan 20, 2017 at 2:11
• 3unbelievable how an example that makes no sense get so many upvotes Jul 18, 2020 at 22:01
• 1map.get(k1) would also return null Sep 5, 2022 at 15:03

From the very same page, section “Why Weak Map?”:

The experienced JavaScript programmer will notice that this API could be implemented in JavaScript with two arrays (one for keys, one for values) shared by the 4 API methods. Such an implementation would have two main inconveniences. The first one is an O(n) search (n being the number of keys in the map). The second one is a memory leak issue. With manually written maps, the array of keys would keep references to key objects, preventing them from being garbage collected. In native WeakMaps, references to key objects are held “weakly”, which means that they do not prevent garbage collection in case there would be no other reference to the object.

Because of references being weak, WeakMap keys are not enumerable (i.e. there is no method giving you a list of the keys). If they were, the list would depend on the state of garbage collection, introducing non-determinism.

[And that’s why they have no

size

property as well]

If you want to have a list of keys, you should maintain it yourself. There is also an ECMAScript proposal aiming at introducing simple sets and maps which would not use weak references and would be enumerable.

‐ which would be the “normal”

Map

s. Not mentioned at MDN, but in the harmony proposal, those also have

items

,

keys

and

values

generator methods and implement the

Iterator

interface.

• so
  
new Map().get(x)

  has about the same look-up time as reading a property from a plain object? May 5, 2018 at 18:41
• 1@AlexanderMills I don’t see what this has to do with the question, but here is some data. In general, yes they are similar, and you should use the appropriate one. May 5, 2018 at 18:48
• So my understanding is Map maintains an internal array to persist its key because of that array. Garbage collector is not able to refrain the reference. In WeekMap, it doesnt have a array where keys maintained so key with no reference can be garbage collected. May 17, 2018 at 12:03
• @MohanRam A
  
WeakMap

  still has an array (or other collection) of entries, it just tells the garbage collector that those are weak references. May 17, 2018 at 12:41
• 1@MohanRam Check the second paragraph in the first quote in the answer May 17, 2018 at 12:45

Another difference (source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap):

Keys of WeakMaps are of the type Object only. Primitive data types as keys are not allowed (e.g. a Symbol can’t be a WeakMap key).

Nor can a string, number, or boolean be used as a

WeakMap

key. A

Map

can use primitive values for keys.


w = new WeakMap; w.set('a', 'b'); // Uncaught TypeError: Invalid value used as weak map key m = new Map m.set('a', 'b'); // Works


• 7In case anyone wonders: I can imagine the reason behind this is: you can’t keep or pass references to primitive types. So the key in a WeakMap would be its only reference, ever. That way garbage collection wouldn’t be possible. I don’t know if weak references are impossible or just don’t make sense. But either way the key needs to be something that can be referenced weakly. Jan 8, 2016 at 14:00

From Javascript.info

Map — If we use an object as the key in a regular Map, then while the Map exists, that object exists as well. It occupies memory and may not be garbage collected.


let john = { name: "John" }; let array = [ john ]; john = null; // overwrite the reference // john is stored inside the array, so it won't be garbage-collected // we can get it as array[0]


Similar to that, if we use an object as the key in a regular Map, then while the Map exists, that object exists as well. It occupies memory and may not be garbage collected


let john = { name: "John" }; let map = new Map(); map.set(john, "..."); john = null; // overwrite the reference // john is stored inside the map, // we can get it by using map.keys()


WeakMap — Now, if we use an object as the key in it, and there are no other references to that object – it will be removed from memory (and from the map) automatically.


let john = { name: "John" }; let weakMap = new WeakMap(); weakMap.set(john, "..."); john = null; // overwrite the reference // john is removed from memory!



WeakMap

keys must be objects, not primitive values.


let weakMap = new WeakMap(); let obj = {}; weakMap.set(obj, "ok"); // works fine (object key) // can't use a string as the key weakMap.set("test", "Not ok"); // Error, because "test" is not an object


Why????

Let’s see below example.


let user = { name: "User" }; let map = new Map(); map.set(user, "..."); user = null; // overwrite the reference // 'user' is stored inside the map, // We can get it by using map.keys()


If we use an object as the key in a regular


Map

, then while the

Map

exists, that object exists as well. It occupies memory and may not be garbage collected.

WeakMap

is fundamentally different in this aspect. It doesn’t prevent garbage-collection of key objects.


let user = { name: "User" }; let weakMap = new WeakMap(); weakMap.set(user, "..."); user = null; // overwrite the reference // 'user' is removed from memory!


if we use an object as the key in it, and there are no other references to that object – it will be removed from memory (and from the map) automatically.


WeakMap

does not support iteration and methods keys(), values(), entries(), so there’s no way to get all keys or values from it.

WeakMap has only the following methods:

• weakMap.get(key)
• weakMap.set(key, value)
• weakMap.delete(key)
• weakMap.has(key)

That is obvious as if an object has lost all other references (like ‘user’ in the code above), then it is to be garbage-collected automatically. But technically it’s not exactly specified when the cleanup happens.

The JavaScript engine decides that. It may choose to perform the memory cleanup immediately or to wait and do the cleaning later when more deletions happen. So, technically the current element count of a

WeakMap

is not known. The engine may have cleaned it up or not or did it partially. For that reason, methods that access all keys/values are not supported.

Note:- The main area of application for WeakMap is an additional data storage. Like caching an object until that object gets garbage collected.

WeapMap in javascript does not hold any keys or values, it just manipulates key value using a unique id and define a property to the key object.

because it define property to

key object

by method

Object.definePropert()

, key must not be primitive type.

and also because WeapMap does not contain actually key value pairs, we cannot get length property of weakmap.

and also manipulated value is assigned back to the key object, garbage collector easily can collect key if it in no use.

Sample code for implementation.


if(typeof WeapMap != undefined){ return; } (function(){ var WeapMap = function(){ this.__id = '__weakmap__'; } weakmap.set = function(key,value){ var pVal = key[this.__id]; if(pVal && pVal[0] == key){ pVal[1]=value; }else{ Object.defineProperty(key, this.__id, {value:[key,value]}); return this; } } window.WeakMap = WeakMap; })();


reference of implementation

• 1To be clear, this implementation only half works. It won’t allow using the same object as key in multiple weak maps. It also does not work for frozen objects. And of course, it leaks the mapping to anybody who has a reference to the object. The first can be fixed using symbols, but not the latter two. Jul 12, 2020 at 16:13
• @AndreasRossberg In this implementation I have added hardcoded
  
id

  , but this should be unique by using something Math.random and Date.now(), etc. And by adding this dynamic id, the first point can be solved. Could you please provide me a solution for the last two points. Jul 13, 2020 at 5:16
• The first problem is solved more elegantly by using symbols. The latter two cannot be solved within JS, which is why WeakMap has to be a primitive in the language. Jul 13, 2020 at 7:18

JavaScript provides many data structures for developers to choose from. Two of the most commonly used data structures in JavaScript are

Map

and

WeakMap

. Although both of these data structures have similar functionalities, there are some key differences that set them apart. In this article, we’ll explore these differences and help you choose the right data structure for your needs.

Understanding Maps

Maps are a type of data structure that allows developers to store key-value pairs. In other words, they allow you to associate values with keys in a way that’s easy to access and manipulate. Maps are similar to objects in JavaScript, but they have a few key differences. For example, Maps can use any value as a key, including objects and functions, whereas objects can only use strings or symbols as keys.

To create a Map, you can use the

Map()

constructor, like this:


const myMap = new Map();


You can also initialize a Map with key-value pairs using an array of arrays, like this:


const myMap = new Map([ ["key1", "value1"], ["key2", "value2"], ]);


Once you have a Map, you can add or update key-value pairs using the

set()

method, like this:


myMap.set("key3", "value3");


You can also retrieve values from a Map using the

get()

method, like this:


const value = myMap.get("key1");


Understanding WeakMaps

WeakMaps are similar to Maps in that they also allow you to store key-value pairs. However, they have some key differences that make them useful in different situations.

The most significant difference between WeakMaps and Maps is that WeakMaps only allow objects as keys, and those objects are held weakly. In other words, if there are no other references to an object used as a key in a WeakMap, that object will be garbage collected, and the corresponding value will be automatically removed from the WeakMap. This can be useful in situations where you want to associate data with an object that may be destroyed, like a DOM node.

To create a WeakMap, you can use the

WeakMap()

constructor, like this:


const myWeakMap = new WeakMap();


You can also initialize a WeakMap with key-value pairs using an object, like this:


const myObj = {}; const myWeakMap = new WeakMap([[myObj, "value"]]);


Once you have a WeakMap, you can add or update key-value pairs using the

set()

method, like this:


myWeakMap.set(myObj, "new value");


You can also retrieve values from a WeakMap using the

get()

method, like this:


const value = myWeakMap.get(myObj);


Differences Between Maps and WeakMaps

Now that we’ve covered the basics of Maps and WeakMaps, let’s explore the differences between these two data structures.

1. Key Types: Maps can use any value as a key, including strings, numbers, objects, and functions. WeakMaps can only use objects as keys.
2. Garbage Collection: Objects used as keys in WeakMaps are held weakly, which means they can be garbage collected if there are no other references to them. This can be useful for situations where you want to associate data with an object that may be destroyed, like a DOM node. Maps do not have this feature and will keep keys and values in memory until they are explicitly deleted.
3. Iteration: Maps can be iterated over using methods like
   
keys()

   ,
   
values()

   , and
   
entries()

   . WeakMaps do not have these methods because they are not enumerable. This means that you cannot iterate over a WeakMap to retrieve all of its keys or values.
4. Size: Maps have a
   
size

   property that returns the number of key-value pairs in the map. WeakMaps do not have a
   
size

   property because the number of key-value pairs is not fixed and can change based on garbage collection.
5. Performance: WeakMaps have additional garbage collection overhead, so they can be slower than Maps. If performance is a concern, Maps may be a better choice.

When to Use Maps

Maps are a good choice when you need to store key-value pairs and want to use any type of value as a key. Maps are also a good choice when you need to iterate over the keys or values in a predictable order, or when you need to get the number of key-value pairs in the map.

When to Use WeakMaps

WeakMaps are a good choice when you need to associate data with an object that may be destroyed, like a DOM node. WeakMaps are also useful when you want to avoid memory leaks and do not need to iterate over the keys or values in the map.

Conclusion

By understanding these differences, you can choose the right data structure for your needs and build better, more efficient JavaScript applications.

• Trending Categories
• Data Structure
• Networking
• RDBMS
• Operating System
• Java
• MS Excel
• iOS
• HTML
• CSS
• Android
• Python
• C Programming
• C++
• C#
• MongoDB
• MySQL
• Javascript
• PHP
• Physics
• Chemistry
• Biology
• Mathematics
• English
• Economics
• Psychology
• Social Studies
• Fashion Studies
• Legal Studies

• Selected Reading
• UPSC IAS Exams Notes
• Developer’s Best Practices
• Questions and Answers
• Effective Resume Writing
• HR Interview Questions
• Computer Glossary
• Who is Who

What is the difference between Map and WeakMap in JavaScript?

Javascript

Map(0) {}
Map(1) { ‘info’ => { name: ‘Sam’, age: 36 } }
{ name: ‘Sam’, age: 36 }
check whether info is there or not – true
The no.of elements in a Map are 1
Map(0) {}
name- Sam
age- 36

Advantages of Map:

Map object provided by ES6. A key of a Map may occur once, which will be unique in the map’s collection. There are slight advantages to using a map rather than an object.

• Accidental Keys & Security: No default keys are stored, only contain what’s explicitly put into them. Because of that, it’s safe to use.
• Key Types & Order: It can be any value as a key function, object anything. And the order is straightforward way in the order of entry insertion.
• Size: Because of the size property a map can be easily retrieved.
• Performance: Any operation can be performed on math so easily in a better way.
• Serialization and parsing: We can create our own serialization and parsing support for Map by using JSON.stringify() and JSON.parse() methods.

Removing Elements

You can use the

clear()

and the

delete()

method to remove elements from a Map.

The

delete()

method returns

true

if a specified key/value pair exists and has been removed or else returns

false

. For example,


let map1 = new Map(); map1.set('info', {name: 'Jack', age: "26"}); // removing a particular element map1.delete('address'); // false console.log(map1); // Map {"info" => {name: "Jack", age: "26"}} map1.delete('info'); // true console.log(map1); // Map {}


The

clear()

method removes all key/value pairs from a Map object. For example,


let map1 = new Map(); map1.set('info', {name: 'Jack', age: "26"}); // removing all element map1.clear(); console.log(map1); // Map {}


Summary


WeakMap

is

Map

-like collection that allows only objects as keys and removes them together with associated value once they become inaccessible by other means.


WeakSet

is

Set

-like collection that stores only objects and removes them once they become inaccessible by other means.

Their main advantages are that they have weak reference to objects, so they can easily be removed by garbage collector.

That comes at the cost of not having support for

clear

,

size

,

keys

,

values

…


WeakMap

and

WeakSet

are used as “secondary” data structures in addition to the “primary” object storage. Once the object is removed from the primary storage, if it is only found as the key of

WeakMap

or in a

WeakSet

, it will be cleaned up automatically.