본문 바로가기
Web/JavaScript

[JavaScript] Map Object

by llHoYall 2022. 7. 14.

The Map object holds key-value pairs and remembers the original insertion order of the keys.

Any value may be used as either a key or a value.

A key should be unique.

Create a Map Object

The Map() constructor creates a new Map object.

const map = new Map(); // Map(0) {}

const map = new Map([
  ['key1', 'value1'], ['key2', 'value2']
]); // Map(2) {'key1' => 'value1', 'key2' => 'value2'}

const map = new Map([
  ['key1', 'value1'], ['key1', 'value2']
]); // Map(1) {'key1' => 'value2'}

The Map object considers that NaN is the same as NaN.

console.log(NaN === NaN); // false
console.log(+0 === -0); // true

const map = new Map([[NaN, 'value1'], [NaN, 'value2']]); // Map(1) {NaN => 'value2'}
const map = new Map([[+0, 'value1'], [-0, 'value2']]); // Map(1) {0 => 'value2'}

Map Property

size

This property returns the number of key/value pairs in the Map object.

It only has a getter.

const map = new Map([
  ['key1', 'value1'], ['key2', 'value2']
]);

map.size; // 2

Map Method

clear()

This method removes all key-value pairs from the Map object.

const map = new Map([
  ['key1', 'value1'], ['key2', 'value2']
]);

map.clear(); // Map(0) {}

delete(key)

This method returns true if an element in the Map object existed and has been removed, or false if the element does not exist.

const map = new Map([
  ['key1', 'value1'], ['key2', 'value2']
]);

map.delete('key1'); // true
// Map(1) {'key2' => 'value2'}

get(key)

This method returns the value associated with the key, or undefined if there is none.

const map = new Map([
  ['key1', 'value1'], ['key2', 'value2']
]);

map.get('key1'); // 'value1'

has(key)

This method returns a boolean asserting whether a value has been associated with the key in the Map object or not.

const map = new Map([
  ['key1', 'value1'], ['key2', 'value2']
]);

map.has('key1'); // true
map.has('key3'); // false

set(key, value)

This method sets the value for the key in the Map object and returns the Map object.

const map = new Map();

map
  .set('key1', 'value1')
  .set('key1', 'value2'); 
// Map(2) {'key1' => 'value1', 'key2' => 'value2'}

The object has a limitation of a key type, but the Map object doesn't have a limitation.

const map = new Map();

map.set({name: 'HoYa'}, 'value1'); // Map(1) {{…} => 'value1'}

keys() and values()

Both methods return a new iterator object that contains the keys or values for each element in the Map object in insertion order.

const map = new Map([
  ['key1', 'value1'], ['key2', 'value2']
]);

for (const k of map.keys()) {
  console.log(k); // key1, key2
}

for (const v of map.values()) {
  console.log(v); // value1, value2
}

entries()

This method returns a new Iterator object that contains an array of [key, value] for each element in the Map object in insertion order.

const map = new Map([
  ['key1', 'value1'], ['key2', 'value2']
]);

for (const [k, v] of map.entries()) {
  console.log(k, v);
}

forEach()

This method calls the callback function once for each key-value pair present in the Map object, in insertion order.

const map = new Map([
  ['key1', 'value1'], ['key2', 'value2']
]);

map.forEach((v, k) => console.log(k, v));

We can traverse the Map object in other ways.

for (const e of map) {
  console.log(e);
}

console.log([...map]);

'Web > JavaScript' 카테고리의 다른 글

[Svelte] Template Syntax  (0) 2022.12.10
[Svelte] Getting Started with SvelteKit  (0) 2022.12.01
[JavaScript] Set Object  (0) 2022.07.13
[JavaScript] String Object  (0) 2022.07.10
[JavaScript] RegExp Object  (0) 2022.07.09

댓글