Skip to main content

Javascript Object Maps

JavaScript Maps are a built-in data structure that allows you to store and retrieve key-value pairs. Maps are similar to JavaScript Objects, but with some key differences.

Here's an example:

// Creating a Map
const myMap = new Map();

// Adding key-value pairs to the Map
myMap.set("name", "John");
myMap.set("age", 30);
myMap.set("gender", "male");

// Retrieving values from the Map
console.log(myMap.get("name")); // Output: John
console.log(myMap.get("age")); // Output: 30
console.log(myMap.get("gender")); // Output: male

Map Methods

MethodDescription
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

The new Map() Method

The new Map() constructor in JavaScript is used to create a new Map object. The Map constructor can be called with or without the new keyword.

Here's the syntax for creating a new Map:

const myMap = new Map();

The new Map() constructor can also take an iterable object, such as an array or another Map, as an argument to initialize the Map with key-value pairs.

As an example:

const myMap = new Map([
["name", "John"],
["age", 30],
["gender", "male"],
]);

console.log(myMap.get("name")); // Output: John
console.log(myMap.get("age")); // Output: 30
console.log(myMap.get("gender")); // Output: male

In the example:

  • We pass an array of arrays as an argument to the Map constructor, where each nested array contains a key-value pair.
  • The Map is then initialized with these key-value pairs.

The Map.set() Method

The set() method is used to add or update a key-value pair in a Map in JavaScript. The syntax for using the set() method is as follows:

myMap.set(key, value);

Where myMap is the Map object on which the set() method is called, key is the key to be added or updated, and value is the value associated with the key.

Here's an example of using the set() method to add key-value pairs to a Map:

// Creating a Map
const myMap = new Map();

// Adding key-value pairs to the Map
myMap.set("name", "John");
myMap.set("age", 30);
myMap.set("gender", "male");

console.log(myMap);
// Output:
// Map {
// 'name' => 'John',
// 'age' => 30,
// 'gender' => 'male'
// }

In this example:

  • We create a Map called myMap and use the set() method to add three key-value pairs to the Map.
  • The keys are strings ("name", "age", "gender") and the values can be of any type (string, number, etc.).

If you use the set() method to set a value for a key that already exists in the Map, the new value will replace the old value associated with that key.

Here's an example:

// Creating a Map
const myMap = new Map();

// Adding key-value pairs to the Map
myMap.set("name", "John");
myMap.set("age", 30);

// Updating the value for an existing key
myMap.set("age", 31);

console.log(myMap);
// Output:
// Map {
// 'name' => 'John',
// 'age' => 31
// }

In this example

  • We first set the value "John" for the key "name", and then update the value for the key "age" from 30 to 31 using the set() method.

The Map.get() Method

The get() method is used to retrieve the value associated with a given key in a Map in JavaScript.

The syntax for using the get() method is as follows:

myMap.get(key);

Where myMap is the Map object from which to retrieve the value, and key is the key for which the value is to be retrieved.

Here's an example of using the get() method to retrieve values from a Map:

// Creating a Map
const myMap = new Map();

// Adding key-value pairs to the Map
myMap.set("name", "John");
myMap.set("age", 30);
myMap.set("gender", "male");

// Retrieving values from the Map
console.log(myMap.get("name")); // Output: John
console.log(myMap.get("age")); // Output: 30
console.log(myMap.get("gender")); // Output: male

In this example:

  • We create a Map called myMap and use the set() method to add three key-value pairs to the Map.
  • We then use the get() method to retrieve the values associated with the keys "name", "age", and "gender" respectivel.

If you use the get() method with a key that does not exist in the Map, it will return undefined. Here's an example:

// Creating a Map
const myMap = new Map();

// Adding key-value pairs to the Map
myMap.set("name", "John");
myMap.set("age", 30);

// Retrieving value for a non-existent key
console.log(myMap.get("gender")); // Output: undefined

The Map.size Method

The size property is used to get the number of key-value pairs in a Map object in JavaScript. It returns an integer that represents the size of the Map, which corresponds to the number of distinct keys in the Map.

The syntax for accessing the size property is as follows:

myMap.size;

Where myMap is the Map object for which you want to retrieve the size.

Here's an example of using the size property to get the size of a Map:

