ReasonJun

javascript : map 본문

Frontend/Javasciprt

javascript : map

ReasonJun 2023. 6. 9. 00:12
728x90

In JavaScript, a Map is a built-in data structure that allows you to store key-value pairs, where both the keys and values can be of any type. It provides an efficient way to associate values with unique keys and perform operations such as insertion, retrieval, and deletion.

const myMap = new Map(); // creating a new Map

const myMap = new Map([ // initialize a Map
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3']
]);

In this example, the Map contains three key-value pairs.

Maps have several useful methods to manipulate and retrieve values. Here are some commonly used methods:

  • set(key, value): Sets a key-value pair in the Map.
  • get(key): Retrieves the value associated with a given key.
  • has(key): Checks if a key exists in the Map. Returns true if the key is found, or false otherwise.
  • delete(key): Removes a key-value pair from the Map. Returns true if the key was present and removed, or false if it was not found.
  • size: Returns the number of key-value pairs in the Map.
  • clear(): Removes all key-value pairs from the Map.
const myMap = new Map();

myMap.set('key1', 'value1');
myMap.set('key2', 'value2');
console.log(myMap.size); // Output: 2

console.log(myMap.get('key1')); // Output: "value1"

console.log(myMap.has('key2')); // Output: true

myMap.delete('key2');
console.log(myMap.has('key2')); // Output: false

myMap.clear();
console.log(myMap.size); // Output: 0



const set = new Set([1, 2, 3]);

set.add(6);
console.log(set); // Set(4) { 1, 2, 3, 6 }
set.add(6);
console.log(set); // Set(4) { 1, 2, 3, 6 }


const map = new Map([
  ['key1', '🍎'],
  ['key2', '🍌'],
]);
console.log(map); // Map(2) { 'key1' => '🍎', 'key2' => '🍌' }

console.log(map.keys()); // [Map Iterator] { 'key1', 'key2' }
console.log(map.values()); // [Map Iterator] { '🍎', '🍌' }
console.log(map.entries()); // [Map Entries] { [ 'key1', '🍎' ], [ 'key2', '🍌' ] }

// differ from object

const key = { name: 'milk', price: 10 };
const milk = { name: 'milk', price: 10, description: '맛있는우유' };
const obj = {
  [key]: milk,
};
console.log(obj);
/*
{
  '[object Object]': { name: 'milk', price: 10, description: '맛있는우유' }
}
*/
const map2 = new Map([[key, milk]]);
console.log(map2);
/*
Map(1) {
  { name: 'milk', price: 10 } => { name: 'milk', price: 10, description: '맛있는우유' }
}
*/

// The difference between map and object is in the features that can be used.

console.log(obj[key]); // { name: 'milk', price: 10, description: '맛있는우유' }
console.log(map2[key]); // undefined
console.log(map2.get(key)); // { name: 'milk', price: 10, description: '맛있는우유' }

You can iterate over the key-value pairs in a Map using the forEach method or by using a for...of loop:

myMap.forEach((value, key) => {
  console.log(key, value);
});

for (const [key, value] of myMap) {
  console.log(key, value);
}

 

Maps are useful when you need to associate values with specific keys and efficiently perform operations based on those keys. They provide a convenient and flexible way to store and retrieve data in JavaScript.

728x90
Comments