Getting Started with Sets in JavaScript

By Digamber Rawat Last updated on

Sets in JavaScript

Sets in JavaScript will be explored in this article. We are going to learn more about the JavaScript Set object provided by ES6 in this article. In simpler terms, we can say that a JavaScript Set is a collection of unique items. Alternatively, in other words, items are not allowed to repeat under no circumstances.
An essential aspect of ES6 JavaScript Set is that the items are ordered. You will be iterating the elements in the order of insertion only. Another essential aspect of JavaScript Set is that it can store any types of values including objects or primitive.

Sets in JavaScript Syntax:

// Syntax

new Set([iterable]);

Parameter: It is an object which is iterable. The elements of these objects are added to the new Set created. When you pass null value or when the parameter is not specified, an empty set will be created.

Returns: It returns a new set object.

Remove Duplicate Elements from the JavaScript Array using Set Method

Now it’s time for us to create some JavaScript Set below to remove duplicate items from the array.

Get Non repetitive Items using JavaScript Set Object

// Non repetitive Items using JavaScript Set Object
var setObj = new Set(["John","John","Anne","Peter","Sam"]); 

setObj.forEach((data) => {

// Output: John, Anne, Peter, Sam

Get Relation with Array Object using JavaScript Set Method

var array = ['John', 'Ann', 'Page'];

// Set object to converts an Array into a Set object
var setObj = new Set(array);

// Output: true

// Spread operator converts a set into an array.
// Output: ["John", "Ann", "Page"]

Find Out Relation with Text String using JavaScript Set Method

Find out the length of the text string using set method in JavaScript.

var string = 'New York';

var setObj = new Set(string);

// Output: 8

Properties of JavaScript Set Instance

Set.length: 0 is the value for the length property. To find out the number of elements in a set, you can use Set.prototype.size.

get Set[@@species]: To create derived objects, you will be using this constructor function.

Set.prototype:Here we specify the prototype for the constructor. You will be able to add properties to all Set objects here.

Useful Set Methods in JavaScript

Set.prototype.add(value): With the help of this method, you will be able to add new elements to the Set object. This method returns the Set JavaScript object.

Set.prototype.clear(): You use this method to remove all elements from the object.

Set.prototype.forEach(callbackFn[, thisArg]): You can call callbackfn once for each value in the object. However, the insertion order will be maintained. When you provide the thisArg parameter, it will be used as this value.

Set.prototype.delete(value): This method eliminates the element associated with the value. Moreover, it returns the value that would have otherwise returned. Set.proototype.has(value) will be returning false thereafter.

Set.prototype.entries(): This method returns a new Iterator object. This object constitutes an array of [value, value] for each object. Remember that insertion order is strictly followed here. It is similar to the Map object for that matter. As a result, each entry has the same key and value here.

Set.prototype.has(value): This method returns a Boolean stating whether an element is associated with the given value or not.

Set.prototype[@@iterator](): It returns a new Iterator object having the values for corresponding elements. Inclusion order will be sustained.

Set.prototype.keys(): This method is similar to the values() function. It returns a new Iterator object holding values for each element in the object. Order for insertion is sustained.

Set.prototype.values(): It returns a new Iterator object. This object has values for each element. Insertion order is maintained.

Digamber Rawat
Digamber Rawat

Full stack developer with a passion for UI/UX design. I create beautiful and useful digital products to solve people’s problem and make their life easy.

Hire Me