05.1 Vytvoření objektu

Výuka

Proč objekty?

Objekt je základní datová struktura v JavaScriptu pro seskupování souvisejících dat a funkcionalit. Místo desítek samostatných proměnných můžeš vše uložit do jednoho logického celku.

Proč to potřebujeme?

• Organizace kódu - Seskupit související data dohromady
• Modelování reality - Reprezentovat věci ze skutečného světa (uživatel, produkt, auto)
• Struktura dat - Klíč-hodnota páry pro snadný přístup
• Encapsulation - Data a funkce (metody) pohromadě

Představ si to jako: Složka s dokumenty. Místo rozházených papírů (jednotlivé proměnné) máš vše pěkně ve složce (objekt) s označenými kartami (klíče/properties).

Jak to funguje?

Objekt:
1. Kontejner pro pojmenované hodnoty (properties)
2. Syntaxe: { klíč: hodnota, klíč2: hodnota2 }
3. Klíče jsou stringy (nebo symboly)
4. Hodnoty můžou být jakýkoliv typ (čísla, stringy, pole, funkce, objekty)
5. Přístup přes tečku (obj.key) nebo závorky (obj['key'])

Klíčové koncepty

• Object literal - způsob vytvoření objektu: {}
• Properties (vlastnosti) - pojmenované hodnoty v objektu
• Key-value páry - klíč (název) a hodnota
• Dot notation - přístup přes tečku: obj.name
• Bracket notation - přístup přes závorky: obj['name']
• Object constructor - alternativní způsob: new Object()

JavaScript

Příklad 1: Základní object literal

// Vytvoření objektu
const person = {
  name: 'Alice',
  age: 25,
  city: 'Praha'
};

console.log(person);
// → { name: 'Alice', age: 25, city: 'Praha' }

// Přístup k vlastnostem (dot notation)
console.log(person.name);
// → Alice

console.log(person.age);
// → 25

Co se stalo?

• { } vytvoří nový objekt
• name: 'Alice' - klíč name má hodnotu 'Alice'
• Oddělujeme čárkami
• Přístup přes tečku: person.name

Příklad 2: Prázdný objekt a přidávání vlastností

// Prázdný objekt
const car = {};
console.log(car);
// → {}

// Přidání vlastností
car.brand = 'Toyota';
car.model = 'Camry';
car.year = 2020;

console.log(car);
// → { brand: 'Toyota', model: 'Camry', year: 2020 }

// Můžeš přidat i později
car.color = 'red';
console.log(car.color);
// → red

Co se stalo?

• {} vytvoří prázdný objekt
• car.brand = 'Toyota' přidá vlastnost brand
• Můžeš přidávat vlastnosti kdykoliv

Příklad 3: Různé typy hodnot v objektu

const user = {
  name: 'Bob',           // string
  age: 30,               // number
  active: true,          // boolean
  hobbies: ['čtení', 'sport'],  // pole
  address: {             // vnořený objekt
    city: 'Brno',
    zip: '60200'
  }
};

console.log(user.name);
// → Bob

console.log(user.hobbies[0]);
// → čtení

console.log(user.address.city);
// → Brno

Co se stalo?

• Hodnoty můžou být jakýkoliv typ
• Můžeš vnořit pole nebo jiné objekty
• Přístup přes tečku můžeš řetězit: user.address.city

Příklad 4: Bracket notation (závorková notace)

const person = {
  name: 'Alice',
  age: 25,
  'full name': 'Alice Johnson'  // Klíč s mezerou
};

// Bracket notation
const key = 'name';
console.log(person[key]);
// → Alice (přístup přes proměnnou)

// Klíč s mezerou
console.log(person['full name']);
// → Alice Johnson (dot notation by nefungovalo)

// Dynamický přístup
const fields = ['name', 'age'];
fields.forEach(field => {
  console.log(`${field}: ${person[field]}`);
});
// → name: Alice
// → age: 25

Co se stalo?

• Bracket notation: obj['key']
• Užitečná pro dynamické klíče (hodnota v proměnné)
• Pro klíče s mezerami nebo speciálními znaky
• Můžeš použít výrazy: obj[1 + 2]

Příklad 5: Object constructor (alternativní způsob)

// Pomocí new Object()
const person1 = new Object();
person1.name = 'Charlie';
person1.age = 35;

console.log(person1);
// → { name: 'Charlie', age: 35 }

// Object literal (preferovaný způsob)
const person2 = {
  name: 'David',
  age: 40
};

console.log(person2);
// → { name: 'David', age: 40 }

// Jsou ekvivalentní
console.log(typeof person1);  // → object
console.log(typeof person2);  // → object

