05.3 Metody objektu

Výuka

Proč metody?

Metody jsou funkce uložené jako vlastnosti objektu. Umožňují objektům mít chování (actions), ne jen data.

Proč to potřebujeme?

• Zapouzdření - Data a funkce pohromadě
• Chování objektů - Objekty můžou provádět akce
• OOP princip - Objekty = data + metody
• Lepší organizace - Související funkce u souvisejících dat

Představ si to jako: Auto (objekt) má vlastnosti (barva, model, rok) a metody (nastartuj, zabrzdíi, zatroubíš). Metody jsou akce, které auto umí provést.

Jak to funguje?

Metody objektu:
1. Funkce jako vlastnost objektu
2. Syntaxe: obj.methodName()
3. Můžeš přistupovat k objektu přes `this`
4. Zkrácená syntaxe (ES6): methodName() { ... }
5. Arrow funkce NEMAJÍ vlastní this (pozor!)

Klíčové koncepty

• Metoda - funkce jako vlastnost objektu
• this keyword - odkaz na objekt, ze kterého byla metoda volána
• Method shorthand - zkrácená syntaxe: methodName() {}
• Function vs arrow function - arrow funkce nemá vlastní this
• Metody volání - obj.method() vs obj['method']()

JavaScript

Příklad 1: Základní metoda objektu

const person = {
  name: 'Alice',
  age: 25,

  // Metoda (funkce jako vlastnost)
  greet: function() {
    return 'Hello!';
  }
};

// Volání metody
console.log(person.greet());
// → Hello!

// Metoda je funkce
console.log(typeof person.greet);
// → function

// Můžeš přistoupit k metodě bez volání
console.log(person.greet);
// → [Function: greet]

Co se stalo?

• greet: function() { ... } - metoda je funkce jako vlastnost
• Volání: obj.method() - nezapomeň závorky ()
• Bez závorek dostaneš samotnou funkci, ne výsledek

Příklad 2: Method shorthand (zkrácená syntaxe ES6)

const calculator = {
  // Klasická syntaxe
  add: function(a, b) {
    return a + b;
  },

  // Zkrácená syntaxe (ES6) - preferovaná
  subtract(a, b) {
    return a - b;
  },

  multiply(a, b) {
    return a * b;
  },

  divide(a, b) {
    return a / b;
  }
};

console.log(calculator.add(5, 3));
// → 8

console.log(calculator.subtract(10, 4));
// → 6

console.log(calculator.multiply(3, 4));
// → 12

console.log(calculator.divide(20, 5));
// → 4

Co se stalo?

• Method shorthand: methodName() {} místo methodName: function() {}
• Čistší a čitelnější kód
• Preferovaný způsob v moderním JS

Příklad 3: Metody s přístupem k vlastnostem (this)

const car = {
  brand: 'Toyota',
  model: 'Camry',
  year: 2020,

  // Metoda s přístupem k vlastnostem objektu
  getInfo() {
    return `${this.brand} ${this.model} (${this.year})`;
  },

  startEngine() {
    return `${this.brand} motor nastartován!`;
  }
};

console.log(car.getInfo());
// → Toyota Camry (2020)

console.log(car.startEngine());
// → Toyota motor nastartován!

Co se stalo?

• this uvnitř metody odkazuje na objekt, ze kterého byla metoda volána
• this.brand → car.brand
• Metody můžou číst i měnit vlastnosti objektu

Příklad 4: Metody, které mění objekt

const user = {
  name: 'Bob',
  age: 30,
  isActive: false,

  activate() {
    this.isActive = true;
    return `${this.name} byl aktivován`;
  },

  deactivate() {
    this.isActive = false;
    return `${this.name} byl deaktivován`;
  },

  celebrateBirthday() {
    this.age += 1;
    return `${this.name} má teď ${this.age} let!`;
  }
};

console.log(user.isActive);
// → false

console.log(user.activate());
// → Bob byl aktivován

console.log(user.isActive);
// → true

console.log(user.celebrateBirthday());
// → Bob má teď 31 let!

console.log(user.age);
// → 31

Co se stalo?

• Metody můžou měnit stav objektu (vlastnosti)
• this.isActive = true změní vlastnost
• this.age += 1 inkrementuje věk

Příklad 5: Arrow funkce vs normální funkce (POZOR!)

const person1 = {
  name: 'Charlie',

  // Normální funkce - má vlastní this
  greet: function() {
    return `Hi, I'm ${this.name}`;
  }
};

const person2 = {
  name: 'David',

  // Arrow funkce - NEMÁ vlastní this!
  greet: () => {
    return `Hi, I'm ${this.name}`;  // this není person2!
  }
};

console.log(person1.greet());
// → Hi, I'm Charlie ✅

console.log(person2.greet());
// → Hi, I'm undefined ❌

// Arrow funkce má this z okolního scope (často window/global)

Co se stalo?

• Normální funkce má vlastní this (= objekt, ze kterého byla volána)
• Arrow funkce NEMÁ vlastní this - použije this z okolního scope
• NEPOUŽÍVEJ arrow funkce jako metody, pokud potřebuješ this!

Příklad 6: Vnořené metody a objekty

const company = {
  name: 'TechCorp',
  employees: ['Alice', 'Bob', 'Charlie'],

  getEmployeeCount() {
    return this.employees.length;
  },

  addEmployee(name) {
    this.employees.push(name);
    return `${name} přidán. Celkem zaměstnanců: ${this.getEmployeeCount()}`;
  },

  listEmployees() {
    return this.employees.join(', ');
  },

  // Vnořený objekt s vlastními metodami
  hr: {
    department: 'HR',

    getDepartmentInfo() {
      return `Oddělení: ${this.department}`;
    }
  }
};

