Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Learning about ES6 map object and its methods

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 717
    Comment on it

    Map object in ECMAScript 6 is an ordered list of key/value. Any value either objects or primitive values may be used as either a key or a value.A key 7 is identified as different from “7”. There are more methods mentioned below:

    1- clear()

    2- delete(key)

    3- entries()

    4- forEach()

    5- get()

    6-has()

    7-keys()

    8-set()

    9-values()


    We can use set and get methods respectively to store and retrieve data in a map.

    For Example: 
    
    var mapdemo = new Map();
    mapdemo.set("state", Maharashtra);
    mapdemo.set("city", Mumbai);
    mapdemo.set(document.getElementById(my-state), { flagged: false });
    mapdemo.set(document.getElementById(my-city), { flagged: false });
    
    // Retreving Data
    var state = mapdemo.get(state),
        city  = mapdemo.get(city),
        metadata_state = mapdemo.get(document.getElementById(my					 state));	
        metadata_city = mapdemo.get(document.getElementById(my-					city));

     

    In the above example, 4 key-value pairs are stored using the set method. The key: “state”, “city stores a data in the form of a string while the key: document.getElementById(“my-state”) and document.getElementById(“my-city”)are used to associate metadata with DOM elements. In case the key do not exist then a value “undefined” is returned on calling the method get().


    We can use method has() to determine if the key exists in the map or not and the method delete() to remove a key-value pair from the map also we can use “size” to determine the number of items in the map.

     

    For Example:
    var mapdemo = new Map();
    mapdemo.set("state", "Mahrashtra");
    mapdemo.set("city", "Mumbai");
    
    console.log(mapdemo .has("state"));   // Output is true
    console.log(mapdemo .get("state"));   // Output is Mahrashtra
    console.log(mapdemo .size);              // Output is 2 as we have two keys, state and city 						            // in this map
    
    mapdemo.delete("state");
    console.log(mapdemo.has("state"));   // Output is false
    console.log(mapdemo.get("state"));   // Output is undefined
    console.log(mapdemo.size);        	  //  Output is 1

     

    If we want to remove all key-value pairs in the map, then we use clear() method:

    For Example:
    var mapdemo = new Map();
    mapdemo.set("one", "Fruit");
    mapdemo.set(1, "chalk");
    
    mapdemo.size;       //output: 2
    mapdemo.has("one"); //output: true
    mapdemo.clear();
    
    mapdemo.size;       //output: 0
    mapdemo.has("one");  //output: false

     

    We can pass array of arrays to the constructor of Map if we want to add large data in map. An array with two items i.e. a key and it's value is stored internally that creates a map consisting of an array with arrays of two items. We can initialize map as below:

    var mapdemo = new Map([ [state, Maharasthra], [city, Mumbai]]);
    
    console.log(mapdemo.has(state"));   //output: true
    console.log(mapdemo.get(state));   //output: Maharasthra
    console.log(mapdemo.has(city));    //output: true
    console.log(mapdemo.get(city));    //output: Mumbai
    console.log(mapdemo.size);           //output: 2

    Working with all the data in map we use three generator methods from where we choose: keys and it iterates through the keys in map, if we choose: values then it iterates through the vlaues in map and if we choose items (by default items is the iterator for maps) then it iterates through the key-value pairs and returns a pair of key and its value. We can easily iterate through map using for-fo loop:

    For Example:
    
    var mapdemo = new Map([ ["state", "Uttarakhand"], ["city", "Dehradun"], ["zip", "248001"]]);
    
    for (let key of mapdemo.keys()) {
        console.log("Key: %s", key);
    }
    
    Output: 
    Key: state
    Key: city
    Key: zip
    
    
    var mapdemo = new Map([ ["state", "Uttarakhand"], ["city", "Dehradun"], ["zip", "248001"]]);
    
    for (let value of mapdemo.values()) {
        console.log("Value: %s", value);
    }  
    
    Output:
    Value: Uttarakhand
    Value: Dehradun
    Value: 248001
    
    
    var mapdemo = new Map([ ["state", "Uttarakhand"], ["city", "Dehradun"], ["zip", "248001"]]);
    
    for (let item of mapdemo) {
        console.log("Key: %s, Value: %s", item[0], item[1]);
    }
    Output:
    Key: state, Value: Uttarakhand
    Key: city, Value: Dehradun
    Key: zip, Value: 248001

    if we iterate through keys/values we will receive a single value each time. While iterating through the items, we receive an array with first item that represents the key and the second item that represents the value for the item.


    We can also iterate through items using forEach() method. Here we pass a function with three arguments: value,key and the map.

    For Example:
    var mapdemo = new Map([ ["state", "Uttarakhand"], ["city", "Dehradun"], ["zip", "248001"]]);
    mapdemo.forEach(function(value, key, mapdemo) {
        console.log("Key: %s, Value: %s", key, value);
    }); 
    Output:
    Key: state, Value: Uttarakhand
    Key: city, Value: Dehradun
    Key: zip, Value: 248001

    Note:

    Map has been implemented by Firefox and Chrome. In Chrome we enable ECMAScript 6 features manually by typing the url “chrome://flags” in the address bar of chrome and on pressing the enter key it directs us to a page wherein find “Experimental JavaScript Features” and then click on link Enable.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: