Object 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

Object Maps

  • A Map stores key-value pairs, where the keys can be of any datatype.
  • A Map remembers the original insertion order of the keys.
  • A Map consists of a property that represents the size of the map.

Map Methods

Method

Description

new Map()

Creates a new Map object

set()

Sets the value for a key in a Map

get()

Gets the value for a key in a Map

clear()

Removes all the elements from a Map

delete()

Removes a Map element specified by a key

has()

Returns true if a key exists in a Map

forEach()

Invokes a callback for each key/value pair in a Map

entries()

Returns an iterator object with the [key, value] pairs in a Map

keys()

Returns an iterator object with the keys in a Map

values()

Returns an iterator object of the values in a Map

Property

Description

size

Returns the number of Map elements

How to Create a Map

You can create a JavaScript Map by:

  • Passing an Array to a new Map()
  • Create a Map and use Map.set()

new Map()

Create 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:

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

Map.get()

The get() method gets 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