Co se stalo?

• new Object() vytvoří prázdný objekt
• Object literal {} je preferovaný - kratší a čitelnější
• Oba způsoby jsou funkční, ale literal je standardní

Příklad 6: Zkrácená syntaxe (property shorthand)

const name = 'Eve';
const age = 28;
const city = 'Ostrava';

// Dlouhý způsob
const person1 = {
  name: name,
  age: age,
  city: city
};

// Zkrácená syntaxe (ES6+)
const person2 = {
  name,
  age,
  city
};

console.log(person2);
// → { name: 'Eve', age: 28, city: 'Ostrava' }

// Můžeš kombinovat
const person3 = {
  name,  // zkrácená
  age,   // zkrácená
  country: 'ČR'  // normální
};

console.log(person3);
// → { name: 'Eve', age: 28, country: 'ČR' }

Co se stalo?

• Property shorthand: { name } místo { name: name }
• Použije se název proměnné jako klíč
• Čistší kód, méně opakování

TypeScript

TypeScript přidává typovou kontrolu objektů pomocí interface nebo type.

Stejné příklady s typy

// Interface pro objekt
interface Person {
  name: string;
  age: number;
  city: string;
}

// Objekt s typem
const person: Person = {
  name: 'Alice',
  age: 25,
  city: 'Praha'
};

// TypeScript zkontroluje, že objekt odpovídá interface
// const invalid: Person = {
//   name: 'Bob',
//   age: 'thirty'  // ❌ Error: Type 'string' is not assignable to type 'number'
// };

// Chybějící vlastnost
// const incomplete: Person = {
//   name: 'Charlie'
//   // ❌ Error: Property 'age' is missing
// };

// Volitelné vlastnosti
interface User {
  name: string;
  age: number;
  email?: string;  // volitelná (? znamená optional)
}

const user1: User = {
  name: 'David',
  age: 30
  // email není povinný
};

const user2: User = {
  name: 'Eve',
  age: 28,
  email: 'eve@example.com'
};

// Type alias (alternativa k interface)
type Car = {
  brand: string;
  model: string;
  year?: number;
};

const car: Car = {
  brand: 'Toyota',
  model: 'Camry'
};

// Vnořené objekty
interface Address {
  city: string;
  zip: string;
}

interface UserWithAddress {
  name: string;
  age: number;
  address: Address;  // vnořený objekt
}

const userWithAddress: UserWithAddress = {
  name: 'Frank',
  age: 35,
  address: {
    city: 'Brno',
    zip: '60200'
  }
};

// Inline typ (bez interface)
const product: { name: string; price: number } = {
  name: 'Laptop',
  price: 25000
};

TypeScript přidává:

• ✅ Typovou kontrolu - nemůžeš přiřadit špatný typ
• ✅ Autocomplete - IDE ti napovídá vlastnosti
• ✅ Volitelné vlastnosti - ? pro optional properties
• ✅ Prevenci chyb - upozorní na chybějící nebo přebývající vlastnosti

Rozdíl JS vs TS

JavaScript:

• Objekty fungují bez typové kontroly
• Můžeš přidat jakoukoliv vlastnost kdykoliv
• Flexibilnější, ale nebezpečnější

TypeScript:

• Objekty mají definovanou strukturu (interface/type)
• TypeScript zkontroluje, že objekt odpovídá typu
• Bezpečnější, prevence chyb

// JavaScript - projde, ale může způsobit problémy
const person = {
  name: 'Alice',
  age: 25
};
person.address = 'Praha';  // OK, přidá vlastnost

// TypeScript - kontrola
interface Person {
  name: string;
  age: number;
}

const person: Person = {
  name: 'Alice',
  age: 25
};
// person.address = 'Praha';  // ❌ Error: Property 'address' does not exist on type 'Person'

// Musíš rozšířit interface nebo použít jiný typ

Tip

💡 Preferuj object literal {} místo new Object():

// ❌ Zbytečně složité
const obj = new Object();
obj.name = 'Alice';

// ✅ Jednodušší a čistší
const obj = {
  name: 'Alice'
};

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

const name = 'Bob';
const age = 30;

// ❌ Opakování
const person = {
  name: name,
  age: age
};

// ✅ Zkrácená syntaxe
const person = {
  name,
  age
};

💡 Používej TypeScript interface pro jasné struktury:

// ✅ Definuj strukturu objektu
interface User {
  name: string;
  age: number;
  email?: string;
}

// Teď máš autocomplete a typovou kontrolu
const user: User = {
  name: 'Alice',
  age: 25
};