published: 08 Jul 2022
2 min read
Introduction to Set object in JavaScript
A Set
is a new type of object in ES6 that lets you create a collection of unique values. Each value appears only once in the set. The values stored in a Set
can be either primitive types (strings, numbers, booleans) or objects (object literals, arrays).
Creating a new Set
object
You can use the Set()
constructor to create an empty set:
const birds = new Set()
Alternatively, you can pass an iterable object (like an array) to the constructor to initialize the set. All the elements in the iterable will be added to the new set:
const birds = new Set(['🐦', '🦉', '🦆', '🦅'])
Since strings are iterable, they can also be passed in to create a set:
const fruits = new Set('🍒🍇🍉🍓🍑')
If the iterable object contains duplicate items, they will be automatically removed.
Set
methods
Some of the methods you can use on a Set
object are add()
, has()
, size
, delete()
and clear()
:
const birds = new Set()
// add items
birds.add('🐦')
birds.add('🦉')
birds.add('🦆')
birds.add('🦅')
// check if item exists
birds.has('🦉') // true
birds.has('🐥') // false
// get items count
birds.size // 4
// delete item
birds.delete('🦆') // true
birds.delete('🦆') // false - already deleted
// delete all items
birds.clear()
Since a set can only store unique values, calling add()
with the same value multiple times won't add new items:
const birds = new Set()
birds.add('🐦')
birds.add('🐦')
birds.add('🐦')
birds.size // 1
console.log(birds) // Set(1) {'🐦'}
Adding objects in Set
We can also put different objects types, such as object literals, arrays, dates, etc., into the set:
const set = new Set(['🦉', '🌹'])
set.add(['🦉', '🍌'])
set.add({ name: 'John Doe', planet: 'Earth' })
set.add(new Date())
set.forEach(value => {
console.log(value)
})
// 🦉
// 🌹
// ['🦉', '🍌']
// {name: 'John Doe', planet: 'Earth'}
// Thu May 16 2019 12:47:09 GMT+0100
Iterating over a Set
object
You can use the forEach()
method to iterate over a Set
object:
const flowers = new Set(['🌷', '🌹', '🌻', '🌸'])
flowers.forEach(flower => {
console.log('Hey ${flower}!')
})
// Hey 🌷!
// Hey 🌹!
// Hey 🌻!
// Hey 🌸!
Alternatively, you can use the for...of
loop to iterate over a Set
object:
for (const flower of flowers) {
console.log(flower)
}
Keys and values
The Set
object also has keys()
and values()
methods just like Maps. The only exception is the keys()
method is just an alias of the values()
method. Both return a new iterator object with the values in the same order as they were added to the set. We can also use these methods to iterate over the set:
const fruits = new Set('🍒🍇🍉🍓🍑')
for (const k of fruits.keys()) {
console.log(k)
}
for (const v of fruits.values()) {
console.log(v)
}
We can also use the iterator to iterate over the set values one-by-one like the following:
const fruits = new Set('🍒🍇🍉')
const items = fruits.values()
console.log(items.next()) // {value: '🍒', done: false}
console.log(items.next()) // {value: '🍇', done: false}
console.log(items.next()) // {value: '🍉', done: true}
Calling next()
returns each item as a {value: <value>, done: <boolean>}
object until the iterator finishes, at which point the done
is true
. The Set
object has another method called entries()
that also returns an iterator, but the value is repeated twice:
const fruits = new Set('🍒🍇🍉')
const items = fruits.entries()
console.log(items.next()) // {value: ['🍒', '🍒'], done: false}
Conclusion
A Set
is a new object type introduced in ES6 that allows you to create collections of values. A value can be either a primitive or an object and can occur only once in the set; it is unique in the collection. You can iterate through the values in the order they were inserted in the set.
If you need to learn more, check out our guide on the Map
object in JavaScript.
Are we missing something? Help us improve this article. Reach out to us.
Introduction to Set object in JavaScript
A Set
is a new type of object in ES6 that lets you create a collection of unique values. Each value appears only once in the set. The values stored in a Set
can be either primitive types (strings, numbers, booleans) or objects (object literals, arrays).
Creating a new Set
object
You can use the Set()
constructor to create an empty set:
const birds = new Set()
Alternatively, you can pass an iterable object (like an array) to the constructor to initialize the set. All the elements in the iterable will be added to the new set:
const birds = new Set(['🐦', '🦉', '🦆', '🦅'])
Since strings are iterable, they can also be passed in to create a set:
const fruits = new Set('🍒🍇🍉🍓🍑')
If the iterable object contains duplicate items, they will be automatically removed.
Set
methods
Some of the methods you can use on a Set
object are add()
, has()
, size
, delete()
and clear()
:
const birds = new Set()
// add items
birds.add('🐦')
birds.add('🦉')
birds.add('🦆')
birds.add('🦅')
// check if item exists
birds.has('🦉') // true
birds.has('🐥') // false
// get items count
birds.size // 4
// delete item
birds.delete('🦆') // true
birds.delete('🦆') // false - already deleted
// delete all items
birds.clear()
Since a set can only store unique values, calling add()
with the same value multiple times won't add new items:
const birds = new Set()
birds.add('🐦')
birds.add('🐦')
birds.add('🐦')
birds.size // 1
console.log(birds) // Set(1) {'🐦'}
Adding objects in Set
We can also put different objects types, such as object literals, arrays, dates, etc., into the set:
const set = new Set(['🦉', '🌹'])
set.add(['🦉', '🍌'])
set.add({ name: 'John Doe', planet: 'Earth' })
set.add(new Date())
set.forEach(value => {
console.log(value)
})
// 🦉
// 🌹
// ['🦉', '🍌']
// {name: 'John Doe', planet: 'Earth'}
// Thu May 16 2019 12:47:09 GMT+0100
Iterating over a Set
object
You can use the forEach()
method to iterate over a Set
object:
const flowers = new Set(['🌷', '🌹', '🌻', '🌸'])
flowers.forEach(flower => {
console.log('Hey ${flower}!')
})
// Hey 🌷!
// Hey 🌹!
// Hey 🌻!
// Hey 🌸!
Alternatively, you can use the for...of
loop to iterate over a Set
object:
for (const flower of flowers) {
console.log(flower)
}
Keys and values
The Set
object also has keys()
and values()
methods just like Maps. The only exception is the keys()
method is just an alias of the values()
method. Both return a new iterator object with the values in the same order as they were added to the set. We can also use these methods to iterate over the set:
const fruits = new Set('🍒🍇🍉🍓🍑')
for (const k of fruits.keys()) {
console.log(k)
}
for (const v of fruits.values()) {
console.log(v)
}
We can also use the iterator to iterate over the set values one-by-one like the following:
const fruits = new Set('🍒🍇🍉')
const items = fruits.values()
console.log(items.next()) // {value: '🍒', done: false}
console.log(items.next()) // {value: '🍇', done: false}
console.log(items.next()) // {value: '🍉', done: true}
Calling next()
returns each item as a {value: <value>, done: <boolean>}
object until the iterator finishes, at which point the done
is true
. The Set
object has another method called entries()
that also returns an iterator, but the value is repeated twice:
const fruits = new Set('🍒🍇🍉')
const items = fruits.entries()
console.log(items.next()) // {value: ['🍒', '🍒'], done: false}
Conclusion
A Set
is a new object type introduced in ES6 that allows you to create collections of values. A value can be either a primitive or an object and can occur only once in the set; it is unique in the collection. You can iterate through the values in the order they were inserted in the set.
If you need to learn more, check out our guide on the Map
object in JavaScript.
Are you looking for other code tips?
JS Nooby
Javascript connoisseur