// Creating a Map
const myMap = new Map();

// Adding key-value pairs to the Map
myMap.set("name", "John");
myMap.set("age", 30);
myMap.set("gender", "male");

// Retrieving the size of the Map
console.log(myMap.size); // Output: 3

In this example

  • we create a Map called myMap and use the set() method to add three key-value pairs to the Map.
  • We then use the size property to retrieve the number of key-value pairs in the Map, which is 3.

The Map.delete() Method

The delete() method is used to remove a key-value pair from a Map object in JavaScript.

The syntax for using the delete() method is as follows:

myMap.delete(key);

Where myMap is the Map object from which to delete the key-value pair, and key is the key of the key-value pair to be deleted.

The delete() method returns a boolean value indicating whether the key-value pair was successfully deleted or not. It returns true if the key-value pair was found and deleted, and false if the key was not found in the Map.

Here's an example of using the delete() method to remove a key-value pair from a Map:

// Creating a Map
const myMap = new Map();

// Adding key-value pairs to the Map
myMap.set("name", "John");
myMap.set("age", 30);
myMap.set("gender", "male");

// Deleting a key-value pair from the Map
const result = myMap.delete("age");
console.log(result); // Output: true, indicating that the key-value pair was successfully deleted

// Checking the size of the Map after deletion
console.log(myMap.size); // Output: 2, as one key-value pair was deleted

In this example

  • We create a Map called myMap and use the set() method to add three key-value pairs to the Map.
  • We then use the delete() method to remove the key-value pair with the key "age" from the Map.
  • The delete() method returns true indicating that the key-value pair was successfully deleted.
  • After the deletion, the size of the Map is reduced to 2, as one key-value pair was removed.

If you try to delete a key that does not exist in the Map using the delete() method, it will return false. Here's an example:

// Creating a Map
const myMap = new Map();

// Adding key-value pairs to the Map
myMap.set("name", "John");
myMap.set("age", 30);

// Deleting a non-existent key-value pair from the Map
const result = myMap.delete("gender");
console.log(result); // Output: false, as the key "gender" does not exist in the Map

In this example

  • We try to delete a key-value pair with the key "gender", which does not exist in the Map, so false is returned.

The Map.clear() Method

The clear() method is used to remove all key-value pairs from a Map object in JavaScript. The syntax for using the clear() method is as follows:

myMap.clear();

Where myMap is the Map object from which to remove all key-value pairs.

The clear() method does not return any value, and it removes all key-value pairs from the Map, making it empty. After the clear() method is called, the size of the Map becomes zero.

Here's an example of using the clear() method to remove all key-value pairs from a Map:

// Creating a Map
const myMap = new Map();

// Adding key-value pairs to the Map
myMap.set("name", "John");
myMap.set("age", 30);
myMap.set("gender", "male");

// Clearing all key-value pairs from the Map
myMap.clear();

// Checking the size of the Map after clearing
console.log(myMap.size); // Output: 0, as all key-value pairs were removed

In this example

  • We create a Map called myMap and use the set() method to add three key-value pairs to the Map.
  • We then use the clear() method to remove all key-value pairs from the Map, resulting in a Map with a size of 0.

The Map.has() Method

The has() method is used to check if a specific key exists in a Map object in JavaScript.

The syntax for using the has() method is as follows:

myMap.has(key);

Where myMap is the Map object to be checked, and key is the key to be checked for existence.

The has() method returns a boolean value indicating whether the specified key exists in the Map or not. It returns true if the key is found in the Map, and false if the key is not found.

Here's an example of using the has() method to check if a key exists in a Map:

// Creating a Map
const myMap = new Map();

// Adding key-value pairs to the Map
myMap.set("name", "John");
myMap.set("age", 30);

// Checking if a key exists in the Map
console.log(myMap.has("name")); // Output: true, as the key "name" exists in the Map
console.log(myMap.has("gender")); // Output: false, as the key "gender" does not exist in the Map

In this example

  • We create a Map called myMap and use the set() method to add two key-value pairs to the Map.
  • We then use the has() method to check if the keys "name" and "gender" exist in the Map.
  • The has() method returns true for the key "name" as it exists in the Map, and false for the key "gender" as it does not exist in the Map.