DEV Community

loading...
Cover image for Set in JavaScript

Set in JavaScript

Muhammad Bilal Bangash
I am a Full Stack developer. I specialized in React JS, Next JS, Node JS, Gatsby, JavaScript, Angular, GraphQL. I'm passionate about new technologies and I keep learning all the time.
・3 min read

"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

Discussion (0)