JavaScript JS Tutorial JS Objects JS Functions JS Classes JS Async JS HTML DOM JS Browser BOM JS Web APIs JS AJAX JS JSON JS vs jQuery JS Graphics



JS Maps

JavaScript Maps, also known as Hash Maps, are a type of data structure that allows you to store and retrieve data using key-value pairs. They are similar to arrays, but instead of using numeric indexes to access data, you use keys. This makes them a powerful tool for organizing and manipulating data in JavaScript.

Maps were introduced in ECMAScript 6, and are now widely supported by modern browsers and JavaScript engines. They are easy to use and can be a great way to simplify your code and make it more efficient.

Creating a Map

To create a new Map in JavaScript, you can use the Map constructor:

<script>
  // Create a new Map
  let myMap = new Map();
</script>

You can also initialize a Map with an array of key-value pairs:

<script>
  // Initialize a Map with an array of key-value pairs
  let myMap = new Map([
    ['key1', 'value1'],
    ['key2', 'value2'],
    ['key3', 'value3']
  ]);
</script>

Adding and Retrieving Data

To add data to a Map, you can use the set() method:

<script>
  // Create a new Map
  let myMap = new Map();

  // Add data to the Map
  myMap.set('key1', 'value1');
  myMap.set('key2', 'value2');
  myMap.set('key3', 'value3');
</script>

To retrieve data from a Map, you can use the get() method:

<script>
  // Create a new Map
  let myMap = new Map();

  // Add data to the Map
  myMap.set('key1', 'value1');
  myMap.set('key2', 'value2');
  myMap.set('key3', 'value3');

  // Retrieve data from the Map
  let value1 = myMap.get('key1');
  let value2 = myMap.get('key2');
  let value3 = myMap.get('key3');
</script>

Checking for Data

You can check if a Map contains a specific key using the has() method:

<script>
  // Create a new Map
  let myMap = new Map();

  // Add data to the Map
  myMap.set('key1', 'value1');
  myMap.set('key2', 'value2');
  myMap.set('key3', 'value3');

  // Check if the Map contains a key
  let hasKey1 = myMap.has('key1');
  let hasKey4 = myMap.has('key4');
</script>

The has() method returns a boolean value indicating whether the Map contains the specified key.

Removing Data

To remove data from a Map, you can use the delete() method:

<script>
  // Create a new Map
  let myMap = new Map();

  // Add data to the Map
  myMap.set('key1', 'value1');
  myMap.set('key2', 'value2');
  myMap.set('key3', 'value3');

  // Remove data from the Map
  myMap.delete('key2');
</script>

The delete() method removes the key-value pair with the specified key from the Map.

Iterating Over a Map

You can iterate over the keys, values, or entries of a Map using the keys(), values(), and entries() methods, respectively:

<script>
  // Create a new Map
  let myMap = new Map();

  // Add data to the Map
  myMap.set('key1', 'value1');
  myMap.set('key2', 'value2');
  myMap.set('key3', 'value3');

  // Iterate over the keys of the Map
  for (let key of myMap.keys()) {
    console.log(key);
  }

  // Iterate over the values of the Map
  for (let value of myMap.values()) {
    console.log(value);
  }

  // Iterate over the entries of the Map
  for (let entry of myMap.entries()) {
    console.log(entry[0], entry[1]);
  }
</script>

The keys() method returns an iterator over the keys of the Map, the values() method returns an iterator over the values of the Map, and the entries() method returns an iterator over the key-value pairs of the Map.

Conclusion

JavaScript Maps are a powerful tool for organizing and manipulating data in JavaScript. They allow you to store and retrieve data using key-value pairs, and are easy to use and efficient. With the methods provided by Maps, you can add, retrieve, check for, and remove data from a Map, as well as iterate over its keys, values, and entries.

References

Activity