JavaScript 101: Understanding Map and Set Data Types
In this tutorial, we will explore the basics of these data types and learn how to use them in our code
JavaScript's Map
and Set
data types are powerful tools that allow developers to store and manipulate data in a more efficient and organized way.
Map
A Map
is a collection of key-value pairs where each key is unique. It is similar to an object in JavaScript, but with some added features and benefits.
To create a new Map
, you can use the new
keyword followed by the Map()
constructor:
const myMap = new Map();
You can also initialize a Map
with key-value pairs by passing an array of arrays to the constructor:
const myMap = new Map([
["key1", "value1"],
["key2", "value2"],
["key3", "value3"]
]);
To add key-value pairs to a Map
, you can use the set()
method:
myMap.set("key4", "value4");
To retrieve a value from a Map
based on its key, you can use the get()
method:
console.log(myMap.get("key4")); // "value4"
You can check if a key exists in a Map
by using the has()
method:
console.log(myMap.has("key4")); // true
console.log(myMap.has("key5")); //false
You can remove a key-value pair from a Map
by using the delete()
method:
myMap.delete("key4");
console.log(myMap.has("key4")); // false
You can loop through the key-value pairs of a Map
using the forEach()
method:
myMap.forEach((value, key) => {
console.log(key + ": " + value);
});
Set
A Set
is a collection of unique values. It is similar to an array in JavaScript, but with some added features and benefits.
To create a new Set
, you can use the new
keyword followed by the Set()
constructor:
const mySet = new Set();
You can also initialize a Set
with values by passing an array to the constructor:
const mySet = new Set(["value1", "value2", "value3"]);
const array = ["value1", "value2", "value3"]
To add values to a Set
, you can use the add()
method:
mySet.add("value4");
To check if a value exists in a Set
, you can use the has()
method:
console.log(mySet.has("value4")); // true
You can remove a value from a Set
by using the delete()
method:
mySet.delete("value4");
console.log(mySet.has("value4")); // false
You can loop through the values of a Set
using the forEach()
method:
mySet.forEach(value => {
console.log(value);
});
// value1
// value2
// value3
// value4
You can also use the for...of
loop to iterate through the values of a Set
:
for (let value of mySet) {
console.log(value);
}
// value1
// value2
// value3
// value4
It's worth noting that Sets are not indexed-based and do not have a key-value pair like Maps.
In conclusion, Map
and Set
are powerful data types in JavaScript that can be useful in various scenarios, such as storing unique values or key-value pairs. They are also highly efficient and easy to use, making them a valuable addition to any developer's toolbox.
I'd love to connect with you via Twitter & LinkedIn
Happy hacking!