In this tutorial we will show you the solution of JavaScript key, value map, map is a collection of elements where each element is stored as a key, value pair.
For showing mapped key,value pair here we will showing demo within that we defined new map object with initialized pair array.
Then result printed on console using console.log() method. Using map object we can create more types string pairs, or array pairs with both whole number and strings.
Step By Step Guide On JavaScript Key, Value Map :-
Here we defined map object with key, value pairs. Map object can hold both objects and primitive values as either key or value.
When we iterate over the map object it returns the key, value pair in the same order as inserted.
It can also hold array within array and key array, value array is respective key name values.
Those are defined with example in our program when you will executes you can get some idea about that.
<!DOCTYPE html>
<html>
<head>
<title>Map in Javascript</title>
</head>
<body>
<script>
var map1= new Map([[1,2],[2,3],[4,5]]);
console.log("Map1");
console.log(map1);
var map2= new Map([["whole numbers",[1,2,3,4]],
["negative numbers",[-1,-2,-3,-4]]
]);
console.log("Map2");
console.log(map2);
var map3= new Map([[["first name","last name"],
["dhanu","pavi"]]
]);
console.log("Map3");
console.log(map3);
</script>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contains information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Within <script> tag we defined our javascript program, here we initialized map objects ‘map1,map2,map3’ with different types of key, value arrays.
- In map object ‘map1’ we defined array with ‘[1,2],[2,3],[4,5]’ values, here keys are ‘1,2,4’ with respective values ‘2,3,5’.
- In map object ‘map2’ we defined array within array ‘["whole numbers",[1,2,3,4]],["negative numbers",[-1,-2,-3,-4]]’ values, here keys are ‘whole numbers, negative numbers’ with respective another array values ‘[1,2,3,4],[-1,-2,-3,-4]’.
- In map object ‘map3’ we defined array pair is key array ‘["first name","last name"]’, value array ‘["dhanu","pavi"]’.
- Printed all results using ‘console.log()’ method. Console.log() is a function in javascript which is used to print any kind of variables defined before in it or to just print any message that needs to be displayed to the user. Its output display on the javascript console.
- In browser for open javascript console use the shortcut ‘ctrl+shift+j’ then console panel will open at right hand side there we can see our result.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion we are able to know how to create map object with types of ‘key,value’ pair values using javascript.
When we execute our program on browser we can’t see the result so we have to use that shortcut ‘ctrl+shift+j’ then result will displayed on console by console.log() method.
This method only will print any message or value on the console, for generally printing values or string on webpage in javascript we had many inbuilt methods.
We will see all these methods in future. I hope this tutorial on JavaScript key, value map helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
