Map Object

Maps are a JavaScript object that maintain order--meaning that iterating over a Map will do so in the order that the key/value pairs were added (not updated). For example, using a for...of loop provides us with a [key, value] for every iteration:

const myMap = new Map();
// insert several key/value pairs

for (let [key, value] of myMap) {  
  // do all the things
}

Interestingly, the keys for Maps can be any value: strings, objects, functions, etc. So, if we wanted to associate two or more objects, we can use one object as a key, and another one as its value--or make the value an array of associated objects.


const mother = {  
  name: 'Ann',  
  age: 37
};

const father = {  
  name: 'Dorian',  
  age: 35
};

const couple = new Map();
couple.set(mother, father);

/*
Map { 
  { name: 'Ann', age: 37 } => { name: 'Dorian', age: 35 } 
}
*/

// what's great here is that both objects are directly mutable

mother.occupation = 'Web Developer';
father.occupation = 'Pilot';

/* 
Map {  
  { name: 'Ann', age: 37, occupation: 'Web Developer' } => { name: 'Dorian', age: 35, occupation: 'Pilot' }
}
*/

// we can even make it more complex to greater resemble a family
// starting from scratch:

const mother = { 
  name: 'Ann',  
  age: 37
};

const father = { 
  name: 'Dorian',  
  age: 35
};

const daughter = { 
  name: 'Trisha',  
  age: 5
};

const son = { 
  name: 'Zeke',  
  age: 2
};

const kin = { 
  spouse: father,
  children: [daughter, son]
};

const couple = new Map();
couple.set(mother, kin);

/*
Map {  
  { name: 'Ann', age: 37 } => { spouse: { name: 'Dorian', age: 35 }, children: [ { name: 'Trisha', age: 5 }, { name: 'Zeke', age: 2 } ]  
  }
}
*/

There are some great methods that come baked into Maps too. For example, set() will add a new key/value pair, or update an existing one. In the case above, if we wanted to update the kin object with a new kin object, then we could simply call couple.set(mother, aNewKinObject);. Additionally, has() will return a boolean to indicate if the Map contains a value associated with the key argument passed in.

What draws me to Maps is their potential with simple todo lists, which can be used to assign todo items to different people. Consider the following:

In the class above, I’ve written custom methods. Adding some todo items looks like this:

const map = new todoMap();
map.set('Karen', 'Fix leaky roof');
map.set('Kyle', 'Paint the hallway');
map.set('Norma', 'Trim the hedges');
map.set('Eric', 'Screw in light fixtures');
map.set('Karen', 'Mow the lawn');
map.set('Erica', 'Chop wood');
map.set('Kareem', 'Take out the trash');
map.set('Norma', 'Fix front door');
map.set('Kareem', 'Cook for everyone');
map.set('Erica', 'Call the plumber');

Now, I have todos that are assigned to people. Notice the order of the key/value pairs. Console logging this gives us the following:

todoMap {
  map: Map {
    'Karen' => [ 'Fix leaky roof', 'Mow the lawn' ],
    'Kyle' => [ 'Paint the hallway' ],
    'Norma' => [ 'Trim the hedges', 'Fix front door' ],
    'Eric' => [ 'Screw in light fixtures' ],
    'Erica' => [ 'Chop wood', 'Call the plumber' ],
    'Kareem' => [ 'Take out the trash', 'Cook for everyone' ]
  }
}

If, on the frontend, the user wants to delete ‘Call the plumber’ from Erica’s list of todo items, then I would invoke the following:

map.delete('Erica', 1); // splices 'Call the plumber'

And if I wanted to delete a person from the list:

map.deleteName('Erica');

But, before I delete Erica, I may want to transfer her remaining todo item ‘Chop wood’. To do that, I have a transfer method that can accept two names (a ‘from’ and ‘to’ parameter), as well as either an index number or the string ‘all’ to transfer all todo items.

map.transfer('Erica', 'Karen', 'all');
// transfer 'Chop wood' before deleting 'Erica'

Now our Map looks like this:


todoMap {
  map: Map {
    'Karen' => [ 'Fix leaky roof', 'Mow the lawn', 'Chop wood' ],
    'Kyle' => [ 'Paint the hallway' ],
    'Norma' => [ 'Trim the hedges', 'Fix front door' ],
    'Eric' => [ 'Screw in light fixtures' ],
    'Erica' => [],
    'Kareem' => [ 'Take out the trash', 'Cook for everyone' ]
  }
}

Finally, I can safely invoke map.deleteName('Erica'); without losing any of her todo items.

Photo by Ylanite Koppens from Pexels

The Art of Warren

The Art of Warren

Map Object