console.log()
console.log() is JavaScript's primary output function. It prints values to the
developer console - open it with F12 in Chrome, then click the
Console tab.
console.log("Hello, World!"); // string
console.log(42); // number
console.log(true); // boolean
console.log([1, 2, 3]); // array
console.log({ name: "Alice", age: 30 });// object
// Multiple values in one call
console.log("Name:", "Alice", "| Age:", 30);Use backtick template literals to embed variables directly in strings - much cleaner than concatenation with +:
const name = "Alice";
const age = 30;
// Old way (concatenation)
console.log("Name: " + name + ", Age: " + age);
// Modern way (template literal)
console.log(`Name: ${name}, Age: ${age}`);Inline Script Tags
You can write JavaScript directly inside an HTML file using <script> tags.
This is fine for small scripts and learning:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello JS</title>
</head>
<body>
<h1 id="output">Waiting...</h1>
<script>
const message = "Hello, World!";
console.log(message);
document.getElementById("output").textContent = message;
</script>
</body>
</html>External JS Files (Best Practice)
For real projects, keep JavaScript in a separate .js file. Link it in HTML using
the src attribute. Always use defer so the script loads after the HTML is parsed:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My App</title>
<!-- defer: load JS after HTML is parsed -->
<script src="app.js" defer></script>
</head>
<body>
<p id="greeting"></p>
</body>
</html>'use strict';
const hour = new Date().getHours();
let greeting;
if (hour < 12) {
greeting = "Good morning!";
} else if (hour < 18) {
greeting = "Good afternoon!";
} else {
greeting = "Good evening!";
}
document.getElementById("greeting").textContent = greeting;| Attribute | Behavior | Use When |
|---|---|---|
| (none) | Blocks HTML parsing, executes immediately | Avoid |
defer | Downloads in parallel, executes after HTML parsed, in order | Most scripts |
async | Downloads in parallel, executes immediately when ready | Independent scripts (analytics) |
type="module" | ES module - deferred by default, has own scope | Modern JS with import/export |
Run with Node.js
To run JavaScript outside the browser, save it as a .js file and run it with Node.js
from the terminal:
const name = "Developer";
const version = process.version; // Node.js version
console.log(`Hello, ${name}!`);
console.log(`Running Node.js ${version}`);node hello.jsConsole Methods
The console object has more than just log():
console.log("Standard output");
console.info("Informational message");
console.warn("Warning - something might be wrong");
console.error("Error occurred!");
// Print arrays/objects as a table
const users = [
{ name: "Alice", role: "admin" },
{ name: "Bob", role: "editor" },
];
console.table(users);
// Group related logs
console.group("User Details");
console.log("Name: Alice");
console.log("Role: Admin");
console.groupEnd();
// Measure execution time
console.time("loop");
for (let i = 0; i < 1000000; i++) {}
console.timeEnd("loop"); // loop: 2.31msOutput to the DOM
To show output on the actual webpage (not just the console), update the DOM:
// Get an element and set its text
document.getElementById("output").textContent = "Hello from JS!";
// Set HTML (careful with user input - XSS risk)
document.getElementById("output").innerHTML = "<strong>Bold text</strong>";
// Create and append a new element
const para = document.createElement("p");
para.textContent = "Dynamically added paragraph";
document.body.appendChild(para);document.write() is an old method that overwrites the entire page if called after loading. Never use it in modern JavaScript. Use element.textContent or DOM manipulation instead.