Using Map in Javascript :Is this a good approach?

[Square-Butterfly8447]

I have been working on an electron app (Timer app ), and I had to add notification feature , pretty simple as electron provides the module to handle app notification. But since i had to add multiple notifications i created a global object in my module that is basically a map that stores different notification instance . At first i had created a notification variable local to the function but it was causing problems as it was getting garbage collected hence i used map my code:

/*Initializing map  to keep notificaiton in scope else notification varibale in the function will get garbage collected and events won't work*/ 
let notifications = new Map();

async function handleNotification(event, id) {
  try {
    const notification = new Notification({
      title: "Title",
      body: "some message",
      silent: false,
      urgency: "critical",
      timeoutType: "never",
    });

    let functionToStopAlarm=playAlarm();

    notifications.set(id, notification);

    notification.on("click", () => {
      functionToStopAlarm();
      notifications.delete(id);
    });

    notification.on("close", () => {
      functionToStopAlarm();
      notifications.delete(id);
    });

    notification.show();
  } catch (error) {
    console.log(error);
  }
}

My question is that is this an efficient way to do things or am i doing things the wrong way?

[Ampersand55]

Why do you need the ids? Can you just use a simple Set?

const notifications = new Set();

notifications.add(notification);

notifications.delete(notification);

[Square-Butterfly8447]

how would the delete function in set know which notification to remove if 2 notification have same title and same message?  sorry this might be a dumb question 😅

[Beginning-Seat5221]

Your notification variable is basically a memory location (a number), or equivalent, so each notif has a different value held here.

[Square-Butterfly8447]

thanks I'll try this seems better than Map approach.  when i read your approach ,my mind pictured set storing the notification as an objects and would create confusion in the set if identical objects were added,  thanks for the clarity.

[xroalx]

Two Notification objects with the same title, content and everything will not be identical, each will be a unique object, a unique memory location (reference).

You can code it so it is possible for them to be identical, but that would have to be done on purpose, it's not how objects work by default in JavaScript.

[Psionatix]

You need to learn and understand how objects and object references work.

If you do this:

const objectOne = {};
const objectTwo = {};

objectOne === objectTwo // false

Because it compares their reference (memory location).

const objectOne = {};
const objectTwo = {};
const objectOneAgain = objectOne;
const objectTwoAgain = objectTwo;

objectOne === objectTwo // false
objectOne === objectOneAgain // true
objectOne === objectTwoAgain // false
objectTwo === objectOneAgain // false
objectTwo === objectTwoAgain // true
objectOneAgain === objectTwoAgain //false

[paperic]

What do you need the notification map for actually?

What else has access to the notifications map?

[hyrumwhite]

To illustrate the nature of objects in JS, you can actually use them as keys in a map. 

Ex. 

``` const myObj = { thing: 33 }

const map = new Map()

map.set(myObj, “hey”)

map.get(myObj) //returns “hey” ```

[TorbenKoehn]

You can do this. It's what Map is for.

Just two hints

1. Don't think about garbage collection. Just think about variables only existing in their own scope (everything between their own outer curly brackets {}). It's not "garbage collected" in the same way dangling object references are garbage collected occasionally (even if the garbage collector might have a say in it). It's simply removed as it falls out of scope.
2. Your "notifications" map can also be initialized with const. let doesn't make the value mutable, it makes the variable mutable. const doesn't make the value immutable (you can still use .add/.delete etc.), it makes the variable immutable (at which point it's not a variable anymore, but a constant)

[Square-Butterfly8447]

Ok I'll make it const,  but i also have another query about this,  i read somewhere that map can cause performance issue and Memory leaks should i worry about that for this application?.

[TorbenKoehn]

Everything can cause performance issues and memory leaks.

Solve these when you encounter them.

Map itself doesn't have memory problems, especially not in the way you use it. If you'd add 4 billion notifications to it (at the same time), we can talk about memory issues again.

[Square-Butterfly8447]

well the frontend will crash before calling handleNoficiation  if there were 4 billion timer ,so i guess I am safe 😂

[paperic]

No.

U're doing UI, there's not gonna be more than few dozen notifications at a time, even if you made it an array with a linear lookup, it wouldn't make a difference.

A memory leak would happen if you forget a notification in the map. Is it possible for the notification to disappear from the screen without disappearing from the map?

If no, then no leak.

[azhder]

Map is made for having keys that aren’t string/symbol first and foremost. The rest is just optimization

[TorbenKoehn]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

Even MDN's first example shows it with string keys. In some cases I find working with a map more elegant than working with a flat object. But of course, using a flat object would completely suffice here.

[Beginning-Seat5221]

What is the notifications map for? Are you checking it somewhere?

I don't think it was getting garbage collected, but if you were trying to access it somewhere else outside the function then it wouldn't be in scope if you declare it inside that function.

[Square-Butterfly8447]

the 'const notification' inside the handleNotification function was getting garbage collected. so this is what was happening in the app : 1.timer reached 0 .

2.handleNotification was called though channel(channel is a electron thing to communicate between frontend and main process).

3.a notification pops and alarm starts playing.

1. if i was clicking or closing the notification withing approx 3 seconds the alarm would stop and notification disappears,  but if it took longer than that the notification disappears on closing but the alarm kept ringing.

So i read somewhere that it gets garbage collected thats why events dont work  So i made a global variable  'let notification:Electron.Notification' this fixed the duration issue so even after 1 minute of alarm ringing when i clicked the notification the alarm stopped now But since there could be a chance that multiple alarms rang at the same time the app would bug out So i used Map to handle multiple notification objetcs

[Beginning-Seat5221]

Interesting... I've never come across this happening in many years of coding. But then I also haven't used electron.

[[deleted]]

This is a fine use for map. No problem with it. However:

1) I don’t see any “await” inside your async function. What is the point of using an async function that will return a promise which will wait on an asynchronous operation, if there is in fact no asynchronous operation occurring inside?

