An Interest In:
Web News this Week
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
What are JavaScript Sets?
Photo by Ricardo Gomez Angel on Unsplash
JavaScript sets
JavaScript sets were introduced in ES6.
Set
objects are collections of values. There can never be any duplicates inside of them, which can make them pretty useful depending on the situation.
In order to create a Set
, we use the Set.()
constructor, which will create a new Set
object.
const colors = new Set([ 'Red', 'Green', 'Blue', 'Purple', 'Purple', 'Red', 'Red', 'Blue', 'Magenta']);console.log(colors)// Returns Set(5){'Red', 'Green', 'Blue', 'Purple', 'Magenta'}
A Set
can hold mixed data types, just like an array. It is also iterable, like an array. However, there are two big differences between a Set
and an array.
- A Sets elements are unique.
- The order of elements in a
Set
is irrelevant.
When creating a Set
, if we pass in a string as the value, it is an iterable. Whatever is passed in, will become a set of unique characters, with the duplicates removed. Using the string Hello
, if we pass it into a new Set
constructor, the second l will be removed, and we'll be returned a set that consists of only {'H', 'e', 'l', 'o'}
.
console.log(new Set('Hello'))// Returns Set(4){'H', 'e', 'l', 'o'}
Working with Sets
There are several methods, and properties that can be used with Sets in order to manipulate the data.
The .add()
method can add a new element onto our Set
. But just as all values are unique in a set, if you try to add a value twice, the second one will be ignored.
colors.add('Yellow')Set(6){'Red', 'Green', 'Blue', 'Purple', 'Magenta',}
The .has()
method can check to see if a set contains a specific element. It's similar to the .includes()
method in arrays.
colors.has('Yellow')// Returns true
Unlike arrays, as the order doesn't matter in Set
's, we can't pass in an index. Doing so will return undefined
.
console.log(colors[0])// Returnsundefined
The .size
property is similar to the .length
property in arrays, and will return the size of our Set
object.
colors.size// Returns 6
We can delete elements from a set using the .delete()
method.
colors.delete('Yellow')// Returnstrue colorsSet(5){'Red', 'Green', 'Blue', 'Purple', 'Magenta'}
Another method that can be used on a Set
is the .clear()
method, which will delete all of the elements of the set.
colors.clear()colors // ReturnsSet(0){size: 0}
We can also iterate over the items in a set, using both the .forEach()
method, or a for/of loop.
for (let item of colors) console.log(item)// Returns RedGreenBluePurpleMagenta
Converting between a Set
and an Array
.
If we wanted to convert an array into a Set
, it's very simple. We can use the regular Set
constructor on an array, and it will transform it.
let arr = ['Hello', 'how', 'are', 'you?']let newSet = new Set(arr)console.log(newSet)// Returns Set(4){'Hello', 'how', 'are', 'you?'}
If we wanted to convert a Set
into an Array
, we can use the spread operator.
console.log([...newSet])// Returns (4)['Hello', 'how', 'are', 'you?']
Sets also have the keys
and values
methods. keys
is an alias for values
, so both methods do the same thing pretty much. Using either of them will return a new iterator object, that yields the values
for each element in the Set
in the order they appear.
let iceCreamFlavors = new Set();iceCreamFlavors.add('vanilla'); // vanillaiceCreamFlavors.add('chocolate'); // chocolateiceCreamFlavors.add('mint chocolate chip'); // mint chocolate chiplet setItr = iceCreamFlavors.values();console.log(setItr.next().value);console.log(setItr.next().value);console.log(setItr.next().value);
Conclusion
Sets are very easy to interact with thanks to how straightforward their methods are, and because of that can be a very useful tool. I hope that this introduction to them has helped explain just how helpful they can be.
Original Link: https://dev.to/dani8439/what-are-javascript-sets-3lpm
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To