console.log(company.getEmployeeCount());
// → 3

console.log(company.addEmployee('David'));
// → David přidán. Celkem zaměstnanců: 4

console.log(company.listEmployees());
// → Alice, Bob, Charlie, David

// Metody můžou volat jiné metody
console.log(company.hr.getDepartmentInfo());
// → Oddělení: HR

Co se stalo?

• Metody můžou volat jiné metody objektu: this.getEmployeeCount()
• Metody můžou pracovat s poli a dalšími datovými strukturami
• Vnořené objekty můžou mít vlastní metody

TypeScript

TypeScript přidává typovou kontrolu metod (parametry, návratové typy).

Stejné příklady s typy

// Interface s metodami
interface Person {
  name: string;
  age: number;
  greet(): string;  // Metoda bez parametrů, vrací string
  celebrateBirthday(): void;  // Metoda bez návratové hodnoty
}

const person: Person = {
  name: 'Alice',
  age: 25,

  greet() {
    return `Hi, I'm ${this.name}`;
  },

  celebrateBirthday() {
    this.age += 1;
    console.log(`${this.name} má teď ${this.age} let!`);
  }
};

// Typová kontrola návratové hodnoty
const greeting: string = person.greet();  // ✅ OK
// const greeting: number = person.greet();  // ❌ Error: Type 'string' is not assignable to type 'number'

// Calculator s typy
interface Calculator {
  add(a: number, b: number): number;
  subtract(a: number, b: number): number;
  multiply(a: number, b: number): number;
  divide(a: number, b: number): number;
}

const calculator: Calculator = {
  add(a, b) {
    return a + b;
  },

  subtract(a, b) {
    return a - b;
  },

  multiply(a, b) {
    return a * b;
  },

  divide(a, b) {
    if (b === 0) {
      throw new Error('Dělení nulou!');
    }
    return a / b;
  }
};

const result: number = calculator.add(5, 3);  // ✅ OK
// calculator.add('5', '3');  // ❌ Error: Argument of type 'string' is not assignable to parameter of type 'number'

// Metody s volitelným parametrem
interface User {
  name: string;
  greet(formal?: boolean): string;
}

const user: User = {
  name: 'Bob',

  greet(formal = false) {
    if (formal) {
      return `Good day, my name is ${this.name}`;
    }
    return `Hi, I'm ${this.name}`;
  }
};

console.log(user.greet());  // → Hi, I'm Bob
console.log(user.greet(true));  // → Good day, my name is Bob

// Type alias s metodami
type Car = {
  brand: string;
  model: string;
  year: number;
  getInfo(): string;
  startEngine(): void;
};

const car: Car = {
  brand: 'Toyota',
  model: 'Camry',
  year: 2020,

  getInfo() {
    return `${this.brand} ${this.model} (${this.year})`;
  },

  startEngine() {
    console.log(`${this.brand} motor nastartován!`);
  }
};

// Generic metody
interface Container<T> {
  value: T;
  getValue(): T;
  setValue(newValue: T): void;
}

const stringContainer: Container<string> = {
  value: 'Hello',

  getValue() {
    return this.value;
  },

  setValue(newValue) {
    this.value = newValue;
  }
};

const val: string = stringContainer.getValue();  // ✅ type string

TypeScript přidává:

• ✅ Typovou kontrolu parametrů - metody musí dostat správný typ
• ✅ Typovou kontrolu návratových hodnot - metody musí vrátit správný typ
• ✅ Autocomplete - IDE ti napovídá metody a parametry
• ✅ Volitelné parametry - param?: type
• ✅ Generické metody - pro typovou flexibilitu

Rozdíl JS vs TS

JavaScript:

• Metody fungují bez typové kontroly
• Můžeš volat metodu s jakýmikoliv parametry
• Flexibilnější, ale nebezpečnější

TypeScript:

• Metody mají definované typy parametrů a návratové hodnoty
• TypeScript zkontroluje, že voláš metody správně
• Bezpečnější, prevence chyb

// JavaScript - projde, ale může způsobit problémy
const calc = {
  add(a, b) {
    return a + b;
  }
};

console.log(calc.add(5, '3'));  // → '53' (string concatenation!)

// TypeScript - kontrola typů
interface Calculator {
  add(a: number, b: number): number;
}

const calc: Calculator = {
  add(a, b) {
    return a + b;
  }
};

console.log(calc.add(5, 3));  // ✅ OK → 8
// console.log(calc.add(5, '3'));  // ❌ Error: Argument of type 'string' is not assignable to parameter of type 'number'

Tip

💡 Používej method shorthand pro čistší kód:

// ❌ Dlouhý způsob
const obj = {
  method: function() {
    return 'result';
  }
};

// ✅ Zkrácený způsob
const obj = {
  method() {
    return 'result';
  }
};

💡 NEPOUŽÍVEJ arrow funkce jako metody:

// ❌ Arrow funkce nemá vlastní this
const person = {
  name: 'Alice',
  greet: () => {
    return `Hi, I'm ${this.name}`;  // this není person!
  }
};

// ✅ Používej normální funkce nebo method shorthand
const person = {
  name: 'Alice',
  greet() {
    return `Hi, I'm ${this.name}`;
  }
};

💡 Definuj návratové typy metod v TypeScript:

// ✅ Jasné typy - lepší autocomplete a error checking
interface User {
  name: string;
  age: number;
  greet(): string;
  celebrateBirthday(): void;
}