JavaScript Maps

المعرفة:: JavaScript الحالة::مؤرشفة المراجع:: The Complete JavaScript Course 2022 From Zero to Expert

---

• A data structure that can be used to map values to keys, like objects.

• In maps, the keys can be any type such as arrays, booleans, numbers etc. while in objects keys are strings.

Creating Maps

const rest = new Map(); // create new empty map
 
// create map with values
// This uses same structure (array of arrays) as Object.entries()
const question = new Map([
  ["question", "What is the best programming language in the world?"],
  [1, "C"],
  [2, "Java"],
  [3, "JavaScript"],
  ["correct", 3],
  [true, "Correct 🎉"],
  [false, "Try again!"],
]);

Methods

Set

// set
rest.set("name", "Classico Italiano"); // Add a key-value pair
rest.set(1, "Firenze, Italy");
console.log(rest.set(2, "Lisbon, Portugal")); // set also returns the map after adding item
rest
  .set("categories", ["Italian", "Pizzeria", "Vegetarian", "Organic"])
  .set("open", 11)
  .set("close", 23)
  .set(true, "We are open :D")
  .set(false, "We are closed :("); // Set calls can be chained too

Get

// get
console.log(rest.get("name")); // get can be used to retrive value of a key
console.log(rest.get("true")); // if key doesn't exist, undefinded is returned
 
// using boolean keys
const time = 8;
console.log(rest.get(time > rest.get("open") && time < rest.get("close"))); // rest.get(8 > 11 && 8 < 23) -> We are closed :(

Has

// has
console.log(rest.has("categories"));

Size

// size
rest.size; // 7

Delete

// delete
rest.delete(2);

Clear

// clear
rest.clear();

Using Arrays as Keys

• In order to use arrays, the set and get keys must be the same object. Because arrays are Reference Type.

const arr = [1, 2];
// rest.set([1, 2], 'Test');
// rest.get([1, 2]); // This will return undefined, because the two arrays are different in the heap.
rest.set(arr, "Test");
console.log(rest);
console.log(rest.size);
console.log(rest.get(arr));

Using DOM element as Key

rest.set(document.querySelector("h1"), "Heading");

Converting Objects to Maps

// Convert object to map
const hoursMap = new Map(Object.entries(openingHours));
console.log(hoursMap);

Converting Map to Array

// Convert map to array
console.log([...question]); // Array of arrays of key-value pairs
// = console.log(...question.entries());
console.log([...question.keys()]);
console.log([...question.values()]);

Iterating Maps

Maps iteration doesn’t require using entries() method.

for (const [key, value] of question) {
}

وصلة للملاحظة الرئيسة

Objects vs Maps

Objects	Maps
More “traditional” key/value store (“abused” objects)	Better performance Keys can have any data type
Easier to write and access values with . and []	Easy to iterate and to compute size
Use when you need to include functions (methods)	Use when you simply need to map key to values
Use when working with JSON (can convert to map)	Use when you need keys that are not strings