Map & Set in Typescript (Angular)

Map in Typescript

Map is a new data structure introduced in ES 6 which lets you map keys to values without the drawbacks of using Objects.

Create Map

Use Map type and new keyword to create a Map in Typescript.

let map = new Map();

Add/ Retrieve/ Delete Entries from Map

1. map.set() – method to add entries in Map
2. map.get() – to retrieve an entry from Map
3. map.has() – to existence of an entry in the Map
4. map.delete() – deletes an entry from the Map
5. map.size – ‘size’ property will return size of Map
6. map.clear()-to clear the Map data

Add Entries

We can then add entries by using the set method, like so

let map = new Map();
map.set("A",1);
map.set("B",2);
map.set("C",3);

The set method is also chainable, like so

let map = new Map()
    .set("A",1)
    .set("B",2)
    .set("C",3);

Or we could initialize the Map with a an array of key-value pairs, like so

let map = new Map([
    [ "A", 1 ],
    [ "B", 2 ],
    [ "C", 3 ]
]);

Retrieve Entries

We can extract a value by using the get method

map.get("A");
//1 is value of key A

Check Entries

We can check to see if a key is present using the has method

map.has("A");
// true

Delete Entries

We can delete entries using the delete method

map.delete("A");
// true

Map Size

We can check for the size (number of entries) using the size property

map.size

Clear Map Data

We can empty an entire Map by using the clear method

map.clear()

Looping Map Data

We use the for-of looping operator to loop over entries in a Map. There are a couple of different method we can employ, we’ll go over each one using the below map as the example

let map = new Map([
    [ "APPLE", 1 ],
    [ "ORANGE", 2 ],
    [ "MANGO", 3 ]
]);
//using Keys
for (let key of map.keys()) {
    console.log(key);
}
// APPLE
// ORANGE
// MANGO
//using Values
for (let value of map.values()) {
    console.log(value);
}
// 1:
// 2
// 3
//using Entries
for (let entry of map.entries()) {
    console.log(entry[0], entry[1]);
}
// "APPLE" 1
// "ORANGE" 2
// "MANGO" 3

Set in Typescript

Sets are a bit like maps but they only store keys not key-value pairs.

They are common in other programming languages but are a new addition to JavaScript in ES 6.

Create Set

Use Set type and new keyword to create a Set in typescript.

let mySet = new Set();

Add/ Retrieve/ Delete Values from Set

1. set.set() – method to add values in the Set
2. set.has() – to check existence of a value in the Set
3. set.delete() – deletes a value from the Set
4. set.size – ‘size‘ property will return size of Set

Add Values

We can then add entries by using the add method, like so

Copylet set = new Set();
set.add('APPLE');
set.add('ORANGE');
set.add('MANGO');

The add method is chainable, like so

Copylet set = new Set()
    .add('APPLE')
    .add('ORANGE')
    .add('MANGO');

Or we can initialize the Set with an array, like so

Copylet set = new Set(['APPLE', 'ORANGE', 'MANGO']);

Retrieve Value

We can check to see if a value is in a set like so

Copyset.has('APPLE')
// true

Delete value

We can delete a value from the set

Copyset.delete('APPLE')

Set Size

We can count the number of entries in the set like so

Copyset.size
// 2

Clear the Set data

We can empty the entire set with the clear method:

Copyset.clear();
set.size
// 0

Sets can only store unique values, so adding a value a second time has no effect

Copylet set = new Set();
set.add('Moo');
set.size
// 1
set.add('Moo');
set.size
// 1

Looping over a Set

We can use the for-of loop to loop over items in our set, like so

Copylet set = new Set(['APPLE', 'ORANGE', 'MANGO']);
for (let entry of set) {
    console.log(entry);
}
// APPLE
// ORANGE
// MANGO