JavaScript alert for messages and alternatives

When starting with javaScript alert is something that often comes up in many examples found on the Internet as a way to log something. It works okay for that when it comes to thous kinds of simple projects where a developer is just starting to learn javaScript for the first time, but there are other options for logging as well with client side javaScript such as console.log, which also works just find in a node.js environment. In this post I will be giving a quick overview of the window.alert method in client side javaScript as well as a few other alternatives for logging things to know it they are working as expected or not

1 - javaScript alert for logging

In many basic javaScript examples that aim to help people that are new to javaScript get started. The window.alert method is often used as a way to log the result of something so that the developer can confirm that the little javaScript example is working. So that being said one of these simple javaScript examples might look something like this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
<title>javaScript alert</title>
</head>
<body>
<script>
// alert can be used as a way to log
// something to make sure it is working
// as exspected
var n = 40 + 2;
alert(n >= 40); // true
</script>
</body>
</html>

The alert method is a property of the window object so there is no real difference between window.alert, this.alert, and just plain alert by itself. So that is just about it when it comes to using alert, just pass in what you want to log and it should alert out to you.

2 - JavaScript Alert and loops

With some javaScript examples it can get annoying to have a whole much of alerts happen one after another. So for the most part using an alert in the body of a loop or any kind of method that is called a whole bunch of times such as Array.map is not such a good idea.

One nice thing about it though is that it will pause the execution of any additional javaScriot until the alert is clicked, so it is a way to get a loop to stop for a second, which might be okay for debugging purposes now and then. Still There are alternatives a javaScript developer should be aware of that I will be getting to later in this post.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
<title>javascript alert map example</title>
</head>
<body>
<script>
let arr = [1,2,3,4];
arr = arr.map((n)=>{
n = Math.pow(4, n);;
alert(n);
return n;
});
alert(arr);
</script>
</body>
</html>

This might work out okay if a developer is just working something out, but is not going to leave it that way, but when it comes to using alert in an actual production app of some kind that can get very annoying. There are other ways to log what is going on where even if it is left in place, will not greatly effect the behavior of the application.

3 - javaScript alert alternatives

The javaScript alert method might come in handy now and then, but for the most part I would avoid using it for production projects, and also I would not even use it for debugging in most cases as well. There are many other ways to go about displaying a message, for the purpose of debugging or informing a user of something so lets look at some alternatives to javaScript alert.

3.1 - console.log

The console.log method is a favorite for me and many other developers, it will of course log to the javaScript console rather than log a message as an alert box.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
console.log('log a message');
var a = (5 + 3) * 10,
b = 20;
// can log a var
console.log(a); // 80
// can log more than one thing in a single call
console.log(a, b, 'foo'); // 80 20 'foo'
// expressions
console.log(a + b); // 100
//and objects
console.log({
x: 60,
y: 40
});

3.2 - innerText element property

When it comes to displaying a message in a html document there are many other options to display something aside from javaScript alert. When gaining a reference to an html element in client side javaScript there are properties like innerText that can be used to set to change the inner text node of certain elements that have text nodes such as paragraph elements.

So lets take a quick look at a simple innerText example for displaying something.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
<title>javaScript alert innerText alternative</title>
</head>
<body>
<div id = "out"></div>
<script>
// get a ref to the element by any means
// possible
var out = document.getElementById('out');
// the innerText property can be used to set or get
// the inner text node of an element
out.innerText = 'This can be used to set a message';
</script>
</body>
</html>

I just need to get a reference to an element by one means or another such as with document.getElementById. Once I have a reference to an element I can then use that as a way to display a message. A method like this can then be used to display a message in a browser window without having an annoying dialog box pop up each time.

3.3 - javaScript Prompt

The prompt method works just like the javaScript alert method, but with one little difference. It allows for the use to input a value. However just like with the alert method it will pause all other javaScript while the prompt dialog box is open, which in most cases might be an undesired side effect of its use.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<title>javaScript alert map example</title>
</head>
<body>
<script>
var startTime = new Date(),n;
setTimeout(()=>{
let el = document.createElement('p'),
time = new Date() - startTime;
el.innerText = time + ' : ' + n;
document.body.appendChild(el);
},1000);
n = prompt('Give a number', 0);
</script>
</body>
</html>

The prompt method might still come in handy now and then, but for the most part I would prefer to go with input elements, or some other means of gathering user input that will not delay the event loop.

3 - Writing a custom log function in place of using javaScript alert

Maybe one of the best alternatives to using javaScript alert for the purpose of logging something for the purpose of debugging might be to have some kind of custom log method. This is something that I see going on in a log or projects and when I think about it for a second it makes a whole lot of sense. I can define the custom log method in an external javaScript file and then link to it in any page or module, and redefine what the logic of the custom log method is not and then when necessary.

3.1 - Simple custom log function using console.log

So here I have a basic custom log method using console.log in place of the javaScript alert method. This way I can do whatever I want with the message that is passed, such as displaying the public properties of an object in a custom way.

1
2
3
4
5
6
7
8
9
10
11
12
13
let log = (mess) => {
// log objects in a different way
if (typeof mess === 'object' && mess != null) {
Object.keys(mess).forEach((key) => {
console.log(key + ' : ', mess[key]);
});
return;
}
// if we get here just log like this
console.log(mess)
};

Once I have my custom log method defined I can then use it anywhere in my project where doing so is needed.

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<title>javaScript alert innerText alternative</title>
</head>
<body>
<script src="log_function.js"></script>
<script>
log('foo');
log(null);
log({x: 40, y: 2});
</script>
</body>
</html>

4 - Conclusion

So a javaScript alert in client side javaScript might be okay for some hello world examples, and also maybe the use of it is called for with some actual projects as well. However there are still often better alternatives when it comes to letting the user know that something is up. Also when it comes to debugging there are a wide range of better options that are far more useful, even beyond that of just console.lof by itself.