EDUCBA

Home » Software Development » Software Development Tutorials » JavaScript Tutorial » JavaScript Map Object

JavaScript Map Object

Introduction to JavaScript Map Object

The JavaScript map object is a type of collection that allows storing values based on key-value pair terminology. The map object is introduced in the ES6 specification of JavaScript and it allows storing the pairs of keys and respective values in it. This kind of data structure is useful when we need to store the values as pairs. It allows using Objects as well as primitive data types (String, Symbol, etc.) as a key or value while using it. It maintains the same insertion order.

Syntax:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

As the map is an object in JavaScript, it is defined by using new keyword.

let map = new Map();

In this simple way, we can define the map object. There are multiple ways by which we can initialize a map object.

Examples of JavaScript Map Object

Given below are the examples:

Example #1 – Initialize map using set() method

Code:

<!DOCTYPE html>
<html>
<head>
<title>
Map Object in JavaScript
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 150px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>
</head>
<body>
<div class = "results">
<h2> Map Object in JavaScript </h2>
<span> Open Console to see output </span>
<div class = "resultText">
<p id = "result"> </p>
</div>
</div>
<script type = "text/javascript">
let map = new Map();
map.set( 1, 'ONE' );
map.set( 2, 'TWO' );
map.set( 3, 'THREE' );
map.set( 4, 'FOUR' );
console.log(map);
</script>
</body>
</html>

Output:

JavaScript Map Object 1

JavaScript Map Object 2

Here, we have used numbers as keys and strings to represent that number as value. Every number can be represented as a word by using the number as key and word as value. We have used here set method from map object to set the key-value pair and passed the key-value pair to it by separating comma. The output is printed in the console.

Note: Go to console by Right Click >> Inspect >> Console

Example #2 – Initialization without set() method

Code:

<!DOCTYPE html>
<html>
<head>
<title>
Map Object in JavaScript
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 150px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>
</head>
<body>
<div class = "results">
<h2> Map Object in JavaScript </h2>
<span> Open Console to see output </span>
<div class = "resultText">
<p id = "result"> </p>
</div>
</div>
<script type = "text/javascript">
let map = new Map([ [ 10, 'TEN' ], [ 20, 'TWENTY' ], [30, 'THIRTY' ], [ 40, 'FORTY' ] ]);
console.log(map);
</script>
</body>
</html>

Output:

JavaScript Map Object 3

JavaScript Map Object 4

Here we have initialized a map object by directly passing key-value pairs to it. We have not used a set method for this. This method can be used when pairs are less or we want them to be initialized at the time of declaring map object.

Example #3 – get() method of Map Object

The get method is used when we know the key and we want to get the respective value stored in a map for the key.

Code:

<!DOCTYPE html>
<html>
<head>
<title>
Map Object in JavaScript
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>
</head>
<body>
<div class = "results">
<h2> Map Object in JavaScript </h2>
<span> Open Console to see map </span>
<div class = "resultText">
<p id = "result1"> </p>
<p id = "result2"> </p>
<p id = "result3"> </p>
<p id = "result4"> </p>
</div>
</div>
<script type = "text/javascript">
let map = new Map([ [ 10, 'TEN' ], [ 20, 'TWENTY' ], [30, 'THIRTY' ], [ 40, 'FORTY' ] ]);
console.log(map);
document.getElementById("result1").innerHTML = " map.get(10) : " + map.get(10);
document.getElementById("result2").innerHTML = " map.get(10) : " + map.get(20);
document.getElementById("result3").innerHTML = " map.get(10) : " + map.get(30);
document.getElementById("result4").innerHTML = " map.get(10) : " + map.get(40);
</script>
</body>
</html>

Output:

get() method

Example #4 – size() method

The size method is used to get a total number of key-value pairs in the map.

Code:

<!DOCTYPE html>
<html>
<head>
<title>
Map Object in JavaScript
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 200px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>
</head>
<body>
<div class = "results">
<h2> Map Object in JavaScript </h2>
<span> Open Console to see map </span>
<div class = "resultText">
<p id = "result1"> </p>
<p id = "result2"> </p>
</div>
</div>
<script type = "text/javascript">
let map1 = new Map();
map1.set( 1, 'ONE' );
map1.set( 2, 'TWO' );
let map2 = new Map([ [ 10, 'TEN' ], [ 20, 'TWENTY' ], [30, 'THIRTY' ], [ 40, 'FORTY' ] ]);
console.log(map1);
console.log(map2);
document.getElementById("result1").innerHTML = " map1.size : " + map1.size;
document.getElementById("result2").innerHTML = " map2.size : " + map2.size;
</script>
</body>
</html>

Output:

size() method

Example #5 – clear() method

The clear() method is used to clear map elements or delete all the elements in the map.

Code:

<!DOCTYPE html>
<html>
<head>
<title>
Map Object in JavaScript
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 200px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>
</head>
<body>
<div class = "results">
<h2> Map Object in JavaScript </h2>
<span> Open Console to see map </span>
<div class = "resultText">
<p id = "result1"> </p>
<p id = "result2"> </p>
</div>
</div>
<script type = "text/javascript">
let map = new Map();
map.set( 1, 'ONE' );
map.set( 2, 'TWO' );
console.log(map);
document.getElementById("result1").innerHTML = " original size : " + map.size;
map.clear();
document.getElementById("result2").innerHTML = "after map.clear() size : " + map.size;
</script>
</body>
</html>

Output:

clear() method

Conclusion

The map object in JavaScript allows storing the elements as key-value pairs. It allows using objects as well as primitives to use as key or value both. In this article, we have seen methods used for basic operations on a map object.

Recommended Articles

This is a guide to JavaScript Map Object. Here we discuss the introduction with respective examples. You may also have a look at the following articles to learn more –

  1. JavaScript toLowercase()
  2. JavaScript String replace
  3. JavaScript Refresh Page
  4. Object in JavaScript
0 Shares
Share
Tweet
Share
quiz