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 s…

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])
// Returns
undefined

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')
// Returns
true 
colors
Set(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 
// Returns
Set(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 
Red
Green
Blue
Purple
Magenta



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'); // vanilla
iceCreamFlavors.add('chocolate'); // chocolate
iceCreamFlavors.add('mint chocolate chip'); // mint chocolate chip

let 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.


Print Share Comment Cite Upload Translate
APA
Dani Schuhman | Sciencx (2024-03-29T10:07:44+00:00) » What are JavaScript Sets?. Retrieved from https://www.scien.cx/2021/10/15/what-are-javascript-sets/.
MLA
" » What are JavaScript Sets?." Dani Schuhman | Sciencx - Friday October 15, 2021, https://www.scien.cx/2021/10/15/what-are-javascript-sets/
HARVARD
Dani Schuhman | Sciencx Friday October 15, 2021 » What are JavaScript Sets?., viewed 2024-03-29T10:07:44+00:00,<https://www.scien.cx/2021/10/15/what-are-javascript-sets/>
VANCOUVER
Dani Schuhman | Sciencx - » What are JavaScript Sets?. [Internet]. [Accessed 2024-03-29T10:07:44+00:00]. Available from: https://www.scien.cx/2021/10/15/what-are-javascript-sets/
CHICAGO
" » What are JavaScript Sets?." Dani Schuhman | Sciencx - Accessed 2024-03-29T10:07:44+00:00. https://www.scien.cx/2021/10/15/what-are-javascript-sets/
IEEE
" » What are JavaScript Sets?." Dani Schuhman | Sciencx [Online]. Available: https://www.scien.cx/2021/10/15/what-are-javascript-sets/. [Accessed: 2024-03-29T10:07:44+00:00]
rf:citation
» What are JavaScript Sets? | Dani Schuhman | Sciencx | https://www.scien.cx/2021/10/15/what-are-javascript-sets/ | 2024-03-29T10:07:44+00:00
https://github.com/addpipe/simple-recorderjs-demo