ECMAScript Map Collection Tutorial

View more Tutorials:

1- Collections - Map

ECMAScript 6 introduces the 2 new data structures such as  Map & Set. They are part of ECMAScript Collections Framework .
  • Maps - This data structure allows you to store "Key/Value" pairs. And you can access the value through the key, or update a new value corresponding to a key.
  • Sets - This data structure stores a list of elements not allowing duplicate and not indexing elements.
In this post, I will introduce the Map to you.
See also:
  • TODO Link!

Map:

A Map object stores "Key/Value", of which the Key and the Value can be Primitive types or objects.
  • In the Map object, keys are not iterated.
  • The Map is an ordered data type, which means that the "Key/Value" pair which is added first, will come first. the second fair which will come second.
Create a  Map object through the  constructor of  Map ​​​​​​​class:
new Map( [iteratorObject] )
 
Parameters:
  • iteratorObject - any object which is iterable.
Properties:
Property Description
size This property returns the number of "Key/Value" pairs in the Map object.
map-size-example.js
var myContacts = new Map();

myContacts.set("0100-1111", "Tom");
myContacts.set("0100-5555", "Jerry");
myContacts.set("0100-2222", "Donald");

console.log(myContacts.size); // 3

2- Map Methods

set(key, value)

The  set(key, newValue) method will add a  key/newValue pair to   Map object if no pair with such key exists,  on the contrary, it will update a new value for the  key/value pair found in the  Map.
map-set-example.js
var data = [
   ["0100-1111", "Tom"],
   ["0100-5555", "Jerry"],
   ["0100-2222", "Donald"]
];
var myContacts = new Map(data);

console.log(myContacts);

// Add new Key/Value pair to Map
myContacts.set("0100-9999", "Mickey");

console.log(myContacts);

// Update
myContacts.set("0100-5555", "Bugs Bunny");

console.log(myContacts);

has(key)

This method tests whether a key exists in the Map or not. It returns true if existing, on the contrary, it returns false.
map-has-example.js
var data = [
   ["0100-1111", "Tom"],
   ["0100-5555", "Jerry"],
   ["0100-2222", "Donald"]
];
var myContacts = new Map(data);


var has = myContacts.has("0100-5555");

console.log("Has key 0100-5555? " + has); // true

clear()

Remove all "Key/Value" pairs out of the  Map object.
map-clear-example.js
var data = [
   ["0100-1111", "Tom"],
   ["0100-5555", "Jerry"],
   ["0100-2222", "Donald"]
];
var myContacts = new Map(data);


console.log("Size: " + myContacts.size); // 3

myContacts.clear();

console.log("Size after clearing: " + myContacts.size); // 0

delete(key)

Remove a "Key/Value" pair out of the  Map object, return  true if a pair is removed out of the  Map, return  false if this key doesn't exist in the  Map.
map-delete-example.js
var data = [
   ["0100-1111", "Tom"],
   ["0100-5555", "Jerry"],
   ["0100-2222", "Donald"]
];
var myContacts = new Map(data);

console.log("Size: " + myContacts.size); // 3

var deleted = myContacts.delete("0100-5555");

console.log("Deleted? " + deleted); // true

console.log("Size after delete: " + myContacts.size); // 2
 

entries()

Return the  Iterator, of which each e ntry contains an array with the 2 elements such as  [key, value]. The order of entries is still kept unchanged, like the one of the Key/Value pairs in the Map object. (See the following illustration)  
  • TODO Link!
map-entries-example.js
var myContacts = new Map();

myContacts.set("0100-1111", "Tom");
myContacts.set("0100-5555", "Jerry");
myContacts.set("0100-2222", "Donald");

var entries = myContacts.entries();

var entry;

while( !(entry = entries.next()).done )  {
  var array = entry.value;

  console.log(array); // [ '0100-1111', 'Tom' ]
}

keys()

This method returns a new  Iterator object helping you access Map keys.
map-keys-example.js
var data = [
   ["0100-1111", "Tom"],
   ["0100-5555", "Jerry"],
   ["0100-2222", "Donald"]
];
var myContacts = new Map(data);

var iteratorPhones= myContacts.keys();

var entry;

while( !(entry = iteratorPhones.next()).done )  {
  var phone = entry.value;

  console.log(phone); // 0100-1111
}

values()

This method returns a new  Iterator object helping you access Map values.
map-values-example.js
var data = [
   ["0100-1111", "Tom"],
   ["0100-5555", "Jerry"],
   ["0100-2222", "Donald"]
];
var myContacts = new Map(data);

var iteratorNames = myContacts.values();

var entry;

while( !(entry = iteratorNames.next()).done )  {
  var name = entry.value;

  console.log(name); // Tom
}

forEach(callbackFn [, thisArg])

This method will call the  callbackFn function one time corresponding to each "Key/Value" pair of the Map object.
myMap.forEach(callback[, thisArg])
 
Parameters:
  • callbackFn -This function will be called one time corresponding to each "Key/Value" pair of the Map object.
  • thisArg - The parameter is used like this when executing callbackFn.
map-forEach-example.js
var showContact = function(key, value, thisMap)  {
    console.log("Phone: " + key +". Name: " + value);
}

var data = [
   ["0100-1111", "Tom"],
   ["0100-5555", "Jerry"],
   ["0100-2222", "Donald"]
];
var myContacts = new Map(data);

// or call: myContacts.forEach(showContact)
myContacts.forEach(showContact, myContacts);

3- Weak Maps (TODO)

View more Tutorials: