JS Output

JavaScript Output: Displaying Data Safely

JavaScript has no built-in print statement, so it outputs data through browser APIs and the developer console. You can log values with console.log(), update page elements with textContent, or show alerts with window.alert().

Four Ways to Output Data in JavaScript

Choose the output method that matches whether you are debugging code or showing information to a user:

• console.log(): Prints values, objects, and arrays into browser DevTools or the Node.js terminal for debugging.
• element.textContent: Inserts plain text into an HTML element safely without parsing HTML tags.
• element.innerHTML: Parses and renders an HTML string inside an element, which requires trusted input.
• window.alert(): Opens a blocking browser popup box, which pauses script execution until the user clicks OK.

Practical Output Example

The example below writes structured debug logs to the console and safely updates a status element on the page.

const order = { id: 1042, total: 49.5, currency: "USD" };

// Debug values in the console
console.log("Order loaded:", order);
console.table([order]);

// Update DOM text safely
const outputBox = document.getElementById("receipt");
if (outputBox) {
  outputBox.textContent = `Order #${order.id}: $${order.total.toFixed(2)}`;
}

Why Avoid document.write()

Older tutorials show document.write() for quick output. Calling document.write() after the page finishes loading deletes the entire HTML document and replaces it with plain text. Modern browsers also throttle or block it on slow connections.

Common Mistakes to Avoid

• Using innerHTML with user input: Rendering raw user strings with innerHTML creates Cross-Site Scripting (XSS) security holes. Always prefer textContent for plain text.
• Leaving alert() in production: Modal alerts interrupt the user and freeze all scripts on the tab.
• Logging objects after mutation: console.log(obj) in browsers may expand the latest object state later; log a copy like console.log({ ...obj }) when tracking changes.

Frequently Asked Questions

What is the fastest way to check a variable value in JavaScript?

Use console.log({ myVar }) inside your code and inspect the Console tab in browser DevTools. Wrapping the variable in curly braces prints both its name and value.

What is the difference between textContent and innerHTML?

textContent treats every character as literal text, so <p>Hi</p> displays those exact angle brackets. innerHTML parses the string as real HTML markup and builds child elements.

Does console.log() work outside the browser?

Yes, runtimes like Node.js, Deno, and Bun print console.log() output directly to your terminal standard output stream.