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 ", "Geeksforneveropen"); 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 - Geeksforneveropen 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
