Collections in JavaScript
Sets and Maps
Sets
A Set is a Collection of unique values, it can never have any duplicates.
const haloSet = new Set([
‘Halo 1’,
‘Halo 2’,
‘Halo 3’,
‘Halo 4’,
‘Halo 5’,
‘Halo 1’,
]);
console.log(haloSet);
Even if we were to have the exact same value in the Array, it would not display on the Set.
The Set would only print the unique values as shown above.
Set Methods
Sets have different methods which you can use to your liking;
- Add a new Element to the Set
haloSet.add(‘Halo Infinite’);
console.log(haloSet);
2. Delete an Element from the Set
haloSet.delete(‘Halo Infinite’);
console.log(haloSet);
3. Checking the Size of the Set
console.log(haloSet.size);
Or we can simply get the Size through the Set.
const haloSet = new Set([
‘Halo 1’,
‘Halo 2’,
‘Halo 3’,
‘Halo 4’,
‘Halo 5’,
‘Halo 1’,
]).size;
console.log(haloSet);
4. Checking to see if a certain Element is in the Set
console.log(haloSet.has(‘Halo 3’));
5. Deleting all Elements from the Set
haloSet.clear();
console.log(haloSet);
6. Looping over a Set
for (const data of haloSet) {
console.log(data);
}
This can be done as Sets are Iterables. The results will be displayed as Strings one after the other.
The main use case of a Set is to remove the duplicate values that are present in an Array. For example;
let setHaloArray = new Set(haloArray);
console.log(setHaloArray);
We can also convert the Set to an Array using the Spread Operator. The Spread Operator works on all Iterables. For example;
setHaloArray = […new Set(haloArray)];
console.log(setHaloArray);
We can also get the number of letters in a String as well (if you really need to do this). Strings are Iterables as well, so we can use Sets;
console.log(new Set(‘Halo1Halo2Halo3’).size);
The Size of this String will be 7 and not 15 is because Set’s only take in individual values and remove duplicates. Since ‘Halo’ is a Duplicate in this String, those values will be removed, giving the size of 7.
Maps
A Map is a Data Structure that allows us to Map Values to Keys. The Data stored in Map is in the Key Values. Keys can have any type (String, Number, etc).
The best way to create a Map is to first create an Empty Map, and then add a Set to it. For example;
const haloMap = new Map();
haloMap.set(‘Game’, ‘Halo’);
console.log(haloMap);
We can also add more values into the Set by simply chaining methods or by adding them individually. However, the code is cleaner when you chain methods, rather than adding them individually. For example;
const haloMap = new Map();
haloMap.set(‘Game’, ‘Halo’).set(‘Type’, ‘FPS’).set(‘Developers’, ‘343 Industries’). .set(‘Series’, [‘Halo 1’, ‘Halo 2’, ‘Halo 3’, ‘Halo 4’, ‘Halo 5’]);
console.log(haloMap);
Reading Data from a Map
We can also read the Data from the Map using the get Method
console.log(haloMap.get(‘Series’));
Please note that this method is case sensitive, so if you were to use haloMap.get(‘series’), it would return as undefined.
Using Boolean Values
haloMap
.set(‘playTime’, 4)
.set(true, ‘Maybe Practice more Code?’)
.set(false, ‘Play Some Halo!’);
console.log(haloMap);
const timePlaying = 5;
console.log(haloMap.get(timePlaying > haloMap.get(‘playTime’)));
The above code shows that the User can play for about 4 hours. If that time limit is exceed, a boolean statement is thrown. The result of the above is given below;
Since 5 > 4, it will print the true statement, which is ‘Maybe Practice more Code?’
Map Methods
Just like in Sets, we have the same methods used for Maps;
- Deleting Elements from the Map
haloMap.delete(‘Type’);
console.log(haloMap);
Elements can be deleted based on the Key value.
2. Checking to see if the Map contains a certain Key
console.log(haloMap.has(‘Series’));
3. Checking to see the size of the Map
console.log(haloMap.size);
4. Deleting all Elements from the Map
haloMap.clear();
console.log(haloMap);
5. Converting an Object to a Map
const gamingHours = {
Monday: {
playHalo: 3,
playPokémon: 3,
},
Tuesday: {
playHalo: 2,
playPokémon: 2,
},
Wednesday: {
playHalo: 4,
playPokémon: 5,
},
Thursday: {
playHalo: 1,
playPokémon: 4,
},
};
const gamingMap = new Map(Object.entries(gamingHours));
console.log(gamingMap);
This is the easiest way to do it. Simply call the Object.entries() Method inside the Map. It will basically create an Array of Arrays.
6. Using the for of Loop
const haloArray = [‘Halo 1’, ‘Halo 2’, ‘Halo 3’, ‘Halo 4’, ‘Halo 5’];
const newHaloMap = new Map(Object.entries(haloArray));
for (const [key, value] of newHaloMap) {
console.log(`Index Number ${key} = ${value}`);
}
Since Objects are not Iterable, we must first convert them into an Iterable using Object.entries(). Then, we can use the for of Loop to iterate through the Map.
Since the Index Starts at 0, the above results will display as shown. If you want to change it to 1, we can simply pass the Number Function into it as shown below;
for (const [key, value] of newHaloMap) {
console.log(`Index Number ${Number(key) + 1} = ${value}`);
}
7. Converting a Map back into an Array
We simply use the Spread Operator and unpack the Array.
console.log([…haloMap]);
