Map and sets in Javascript | Lecture 8

 

In JavaScript, Map and Set are two data structures introduced in ES6 that provide enhanced capabilities for storing and managing collections of data. Here’s an explanation with examples:

Map

A Map is a collection of key-value pairs where both keys and values can be of any data type. It maintains the order of insertion and allows quick lookups, updates, and deletions based on keys.

Key Features of Map:

  • Keys can be of any type (e.g., objects, functions, primitives).
  • Maintains the order of insertion.
  • Provides a size property to get the number of entries.

Examples:

  1. Creating and Manipulating a Map:

2.  const map = new Map();

3.   

4.  // Adding key-value pairs

5.  map.set('name', 'Alice');

6.  map.set('age', 25);

7.  map.set('isStudent', true);

8.   

9.  console.log(map);

10.// Output: Map(3) { 'name' => 'Alice', 'age' => 25, 'isStudent' => true }

11. 

12.// Accessing values

13.console.log(map.get('name')); // Output: Alice

14. 

15.// Checking existence of a key

16.console.log(map.has('age')); // Output: true

17. 

18.// Deleting a key

19.map.delete('isStudent');

20.console.log(map);

21.// Output: Map(2) { 'name' => 'Alice', 'age' => 25 }

  1. Iterating Over a Map:

23.const map = new Map([

24.    ['name', 'Alice'],

25.    ['age', 25],

26.    ['country', 'USA']

27.]);

28. 

29.// Iterating with for...of

30.for (const [key, value] of map) {

31.    console.log(`${key}: ${value}`);

32.}

33.// Output:

34.// name: Alice

35.// age: 25

36.// country: USA

37. 

38.// Iterating with forEach

39.map.forEach((value, key) => {

40.    console.log(`${key}: ${value}`);

41.});

  1. Size and Clearing a Map:

43.console.log(map.size); // Output: 3

44.map.clear();

45.console.log(map.size); // Output: 0

Set

A Set is a collection of unique values. It can store any type of value (primitive or object) and does not allow duplicates.

Key Features of Set:

  • Automatically removes duplicate values.
  • Provides a size property to get the number of elements.
  • Does not have key-value pairs; only values are stored.

Examples:

  1. Creating and Manipulating a Set:

2.  const set = new Set();

3.   

4.  // Adding values

5.  set.add(1);

6.  set.add(2);

7.  set.add(3);

8.  set.add(2); // Duplicate value, ignored

9.   

10.console.log(set);

11.// Output: Set(3) { 1, 2, 3 }

12. 

13.// Checking existence

14.console.log(set.has(2)); // Output: true

15.console.log(set.has(5)); // Output: false

16. 

17.// Deleting a value

18.set.delete(3);

19.console.log(set);

20.// Output: Set(2) { 1, 2 }

  1. Iterating Over a Set:

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

23. 

24.// Iterating with for...of

25.for (const value of set) {

26.    console.log(value);

27.}

28.// Output: 1, 2, 3, 4

29. 

30.// Iterating with forEach

31.set.forEach(value => {

32.    console.log(value);

33.});

  1. Size and Clearing a Set:

35.console.log(set.size); // Output: 4

36.set.clear();

37.console.log(set.size); // Output: 0

Key Differences Between Map and Set

Feature

Map

Set

Type of Data Stored

Key-value pairs

Unique values only

Key Restrictions

Keys can be any type

Not applicable

Value Restrictions

None

Values must be unique

Accessing Elements

map.get(key)

No direct access by index

Use Case

When key-value associations are needed

When unique items are needed

Use Cases

  • Map: Suitable for situations where data needs to be stored as key-value pairs, such as caching results or storing configurations.
  • Set: Ideal for storing collections of unique values, such as unique user IDs or filtering duplicates from a list.

 

Comments

Post a Comment

Popular posts from this blog

Classes and Objects in Javascript | Lecture 10

  In JavaScript, classes are templates for creating objects, and objects are instances of classes. Classes encapsulate data and methods to model real-world entities. Declaring a Class A class is defined using the class keyword, and it typically contains: Constructor : A special method for initializing the object. Methods : Functions defined within the class. Example: Creating a Class and an Object class Person {   // Constructor to initialize the object   constructor(name, age) {     this.name = name; // Instance property     this.age = age;   }     // Method   greet() {     return `Hello, my name is ${this.name} and I am ${this.age} years old.`;   } }   // Create an object (instance) of the class const person1 = new Person("John", 30);   // Access properties and methods console.log(person1.name); // Output: John console.log...
Read more

Destructuring in JavaScript | Lecture 5

  Destructuring in JavaScript is a syntax for unpacking values from arrays or properties from objects into distinct variables. This feature simplifies extracting data, making your code cleaner and more readable. Here are examples of destructuring for both arrays and objects: 1. Destructuring Arrays const fruits = ['apple', 'banana', 'cherry'];   // Basic Destructuring const [first, second] = fruits; console.log(first); // "apple" console.log(second); // "banana"   // Skipping Elements const [, , third] = fruits; console.log(third); // "cherry"   // Default Values const [a, b, c = 'default fruit'] = ['mango', 'pear']; console.log(c); // "default fruit"   // Rest Pattern const [d, ...rest] = fruits; console.log(rest); // ["banana", "cherry"] 2. Destructuring Objects const user = {   name: 'John',   age: 30,   count...
Read more

ECMA Script 6 Introduction of topics | Lecture 1

Image
ECMA Script 6 Introduction of topics 1. Let and Const let : Block-scoped variable. const : Block-scoped constant. let x = 10; x = 20; // Allowed   const y = 30; // y = 40; // Error: Assignment to constant variable   2. Arrow Functions Concise syntax for defining functions. // Regular function function add(a, b) {   return a + b; }   // Arrow function const add = (a, b) => a + b;   console.log(add(5, 3)); // Output: 8   3. Template Literals For string interpolation and multiline strings. const name = "John"; const greeting = `Hello, ${name}!`; console.log(greeting); // Output: Hello, John!   const multiline = `This is a multiline string.`; console.log(multiline);   4. Default Parameters Default values for function parameters. function greet(name = "Guest") {   return `Hello, ${name}!`; }   console.log(greet()); // Output: Hello, Guest! console.log(greet(...
Read more