Six Lesser‑Known Ways to Output Data in JavaScript

JavaScript offers many ways to output data beyond the familiar console.log() and alert() . This article presents six useful methods that can enhance user interaction and debugging.

1. Using document.write() to write directly to the document

The legacy document.write() method inserts HTML strings into the page, but it overwrites the entire document if called after the page has loaded.

document.write("
Hello World!
");
document.write("
This is directly written to the document.
");

2. Other console methods

Besides console.log() , the console object provides several useful functions for different log levels and data presentation.

console.error("This is an error message"); // error
console.warn("This is a warning"); // warning
console.info("This is informational"); // info
console.table([{a:1,b:2},{a:3,b:4}]); // table view
console.dir(document.body); // object property list

3. Using the Notification API for desktop notifications

Modern browsers support the Notification API to display native desktop alerts after obtaining user permission.

if (Notification.permission === "granted") {
  new Notification("Hello!", { body: "This is a desktop notification." });
} else if (Notification.permission !== "denied") {
  Notification.requestPermission().then(permission => {
    if (permission === "granted") {
      new Notification("Hello!", { body: "Notification permission granted!" });
    }
  });
}

4. Using speechSynthesis for voice output

The Web Speech API can convert text to spoken audio, allowing developers to add speech feedback to web pages.

const utterance = new SpeechSynthesisUtterance();
utterance.text = "Hello, this is JavaScript speaking!";
utterance.rate = 1.0; // speed
utterance.pitch = 1.0; // pitch
window.speechSynthesis.speak(utterance);

5. Using Blob and URL.createObjectURL() to output files

Data can be packaged into a Blob and offered as a downloadable file via a temporary object URL.

const data = "Hello, this will be downloaded as a file!";
const blob = new Blob([data], { type: "text/plain" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "example.txt";
a.click();
URL.revokeObjectURL(url);

6. Using WebSocket for real‑time output to other devices

WebSocket connections enable JavaScript to send and receive messages instantly with a server or other clients.

const socket = new WebSocket("wss://example.com/socket");

socket.onopen = function() {
  socket.send("Hello Server!");
};

socket.onmessage = function(event) {
  console.log("Message from server:", event.data);
};

Conclusion

JavaScript’s output capabilities extend far beyond simple console logs or alerts. By leveraging desktop notifications, speech synthesis, file generation, and real‑time communication, developers can create richer, more professional user experiences tailored to a variety of scenarios.