TechLead
Lesson 11 of 16

Input and Output (I/O)

Read input and display output to the user.

Quick Summary

I/O connects your program to the outside world. In browsers you might use prompt, alerts, or the DOM, while in Node.js you read from stdin and write to stdout with console methods. Understanding I/O is essential for building interactive programs.

What is I/O?

Input/Output (I/O) is how your program communicates with the outside world:

  • Input: Data coming INTO your program (keyboard, files, API)
  • Output: Data going OUT of your program (screen, files, network)

Browser I/O

Output to Console:

console.log("Regular message");
console.warn("Warning message");
console.error("Error message");
console.table([{a: 1}, {a: 2}]); // Formatted table

User Prompts (simple but limited):

// Get text input
const name = prompt("What's your name?");

// Show message
alert("Hello, " + name);

// Yes/No confirmation
const confirmed = confirm("Are you sure?");

DOM Manipulation (real web apps):

// Output to page
document.getElementById("output").textContent = "Hello!";

// Get input from form
const input = document.getElementById("nameInput").value;

Node.js I/O

Output:

console.log("Output to terminal");
process.stdout.write("No newline");

Input (readline module):

const readline = require('readline');
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

rl.question("What's your name? ", (answer) => {
  console.log("Hello, " + answer);
  rl.close();
});

File I/O (Node.js)

const fs = require('fs');

// Read file
const data = fs.readFileSync('file.txt', 'utf8');

// Write file
fs.writeFileSync('output.txt', 'Hello, World!');

Formatting Output

// Template literals for complex strings
const user = { name: "Alice", score: 95 };
console.log(`User ${user.name} scored ${user.score}%`);

// JSON for data
console.log(JSON.stringify(user, null, 2));

Try It Yourself

Here's a practical example you can try. Copy this code and run it in your browser's console (press F12 to open developer tools) or in the Code Playground.

// Console output (works everywhere)
console.log("Hello, World!");
console.log("User:", { name: "Alice", age: 30 });

// Formatted output with template literals
const product = "Coffee";
const price = 4.99;
console.log(`${product} costs $${price.toFixed(2)}`);

// Browser: Simple user input
const userName = prompt("What is your name?");
if (userName) {
  alert("Welcome, " + userName + "!");
}

// Browser: Yes/No question
const wantsCookies = confirm("Accept cookies?");
console.log("Accepted:", wantsCookies);

// Console methods for debugging
console.warn("This is a warning");
console.error("This is an error");
console.table([
  { name: "Alice", age: 30 },
  { name: "Bob", age: 25 }
]);

// Output JSON data (useful for debugging)
const data = { users: ["Alice", "Bob"], count: 2 };
console.log(JSON.stringify(data, null, 2));
/*
{
  "users": ["Alice", "Bob"],
  "count": 2
}
*/

Key Takeaways

  • Read input and display output to the user.
  • Practice with real code examples to solidify your understanding
  • This concept builds the foundation for more advanced topics

Related Learning Resources

Continue your programming journey with these related tutorials: