<p>A set in JavaScript is a collection of unique values of any data type. The set data type was added in the EcmaScript version 6(ES6).&nbsp;</p>
<p>To create a JS set, <code>Set</code> constructor is used. We can optionally pass an iterable object to the <code>Set</code> to add the elements of that iterable(often an array) object to the set.</p>
<pre class="language-javascript"><code>const names = new Set(['John', 'Doe', 'Mary', 'Alice']);
console.log(names.size); // 4</code></pre>
<p>We can add elements to the set with the help of <code>add</code> method.</p>
<pre class="language-javascript"><code>const cities = new Set();
cities.add('Rome');
cities.add('Tokyo');
console.log(cities.size); // 2</code></pre>
<p>The reason why we're just logging or printing the size of the sets is that we may not see the elements of the set just by logging directly. When we try to log it on the console, we could just see something like <code>Set {}</code> or <code>[object Set] { ... }</code> etc based on the environment.</p>
<p>A <code>Set</code> instance has got various methods for reading and manipulating the data inside it. It's an iterable and so by using iterative methods or loops we can read the data.&nbsp;</p>
<p>The various methods that we can use on sets are:</p>
<ul>
<li><code>add()</code> - to add elements to the set</li>
<li><code>has()</code> - to check if the set has a particular element</li>
<li><code>delete()</code> - to delete the element if it exists</li>
<li><code>clear()</code> - to clear/delete all the elements of the set</li>
<li><code>values()</code> - to get the iterator of values inside the set</li>
<li><code>keys()</code> - same as values(). It is there just to match the methods with the map data type</li>
<li><code>entries()</code> - to get an iterator with [key, value] elements and in a set keys and values are the same. It also exists to match with the methods of the map data type</li>
<li><code>forEach()</code> - to call/invoke a callback function on every element in a set</li>
<li><code>size</code> - to get the total number of elements in a set</li>
</ul>
<p>Let's understand each method with examples</p>
<h2 style="text-align: center;">Javascript set methods</h2>
<h3>add() method</h3>
<pre class="language-javascript"><code>const colors = new Set(); // Initializing an empty set
colors.add('green');
colors.add('blue');
colors.add('red');
console.log(colors.size); // 3</code></pre>
<p>As we know that instance of <code>Set</code> returns an iterable, so we can use <a href="https://devapt.com/for-loops-javascript" target="_blank" rel="noopener">for-of loop</a> as discussed in the previous article to read the values of an iterable.&nbsp;</p>
<pre class="language-javascript"><code>for(const color of colors) {
  console.log(color)
}
// Logs: green, blue, red</code></pre>
<h3>has() method</h3>
<pre class="language-javascript"><code>const colors = new Set('green', 'blue', 'red');

// Checks if the elements exists in the set and returns a boolean
colors.has('red'); // true
colors.has('violet'); // false</code></pre>
<h3>delete() method</h3>
<pre class="language-javascript"><code>const colors = new Set(['green', 'blue', 'red']);

// Deletes the exact given element if it exists
colors.delete('red');
console.log(colors.size); // 2</code></pre>
<h3>clear() method</h3>
<pre class="language-javascript"><code>const colors = new Set(['green', 'blue', 'red']);

// Clears or deletes all the elements in a set
colors.clear();
console.log(colors.size); // 0</code></pre>
<h3>values() and keys()</h3>
<p>In the case of a JS set, <code>keys()</code> and <code>values()</code> methods return the same kind of iterator for iterating the values in a set. The main reason for having <code>keys()</code> method is to have similar methods as that of a <code>Map</code> data type in Javascript.</p>
<pre class="language-javascript"><code>const colors = new Set(['green', 'blue', 'red']);

// values() and keys() return the same
for(const color of colors.values()) {
  console.log(color)
}
// Logs: green, blue, red

for(const color of colors.keys()) {
  console.log(color)
}
// Logs: green, blue, red</code></pre>
<h3>entries() method</h3>
<p>The set <code>entries()</code> method is similar to the <code>Object.entries()</code>, where it returns keys and values of an object as an array of arrays. In the case of set <code>entries()</code> method, an iterator with <code>[key, value]</code> arrays is returned where keys and values are the same.&nbsp;</p>
<blockquote>
<p><code>Object.entries(object)</code> returns an actual array of arrays but <code>set.entries()</code> returns an iterator with [key, value] arrays.</p>
</blockquote>
<pre class="language-javascript"><code>const colors = new Set(['green', 'blue', 'red']);

