Web Programming TutorialsJavascript Implementation for Algorithms involving Set and Map

Javascript Implementation for Algorithms involving Set and Map

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.

Algorithms

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>&nbsp; &nbsp; A string key value pair &nbsp;
     		<input id="counter1" name="qty1" readonly="readonly"
			type="text" value="0" size="30" /></p>
	 <p>&nbsp; &nbsp; A numeric key value pair &nbsp;
	 		<input id="counter2" name="qty2" readonly="readonly"
			type="text" value="0" size="30" /></p>
	 <p> &nbsp; &nbsp; A boolean key value pair &nbsp;
	 		<input id="counter3" name="qty3" readonly="readonly"
			type="text" value="0" size="30" /></p>
	 <p>&nbsp; &nbsp; Map Size &nbsp;
	 		<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.

Map Output

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.

Set Output Table

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>
		&nbsp; &nbsp; First value in Set &nbsp; <input id="counter1" name="qty1"
			readonly="readonly" type="text" value="0" size="30" />
	</p>
	<p>
		&nbsp; &nbsp; Second value in Set &nbsp; <input id="counter2" name="qty2"
			readonly="readonly" type="text" value="0" size="30" />
	</p>
	<p>
		&nbsp; &nbsp; Third value in Set &nbsp; <input id="counter3" name="qty3"
			readonly="readonly" type="text" value="0" size="30" />
	</p>
	<p>
		&nbsp ;&nbsp; Set Size &nbsp; <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.

Set OutputConclusion

In this article, we discussed the use of Set and Map in the modern JavaScript along with suitable examples.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -