|
| 1 | +--- |
| 2 | +title:Javascript Map Object - Javascript Cheatsheet |
| 3 | +description:A Map is a built in object that holds key-value pairs. It can hold a key of any data type unlike in plain objects. It maintains the insertion order and provides helpers to manage key-value pairs. |
| 4 | +--- |
| 5 | + |
| 6 | +<base-title:title="frontmatter.title":description="frontmatter.description"> |
| 7 | +Javascript Map Object |
| 8 | +</base-title> |
| 9 | + |
| 10 | +<base-disclaimer> |
| 11 | + <base-disclaimer-title> |
| 12 | +Javascript Map Object |
| 13 | + </base-disclaimer-title> |
| 14 | + <base-disclaimer-content> |
| 15 | +A Map is a built in object that holds key-value pairs. It can hold a key of any data type unlike in plain objects. It maintains the insertion order and provides helpers to manage key-value pairs. |
| 16 | + </base-disclaimer-content> |
| 17 | +</base-disclaimer> |
| 18 | + |
| 19 | +##Creating a Map |
| 20 | + |
| 21 | +Creates an empty`Map` instance. |
| 22 | + |
| 23 | +```javascript |
| 24 | +constmap=newMap() |
| 25 | +``` |
| 26 | + |
| 27 | +##Initializing a Map |
| 28 | + |
| 29 | +You can initialize a Map with an array of key-value pairs. |
| 30 | + |
| 31 | +```javascript |
| 32 | +constmap=newMap([ |
| 33 | + ['id',1],// key: 'id', value: 1 |
| 34 | + ['name','Alice'],// key: 'name', value: 'Alice' |
| 35 | +]) |
| 36 | +``` |
| 37 | + |
| 38 | +##Map Size |
| 39 | + |
| 40 | +`size` property returns the number of key-value pairs in a map. |
| 41 | +It returns a number. |
| 42 | + |
| 43 | +```javascript |
| 44 | +map.size// 2 |
| 45 | +``` |
| 46 | + |
| 47 | +##Map Set |
| 48 | + |
| 49 | +The`set(key, value)` method adds a key-value pair. |
| 50 | +If a key exists already, the value will be updated. |
| 51 | +`set()` affects the size of a map. |
| 52 | + |
| 53 | +```javascript |
| 54 | +map.set('age',50)// sets new key 'age' with value 50 |
| 55 | +map.set(2,200)// sets new key 2 with value 200 |
| 56 | +map.set('id',2)// id key already exists, so value of id will be updated to 2 |
| 57 | + |
| 58 | +// Check size |
| 59 | +map.size// 4 |
| 60 | +``` |
| 61 | + |
| 62 | +You can also chain`set` like`map.set(key, value).set(key, value)` |
| 63 | + |
| 64 | +##Map Get |
| 65 | + |
| 66 | +The`get(key)` retrieves the value of the specified key. |
| 67 | +If a key exists, its value will be returned otherwise undefined. |
| 68 | + |
| 69 | +```javascript |
| 70 | +map.get('age')// 50 |
| 71 | +map.get('none')// undefined as key 'none' do not exist |
| 72 | +``` |
| 73 | + |
| 74 | +##Map Has |
| 75 | + |
| 76 | +The`has(key)` returns a boolean by checking the key existence. |
| 77 | + |
| 78 | +```javascript |
| 79 | +map.has('id')// true |
| 80 | +map.has('none')// false |
| 81 | +``` |
| 82 | + |
| 83 | +##Map Delete |
| 84 | + |
| 85 | +The`delete(key)` method removes the key-value pair with the specified key. |
| 86 | +It returns true if the key exists, otherwise false. |
| 87 | +`delete()` affects the size of a map. |
| 88 | + |
| 89 | +```javascript |
| 90 | +map.delete('age')// true as key 'age' exists |
| 91 | +map.delete('none')// false as key 'none' do not exist |
| 92 | + |
| 93 | +// Check size |
| 94 | +map.size// 3 |
| 95 | +``` |
| 96 | + |
| 97 | +##Map Clear |
| 98 | + |
| 99 | +The`clear` method removes all key-value pairs from the map. |
| 100 | +`clear` affects the size of a map. |
| 101 | + |
| 102 | +```javascript |
| 103 | +map.clear() |
| 104 | + |
| 105 | +// Check size |
| 106 | +map.size// 0 |
| 107 | +``` |
| 108 | + |
| 109 | +##Iterate Map using for ... of |
| 110 | + |
| 111 | +You can directly iterate using`for ... of` over each key-value pair. |
| 112 | + |
| 113 | +```javascript |
| 114 | +constmap=newMap() |
| 115 | +map.set('name','Bob').set('age',20) |
| 116 | +for (const [key,value]of map) { |
| 117 | +console.log(`${key}:${value}`) |
| 118 | +} |
| 119 | + |
| 120 | +// name: Bob |
| 121 | +// age: 20 |
| 122 | +``` |
| 123 | + |
| 124 | +##Iterate Map using keys() |
| 125 | + |
| 126 | +You can iterate over the map keys using`keys()` method as in the order it was inserted. |
| 127 | + |
| 128 | +```javascript |
| 129 | +constmap=newMap() |
| 130 | +map.set('name','Bob').set('age',20) |
| 131 | +for (constkeyofmap.keys()) { |
| 132 | +console.log(`${key}`) |
| 133 | +} |
| 134 | + |
| 135 | +// name |
| 136 | +// age |
| 137 | +``` |
| 138 | + |
| 139 | +##Iterate Map using values() |
| 140 | + |
| 141 | +You can iterate over the map values using`values()` method as in the order it was inserted. |
| 142 | + |
| 143 | +```javascript |
| 144 | +constmap=newMap() |
| 145 | +map.set('name','Bob').set('age',20) |
| 146 | +for (constkeyofmap.values()) { |
| 147 | +console.log(`${key}`) |
| 148 | +} |
| 149 | + |
| 150 | +// Bob |
| 151 | +// 20 |
| 152 | +``` |
| 153 | + |
| 154 | +##Iterate Map using entries() |
| 155 | + |
| 156 | +You can iterate over the map's key-value pair using`entries()` method as in the order it was inserted. |
| 157 | + |
| 158 | +```javascript |
| 159 | +constmap=newMap() |
| 160 | +map.set('name','Bob').set('age',20) |
| 161 | +for (let [key, value]ofmap.entries()) { |
| 162 | +console.log(`${key}:${value}`) |
| 163 | +} |
| 164 | + |
| 165 | +// name: Bob |
| 166 | +// age: 20 |
| 167 | +``` |