EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login
Home Software Development Software Development Tutorials ES6 Tutorial ES6 Set
Secondary Sidebar
ES6 Tutorial
  • ES6 Basic and Advance
    • What is ES6
    • ES6 Features
    • ES6 Enum
    • ES6 Array Methods
    • ES6 Spread Operator
    • ES6 Operator
    • ES6 Proxy
    • ES6 New Features
    • ES6 Set
    • ES6 reduce
    • ES6 Destructuring
    • ES6 filter
    • ES6 Cheat Sheet
    • ES6 Template Strings
    • ES6 Generators
    • ES6 Default Parameters
    • ES6 Object Destructuring
    • ES6 Arrow Function
    • ES6 Array
    • ES6 CLASSES
    • ES6 JavaScript
    • ES6 modules

ES6 Set

ES6 Set

Introduction to ES6 Set

The following article provides an outline for ES6 Set. A set is a type of data structure that lets you create a collection of distinct values that, along with sets are groupings of things or values that can be more deal with a single object or value. The sets are collections of values that are similar. Still, they don’t have any duplicates, enabling us to save the values accepted for both primitive values and object references that supported similar steps for mapping collection interfaces that ordered to the set. Thee and the elements are to be iterated using insertion order.

What is es6 set?

It is a type of data structure that allows for creating a collection of distinct and unique sets of values. The sets are groupings of things supported along with the partners and deal with a single type of object or value. The sets are collections of values that are similar to the arrays, but it does not have any duplicates and enable it for us to save the kind of unique values that accept for both primitive values and object references. It is an unordered collection of the unique value with the object speed for representing javascript.

es6 set elements

The Set object allows you to store one-of-a-kind values of any type, including primitive values and object references. The set object mainly refers to the collection of values by using insertion order that can be iterated and set the item elements in the interface. And also, the value in the Set can only be appear once in the set collection, and it is the unique one. The Set has a number of methods that determine whether a value exists in a Set object by employing a method that is to be, on average time, faster than the evaluating for most of the UI components that have been previously added to the Set object. For example, on average, it is a time faster than the Array.prototype. In addition, it includes a method when the length of an Array object is equal to the size of a Set object.

es6 set methods

A JavaScript Set is a group of distinct values with the help of the ecma6 script. Further in a set collection, each value can only be appear at them once. We use any type of value or the data type that can be stored as a Set. It does not allow duplicate content. It has the following types of elements that can be used to implement the set interface.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

new Set(): It helps to create a new set of elements, so the object is created and used to access the other elements, methods, etc.

add(): It helps to add the new element in the set collection list. The newly introduced element will be added on this method.

Delete(): It is one of the methods that help to remove the element from the set interface.

Has(): This method helps to return the boolean value that can only accept the true conditions. So if the value exists only, this method is called.

keys(): It is the unique set of elements, and ids help retrieve the elements.

values(): It helps to return the iterator with the set values.

forEach(): Using this method invokes the callback for each set of elements.

entries(): It is one of the methods that helps to return the iterator with the pairs like a key, value pairs from the set interface.

es6 set Example

Different examples are mentioned below:

All in One Software Development Bundle(600+ Courses, 50+ projects)
Python TutorialC SharpJavaJavaScript
C Plus PlusSoftware TestingSQLKali Linux
Price
View Courses
600+ Online Courses | 50+ projects | 3000+ Hours | Verifiable Certificates | Lifetime Access
4.6 (86,818 ratings)

Example #1

Code:

<!DOCTYPE html>
<html>
<head>
<title>

Welcome to My domain; it’s the first example that related to the set concept

</title>
</head>
<body style="text-align:center;" bgcolor='red' >
<h1 style="color: yellow;"><marquee>Have a Nice day users</marquee></h1>
Set Interface<span id="one"></span>
<script>
let mnths = new Set(['January', 'February', 'March', 'April', 'May', 'June','July','August','September','October','November','December']);
mnths.add('First');
mnths.add('second');
mnths.add('third');
mnths.add('four');
mnths.add('five');
mnths.add('six');
mnths.add('seven');
mnths.add('eigth');
mnths.add('nine');
mnths.add('ten');
mnths.add('eleven');
mnths.add('twelve');
mnths.add('eight');
function mthd(vals){
document.getElementById("one").innerHTML=vals
}
mnths.forEach(mthd);
</script>
</body>
</html>

 Output:

ES6 Set output 1

In the above example, we used Set concepts in different areas. First, we must be declaring the html components, and then by using the html body tag elements, the javascript will be called and used in the html UI components. Next, we used javascript components called a let and the function for declaring and initializing the application logic. Finally, by using the forEach() method and the loop to execute the Set method called add() and the functionality to avoid and show the duplicates on the page.

Example #2

Code:

<!DOCTYPE html>
<html>
<head>
<title>

Welcome to My domain; it’s the second example that related to the set concept

</title>
</head>
<body style="text-align:center;" bgcolor='pink' >
<h1 style="color: yellow;"><marquee>Have a Nice day users</marquee></h1>
<span id="one"></span>
<script>
let Tvs = new Set(['Samsung', 'Airtel', 'eAirtec', 'Onida', 'Vu', 'Mi','Panasonic','Verizon','Sony','LG','Haier','Videocon']);
Tvs.has('Mi');
Tvs.has('Onida');
Tvs.has('TCL');
function mthd(vals){
document.getElementById("one").innerHTML=Tvs.has('Mi');
}
function mthd1(vals){
document.getElementById("one").innerHTML=Tvs.has('Onida');
}
function mthd2(vals){
document.getElementById("one").innerHTML=Tvs.has('TCL');
}
Tvs.forEach(mthd);
Tvs.forEach(mthd1);
Tvs.forEach(mthd2);
</script>
</body>
</html>

Output:

ES6 Set output 2

In the second example, we used a set to feature along with the method called has() to validate and check the user inputs. It will be checked and validate the datas and return the boolean results.

ES6 – Maps and Sets

In ES6 has n number of collections, and the features among that Set and Map are the two most essential features for implementing the ECMA scripts. The user inputs are validated and used as the store and retrieve process of the html ui elements.

Maps:

The Map data structure in ECMAScript 6 is extremely useful since it allows us to utilise any values in both keys and values. Furthermore, we can set up the map elements using the iterable over the key-value pairs.

Sets:

To hold the elements of a set of strings, we used an object’s keys. It helps to search the elements in the IndexOf() method to search the contents. We can also use the filter() method to filter the elements.

Conclusion

In general, collections are the most important feature for storing and retrieving the elements in the UI components. For client-side validation, we can validate the unique set of elements in the un-ordered collections; the set can be iterated using the insertion technique and any type of values.

Recommended Articles

This is a guide to ES6 Set. Here we discuss the most important feature for storing and retrieving the elements in the UI components. You may also have a look at the following articles to learn more –

  1. What is ES6?
  2. ES6 Features
  3. ES6 Interview Questions
  4. TypeScript basics
0 Shares
Share
Tweet
Share
Primary Sidebar
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2022 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA
Free Software Development Course

C# Programming, Conditional Constructs, Loops, Arrays, OOPS Concept

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more