Why shouldn't I use Alert in JavaScript? [closed]

I need to notify the user under certain circumstances and have seen that confirm() and alert() shouldn't be used. Instead, a lot of questions mention using the modal thing in jQuery UI, especially if you need to style things. That's all fine and dandy, but, at the end of the day, what's the reason coders are saying you should stay away from it?

This is a pretty good example of how people feel, but pretty much any other question dealing with styling an alert box has the same comments. Is it only a styling issue or are there more fundamental reasons to shy away from this built-in functionality?

More importantly, none of the answers talk about what you ought to use instead. Are jQuery UI and similarly pre-built solutions simply the only answer? Why? Is it performance or security or inexperienced coders who need something easy to use or...?


Okay, so let me clarify a bit. The reason I'm asking is because the alert functionality is to prevent a user from accidentally wiping out the work they've been doing since there are three ways to start a new plan on this page and each wipes out the existing inner html for the div where the plan is displayed.

Most of what I'm hearing is that it's bad for users and UI, but, if the anger-inducing, attention grabbing is what I want, what should I use instead? Someone mentioned that alerts / confirms halt JavaScript execution and may prevent you from using other tabs. That's closer to the functionality problems I'm expecting. I do understand that it's bad for UI, but I'm looking for more technical reasons here.

There are no "technical reasons" that you should not be using the built-in browser methods for alert and confirm functionality. It's all opinionated.

lets split this into two parts.

Alerts should never be used for debugging unless you intend for it to stop the execution of the code for a purpose. Otherwise, you should be using console.log because alert can actually change the result of your code if your code involves asynchronous logic. "But console.log isnt supported in IE!" Yes it is, if the console is open. In production code your debugging code should not be there anyway. To protect against forgotten console.logs, simply polyfil it. For uses other than debugging, such as informing the user that something happened, it's generally better to use some other way of informing the user that a change happened such as highlighting an element or a banner with informational text, however, there's nothing wrong with using an alert in that case as long as the pause in execution won't impact your code.

Confirm is the standard way of asking a user "Are you sure?" before performing a damaging action such as deleting information. It's easy to understand and is used by many sites, so i'd suggest using it within your own code as well. The alternative will generally result in a extra code adding unneeded complexity to your application. Keep in mind, however, confirm also blocks execution, so you should make sure that it won't affect any asynchronous logic that you may have running.

If your asynchronous code is written correctly, it generally won't be impacted by a pause in execution.

Here are some reasons why you should not use alerts in your code:

  • As you said, a lot alert boxes may annoy the users
  • Styling of alert boxes is as far as I know impossible. Furthermore every browser displays them diffrent, which may not look good in all cases with your website-design
  • Most modern / common browsers block alerts after a site tried to display a few of them, to prevent alert spamming

You can use jQuery UI dialogs as an alternative, or anything else that is able to display modal dialogs. That way you can customize / style the dialog box and browsers don't block them.

I generally use alert boxes only for debugging / error reporting, not more.

Alert blocks JS execution. It's ugly. It is limited in functionality.

It's much better use use a modal dialog and callbacks to handle the user's choice. There are many libraries that do a good job of this.

Think about it from a design standpoint. End users hate popups, and prompts/alerts/confirms are very "spam" like in nature (abused as such). Modal windows are more "gentle" (as my professor used to say), customizable, and more stylish than an alert.

Not to mention too many popups could trigger the "Check here to disable alerts from this website" some browsers offer.