Master JavaScript Sets: Unique Collections Made Easy

Introduction

Set is a new object type in ES6 used to create a collection of unique values.

Values in a Set can be primitive types such as strings or numbers, or complex types such as arrays or objects.

Basic Usage

Common methods include add, size, has, forEach, delete, clear.

let animals = new Set();

animals.add('🐷');
animals.add('🐼');
animals.add('🐢');
animals.add('🐿');
console.log(animals.size); // 4
animals.add('🐼');
console.log(animals.size); // 4

console.log(animals.has('🐷')); // true
animals.delete('🐷');
console.log(animals.has('🐷')); // false

animals.forEach(animal => {
  console.log(`Hey ${animal}!`);
});

// Hey 🐼!
// Hey 🐢!
// Hey 🐿!

animals.clear();
console.log(animals.size); // 0

Arrays and Objects

let myAnimals = new Set(['🐷', '🐢', '🐷', '🐷']);

myAnimals.add(['🐨', '🐑']);
myAnimals.add({ name: 'Rud', type: '🐢' });
console.log(myAnimals.size); // 4

myAnimals.forEach(animal => {
  console.log(animal);
});

// 🐷
// 🐢
// ["🐨", "🐑"]
// Object { name: "Rud", type: "🐢" }

Note, when an array is passed as a constructor argument it is iterated and each element is added to the set, but using add with an array adds the whole array as a single element.

String as Constructor Argument

console.log('Only unique characters will be in this set.'.length); // 43

let sentence = new Set('Only unique characters will be in this set.');
console.log(sentence.size); // 18

Strings are iterable, so when used as a constructor argument they are split into individual characters and added to the set.

for…of

Previously foreach was used to iterate a set; you can also use for…of to iterate.

let moreAnimals = new Set(['🐺', '🐴', '🐕', '🐇']);

for (let animal of moreAnimals) {
  console.log(`Howdy ${ animal }`);
}

// Howdy 🐺
// Howdy 🐴
// Howdy 🐕
// Howdy 🐇

Keys and Values

Set has keys and values methods, which are aliases of each other.

Calling keys or values returns an iterator with a next method.

let partyItems = new Set(['🍕', '🍾', '🎊']);
let items = partyItems.values();

console.log(items.next());
console.log(items.next());
console.log(items.next());
console.log(items.next().done);

// Object { done: false, value: "🍕" }
// Object { done: false, value: "🍾" }
// Object { done: false, value: "🎊" }
// true