DEV Community

Cover image for Set in JavaScript
Muhammad Bilal Bangash
Muhammad Bilal Bangash

Posted on

Set in JavaScript

#javascript #programming #react #ecmascript

"Inner Experience is only one source of human Knowledge."
- Dr. Allama Muhammad Iqbal

Good Day!!

In this article, we would be discussing the Set object in JavaScript

  • Set
  • Instance properties
    1. size
  • Instance methods
    1. add(value)
    2. delete(value)
    3. clear()
    4. has(value)
  • Iteration methods
    1. keys()
    2. values()
    3. entries()
    4. forEach()
  • Remove duplicate items from array using Set

Let's Start.....

1. Set

The Set object lets you store unique values of any type, whether primitive values or object references.

Description

Set objects are collections of values. You can iterate through the elements of a set in insertion order. A value in the Set may only occur once; it is unique in the Set's collection.

Example 
const setObj= new Set();
setObj.add("anyString");
setObj.add(11);
setObj.add(true);
setObj.add({key:"value"});

console.log("Data in Set is ",setObj)
// Data in Set is Set(4) {"anyString", 11, true, {key:"value"}}
Enter fullscreen mode Exit fullscreen mode

2. Instance properties

  • size: Returns the number of values in Set object 
const setObj= new Set();
setObj.add("anyString");
setObj.add(11);
setObj.add(true);
setObj.add({key:"value"});

console.log("Size of Set is ",setObj.size)
// Size of Set is 4
Enter fullscreen mode Exit fullscreen mode

3. Instance methods

  • add(value): Appends value to the Set object. Return the Set object with added value 
const setObj= new Set();
setObj.add("addedString");
console.log("First value added String ", setObj);
// First Value added String Set(1) {"addedString"}
setObj.add(11);
console.log("second value added number", setObj);
// second value added number Set(2) {"addedString", 11}
Enter fullscreen mode Exit fullscreen mode
  • delete(value): Removes the element associated to the value and returns a boolean asserting whether an element was successfully removed or not. 
const setObj= new Set();
setObj.add("addedString");
console.log("Delete addedString from setObj ", setObj.delete("addedString"));
// Delete addedString from setObj true
Enter fullscreen mode Exit fullscreen mode
  • clear(): Removes all elements from the Set object. 
const setObj= new Set();
setObj.add("anyString");
setObj.add(11);
setObj.add(true);
setObj.add({key:"value"});

console.log("Data in Set is ",setObj)
// Data in Set is Set(4) {"anyString", 11, true, {key:"value"}}


//Now clear setObj
setObj.clear();

console.log("Data in Set after clear ",setObj)
// Data in Set after clear Set(0) {}
Enter fullscreen mode Exit fullscreen mode
  • has(value): Returns a boolean asserting whether an element is present with the given value in the Set object or not. 
const setObj= new Set();
setObj.add("anyString");
setObj.add(11);
setObj.add(true);
setObj.add({key:"value"});

console.log("Data in Set is ",setObj)
// Data in Set is Set(4) {"anyString", 11, true, {key:"value"}}


//Now check value exist or not in setObj

console.log("11 exists in setObj ",setObj.has(11));
// 11 exists in setObj true
Enter fullscreen mode Exit fullscreen mode

4. Iteration methods

  • keys() && values(): Returns a new iterator object that yields the values for each element in the Set object in insertion order. (For Sets, keys() && values() methods are same.) 
const setObj= new Set();
setObj.add("anyString");
setObj.add(11);
setObj.add(true);
setObj.add({key:"value"});

for (let item of setObj.keys()) console.log('Item: ',item)
// Item: anyString
// Item: 11
// Item: true
// Item: {key:"value"}

for (let item of setObj.values()) console.log('Item: ',item)
// Item: anyString
// Item: 11
// Item: true
// Item: {key:"value"}
Enter fullscreen mode Exit fullscreen mode
  • forEach(callbackFn[, thisArg]): Calls callbackFn once for each value present in the Set object, in insertion order. If a thisArg parameter is provided, it will be used as the this value for each invocation of callbackFn. 
const setObj= new Set();
setObj.add("anyString");
setObj.add(11);
setObj.add(true);
setObj.add({key:"value"});

setObj.forEach((value)=>{
  console.log('Value: ',value)
})

// Value: anyString
// Value: 11
// Value: true
// Value: {key:"value"}
Enter fullscreen mode Exit fullscreen mode

5. Remove duplicate items from array using Set 

const duplicateNumbers = [11,45,33,11,22,44,44,44,56,76,45];
console.log('duplicate removed ',[...new Set(duplicateNumbers)]);

// duplicate removed (7) [11,45,33,22,44,56,76]

const dupNames=["John","Daina","John","Jason","Joe","Daina"];
console.log('duplicate removed ',[...new Set(dupNames)]);

// duplicate removed  (4) ["John", "Daina", "Jason", "Joe"]
Enter fullscreen mode Exit fullscreen mode

Here it's official documentation
Set in JavaScript Official

Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above.
Thank you

Top comments (0)