Set and Map
PW SKILLS
Topics Covered
● Introduction to Set in JavaScript
● Set Properties with examples
● Set methods with examples
● Create set from an array and array from Set
● Introduction to Map in JavaScript
● Map Properties with examples
● Map methods with examples
● Create a map from the object and object from Map.
PW SKILLS
Introduction to Set in JavaScript
In Javascript, a Set is an unordered collection of unique values. It is a collection of objects that
cannot contain duplicate values. The set object lets us store unique values of any type, whether
primitive values or object references.
It can be created using the new Set() constructor and we can use add method to add elements.
Here is an example of how to create and add new value
// new set() constructor.
const setDemo = new Set();
// add method.
setDemo.add(1);
setDemo.add(2);
console.log(setDemo);
// output - Set(2) { 1, 2 }
PW SKILLS
Some of the uses of sets in javascript include -
● Unique values
● Fast lookups
● Intersection and unions
● Deduplicating Data
● Set operations
PW SKILLS
Set Properties with examples
Set Property in JavaScript includes size, which returns the number of unique elements in the Set
Example -
// syntax - set.size
const setDemo = new Set();
console.log(setDemo.size); // output - 0
setDemo.add(3);
setDemo.add(4);
setDemo.add(5);
console.log(setDemo.size); // output - 3
setDemo.add(5); // duplicate object will be added only once
PW SKILLS
Set methods with examples
Some of the Essential or commonly used Set methods are as follows -
● add() - Add the specified value to the set. ● delete() - Removes the specified value from the set
// set add method const setDemo = new Set();
const setDemo = new Set(); setDemo.add(4);
setDemo.add(4); setDemo.add(5);
setDemo.add(5); console.log(setDemo); // Set(2) { 4, 5 }
setDemo.add({ user: "[email protected]" }); setDemo.delete(5); // remove value 5 element
console.log(setDemo); console.log(setDemo); // Set(1) { 4 }
// output - Set(3) { 4, 5, { user: '[email protected]' } }
● clear() - Removes all the elements from the set. ● entries() - Returns an iterable of all the key/value pairs in the set that
Example contains an array of [value, value] for each element in the set object.
// set clear method In insertion order.
const setDemo = new Set(); // // entries
setDemo.add(4); const data = new Set();
setDemo.add(5); data.add("mangesh");
console.log(setDemo); // Set(2) { 4, 5 } data.add({like: "movies",});
setDemo.clear(); console.log(data);
console.log(setDemo); // Set(0) {} console.log(data.entries());
/***output -[Set Entries] {
[ 'mangesh', 'mangesh' ],
[ { like: 'movies' }, { like: 'movies' } ]}*/
PW SKILLS
● forEach() - it executes a provided function for each ● keys() - Returns an iterable of all the keys in the
value in the set object, in insertion order. set. The keys() method is exactly the same as
// // forEach method in Set the values() method
const data = new Set(); Example -
data.add(4); //// keys method
data.add(5); const data = new Set([1, 4, 2, 8, 6]);
data.add(6); console.log(data); // Set(5) { 1, 4, 2, 8, 6 }
console.log(data); // Set(3) { 4, 5, 6 }
function multiply(value1, value2) { const key = data.keys();
console.log(`data[${value1}] : ${value2 * 2}`);} console.log(key); // [Set Iterator] { 1, 4, 2, 8, 6 }
data.forEach(multiply);
/** * output ---
Set(3) { 4, 5, 6 }
data[4] : 8
data[5] : 10
data[6] : 12*/
● has() - Returns true if the set contains the ● values() - Returns an iterable of all the values in the set.
specified value, false otherwise. Example -
Example - //// keys method
// // has method const data = new Set([1, 4, 2, 8, 6]);
const data = new Set([1, 4, 2, 8, 6]); console.log(data); // Set(5) { 1, 4, 2, 8, 6 }
console.log(data); // Set(5) { 1, 4, 2, 8, 6 } const value = data.values();
console.log(value); // [Set Iterator] { 1, 4, 2, 8, 6 }
console.log(data.has(2)); // true
console.log(data.has(8)); // true
console.log(data.has(5)); // false
PW SKILLS
Create set from an array and array from Set
Creating set from an array - Creating an Array from set -
Example Example
// create set from an array // create array from set
const arr = ["apple", "Mango", "Banana", "orange"]; const setData = new Set();
const setDemo = new Set(arr); setData.add(1);
console.log(setDemo); setData.add(2);
//output - Set(4) { 'apple', 'Mango', 'Banana', 'orange' } setData.add(3);
console.log(setData); //output - Set(3){ 1, 2, 3 }
// remove duplicate element from an array
const numb = [1, 3, 4, 5, 2, 6, 3, 3]; const arrSet = Array.from(setData);
const uniqNum = new Set(numb); console.log(arrSet); // output [ 1, 2, 3 ]
console.log(uniqNum);
// output - Set(6) { 1, 3, 4, 5, 2, 6 }
PW SKILLS
Introduction to Map in JavaScript
A Map in JavaScript is a collection of key-value pairs. It is similar to an object, but it has some key differences
and it remembers the original insertion order of the keys. Any value non-primitive or primitive value can be used
as either a key or a value.
It can be created using the new Map() constructor and we can use the set method to add elements.
Here is an example of how to create and add new value
/***
****** map in javascript ******
*/
const mapDemo = new Map();
console.log(mapDemo); // Map(0) {}
mapDemo.set("key1", "value1");
console.log(mapDemo); // Map(1) { 'key1' => 'value1' }
PW SKILLS
Some of the importance of using Map in
JavaScript are as follows
● Storing data that is frequently accessed
● Implementing a hash table
● Creating a dictionary
● Creating a lookup table
PW SKILLS
Map Properties with example
Map Property in JavaScript includes size, which returns the number of elements in the Map
Example -
// Math size
const days = new Map();
days.set("mon", "monday");
days.set("tue", "Tuesday");
days.set("wed", "Wednesday");
console.log(days);
/**
output - Map(3) { 'mon' => 'monday', 'tue' => 'Tuesday', 'wed' => 'Wednesday' }
*/
console.log(days.size); // 3
PW SKILLS
Map methods with examples
In JavaScript, Map methods can be used to perform a variety of operations on Map, such as adding,
removing elements, iterating through the Map, checking if a value is in the Map and much more.
Some of the Essential or commonly used Map methods are as follows -
● set - adds a new key-value pair to the ● clear - removes all key-value pairs from
Map the Map.
Example - Example -
// // add keys and values // // clear method
const days = new Map(); const days = new Map();
days.set("mon", "monday"); days.set("mon", "monday");
console.log(days); days.set("tue", "tuesday");
// output - Map(1) { 'mon' => 'monday' } days.set("wed", "wednesday");
console.log(days); // Map(3) { 'mon' =>
'monday', 'tue' // => 'tuesday', 'wed' =>
'wednesday' }
days.clear();
console.log(days); // Map(0) {}
PW SKILLS
● delete - removes a key-value pair from the Map. ● forEach - executes a callback function for each
Example - key-value pair in the Map
// // delete method Example
const days = new Map(); // // forEach -
days.set("mon", "monday"); const days = new Map();
days.set("tue", "tuesday"); days.set("mon", "monday");
days.set("wed", "wednesday"); days.set("tue", "tuesday");
console.log(days); // Map(3) { 'mon' => 'monday', 'tue' => 'tuesday', days.set("wed", "wednesday");
'wed' => 'wednesday' } days.forEach(function (value, key) {
days.delete("wed"); console.log(`${key} = ${value}`);});
console.log(days); Map(2) { 'mon' => 'monday', 'tue' => // 'tuesday' /**output -
} mon = monday
tue = tuesday
wed = wednesday*/
● entries - returns an iterator object that iterates over the
key-value pairs in the Map. ● get - returns the value associated with a key.
Example - Example -
// entries method // // get method
const days = new Map(); const days = new Map();
days.set("mon", "monday"); days.set("mon", "monday");
days.set("tue", "tuesday"); days.set("tue", "tuesday");
days.set("wed", "wednesday"); days.set("wed", "wednesday");
console.log(days.entries());
/** console.log(days.get("mon")); // output - monday
output -
[Map Entries] {
[ 'mon', 'monday' ],
[ 'tue', 'tuesday' ],
[ 'wed', 'wednesday' ]
}
*/
PW SKILLS
● values - returns an iterator object that iterates
● has - returns a boolean indicating whether an element with the over the values in the Map.
specified key exist or not. Example
Example // values
// has method const days = new Map();
const days = new Map(); days.set("mon", "monday");
days.set("mon", "monday"); days.set("tue", "tuesday");
days.set("tue", "tuesday"); days.set("wed", "wednesday");
days.set("wed", "wednesday");
console.log(days.has("tue")); // output - true console.log(days.values());
// output - [Map Iterator] { 'monday', 'tuesday',
'wednesday' }
● keys - returns an iterator object that iterates over the keys in
the Map.
Example ‘
// keys method
const days = new Map();
days.set("mon", "monday");
days.set("tue", "tuesday");
days.set("wed", "wednesday");
console.log(days.keys());
// output - [Map Iterator] { 'mon', 'tue', 'wed' }
PW SKILLS
Create a map from the object and an object
from Map.
● Creating map from an object- ● Creating an object from map -
Example Example
// map constructor -- //// convert map to object using Object.fromEntries
const user = { //method
name: "mangesh", const map = new Map([
email: "[email protected]",}; ["fruit", "apple"],
const userTemp = Object.entries(user); ["vegetables", "cabbage"],
const userFinal = new Map(userTemp); ]);
console.log(userFinal); console.log(map); // output - Map(2) { 'fruit' => 'apple',
//output - Map(2) { 'name' => 'mangesh', 'email' // => 'vegetables' => 'cabbage' }
//'[email protected]' } const obj = Object.fromEntries(map);
// // looping of object and adding to map console.log(obj);
const newData = new Map(); // output - { fruit: 'apple', vegetables: 'cabbage' }
console.log(newData); // looping
for (let key in user) { const obj1 = {};
if (user.hasOwnProperty(key)) { map.forEach((value, key) => {
newData.set(key, user[key]);}} obj1[key] = value;
console.log(newData); });
console.log(obj1);
// output - { fruit: "apple", vegetables: "cabbage"};
PW SKILLS
THANK YOU
PW SKILLS
