Wed Feb 08 2017
Paul Shan
The version 6 of EcmaScript has introduced a lot of things to JavaScript and one of the most important one is Map, which is a very popular data structure in other programming languages. Though the plain old JavaScript objects looks pretty similar to what map is; but the actual Map has been introduced in ES6 only.
In simple words, map means relating one thing to another. That one thing is called key
and the another is value
. Both key
and value
can be of any type. The major difference of Map from JavaScript Object is; objects accepts only String or Symbol key
, but Map accepts anything. Below is a simple example of how to use ES6 Map.
//instantiating a map
var myMap = new Map();
//set things in Map
myMap.set(somethingAsKey, somethingElseAsValue);
//get the value back from Map
map.get(somethingAsKey);
/* Some more examples */
var dummyObject = {a:1};
var dummyFunc = function () {
// body...
};
var yourMap = new Map();
yourMap.set("person", { name: "Paul Shan" });
yourMap.set(13, "Unlucky number");
yourMap.set(null, "I am null");
yourMap.get("person"); //{ name: "Paul Shan" }
yourMap.get(13); //Unlucky number
yourMap.get(null); //I am null
yourMap.set(undefined, "I am undefined");
yourMap.get(undefined); //I am undefined
yourMap.set({a:1}, "I am for new object");
yourMap.get({a:1}); //undefined
yourMap.set(dummyObject, "I am for dummy object");
yourMap.get(dummyObject); //I am for dummy object
yourMap.set(dummyFunc, "I am for dummy function");
yourMap.get(dummyFunc); //I am for dummy function
var theirMap = new Map([
["president", "David Palmer"],
["country", "United States"]
]);
theirMap.get("president"); //David Palmer
theirMap.get("country"); //United States
Hope the examples above has cleared your confusion regarding the differences between Map and Object to a certain extent. But the differences are not limited to getters, setters or type of keys. More differences are given below.
Object | Map |
---|---|
Objects were there since the birth of JS. | Map is introduces in ES6. |
The keys can only be String or Symbol. | Accepts anything (even NaN) as key. |
Assign values with = operator. |
.set() and .get() functions are used. |
Not an iterable. You can not use myObj.forEach() etc. |
Is an iterable and forEach for of can be used. |
You can not get size of an object easily. | .size property of a map shows the size. |
As objects has prototypes, key conflicts may occur. | Map is a map. You can even do myMap.set("set", "will not change set") . |
To clear properties, you need to write manual code. | Map has .clear() to clear everything. |
If all keys are strings, and you just use get and set, Objects are more performant. | If you focus on iterating, map will be more performant. (TEST) |
You can learn more about Map in MDN
WeakMap was also introduced by ES6 in 2015. By the name we can guess that it’s some special kind of Map may be; but actually it’s not. WeakMap
is not inherited from Map
. However their functionalities are very much similar.
The differences which Map has with Objects; are also true (majorly) for WeakMap. The major difference between Map and WeakMap is, WeakMap holds the references of the key
objects weakly. Thus if that object is deleted somewhere in the program, WeakMap will also release the value mapped to that object. This prevents memory leak. This is the reason WeakMap is used to declare private variables. However there are more differenced between Map & WeakMap.
Map | WeakMap |
---|---|
Key in Map can be anything. | Key in WeakMap must be of type Object (not null). |
Map has .size |
WeakMap has .length |
.forEach() is available. |
No .foreach() here. |
Nothing is auto destroyed. | If a key object is deleted, the value assigned against that key in any WeakMap will also be destroyed. |
Below are some examples of WeakMaps. To know more about WeakMaps, you can check MDN document.
//instantiating a weakWeakMap
var myWeakMap = new WeakMap();
//set things in WeakMap
myWeakMap.set(someObjectAsKey, somethingElseAsValue);
//get the value back from WeakMap
weakWeakMap.get(someObjectAsKey);
/* Some more examples */
var dummyObject = {a:1};
var dummyFunc = function () {
// body...
};
var yourWeakMap = new WeakMap();
yourWeakMap.set({a:1}, "I am for new object");
yourWeakMap.get({a:1}); //undefined
yourWeakMap.set(dummyObject, "I am for dummy object");
yourWeakMap.get(dummyObject); //I am for dummy object
//ERRORS
yourWeakMap.set(dummyFunc, "I am for dummy function"); //ERROR
yourWeakMap.set("person", { name: "Paul Shan" }); // ERROR
var theirMap = new Map([
[dummyObject, "David Palmer"]
]);
theirMap.get(dummyObject); //David Palmer
SHARE THIS ARTICLE
Thu Mar 10 2016
OAuth authentications are pretty popular now a days and another thing which is popular is JavaScript. This article shows how to plugin google’s oAuth api for authentication in your own node application.Sat Mar 01 2014
This is a continuation of my CSS3 loader snippet collection series. I've provided spinning css3 animation loader in the part 1 of this series and here in part 2, I'm providing various square type loading