ES6 | Collection

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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    // 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> 

    chevron_right

    
    

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

Examples of map:

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

    // 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>                    

    chevron_right

    
    

  • Output:
    size of the map is : 3
  • Program 2: Implement map.set(), map.get(), map.delete(), map.clear(), map.has() method
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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 is 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>

    chevron_right

    
    

  • Output:
    Website is - Geeksforgeeks
    Is it contains JavaScript ? - true
    Is it contains C++ ? - true
    Is it contains python ? - true
    Delete C++
    Is is contains C++ now ? - false
    Delete whole map
    Is it has any value now? - false
  • Program 3: Implement map.forEach() method
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>

    chevron_right

    
    

  • Output:
    key: 1 value: a
    key: 2 value: b
    key: 3 value: c
  • Program 4: Implement map.keys() method
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>

    chevron_right

    
    

  • Output:
    value : a
    value : b
    value : c
    value : undefined
  • Program: 5 Implement map.entries() method
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>    

    chevron_right

    
    

  • Output:
    value : a,1
    value : b,2
    value : c,3
    value : undefined
  • Program 6: Implement map.values() method.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>    

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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));//undfined
    </script>

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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 is 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>                    

    chevron_right

    
    

  • Output:
    Is it contains JavaScript ? - true
    Is it contains C++ ? - true
    Is it contains python ? - true
    Delete C++
    Is is 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>    

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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));//undfined
    </script>    

    chevron_right

    
    

  • Output:
    true
    false


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.