JavaScript Fundamentals: Learning the Language of the Web

Map in JavaScript

Board Infinity
Board Infinity
Map in JavaScript

    Basics of Javascript

    Java Vs Javascript: What's The Difference?

    JavaScript console.log() Method

    How to run a .js file in Terminal?

    String to Array conversion in JavaScript

    JavaScript Split()

    How to reverse a string in Javascript?

    Array Join() in JavaScript

    A Quick Guide to VAR, LET and CONST

    Var, Let and Const: Description and Differences

    Array iteration in JavaScript

    AddEventListener() in Javascript

    Understanding Anonymous Function in Javascript

    How to Quickly Check If an Array is empty or not in Javascript?

    JavaScript Object.assign()

    Object.keys() in JavaScript

    Array find() method in JavaScript

    What are Sets in Javascript?

    Map in JavaScript

    Introduction to ES6

    Top 10 Features of ES6

Introduction

Map is a collection of key data items, Same as Object. A map is a data structure that stores key-value pairs and allows you to look up the value associated with a given key. Each key belongs to a data value, and the values are stored in an array. You can access a value by using its associated key as a string, or by using array syntax to index it.

Important:

The keys are not necessarily unique, so you can have multiple maps with the same key.

//define variables
 var map = new Map();

 
//create an empty map
map.set('a', 1);

 
//add something on top of the map
map.put('b', 2);

 
//add something underneath the first thing we put in map
 map.put('c', 3);


//remove something from below it, or remove everything under it (removes all items below)
 map.delete('b');

returns: {a: 1, b: 2}

//displays the contents of all maps containing 'b' in them
console.log(map); 

returns: [{a: 1}, {c: 3}, {d: 4}, {e: 5}]

Map is an associative array, which means that it can be indexed by either the key or the value. The values in a map can be of any type, including other maps or sets. Unlike arrays, there is no limit on how many items can be stored in a map, as long as you have enough memory available to accommodate all of them. Maps also allow more than one item with the same key in them - this is called "chaining".

Syntax:

new Map([N])

Parameter:

N -- Iterable object whose values are stored as key, value pair, If the parameter is not specified then a new map is created is Empty.

Properties:

map.set(key, value) - set the value for the key in the map object.

map.get(key) - returns the value associated with the key, undefined if key doesn’t exist in map.

map.has(key) - returns true if value associated with the key exists, false otherwise.

map.delete(key) - removes the value by the key.

map.clear() - removes all elements from the map.

map.size - returns the count of the elements .

map.values() - returns a new iterator object that contain values for each element in insertion order.

map.keys() - returns a new iterator that contain the keys for element in insertion order.

Example 1

const map1 = new Map();
map1.set('a', 10);
map1.set('b', 20);
map1.set('c', 30);
console.log(map1.get('a'));
map1.set('a', 80);
console.log(map1.get('a'));
console.log(map1.size);
map1.delete('b');
console.log(map1.size);

Output:

10
80
3
2

write your code here: Coding Playground

Example 2: using map object

const keyString = 'hello bi';
const keyObj = {};
const keyFunc = function() {};

const myMap = new Map();




// setting the values
myMap.set(keyString, "value associated with 'hello bi'");
myMap.set(keyObj, 'value associated with keyObj');
myMap.set(keyFunc, 'value associated with keyFunc');

console.log(myMap.size);

// getting the values
console.log(myMap.get(keyString));
console.log(myMap.get(keyObj));
console.log(myMap.get(keyFunc));

console.log(myMap.get('hello bi'));
console.log(myMap.get({}));
console.log(myMap.get(function() {}));

Output:

3
value associated with 'hello bi'
value associated with keyObj
value associated with keyFunc
value associated with 'hello bi'
undefined
undefined

write your code here: Coding Playground

Conclusion

A map is an object with a set of key-value pairs. The keys are strings, and the values can be any type. Keys are unique, meaning that no two keys should have the same value within the map. The values can be any type, but they must match the corresponding key's type for example, if you have a string as your key and an integer as your value, you will need to convert the integer to a string before inserting it into the map.