Categories
TypeScript

JavaScript Object Features in TypeScript — Maps and Sets

Spread the love

TypeScript is a natural extension of JavaScript that’s used in many projects in place of JavaScript.

However, not everyone knows how it actually works.

In this article, we’ll look at how to use maps to store key-value pairs, and sets to store items without duplicates.

Storing Key-Value Pairs with Maps

We can store key-value pairs with maps.

The difference between maps and object literals is that we can have keys other than strings and symbols.

We can define a map with JavaScript’s built-in Map constructor.

For instance, we can write the following to do that:

const data = new Map();
const key = {
  foo: 'bar'
};
data.set("foo", "bar");
data.set(key, 2);

As we can see, we have a map with a string key and an object key in a map.

The set method stores a value with the given key.

To get a value by a key, we can use the get method with the key as an argument.

There’s also the keys method to get an iterator with the keys of a map.

The values method returns the values of a map.

The entries method returns an iterator with the key-value pairs of a map.

This is the default iterator for maps.

Use Symbols for Map Keys

Symbols can be used for Map and object keys.

For instance, we can write:

const data = new Map();
const symbol = Symbol();

data.set("foo", "bar");
data.set(symbol, 2);

Each symbol that’s created is different so we’ve to store it in a variable so that we can get the value with the symbol key later.

This is also the same for non-primitive keys.

Therefore, we can have multiple symbols with the same name but with different references.

For instance, we can write:

const symbol1 = Symbol('foo');
const symbol2 = Symbol('foo');

They have the same name but are different.

So:

symbol1 === symbol2

would return false .

We can get the value with the given symbol key by writing:

const value = data.get(symbol);

Storing Data by Index

We can store data without duplicates with a Set instance.

For instance, we can write:

const set = new Set([1, 2, 3]);

Then we get a set with those values returned.

Sets can’t have duplicates, so we if we write:

const set = new Set([1, 2, 3, 1]);

We still get a set with 1, 2, and 3 in it as only the first instance of something is kept.

Sets have the size property that returns the size of a set.

Set instances have some useful methods to get items from them, add/remove items, and iterate through them.

add takes the value that we want to add to a set as the argument.

entries returns an iterator for all entries in the order that they were added.

has returns true is a set has the specified value.

forEach takes a callback that’s run on every entry of a set.

Conclusion

We can use maps to store key-value pairs. It can store keys that aren’t strings or symbols, unlike objects.

Sets can be used to store data without duplicates.

They’re both iterable objects, and we can call a method to return iterators from them.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *