JavaScriptOutput (console, alert, DOM)

Output (console, alert, DOM)

"Output" in JavaScript is not one thing — it depends on where the code is running. In the browser, you have several ways to show information to the user (or to yourself, while debugging). In Node, output goes to the terminal. This page covers all the practical channels.

1. The console (developer-facing)

The console object exists in every environment. console.log is the one you'll use most, but there are useful variants.

JS
console.log("plain message");
console.info("informational");
console.warn("careful — yellow in DevTools");
console.error("oops — red in DevTools, often with stack trace");
console.debug("noisy debug logs — hidden by default in some browsers");

In Chrome DevTools each level is colour-coded and filterable. console.error is most useful because it includes a stack trace showing where it was called from.

Logging objects nicely

JS
const user = { name: "Ada", role: "admin", age: 36 };

console.log(user);          // expandable tree in DevTools
console.table(user);        // table view, one row per key
console.dir(user);          // forces "object inspector" view
console.log("user is %o", user); // %o = object, %s = string, %d = number

// Multiple values on one line
console.log("user:", user.name, "role:", user.role);

console.table is a hidden gem for arrays of objects:

JS
const rows = [
  { id: 1, name: "Ada",   country: "UK" },
  { id: 2, name: "Lin",   country: "TW" },
  { id: 3, name: "Pedro", country: "BR" },
];
console.table(rows);
Grouping and timing

JS
console.group("Saving user");
console.log("validating input");
console.log("writing to database");
console.groupEnd();

console.time("query");
// ... do work ...
console.timeEnd("query");   // prints e.g. "query: 12.4ms"

console.count("clicks");    // useful inside event handlers
console.count("clicks");
console.count("clicks");
console.countReset("clicks");
Assertions

JS
const age = -1;
console.assert(age >= 0, "age must be non-negative — got", age);
// Logs the message only when the assertion fails.
2. Talking to the user in the browser

These are the only synchronous UI dialogs in the browser. They block the page until the user responds. Useful for tiny demos and prototypes; almost never used in real products.

JS
alert("Hello there!");                // OK dialog

const ok = confirm("Delete this item?");
// returns true (OK) or false (Cancel)

const name = prompt("What is your name?", "Guest");
// returns the typed string, or null if Cancel
Don't ship `alert`/`confirm`/`prompt` to users
They look ugly, can be disabled by the browser, and block the entire tab. Use a real modal component in production. They are fine for personal scripts, classroom exercises and the console.
3. Writing to the page (the DOM)

This is the real way to put content on the screen.

Update an existing element

JS
const el = document.getElementById("status");
el.textContent = "Saved!";

Update with HTML (be careful)

JS
const el = document.getElementById("status");
el.innerHTML = "<strong>Saved!</strong>";

Build a new element and append it

JS
const li = document.createElement("li");
li.textContent = "New todo";
document.getElementById("todo-list").append(li);
textContent vs innerHTML
`textContent` treats the value as plain text. `innerHTML` parses it as HTML — which means if any part of that string came from a user, an attacker can inject `<script>` tags or `onerror` handlers (an **XSS** vulnerability). Default to `textContent`. Reach for `innerHTML` only when you own the markup completely.
4. document.write

JS
document.write("<h1>Hello!</h1>");

document.write writes directly into the HTML stream during parsing. It is one of the oldest output mechanisms, and almost always the wrong tool: it can wipe the entire page if called after the page has finished loading, and it interferes with modern browsers' optimisations. Treat it as legacy — useful only in beginner tutorials and ad scripts.

5. In Node.js

Node has console.log (which writes to stdout), console.error (which writes to stderr), and the underlying process.stdout.write / process.stderr.write if you need fine control without a trailing newline.

JS
console.log("Hello, %s", "Node");           // formatted string

process.stdout.write("no newline... ");
process.stdout.write("...still on the same line\n");

console.error("an error message");          // goes to stderr
Hello, Node
no newline... ...still on the same line
an error message
Cheat-sheet: which tool when

  • Debugging only? Use console.log / console.table. Real users should never see these.

  • Quick personal script? alert and prompt are fine.

  • Showing content to the user? Modify the DOM — textContent for text, innerHTML only when you trust the source.

  • Building a UI? Use a framework (React, Vue, Svelte) or a small templating helper. Direct DOM manipulation is the foundation; frameworks just make it scale.

  • Server output? console.log and proper logging libraries like pino or winston for production logs.

Bookmark this
Most beginners only ever know `alert` and `console.log`. Learning `console.table`, `console.group`, `console.time` and the difference between `textContent` and `innerHTML` will save you a lot of time as soon as you debug real code.