JavaScript Map and Set #10daysUnknownJSChallenge #day3

Typically, we use Object and Array (a type of object) for almost everything in JavaScript. Map and Set are two alternatives to this which are more developer-friendly and has support for many inbuild methods and properties

This article is part of my #10daysUnknownJSChallenge where I spent a very little time to explore 10 unknown topics for the series of 10 days

Map

Map is an object which holds key-value pairs. The most important difference between Object is

Syntax

const map = new Map()

Example

const map = new Map()

// Adding value
map.set('key', 'value');
map.set('name', 'John');
map.set(1, 'XYZ');

// Getting value
map.get('key') // value
map.get(1) // XYZ

// Check if key exist in Map
map.has('key') // true
map.has('1') // false

// Delete the key-value pair
map.delete('key') // true
map.delete('1') // false

// Check size of the Map
map.size // 2

// Clear all the key-value pair
map.clear()

Notes: set() method in the Map can be chained

Map with intial value

New Map can be initialized with default value using two-dimensional array like below

const user = new Map([
	['name', 'John'],
	['age', 23]
]);

Map Iteration

Iterating typical Object we would be required to get the keys and then iterate it. But in Map this got easier

user.forEach((value, key, map) => {
	console.log(key, value);
});
// Output: 
// name John
// age 23

Notes:

  1. Like Object, Map also support keys() , entries() and values(). These map method returns MapIterator instead Array
  2. Key equality is based on the sameValueZero algorithm
  3. Two NaN is treated as same even NaN !== NaN

Map to Obeject conversion and vice-versa

const userMap = new Map([
	['name', 'John'],
	['age', 23]
]);

// Convert Map to Object
const obj = Object.fromEntries(userMap)

// Convert Object to map
const map = new Map(Object.entries(obj))

Advantages using Map over Object

  1. Map will be retaining the item's order
  2. In Map, items key can have many data type
  3. Iteration made easy
  4. Performs better in scenarios involving frequent additions and removals of key-value pairs - MDN

Set

The Set Object used to store the unique value of any data type including primitive and objects

Like Map, Set has similar syntax

Syntax

const set = new Set()

Example

const names = new Set(['Antony','Britto'])

// Adding value
names.add('John');
names.add('Smith');

// Check if value exists in Set
names.has('John') // true
names.has('Hendry') // false

// Delete the value from the Set
names.delete('John') // true
names.delete('Hendry') // false

// Check size of the Set
names.size // 2

// Clear all the value from the Set
names.clear()

Set Iteration

for (let value of names) {
  console.log(names)
}

// using forEach:
names.forEach((value, valueAgain, names) => {
  console.log(value);
});

Set Conversion

const namesSet = new Set(['Antony','Britto'])

// Convert Set to Array
const namesArray = [...namesSet]

// Convert Array to Set
const newNames = new Set(namesArray);

Notes:

  1. Like Map, Set also has keys, values and entries method and returns SetIterator
  2. NaN and undefined allowed as value
  3. Two NaN is treated as same even NaN !== NaN
  4. Values equality will be checked since the Set item required to be unique

Advantages using Map over Object

  1. Handling unique values in Array format