In this article, we are going to implement Set and Map data collection algorithms using modern JavaScript, HTML 5.0, and Bootstrap.
Modern JavaScript – Map
A map is a collection which is used to store key and value pairs. In the Map, keys are unique that correspond to values as one to one mapping. A map is an Object that can hold such multiple key and value pairs. The following are the main methods associated with Map in the modern JavaScript.
Example: In the following example, we are going to demonstrate the use of Map using modern JavaScript. Here, we are going to use the above methods on the Map object.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Map Implementation</title> <! -- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <! -- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <link rel="stylesheet" href="resource/crc-stylesheet.css"> </head> <body> <br> <h5>Map Implementation in Java Script</h5> <br> <p> A string key value pair <input id="counter1" name="qty1" readonly="readonly" type="text" value="0" size="30" /></p> <p> A numeric key value pair <input id="counter2" name="qty2" readonly="readonly" type="text" value="0" size="30" /></p> <p> A boolean key value pair <input id="counter3" name="qty3" readonly="readonly" type="text" value="0" size="30" /></p> <p> Map Size <input id="counter4" name="qty4" readonly="readonly" type="text" value="0" size="30" /></p> <! -- Latest compiled and minified JavaScript --> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script> //Map Implementation let hashMap = new Map (); hashMap.set ('abc', 'A String Key Value'); // A string key value pair. hashMap.set (1, 'A Number Key Value'); // A numeric key value pair. hashMap.set (true, 'A boolean Key Value'); // A boolean key value pair. // Here the regular Object would convert keys to string. function calculate () { $count1 = $('input[name="qty1"]'); $count2 = $('input[name="qty2"]'); $count3 = $('input[name="qty3"]'); $count4 = $('input[name="qty4"]'); $count1.val (hashMap.get ('abc')); $count2.val (hashMap.get (1)); $count3.val (hashMap.get (true)); $count4.val (hashMap.size); } Calculate (); </script> </body> </html>
Output
The above program will generate the following output when executing on any web browser.
Modern JavaScript – Set
A Set is a simple collection of unique values. In a Set collection, no value can be duplicated. The following are the main methods associated with Set in the modern JavaScript.
Example: In the following example, we are going to demonstrate the use of Set using modern JavaScript. Here, we are going to use the above methods on the Set object.
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Set Implementation</title> <! -- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <! -- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <link rel="stylesheet" href="resource/crc-stylesheet.css"> </head> <body> <br> <h5>Set Implementation in Java Script</h5> <br> <p> First value in Set <input id="counter1" name="qty1" readonly="readonly" type="text" value="0" size="30" /> </p> <p> Second value in Set <input id="counter2" name="qty2" readonly="readonly" type="text" value="0" size="30" /> </p> <p> Third value in Set <input id="counter3" name="qty3" readonly="readonly" type="text" value="0" size="30" /> </p> <p>   ; Set Size <input id="counter4" name="qty4" readonly="readonly" type="text" value="0" size="30" /> </p> <! -- Latest compiled and minified JavaScript --> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script> //Set Implementation let set = new Set (); set.add ('The first value'); // The First value in set. set.add ('The Second value'); // The First value in set. set.add ('The Third value'); // The First value in set. function calculate () { $count1 = $('input[name="qty1"]'); $count2 = $('input[name="qty2"]'); $count3 = $('input[name="qty3"]'); $count4 = $('input[name="qty4"]'); var i =0; for (let value of set) { if(i==0) $count1.val(value); if(i==1) $count2.val(value); if(i==2) $count3.val(value); i++; } $count4.val(set.size); } Calculate (); </script> </body> </html>
Output
The above program will generate the following output when executing on any web browser.
Conclusion
In this article, we discussed the use of Set and Map in the modern JavaScript along with suitable examples.