for(const color of colors.entries()) {
  console.log(color)
}
// Logs: ["green", "green"], ["blue", "blue"], ["red", "red"]
</code></pre>
<h3>forEach() method</h3>
<p>The set <code>forEach</code> method works the same as the <code>forEach</code> method on arrays. It allows running a callback function on every element of the set.</p>
<pre class="language-javascript"><code>const colors = new Set(['green', 'blue', 'red']);

colors.forEach(c =&gt; console.log(c));
// Logs: green, blue, red</code></pre>
<h3>size property</h3>
<p>The size property of a <code>Set</code> instance returns the total number of elements present inside the set, nothing but the length of the set.&nbsp;</p>
<pre class="language-javascript"><code>const colors = new Set(['green', 'blue', 'red']);
console.log(colors.size); // 3</code></pre>
<p>So far we've seen different ways to iterate the sets. Let's see all together once.</p>
<h2 style="text-align: center;">Different ways to iterate sets</h2>
<pre class="language-javascript"><code>// All these iterations return the same result
const cities = new Set(['Tokyo', 'Seoul', 'Rio', 'Delhi']);

for (const city of cities) console.log(city);
for (const city of cities.keys()) console.log(city);
for (const city of cities.values()) console.log(city);
for (const [key, value] of cities.entries()) console.log(key);
cities.forEach((c) =&gt; console.log(c));

// Converting javascript set to array 
Array.from(cities).forEach((c) =&gt; console.log(c);

// Each iteration logs: Tokyo, Seoul, Rio, Delhi

</code></pre>
<h2 style="text-align: center;">When and where to use JS set?</h2>
<p>A set is a collection of unique unordered elements and the elements can be iterated in the order of their insertion.</p>
<h3>A set can be used</h3>
<h4>1. To remove the duplicates in an array</h4>
<pre class="language-javascript"><code>const letters = ['a', 'b', 'c', 'b', 'a', 'd']; // An array with duplicate letters
const uniqueLetters = [...new Set(letters)]; // Spreading the set created from the letters array
console.log(uniqueLetters); 
// Logs: ["a", "b", "c", "d"]</code></pre>
<h4>2. To find if an element exists in an array effectively</h4>
<p>Finding the existence of an element in an array of very large size may have performance problems. In such a case, <code>set.has()</code> method could be handy. <code>set.has()</code> has a time complexity of O(1) but it seems to be not guaranteed in all the situations. Learn more about it <a href="https://stackoverflow.com/questions/31091772/javascript-es6-computational-time-complexity-of-collections" target="_blank" rel="noopener">here</a>.</p>
<p><code>set.has()</code> method works very effectively compared to array methods for checking the existence of an element in a large array.</p>
<pre class="language-javascript"><code>const letters = ['a', 'b', 'c', ..., 'z']; // say a very large array 

// indexOf() and findIndex() may have performance issues
letters.indexOf('z'); // letters.length - 1
letters.findIndex(l =&gt; l === 'z'); // letters.length - 1

// Converting to a set and finding the existence 
const letterSet = new Set(letters);
console.log(letterSet.has('z')); // true</code></pre>
<p>There's a special case of JS sets called WeakSet, let's have a glimpse at it.</p>
<h2 style="text-align: center;">What is a weak set in Javascript?</h2>
<p>A weakset is similar to a set in Javascript but with limitations on the data types it can store and the methods it can have.</p>
<p>Unlike set, weakset can contain only the objects. And only <code>add()</code>, <code>has()</code>, <code>delete()</code> methods are available on a <code>WeakSet</code> instance. No iterative methods can be applied on weak sets, can't even check the size of a weakset.</p>
<pre class="language-javascript"><code>const colors = new WeakSet();
const green = { name: 'green' };
const red = { name: 'red' };
colors.add(green);
colors.add(red);
colors.has(green); // true
colors.delete(red);
colors.has('red'); // false

// Try adding a string or any other data type except object to the weakset
colors.add('violet'); // Throws an error</code></pre>
<blockquote>
<p>A weakset is called so because of the weak references to the data(objects) it contains. When the reference to the objects is lost, they get garbage collected.</p>
</blockquote>
<pre class="language-javascript"><code>let a = { index: 1 };
let b = { index: 2 };

const wSet = new WeakSet();

wSet.add(a);
wSet.add(b);
console.log(wSet.has(a)); // true
console.log(wSet.has(b)); // true
a = null; // removing the reference for { index: 1 } 
console.log(wSet.has(a)); // false</code></pre>
<p>WeakSet is mainly used as additional storage of data for objects that are stored or managed from another location.&nbsp;</p>
<p>That was a quick look at weaksets and overall the sets in Javascript.</p>

A Javascript set is a collection of unique unordered elements of any data type. Here are all the methods and uses of sets in Javascript.

Posts tagged with Set

What is a JavaScript Set? When and where to use JS sets?