JS Maps

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

JavaScript Maps

How to Create a Map

Creating a JavaScript Map by:

  • Passing an Array to new Map()
  • Creating a Map and using Map.set()

The new Map() Method

Creating a Map by passing an Array to the new Map() constructor:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Map Objects</h2>

<p>Creating a Map from an Array:</p>

<p id=”demo”></p>

<script>

// Create a Map

const fruits = new Map([

  [“apples”, 500],

  [“bananas”, 300],

  [“oranges”, 200]

]);

document.getElementById(“demo”).innerHTML = fruits.get(“apples”);

</script>

</body>

</html>

Output

JavaScript Map Objects

Creating a Map from an Array:

The set() Method

Adding elements to a Map with the set() method:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Map Objects</h2>

<p>Using Map.set():</p>

<p id=”demo”></p>

<script>

// Create a Map

const fruits = new Map();

// Set Map Values

fruits.set(“apples”, 500);

fruits.set(“bananas”, 300);

fruits.set(“oranges”, 200);

document.getElementById(“demo”).innerHTML = fruits.get(“apples”);

</script>

</body>

</html>

Output

JavaScript Map Objects

Using Map.set():

500

The set() method can also be used to change existing Map values:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Map Objects</h2>

<p>Using Map.set():</p>

<p id=”demo”></p>

<script>

// Create a Map

const fruits = new Map([

  [“apples”, 500],

  [“bananas”, 300],

  [“oranges”, 200]

]);

fruits.set(“apples”, 200);

document.getElementById(“demo”).innerHTML = fruits.get(“apples”);

</script>

</body>

</html>

Output

JavaScript Map Objects

Using Map.set():

200

The get() Method

The get() method is used to retrieve the value of a key in a Map:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Map Objects</h2>

<p>Using Map.get():</p>

<p id=”demo”></p>

<script>

// Create a Map

const fruits = new Map([

  [“apples”, 500],

  [“bananas”, 300],

  [“oranges”, 200]

]);

document.getElementById(“demo”).innerHTML = fruits.get(“apples”);

</script>

</body>

</html>

Output

JavaScript Map Objects

Using Map.get():

500

The size Property

The size property is used to return the number of elements in a Map:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Maps</h2>

<p>Using Map.size:</p>

<p id=”demo”></p>

<script>

// Create a Map

const fruits = new Map([

  [“apples”, 500],

  [“bananas”, 300],

  [“oranges”, 200]

]);

document.getElementById(“demo”).innerHTML = fruits.size;

</script>

</body>

</html>

Output

JavaScript Maps

Using Map.size:

3

The delete() Method

The delete() method is used to remove a Map element:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Maps</h2>

<p>Deleting Map elements:</p>

<p id=”demo”></p>

<script>

// Create a Map

const fruits = new Map([

  [“apples”, 500],

  [“bananas”, 300],

  [“oranges”, 200]

]);

// Delete an Element

fruits.delete(“apples”);

document.getElementById(“demo”).innerHTML = fruits.size;

</script>

</body>

</html>

Output

JavaScript Maps

Deleting Map elements:

2

The has() Method

The has() method is used to return true if a key exists in a Map:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Maps</h2>

<p>Using Map.has():</p>

<p id=”demo”></p>

<script>

// Create a Map

const fruits = new Map([

  [“apples”, 500],

  [“bananas”, 300],

  [“oranges”, 200]

]);

document.getElementById(“demo”).innerHTML = fruits.has(“apples”);

</script>

</body>

</html>

Output

JavaScript Maps

Using Map.has():

true

The forEach() Method

The forEach() method is used to call a function for each key/value pair in a Map:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Map Objects</h2>

<p>Using Map.forEach():</p>

<p id=”demo”></p>

<script>

// Create a Map

const fruits = new Map([

  [“apples”, 500],

  [“bananas”, 300],

  [“oranges”, 200]

]);

let text = “”;

fruits.forEach (function(value, key) {

  text += key + ‘ = ‘ + value + “<br>”

})

document.getElementById(“demo”).innerHTML = text;

</script>

</body>

</html>

Output

JavaScript Map Objects

Using Map.forEach():

apples = 500
bananas = 300
oranges = 200

The entries() Method

The entries() method is used to return an iterator object having the [key, values] in a Map:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Map Objects</h2>

<p>Using Map.entries():</p>

<p id=”demo”></p>

<script>

// Create a Map

const fruits = new Map([

  [“apples”, 500],

  [“bananas”, 300],

  [“oranges”, 200]

]);

let text = “”;

for (const x of fruits.entries()) {

  text += x + “<br>”;

}

document.getElementById(“demo”).innerHTML = text;

</script>

</body>

</html>

Output

JavaScript Map Objects

Using Map.entries():

apples,500
bananas,300
Oranges,200