How to use a function inside a javascript Map Object

Question

Am trying to understand Maps objects in javascript, and how to use them inside an application, but there's something that i cant understand and it leads me to this question, here's my example

const myMap = new Map();

myMap.set('Name', 'John Doe')
     .set(1, function sayHello(user){ console.log(`Hello ${user}`)})

myMap.get('Name'); // output John Doe
myMap.get(1); // output [function: sayHello]

as you see above i can set a function inside the Map

1. how can i use that function?
2. what's the point of setting a function in a Map?
3. are there any use cases?

I'm so confused, i will appreciate any explanation

Answer 1

What you've stored in the map is a function object. To understand it better, take a look at the following snippet to observe the difference between sayHello and sayHello("World"). The former is the function object and the latter is an invocation.

const sayHello = (user) => console.log(`Hello ${user}`)

console.log(sayHello);
sayHello("World");

You'd observe that the .get returns you the function object. To see it in action, you need to invoke it with ().

myMap.get(1)("World");

---

Among other things, maps could help you organize function objects and have, arguably, more readable code. For comparison, check the following implementations.

function calculator(operation, a, b) {
  if (operation === "add") {
    return a + b;
  } else if (operation === "subtract") {
    return a - b;
  } else if (operation === "multiply") {
    return a * b;
  }
}

console.log(calculator("add", 5, 10));
console.log(calculator("subtract", 5, 10));
console.log(calculator("multiply", 5, 10));

function calculator(operation, a, b) {
  const operations = new Map([
    ["add", (a, b) => a + b],
    ["subtract", (a, b) => a - b],
    ["multiply", (a, b) => a * b],
  ]);
 
  return operations.get(operation)(a, b);
}

console.log(calculator("add", 5, 10));
console.log(calculator("subtract", 5, 10));
console.log(calculator("multiply", 5, 10));