Learn JavaScript Maps for Apex Developers

ES6 Map in Javascript LWC 

Same as in apex, Javascript map also holds key-value pairs, where the keys can be any datatype and unique. 

Create a Map:

    Apex:

Map<String, Integer> fruits = new Map<String, Integer>();

    JavaScript: 

let fruits = new Map();

Learn more about apex map methods:

Add elements to Map:

Apex:

Map<String, Integer> fruits = new Map<String, Integer>();
fruits.put('Apple', 100);

JavaScript: 

To add elements to the js map, we have to use the set() method. It will allow key and value. 

let fruits = new Map();

fruits.set('Apple', 100);

Check element in Map:

Apex: In apex we use cointainsKey() method. 

Map<String, Integer> fruits = new Map<String, Integer>();
fruits.put('Apple', 100);
fruits.containsKey('Apple'); // returns TRUE

JavaScript: In js, we use has() method to check the map contains key value. 

let fruits = new Map();

fruits.set('Apple', 100);

fruits.has('Apple'); // returns TRUE

Get value from Map using key:

Apex: In apex, we use get() method. 

Map<String, Integer> fruits = new Map<String, Integer>();
fruits.put('Apple', 100);
fruits.get('Apple'); // returns 100

JavaScript: in js also use same method get(). 

let fruits = new Map();

fruits.set('Apple', 100);

fruits.get('Apple'); // returns 100

Remove element from Map:

Apex: in apex, we use remove() method.

Map<String, Integer> fruits = new Map<String, Integer>();

fruits.put('Apple', 100);

fruits.put('Banana', 200);

fruits.remove('Apple');  // delete apple

JavaScript: in js, we use delete() method. 

let fruits = new Map();

fruits.set('Apple', 100);

fruits.set('Banana', 200);

fruits.delete('Apple');  // delete apple

Delete all the elements from Map:

Apex: in apex, we use clear() method.

Map<String, Integer> fruits = new Map<String, Integer>();

fruits.put('Apple', 100);

fruits.put('Banana', 200);

fruits.clear();  // delete all elements

JavaScript:  in js also we have a clear() method.

let fruits = new Map();

fruits.set('Apple', 100);

fruits.set('Banana', 200);

fruits.clear();  // delete all elements

Check size of Map:

Apex: we use size() method in apex.

Map<String, Integer> fruits = new Map<String, Integer>();

fruits.put('Apple', 100);

fruits.put('Banana', 200);

fruits.size();  // returns 2 elements

JavaScript: we use size property in js.

let fruits = new Map();

fruits.set('Apple', 100);

fruits.set('Banana', 200);

fruits.size;  // returns 2 elements

get all the Keys in a Map:

Apex: we use keySet() method to get all the keys in a map.

Map<String, Integer> fruits = new Map<String, Integer>();

fruits.put('Apple', 100);

fruits.put('Banana', 200);

fruits.keySet();  // returns set of keys {Apple, Banana}

JavaScript: we use keys() method to get all the keys in a map.

let fruits = new Map();

fruits.set('Apple', 100);

fruits.set('Banana', 200);

fruits.keys();  // returns iterator object of keys {Apple, Banana}

// loop through all the keys
for(let fruit of fruits.keys()){
console.log(fruit);
} 

get all the Values in a Map:

Apex: we use values() method to get all the keys in a map.

Map<String, Integer> fruits = new Map<String, Integer>();
fruits.put('Apple', 100);
fruits.put('Banana', 200);
fruits.values();  // returns list of values (Apple, Banana)

JavaScript: we use values() method to get all the keys in a map.

let fruits = new Map();

fruits.set('Apple', 100);

fruits.set('Banana', 200);

fruits.values();  // returns iterator object of values {Apple, Banana}

Loop through Item in javascript Map:

entries method: The entries() method returns an iterator object with the [key, values] of an array in a Map, using an index of 0 and 1 to access keys and values inside the map.

let fruits = new Map();

fruits.set('Apple', 100);

fruits.set('Banana', 200);

// loop through all the entries

for(let fruit of fruits.entries()){

console.log(fruit[0]); // returns apple, banana

console.log(fruit[1]); // returns 100, 200

}

forEach method: The forEach() method invokes a callback for each element in a Map:

let fruits = new Map();

fruits.set('Apple', 100);

fruits.set('Banana', 200);

// loop through all the entries

fruits.forEach ((value, key) => {

  console.log(key); // Apple, Banana

  console.log(value); // 100, 200

})