1.15 Console metody

Výuka

Console API je nástroj pro debugging a logování v JavaScriptu. Výstupy vidíš v Developer Tools prohlížeče nebo v terminálu (Node.js).

Základní metody

JavaScript

// Základní logování
console.log('Hello, World!');
console.log('Hodnota:', 42);
console.log('Více hodnot:', 1, 2, 3);

// Objekty a pole
const user = { name: 'Jan', age: 25 };
console.log(user);           // Vypíše objekt
console.log('User:', user);  // S popiskem

// Template literals
const name = 'Jan';
console.log(`Uživatel: ${name}`);

// Různé úrovně
console.info('Informace');    // ℹ️ Modrá
console.warn('Varování');     // ⚠️ Žlutá
console.error('Chyba!');      // ❌ Červená

// Formátování
console.log('%c Stylovaný text', 'color: blue; font-size: 20px');

// Tabulka (super užitečné!)
const users = [
  { id: 1, name: 'Jan', age: 25 },
  { id: 2, name: 'Petra', age: 30 },
  { id: 3, name: 'Karel', age: 28 }
];
console.table(users);

// Seskupování
console.group('User Details');
console.log('Name:', 'Jan');
console.log('Age:', 25);
console.groupEnd();

// Sbalené seskupení
console.groupCollapsed('Debug Info');
console.log('Detail 1');
console.log('Detail 2');
console.groupEnd();

// Měření času
console.time('Operation');
// ... nějaký kód ...
for (let i = 0; i < 1000000; i++) {}
console.timeEnd('Operation');  // Operation: 3.2ms

// Počítadlo
console.count('Counter');  // Counter: 1
console.count('Counter');  // Counter: 2
console.count('Counter');  // Counter: 3
console.countReset('Counter');

// Assert - loguje jen když je podmínka false
console.assert(2 + 2 === 4, 'Matematika funguje');  // Nic
console.assert(2 + 2 === 5, 'Chyba v matematice!'); // Vypíše error

// Stack trace
function a() { b(); }
function b() { c(); }
function c() { console.trace('Stack'); }
a();  // Ukáže call stack

// Vyčištění konzole
console.clear();

TypeScript

// Console API je stejné jako v JavaScriptu
console.log('TypeScript log');

// S typy
interface User {
  id: number;
  name: string;
  age: number;
}

const user: User = { id: 1, name: 'Jan', age: 25 };
console.log(user);

// Typová bezpečnost při logování
const value: string | number = 'hello';
console.log(value.toString());  // ✅ Bezpečné

// Debug complex types
type Status = 'pending' | 'success' | 'error';
const status: Status = 'pending';
console.log('Status:', status);

// Table s typovanými daty
const users: User[] = [
  { id: 1, name: 'Jan', age: 25 },
  { id: 2, name: 'Petra', age: 30 }
];
console.table(users);

// Custom logger s typy
class Logger {
  static log(message: string, data?: unknown): void {
    console.log(`[LOG] ${message}`, data ?? '');
  }

  static error(message: string, error?: Error): void {
    console.error(`[ERROR] ${message}`, error);
  }
}

Logger.log('Application started');
Logger.error('Failed to load', new Error('Network error'));

Rozdíl JS vs TS

JavaScript:

• Console API dostupné globálně
• Žádná typová kontrola argumentů
• Vše funguje stejně v Node.js i prohlížeči

TypeScript:

• Stejné API, ale s typovou kontrolou
• TypeScript definice pro autocomplete
• Můžeš vytvořit typované wrapper funkce

// TS poskytuje lepší autocomplete
console.  // IDE nabídne všechny metody

// Můžeš vytvořit type-safe logger
function logUser(user: User): void {
  console.log('User:', user.name, 'Age:', user.age);
}

V obou jazycích platí:

• Console výstupy NEPAT ŘÍ do produkce (odstraň před deploy)
• Použij linting rules pro odstranění console.log

Tip

💡 Použij console.table() pro data:

// ❌ Těžko čitelné
console.log(users);

// ✅ Přehledná tabulka
console.table(users);

💡 Destrukturování při logování:

const user = { id: 1, name: 'Jan', age: 25 };

// ❌ Nevidíš název proměnné
console.log(user);

// ✅ Vidíš název i hodnotu
console.log({ user });

💡 Conditional logging (development only):

const isDev = process.env.NODE_ENV === 'development';

if (isDev) {
  console.log('Debug info');
}

// Nebo vytvořit helper
const log = (...args) => isDev && console.log(...args);
log('Only in dev');

💡 Odstranění console.log před produkcí:

// ESLint pravidlo:
// "no-console": ["error", { "allow": ["warn", "error"] }]

// Nebo build tool (Vite, Webpack) automaticky odstraní