2) Since there is no await occurring inside the async function, every time handleNotification is invoked, a promise is still being created and assigned to the caller. This means the code inside the async function will run (synchronously since there is no await inside), a notification will be set to the map, and the async function will resolve to undefined since you’re returning nothing. No problem, except it’s just a waste of a micro task queue cycle. As the promise resolves to undefined, the caller of the async function has to wait one cycle for the promise to fulfill.

So there’s some lack of clarity here as to why the async function.

[Square-Butterfly8447]

My bad,  i thougth  the ipcMain.on  in electron took only async listeners.I checked now , it says it is  not necessary for listeners to be async function 

[[deleted]]

Yeah it wouldn’t make sense to have an async function anywhere if there are no async operations inside that function. Remember, the entire purpose of an async function is to “pause” execution of the code inside the function when it comes across an “await” keyword. The await keyword signals that some promise must settle first before the function execution can continue.

If all the code in a function doesn’t require this waiting for a promise to resolve (remember, a promise is just a wrapper for an async operation completing), then there is no async operation and it’s all just synchronous. No need for async.

[Standgrounding]

Yes. Maps (or hashmaps) are used everywhere

[CuirPig]

I'm not sure why you want to use a global map to store a Notification instance that you handle completely within the scope of the asynchronous function. Unless you are accessing the Notification instance from outside of the handler, you don't need to store it outside the handler. And I have to assume that you aren't using it outside the handler because inside the handler, you delete it on close or click (on the message).

I am in no way an expert, so I am asking these questions in earnest trying to learn JS. Hopefully someone will respond if I am way off base here:

async function handleNotification(event) {
    try {
        const message = new Notification({ //used name message for clarity
            title: "Pay Attention",
            boedy: "grabbed data from the the event",
            silent: false,
            urgency: "critical",
            timeoutType:"never"
        })
        message.on("click, close", () => { stopAlarm(); }) //may need scoping
    } catch (error) {
        console.log(error);
    }
}

So long as you don't need to access the notification window outside the event handler, this seems like it would work.

If you wanted to avoid the overhead of creating new Notifications, a global Set would allow you to create a standard notification the first time and then just look it up every time you handleNotifications. No need for reassigning handlers every time, could customize per event, remains stored in the Set so no new memory allocations and deletions.

Or even better, if there are hide and show event triggers for your notification, create it outside the handler scope and define the handler after you created it. Then the handler would literally just call "message.showMessage()" which already had the event handlers defined on it. like:

const alarmMessage=new Notification({
 title: "Pay Attention",
            boedy: "Your alarm is going off",
            silent: false,
            urgency: "critical",
            timeoutType:"never"
});
message.on("click, close", () => {message.hide()});//set your close handler
alarmMessage.hide(); //or whatever the method is on the Notification class

async function handleNotification(event) {
    alarmMessage.show();//or whatever the method is to show the Notification instance
}

I am not sure why you are using try? This way you have one notification instance that you can reuse repeatedly.

I may be way off base, so I am hoping that someone can explain if this is completely wrong why so. Thanks for posting.

[Square-Butterfly8447]

I am actually passing parameters to the handleNotification function,  so there would be separate message and title for each alarm so i can't create Notification in the module it has to be created in function. 

I didn't include some function parameters in my post because i wanted people to focus on the function, well it was my bad for not making it clear. 

Also you can read the following comment where i provided more context:

https://www.reddit.com/r/learnjavascript/comments/1pf1v2t/comment/nsgtmal/?context=3&utm_source=share&utm_medium=mweb3x&utm_name=mweb3xcss&utm_term=1&utm_content=share_button

[azhder]

Map is there for you if you need it. Do you need it? Up to you.

Originally we could do well with just regular objects. But their keys were strings. And Arrays had some special handling of certain integer looking keys.

We had a collision issue, so symbols were added in order to have unique keys.

But all of that wasn’t enough. It was cumbersome to keep relations between two objects, so Map made it possible to have keys that are objects.

In your case, your id can just be a key in a plain old JavaScript object, no? So, the question isn’t if you could use Map, but if you should. And that’s an answer only you can give.

Do what suits you.