DEV Community 👩‍💻👨‍💻

Ericawanja
Ericawanja

Posted on

Maps in JavaScript

Map data structure was introduced in ES6. It has a similar key-value pair syntax as the objects.

How to create a map

You can create a map by passing an array of the key-value pairs into the new Map constructor

const fruits = new Map([
    ["apples", 500],
    ["bananas", 300],
    ["oranges", 200]
  ]);

  console.log(fruits) 
  //  Map(3) { 'apples' => 500, 'bananas' => 300, 'oranges' => 200 }

Enter fullscreen mode Exit fullscreen mode

Alternatively, you can use set() method to add elements into the map.

const fruits = new Map();
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

console.log(fruits) 
  //  Map(3) { 'apples' => 500, 'bananas' => 300, 'oranges' => 200 }
Enter fullscreen mode Exit fullscreen mode

What are the differences between a map and object

Same as objects, maps store key, value pair elements. However, the two are significantly different

Feature Map Objects
Keys A map key can be any value. This includes objects, functions or primitives Strictly, objects key must be a string or symbol data type
Lengh Map has a size property which returns the length of the map The length of an object can only be determined by iterating and counting all the elements manually
Iteration Directly iterable You cannot iterate an object directly. However you can do so by implementing other methods
Default keys Map only contains keys that are explicitly declared. Hence, does not contain default keys Since objects has a prototype, it contains default keys which can collide with other keys

Map operations

  1. add element

set() method is used to add elements to a map. The set method receives the key-value pair of the new element as a parameter.

fruits.set("apples", 500);
Enter fullscreen mode Exit fullscreen mode
  1. get element get() method receives the a key parameter of the element
fruits.get("apples") // outputs 50
Enter fullscreen mode Exit fullscreen mode
  1. Remove element delete() method deletes element from the map.
fruits.delete("apples")
Enter fullscreen mode Exit fullscreen mode
  1. Clear Map clear() method removes all the elements from a map
fruits.clear()
Enter fullscreen mode Exit fullscreen mode
  1. Trasverse a map forEach() can be used to access the items in a list sequentially
const fruits = new Map([
    ["apples", 500],
    ["bananas", 300],
    ["oranges", 200]
  ]);

  fruits.forEach((key, value)=>{
    console.log(key, value)
  })
  /*
  output
  apples 500
  bananas 300
  oranges 200
  */
Enter fullscreen mode Exit fullscreen mode

keys() returns an iterable list of the keys. Similarly, values() returns an iterable list of the values

const fruits = new Map([
    ["apples", 500],
    ["bananas", 300],
    ["oranges", 200]
  ]);

 console.log(fruits.keys())
 /*outputs
 { 'apples', 'bananas', 'oranges' }
 */
console.log(fruits.values())
/*outputs
{ 500, 300, 200 }
*/
Enter fullscreen mode Exit fullscreen mode

entries() transverses the map and returns an array of key-value pair [key, values]

const fruits = new Map([
    ["apples", 500],
    ["bananas", 300],
    ["oranges", 200]
  ]);

 console.log(fruits.entries())

 /*
 {
  [ 'apples', 500 ],
  [ 'bananas', 300 ],
  [ 'oranges', 200 ]
}
 */
Enter fullscreen mode Exit fullscreen mode
  1. Find size of a map size property returns the length of the map
fruits.size //outputs 3
Enter fullscreen mode Exit fullscreen mode

Summary

Even though objects and maps look quite similar, they are quite different. Map have size property and the keys can be anything including functions and objects.
Objects do not have size property while the keys must be strictly strings.

Top comments (0)

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.