map

Estimated reading time: 6 minutes

Map is collection of data as key value pairs.

~ map methods ~ A JavaScript “Set” object can store only keys but “Map” can store key and value pairs.

  • size (properies)
  • clear
  • delete
  • entries
  • forEach
  • get
  • set
  • has
  • keys
  • values

Map is a collection of keyed data items, just like an Object. But the main difference is that Map allows keys of any type.

The main methods are:

  new Map() – creates the map.
  map.set(key, value) – stores the value by the key.
  map.get(key) – returns the value by the key, undefined if key doesn’t exist in map.
  map.has(key) – returns true if the key exists, false otherwise.
  map.delete(key) – removes the value by the key.
  map.clear() – clears the map
  map.size – returns the current element count.

when use map

  • Need to use a non-string value as a key
  • specific order

set

    let users = new Map()
    users.set('name','kamal');
    users.set('age',21);
    users.set('status','dev');
    console.log(users);
    console.log(users.get(54))

get

    let users = new Map()
    users.set('name','kamal');
    users.set('age',21);
    users.set('status','dev');
    console.log(users.get('name'));
    // kamal

let users = new Map([
  ['name','kamal'],
  ['age',21],
  ['phone',{
    home: 999,
    office: 121
  }]
])
console.log(users.get('phone').office);
// 121

has

    let users = new Map()
    users.set('name','kamal');
    users.set('age',21);
    users.set('status','dev');
    console.log(users.has('name'));
    // true

size

    let users = new Map()
    users.set('name','kamal');
    users.set('age',21);
    users.set('status','dev');
    console.log(users.size);
    // 3

clear

  <script type="text/javascript">
    let users = new Map()
    users.set('name','kamal');
    users.set('age',21);
    users.set('status','dev');
    let result = users.clear();
    console.log(users);
 //

delete

  <script type="text/javascript">
    // let users = new Map()
    // users.set('name','kamal');
    // users.set('age',21);
    // users.set('status','dev');
    // let result = users.delete('name');
    // console.log(users);
  </script>

keys

    let users = new Map()
    users.set('name','kamal');
    users.set('age',21);
    users.set('status','dev');
    console.log(users.keys());
    // {"name", "age", "status"}

values

     let users = new Map()
     users.set('name','kamal');
     users.set('age',21);
     users.set('status','dev');
     console.log(users.values());
    // {"kamal", 21, "dev"}

entries

     let users = new Map()
     users.set('name','kamal');
     users.set('age',21);
     users.set('status','dev');
     console.log(users.entries()); -->
    // {"name" => "kamal", "age" => 21, "status" => "dev"}

forEach

    let users = new Map()
    users.set('name','kamal');
    users.set('age',21);
    users.set('status','dev');

    users.forEach(t => {
      console.log(t);
    })
    // kamal
    // 21
    // dev

specific order

// with object
let data = {
  'name': 'kamal'
  '1': 'one'
}
console.log(data)

// with map
let data = new Map()
data.set('name','kamal')
data.set('1', 'one')
console.log(data.entries())

soureces

es, es6, js