Open In App

ES6 Collection

Improve
Improve
Like Article
Like
Save
Share
Report

ES6 is a series of new features added to the JavaScript. In ES6 version includes new collections of data types, so there’s no longer a need to use objects and it is easier to implement things in a simple way. 
In ES6 version two new things are introduced in JavaScript. 
 

  • Map
  • Sets

Maps: Maps are collections of keys and values of any type, in simple word Map is a collection of key-value pairs. It works like an object in JavaScript. It returns a new or empty map.
Syntax: 
 

var map = new Map();

 

Methods Description
map.size() It determines the number of key or values in the map.
map.set() It sets the value for the key .It takes two parameters, key and the value for the key.
map.has() It checks whether a key is present in the map or not then its returns true.
map.get() It takes a value associated with a key .If the value is not available then its undefined.
map.keys() It returns an iterator for all the keys in the map.
map.entries() It returns a new iterator array of which contains key-value pair for each element by insertion order.
map.values() It returns an iterator for each of the values in the map.
map.delete() It is used to delete an entry.
map.clear() It clears all key-value pairs from the map.
map.forEach() It executes the callback function once. This function executed for each element in the map.

for…of Loop: The for..of is a loop which gives a very clean and concise syntax to iterate over all kinds of iterables and enumerables. for…of iterates over iterable objects. This loop iterates on Array, String,array-like objects, TypedArray, Map and any user-defined iterable objects.
 

  • Example: 
     

javascript




// Simple JavaScript program to illustrate for...of loop
<script>
var arr = ['a', 3 , 'b', 2 , 'c', 1 ,'d'];
document.write("array elements are : ");
for (let ele of arr) {
  document.write(ele+' ');
}
</script> 


  • Output: 
     
array elements are : a 3 b 2 c 1 d

Examples of map: 
 

  • Program 1: Implement map.size(), map.set() method 
     

javascript




// Simple JavaScript program to implement Map.size
<script>
var m = new Map()
m.set('a', 1);
m.set('b', 2);
m.set('c', 3);
document.write(m.size);
</script>                    


  • Output: 
     
size of the map is : 3

 

  • Program 2: Implement map.set(), map.get(), map.delete(), map.clear(), map.has() method 
     

javascript




<script>
/ Simple JavaScript program with Map
var map = new Map(); 
map.set("website ", "Geeksforgeeks"); 
document.write("Website is - " +map.get("website "));
// Use "get()" function
  
map.set("Subject1", "JavaScript"); //use "set()" function
map.set("Subject2", "C++");
map.set("Subject3", "python");
document.write("<br>Is it contains JavaScript ? - "+map.has("Subject1"));
document.write("<br>Is it contains C++ ? - "+map.has("Subject2"));
document.write("<br>Is it contains python ? - "+map.has("Subject3"));
// Use "has()" function
  
map.delete("subject2");
document.write("<br>Delete C++");
// Use "delete()" function
document.write("<br>Is it contains C++ now ? - "+map.has("C++")); //false
  
map.clear();//use "clear()" function
document.write("<br>Delete whole map");
document.write("<br> Is it has any value now? - "+map.has("Subject1"));
  
  
</script>


  • Output: 
     
Website is - Geeksforgeeks
Is it contains JavaScript ? - true
Is it contains C++ ? - true
Is it contains python ? - true
Delete C++
Is it contains C++ now ? - false
Delete whole map
Is it has any value now? - false

 

  • Program 3: Implement map.forEach() method 
     

javascript




<script>
// Simple JavaScript program to implement <b>Map.forEach()</b>
  
var m = new Map()
m.set('a', 1);
m.set('b', 2);
m.set('c', 3);
m.forEach((k, v)=>document.write(`key: ${k} value: ${v} <br>`));
</script>


  • Output: 
     
key: 1 value: a
key: 2 value: b
key: 3 value: c
  •  

 

  • Program 4: Implement map.keys() method 
     

javascript




<script>
// Simple JavaScript program to implement Map.keys()
  
var m = new Map()
m.set('a', 1);
m.set('b', 2);
m.set('c', 3);
var i = m.keys();
document.write("value : "+ i.next().value+"<br>");//"a"
document.write("value : "+ i.next().value+"<br>");//"b"
document.write("value : "+ i.next().value+"<br>");//"c"
document.write("value : "+ i.next().value+"<br>");//undefined
// Because the map contains only 4 elements
</script>


  • Output: 
     
value : a
value : b
value : c
value : undefined

 

  • Program: 5 Implement map.entries() method 
     

javascript




<script>
// Simple JavaScript program to implement Map.entries()
  
var m = new Map()
m.set('a', 1);
m.set('b', 2);
m.set('c', 3);
var i = m.entries();
document.write("value : "+ i.next().value+"<br>");//"a,1"
document.write("value : "+ i.next().value+"<br>");//"b,2"
document.write("value : "+ i.next().value+"<br>");//"c,3"
document.write("value : "+ i.next().value+"<br>");//undefined
// Because the map contains only 4 elements
</script>    


  • Output: 
     
value : a,1
value : b,2
value : c,3
value : undefined

 

  • Program 6: Implement map.values() method. 
     

javascript




<script>
// Simple JavaScript program to implement Map.values()
  
var m = new Map()
m.set('a', 1);
m.set('b', 2);
m.set('c', 3);
var i = m.values();
document.write("value : "+ i.next().value+"<br>");//"1"
document.write("value : "+ i.next().value+"<br>");//"2"
document.write("value : "+ i.next().value+"<br>");//"3"
document.write("value : "+ i.next().value+"<br>");//undefined
// Because the map contains only 4 elements
</script>    


  • Output: 
     
value : 1
value : 2
value : 3
value : undefined

Weak Maps: Weak maps are similar to normal Maps. Weak maps are used to store weak object references as key, that the keys must be objects. The weak map cannot be cleared and the values of the keys can be garbage value.
 

  • Example: 
     

javascript




<script>
  
// Simple JavaScript program to implement WeakMap()
var gfg = new WeakMap(); 
var gg = {};
  
//"gg" is a object
// Works as key
gfg.set(gg,"c++");
document.write(gfg.has(gg));//true
document.write("<br>"+gfg.get(gg));//c++
gg=null;//"gg" becomes null
document.write("<br>"+gfg.get(gg));//undefined
</script>


  • Output: 
     
true
c++
undefined

Set: It is a data structure introduced in ES6 version. A Set is a collection of values like an array but it don’t contain any duplicates. It is mutable so that our program can add and remove values as it goes. It returns set object.
 

Methods Description
set.size() It returns the total number of values present in the set.
set.add() It adds a value to the set if the value was not already in the set.
set.clear() It removes all values from the set
set.delete(v) It removes one value from the set, the value is passed as argument.
set.has(v) If the passed value “v” is in the set, then this method returns true.
set.entries() It returns an iterator object which contains an array having the entries of the set.
set.values() and set.keys() They both are returns all the values from the Set, similar to map.values().
set.forEach() method It same as map.forEach() ,it executes the callback function once. This function executed for each element in the set.

 

  • Syntax: 
     
var s = new Set("val1","val2","val3")
  • Example: 
     

javascript




<script>
// Simple JavaScript program with Set
  
var st = new Set(); 
  
st.add("JavaScript").add("C++").add("python"); //use "add()" function
  
document.write("<br>Is it contains JavaScript ? - "+st.has("JavaScript"));
document.write("<br>Is it contains C++ ? - "+st.has("C++"));
document.write("<br>Is it contains python ? - "+st.has("python"));
// Use "has()" function
  
st.delete("C++");
document.write("<br>Delete C++");
  
// Use "delete()" function
document.write("<br>Is it contains C++ now ? - "+st.has("C++")); //false
  
st.clear();//use "clear()" function
document.write("<br>Delete whole set");
document.write("<br> Is it has any value now? - "+st.has("JavaScript"));
  
</script>                    


  • Output: 
     
Is it contains JavaScript ? - true
Is it contains C++ ? - true
Is it contains python ? - true
Delete C++
Is it contains C++ now ? - false
Delete whole set
Is it has any value now? - false

Iterator: Iterator in Set allows to access a collection of objects one at a time. It works with the next() method, when next() is invoked then the value of the set is printed one at a time and a boolean value “true” is returned which belongs to done property, after successfully reading the set’s value. This thing is happened in the console window. In the case of output, only the value is showing if we use the keyword “value” followed by next(), like iterator.next().value
 

  • Example: 
     

javascript




<script>
// Simple JavaScript program with Set iterator
var  s = new Set(['a','b','c']); //set elements 
var itr = s.values(); 
document.write(itr.next().value+"<br>");
document.write(itr.next().value+"<br>");
document.write(itr.next().value+"<br>");
document.write(itr.next().value);//undefined
</script>    


  • Output: 
     
a
b
c
undefined

Weak Set: It is similar to weak maps, it is also used to store the collection of objects. It similar to normal set, so it cannot store duplicate. It may contain garbage value. The only difference between the set and the weak set is that a weak set contains objects.
 

  • Example: 
     

javascript




<script>
var gfg = new WeakSet 
var gg1 = {};//"gg1" is a object
var gg2 = {};//"gg2" is a object
   
gfg.add(gg1);
gfg.add(gg2);
document.write(gfg.has(gg1));//true
gfg.delete(gg1);//delete "gg1"
document.write("<br>"+gfg.has(gg1));//undefined
</script>    


  • Output: 
     
true
false

 



Last Updated : 03 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads