JavaScript Set and WeakSet

ES6 introduced Set and WeakSet data types in JavaScript. These seem like regular JavaScript arrays but are more potent than an array. Set and WeakSet are data structures composed of a unique value.

Issues with Array

Array by default does not enforce pushing unique items into the array. Let’s take an example. Suppose we are creating a team for the next match.

// creating football team using player jerseys no
let footballTeam = [];

footballTeam.push('JN1');
footballTeam.push('JN2');
footballTeam.push('JN3');
footballTeam.push('JN1'); // Duplicate entery

console.log('Selected players are', footballTeam.length); // Selected players are 4

But we know that sometimes we need to prepare a unique list. Then we need to do this using an explicit way. Like here JN1 is already selected so we don’t need to select it again.

JavaScript Set

A set is just like a regular javascript array with some extra features. So firstly we need to understand how we can create a Set data structure.

How to Create a Set

//create a Set
let footballTeam = new Set(['JN1', 'JN2', 'JN3']);

Here creation and setting are done by the Set constructor. But we can also set the set’s value using the add method.

The add method

let footballTeam = new Set();
footballTeam.add('JN1'); // add will add item into set
footballTeam.add('JN2');
footballTeam.add('JN3');
footballTeam.add('JN1'); // Duplicate entery will be ignored 

console.log('Selected players are', footballTeam.size); // Selected players are 3

The has method

The has method will return true if a value exists in the Set.

// Check item exist or not
console.log(footballTeam.has('JN1')); // true

The delete method

The delete method will remove an element from a Set.

// Delete item
console.log(footballTeam.delete('JN3')); // true

The size property

// Get size of map
console.log(footballTeam.size); // 2

Set Iteration

let footballTeam = new Set(['JN1', 'JN2', 'JN3']);

// List of all selected players

let players = [];

footballTeam.forEach (function(player) {
    players.push(player);
});

console.log('Selected players are', players.join(", "));
// Selected players are JN1, JN2, JN3

Using Set as Enumerable Object

Set objects are iterable, which means they can be used for…of and destructuring.

let footballTeam = new Set();
footballTeam.add("JN1"); // add will add item into set
footballTeam.add("JN2");
footballTeam.add("JN3");

for(let playerJN of footballTeam){
  console.log(playerJN); // JN1, JN2, JN3
} 
// Effectively extracting elements via destructuring
let [jn1, jn2, jn3] = footballTeam;
console.log(jn1, jn2, jn3); // JN1, JN2, JN3 

JavaScript WeakSet

JavaScript Set and WeakSet both are similar data types. But WeakSet is a type of Set where only objects are allowed to be stored. It’s similar to the set with some differences so the add, has, and delete method works for Weakmap.

let footballTeam = new WeakSet({
  'jn': 'jn0',
  'name': 'cristiano ronaldo'
}); // Like Set new WeakSet('JS1') will not support cause it always need set

WeakSets cannot be used with for…of and they offer no methods for reading values from it.

let jn7   =   { 'jn': 'jn7', 'name': 'cristiano ronaldo' };
let jn18 = { 'jn': 'jn18', 'name': 'neves' };

let footballTeam = new WeakSet();
footballTeam.add(jn7, jn18);

footballTeam.has(jn18); // true
footballTeam.delete(jn18); // true
footballTeam.has(jn18); // false

WeakSets don’t prevent the garbage collector from collecting entries that are no longer used in other parts of the system.

So it’s all about Map and WeakMap. For more details, you can reach out to MDN.