Map Data Structure in JavaScript

The Map object holds key-value pairs like a standard object. There are a few significant differences between Map and a regular key-value pair object. These are:

  • Objects: Keys must be obtained and used to iterate over. Map: This is iterable, meaning we can directly iterate.
  • Objects: The key can only be an integer, string, or symbol. Map: Key field can be of any data-type including objects and functions.
  • Objects: Retrieving size is a manual process. Map: The size property hold this info.
  • Objects: Iterating will not always return keys in the insertion order. Map: Remembers the insertion order, so iterating will always be in this order.
  • Objects: Default keys can conflict with defined keys. Map: no default keys. All keys must be defined.
  • Objects: Performance can struggle when frequently adding and removing key-value-pairs. Map: This is structured to perform than a standard object with frequent additions and removals.
//    Set up an empty Map
let scores = new Map();

//    Use .set(propName, value) to add to the map

scores.set("math", 90);
scores.set("physics", 95);
scores.set("chemistry", 80);

console.log(scores); //    RESULT: Map(3) {"math" => 90, "physics" => 95, "chemistry" => 85}

//    Use .get(propName) to retrieve specific values
console.log(scores.get("math")); // RESULT: 90
console.log(scores.get("physics")); // RESULT: 95
console.log(scores.get("chemistry")); // RESULT: 80

//    Use size to check the size of the Map
console.log(scores.size); //    RESULT: 3

//    Use has to check a property exists in aMap
console.log(scores.has("english")); //    RESULT: false
console.log(scores.has("math")); //    RESULT: true

//    Use .delete(propName) to remove a property
console.log(scores.has("math")); //    RESULT: false

//    Use .clear() to remove all properties
console.log(scores.size); //    RESULT: 0

//    SHORTCUT: Set up a Map with data
let scores = new Map([
    ["math", 90],
    ["physics", 95],
    ["chemistry", 85],

console.log(scores); //    RESULT: Map(3) {"math" => 90, "physics" => 95, "chemistry" => 85}

//    Looping the a Map using a for...of loop with .get()
for (let key of scores.keys()) {
//    RESULT: "math"
//                    90
//                    "physics"
//                    95
//                    "chemistry"
//                    85

//    .values() can be used to get only the values while iterating through a Map
for (let theValue of scores.values()) {

//    RESULT: 90
//                    95
//                    85

//    .entries() can be used to get each key-value pair as an independent array
for (let theEntry of scores.entries()) {
    console.log(theEntry[0], theEntry[1]);
//    RESULT: "math" 90
//                    "physics" 95
//                    "chemistry" 85

//    .entries() can also setup with the initial variable as the array
for (let [key, value] of scores.entries()) {
    console.log(key, value);
//    RESULT: "math" 90
//                    "physics" 95
//                    "chemistry" 85

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

↑ Back to Top