JavaScript Map
In this post, we will discuss about Map data structure in JavaScript. Map stores the data in the form of key-value pairs.
Example:-
Let's create a Map that stores 5 subjects with subject-name as key and price as value using the Map() constructor.
<html>
<body>
<script>
// Create a Map named subjects that will store bookid,price of 5 subjects
const subjects = new Map([
["php", 1500],
["java", 1300],
["html", 1200],
["GO", 1300],
["Python", 1200],
]);
// Display the data present in the Map
let display = "";
subjects.forEach (function(values, keys) {
display += keys + ' ->' + values + "<br>"
})
document.writeln(display);
</script>
</body>
</html>
Output:
php ->1500
java ->1300
html ->1200
GO ->1300
Python ->1200
set()
We can also pass the values to the Map one by one using Set() method.
Syntax:
map.set(key,value)
Example:-
Let's create a Map that stores 5 subjects with subject-name as key and price as value using the Map() constructor.
<html>
<body>
<script>
// Create a Map named subjects
const subjects = new Map();
// Set 5 Map Values
subjects.set("php", 1500);
subjects.set("java", 1300);
subjects.set("html", 1200);
subjects.set("GO", 1300);
subjects.set("Python", 1200);
// Display the data present in the Map
let display = "";
subjects.forEach (function(values, keys) {
display += keys + ' ->' + values + "<br>"
})
document.writeln(display);
</script>
</body>
</html>
Output:
php ->1500
java ->1300
html ->1200
GO ->1300
Python ->1200
get()
If you want to get value based on the key, then you can use get() method, to return the value based on the key. We need to pass the key as a parameter. If the key is not found, undefined is returned.
Syntax:
map.get(key)
Example:-
Let's create a Map that stores 5 subjects with subject-name as key and price as value using the Map() constructor and access some values using get() method.
<html>
<body>
<script>
// Create a Map named subjects
const subjects = new Map();
// Set 5 Map Values
subjects.set("php", 1500);
subjects.set("java", 1300);
subjects.set("html", 1200);
subjects.set("GO", 1300);
subjects.set("Python", 1200);
// Get the value of "php".
document.writeln("Value of php: "+subjects.get("php")+"<br>");
// Get the value of "GO".
document.writeln("Value of GO: "+subjects.get("GO")+"<br>");
// Get the value of "jsp".
document.writeln("Value of jsp: "+subjects.get("jsp")+"<br>");
</script>
</body>
</html>
Output:
Value of php: 1500
Value of GO: 1300
Value of jsp: undefined
You can see that for "php" and "GO", the values are returned and for "jsp" the value is undefined, since it does not exist in the Map.
size
size property in Map is used to return the total number of key-value pairs exists in the Map.
Syntax:
map.size
Example:-
Let's create a Map that stores 5 subjects and return the size.
<html>
<body>
<script>
// Create a Map named subjects
const subjects = new Map();
// Set 5 Map Values
subjects.set("php", 1500);
subjects.set("java", 1300);
subjects.set("html", 1200);
subjects.set("GO", 1300);
subjects.set("Python", 1200);
// Get the size of the subjects
document.writeln("Total pairs: "+subjects.size+"<br>");
</script>
</body>
</html>
Output:
Total pairs: 5
There are 5 key-value pairs in the Map-subjects.
delete()
delete() method deletes the key-value pair based on the key.
Syntax:
map.delete(key)
Example:-
Let's create a Map that stores 5 subjects and delete - "java" and "Python".
<html>
<body>
<script>
// Create a Map named subjects
const subjects = new Map();
// Set 5 Map Values
subjects.set("php", 1500);
subjects.set("java", 1300);
subjects.set("html", 1200);
subjects.set("GO", 1300);
subjects.set("Python", 1200);
// delete "java".
subjects.delete("java");
// delete "Python".
subjects.delete("Python");
// Display the data present in the Map
let display2 = "";
subjects.forEach (function(values, keys) {
display2 += keys + ' ->' + values + "<br>"
})
document.writeln(display2);
</script>
</body>
</html>
Output:
php ->1500
html ->1200
GO ->1300
We can see that there are only three elements in the Map.
clear()
clear() method deletes all the key-value pairs from the Map.
Syntax:
map.clear()
Example:-
Let's create a Map that stores 5 subjects and delete all of them using clear().
<html>
<body>
<script>
// Create a Map named subjects
const subjects = new Map();
// Set 5 Map Values
subjects.set("php", 1500);
subjects.set("java", 1300);
subjects.set("html", 1200);
subjects.set("GO", 1300);
subjects.set("Python", 1200);
// delete all the elements
subjects.clear()
// Display the data present in the Map
let display2 = "";
subjects.forEach (function(values, keys) {
display2 += keys + ' ->' + values + "<br>"
})
document.writeln(display2);
document.writeln("Done");
</script>
</body>
</html>
Output:
Done
We can see all the pairs were deleted from the Map.
has()
has() method checks if the key exists in the Map or not. If exists, true is returned. otherwise, false is returned. It will take key as parameter.
Syntax:
map.has(key)
Example:-
Let's create a Map that stores 5 subjects and check for some keys using has() method.
<html>
<body>
<script>
// Create a Map named subjects
const subjects = new Map();
// Set 5 Map Values
subjects.set("php", 1500);
subjects.set("java", 1300);
subjects.set("html", 1200);
subjects.set("GO", 1300);
subjects.set("Python", 1200);
// Check for php.
document.writeln("Does php exists ? ",subjects.has("php")+"<br>");
// Check for Python.
document.writeln("Does Python exists ? ",subjects.has("Python")+"<br>");
// Check for jsp.
document.writeln("Does jsp exists ? ",subjects.has("jsp"));
</script>
</body>
</html>
Output:
Does php exists ? true
Does Python exists ? true
Does jsp exists ? false
Based on the output, we can see that "php" and "Python" exists in the Map as keys and "jsp" does not exists.
