This article is an extract from my book: The Complete Guide to Modern JavaScript.
Get my ebook on Amazon and Leanpub
What is a Set
?
A Set
is an Object
where we can store unique values of any type.
// create our set
const family = new Set();
// add values to it
family.add("Dad");
console.log(family);
// Set [ "Dad" ]
family.add("Mom");
console.log(family);
// Set [ "Dad", "Mom" ]
family.add("Son");
console.log(family);
// Set [ "Dad", "Mom", "Son" ]
family.add("Dad");
console.log(family);
// Set [ "Dad", "Mom", "Son" ]
As you can see, at the end we tried to add "Dad" again,but the Set
still remained the same because a Set
can only take unique values.
Let's continue using the same Set
and see what methods we can use on it.
family.size;
// 3
family.keys();
// SetIterator {"Dad", "Mom", "Son"}
family.entries();
// SetIterator {"Dad", "Mom", "Son"}
family.values();
// SetIterator {"Dad", "Mom", "Son"}
family.delete("Dad");
family;
// Set [ "Mom", "Son" ]
family.clear;
family;
// Set []
As you can see a Set
has a size
property and we can delete
an item from it or use clear
to delete all the items from it.
We can also notice that a Set
does not have keys so when we call .keys()
we get the same as calling .values()
or .entries()
.
Loop over a Set
We have two ways of iterating over a Set
: using .next()
or using a for of
loop.
// using `.next()`
const iterator = family.values();
iterator.next();
// Object { value: "Dad", done: false }
iterator.next();
// Object { value: "Mom", done: false }
// using a `for of` loop
for(const person of family) {
console.log(person);
}
// Dad
// Mom
// Son
Remove duplicates from an array
We can use a Set
to remove duplicates from an Array since we know it can only hold unique values.
const myArray = ["dad", "mom", "son", "dad", "mom", "daughter"];
const set = new Set(myArray);
console.log(set);
// Set [ "dad", "mom", "son", "daughter" ]
// transform the `Set` into an Array
const uniqueArray = Array.from(set);
console.log(uniqueArray);
// Array [ "dad", "mom", "son", "daughter" ]
// write the same but in a single line
const uniqueArray = Array.from(new Set(myArray));
// Array [ "dad", "mom", "son", "daughter" ]
As you can see the new array only contains the unique values from the original array.
What is a WeakSet
?
A WeakSet
is similar to a Set
but it can only contain Objects.
let dad = {name: "Daddy", age: 50};
let mom = {name: "Mummy", age: 45};
const family = new WeakSet([dad,mom]);
for(const person of family){
console.log(person);
}
// TypeError: family is not iterable
We created our new WeakSet
but when we tried to use a for of
loop it did not work, we can't iterate over a WeakSet
.
A WeakSet
cleans itself up after we delete an element from it.
dad = null;
family;
// WeakSet [ {…}, {…} ]
// wait a few seconds
family;
// WeakSet [ {…} ]
As you can see after a few seconds dad was removed and garbage collected. That happened because the reference to it was lost when we set the value to null
.
What is a Map
?
A Map
is similar to a Set
, but they have key and value pairs.
const family = new Map();
family.set("Dad", 40);
family.set("Mom", 50);
family.set("Son", 20);
family;
// Map { Dad → 40, Mom → 50, Son → 20 }
family.size;
// 3
family.forEach((key,val) => console.log(val,key));
// Dad 40
// Mom 50
// Son 20
for(const [key,val] of family){
console.log(key,val);
}
// Dad 40
// Mom 50
// Son 20
If you remember, we could iterate over a Set
only with a for of
loop, while we can iterate over a Map
with both a for of
and a forEach
loop.
What is a WeakMap
?
A WeakMap
is a collection of key/value pairs and similarly to a WeakSet
, even in a WeakMap
the keys are weakly referenced, which means that when the reference is lost, the value will be removed from the WeakMap
and garbage collected.
A WeakMap
is not enumerable therefore we cannot loop over it.
let dad = { name: "Daddy" };
let mom = { name: "Mommy" };
const myMap = new Map();
const myWeakMap = new WeakMap();
myMap.set(dad);
myWeakMap.set(mom);
dad = null;
mom = null;
myMap;
// Map(1) {{…}}
myWeakMap;
// WeakMap {}
As you can see mom was garbage collected after we set the its value to null
whilst dad still remains inside our Map
.
Thank you very much for reading. Follow me on DevTo or on my blog at inspiredwebdev.com for more.
Top comments (0)