05.9 Object.keys/values/entries

Výuka

Proč Object metody?

Object.keys(), Object.values(), Object.entries() jsou utility metody pro iteraci přes objekty. Převedou objekt na pole, se kterým můžeš dále pracovat.

Proč to potřebujeme?

• Iterace přes objekt - Procházej klíče, hodnoty nebo páry
• Převod na pole - Použij map, filter, reduce na objektech
• Zpracování dat - Transformuj a filtruj vlastnosti objektu
• Lepší než for...in - Žádné zděděné vlastnosti z prototypu

Představ si to jako: Inventuru ve skladu. Object.keys() ti dá seznam všech políček (klíčů), Object.values() ti dá seznam všeho zboží (hodnot), Object.entries() ti dá páry (políčko + zboží).

Jak to funguje?

Object metody:
1. Object.keys(obj) → pole klíčů ['key1', 'key2', ...]
2. Object.values(obj) → pole hodnot [value1, value2, ...]
3. Object.entries(obj) → pole párů [['key1', value1], ['key2', value2], ...]
4. Vrací JEN vlastní vlastnosti (ne z prototypu)
5. Vrací JEN enumerable vlastnosti

Klíčové koncepty

• Object.keys() - vrací pole klíčů
• Object.values() - vrací pole hodnot
• Object.entries() - vrací pole párů [klíč, hodnota]
• Enumerable vlastnosti - jen ty, které se zobrazují v for...in
• Vlastní vlastnosti - ne zděděné z prototypu
• Object.fromEntries() - opačná operace (pole → objekt)

JavaScript

Příklad 1: Object.keys() - pole klíčů

const person = {
  name: 'Alice',
  age: 25,
  city: 'Praha'
};

// Získej klíče jako pole
const keys = Object.keys(person);
console.log(keys);
// → ['name', 'age', 'city']

// Iterace přes klíče
keys.forEach(key => {
  console.log(`${key}: ${person[key]}`);
});
// → name: Alice
// → age: 25
// → city: Praha

// Počet vlastností
console.log(keys.length);
// → 3

// Kontrola existence klíče
console.log(keys.includes('name'));
// → true

Co se stalo?

• Object.keys(obj) vrací pole klíčů (stringů)
• Můžeš iterovat, filtrovat, mapovat
• Vrací jen vlastní enumerable vlastnosti

Příklad 2: Object.values() - pole hodnot

const product = {
  name: 'Laptop',
  price: 25000,
  stock: 10,
  available: true
};

// Získej hodnoty jako pole
const values = Object.values(product);
console.log(values);
// → ['Laptop', 25000, 10, true]

// Zpracování hodnot
const numbers = Object.values(product).filter(v => typeof v === 'number');
console.log(numbers);
// → [25000, 10]

// Suma číselných hodnot
const total = Object.values(product)
  .filter(v => typeof v === 'number')
  .reduce((sum, num) => sum + num, 0);
console.log(total);
// → 25010

Co se stalo?

• Object.values(obj) vrací pole hodnot
• Můžeš použít Array metody (filter, map, reduce)
• Užitečné pro zpracování dat

Příklad 3: Object.entries() - pole párů [klíč, hodnota]

const user = {
  name: 'Bob',
  age: 30,
  city: 'Brno'
};

// Získej páry [klíč, hodnota]
const entries = Object.entries(user);
console.log(entries);
// → [['name', 'Bob'], ['age', 30], ['city', 'Brno']]

// Iterace přes páry (destructuring)
for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}
// → name: Bob
// → age: 30
// → city: Brno

// Praktické použití - transformace
const transformed = Object.entries(user).map(([key, value]) => {
  return `${key.toUpperCase()}: ${value}`;
});
console.log(transformed);
// → ['NAME: Bob', 'AGE: 30', 'CITY: Brno']

Co se stalo?

• Object.entries(obj) vrací pole párů [[klíč, hodnota], ...]
• Perfektní pro for...of s destructuringem
• Užitečné pro transformaci objektů

Příklad 4: Filtrace a mapování objektů

const prices = {
  apple: 20,
  banana: 15,
  cherry: 50,
  durian: 100
};

// Filtruj vlastnosti - jen levné ovoce
const cheapFruit = Object.entries(prices)
  .filter(([name, price]) => price < 30)
  .map(([name, price]) => name);

console.log(cheapFruit);
// → ['apple', 'banana']

// Vytvoř nový objekt se slevou 20%
const discounted = Object.fromEntries(
  Object.entries(prices).map(([name, price]) => {
    return [name, price * 0.8];
  })
);

console.log(discounted);
// → { apple: 16, banana: 12, cherry: 40, durian: 80 }

// Filtruj a vytvoř nový objekt
const expensive = Object.fromEntries(
  Object.entries(prices).filter(([name, price]) => price >= 50)
);

console.log(expensive);
// → { cherry: 50, durian: 100 }

Co se stalo?

• Kombinace entries + filter/map - transformuj objekty
• Object.fromEntries() - převod pole párů zpět na objekt
• Funkční přístup k manipulaci s objekty

Příklad 5: Object.fromEntries() - pole → objekt

// Z pole párů vytvoř objekt
const entries = [
  ['name', 'Charlie'],
  ['age', 35],
  ['city', 'Ostrava']
];

const person = Object.fromEntries(entries);
console.log(person);
// → { name: 'Charlie', age: 35, city: 'Ostrava' }

// Praktické použití - Map → Object
const map = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);

const obj = Object.fromEntries(map);
console.log(obj);
// → { a: 1, b: 2, c: 3 }

// URL query string → Object
const params = new URLSearchParams('name=David&age=40&city=Praha');
const query = Object.fromEntries(params);
console.log(query);
// → { name: 'David', age: '40', city: 'Praha' }

Co se stalo?

• Object.fromEntries(entries) - opačná operace k Object.entries()
• Vytvoří objekt z pole párů
• Užitečné pro Map → Object, URLSearchParams → Object

Příklad 6: Porovnání s for...in

const person = {
  name: 'Eve',
  age: 28
};

// for...in - starý způsob (nebezpečný!)
console.log('for...in:');
for (const key in person) {
  if (person.hasOwnProperty(key)) {  // Nutná kontrola!
    console.log(`${key}: ${person[key]}`);
  }
}

// Object.keys - moderní způsob (bezpečný!)
console.log('Object.keys:');
Object.keys(person).forEach(key => {
  console.log(`${key}: ${person[key]}`);
});

// Object.entries - nejčistší (preferovaný!)
console.log('Object.entries:');
for (const [key, value] of Object.entries(person)) {
  console.log(`${key}: ${value}`);
}

// Všechny tři dají stejný výsledek:
// → name: Eve
// → age: 28

Co se stalo?

• for...in - iteruje i přes zděděné vlastnosti (nebezpečné!)
• Object.keys/values/entries - jen vlastní vlastnosti (bezpečné!)
• Preferuj Object metody místo for...in

TypeScript

TypeScript přidává typovou kontrolu Object metod.

Stejné příklady s typy

// Interface pro objekt
interface User {
  name: string;
  age: number;
  email: string;
}

const user: User = {
  name: 'Alice',
  age: 25,
  email: 'alice@example.com'
};

// Object.keys - TypeScript ví, že vrací string[]
const keys: string[] = Object.keys(user);
// keys: string[] (ne keyof User - historický důvod)

// Object.values - TypeScript inferuje union type
const values: (string | number)[] = Object.values(user);
// values: (string | number)[]

// Object.entries - TypeScript inferuje páry
const entries: [string, string | number][] = Object.entries(user);
// entries: [string, string | number][]

// Typově bezpečná iterace
for (const [key, value] of Object.entries(user)) {
  // key: string
  // value: string | number
  console.log(`${key}: ${value}`);
}

// keyof pro typově bezpečný přístup
function getValue<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const name: string = getValue(user, 'name');  // ✅ OK
const age: number = getValue(user, 'age');    // ✅ OK
// getValue(user, 'invalid');  // ❌ Error: Argument of type '"invalid"' is not assignable to parameter of type 'keyof User'

// Transformace s typy
type PriceMap = Record<string, number>;

const prices: PriceMap = {
  apple: 20,
  banana: 15,
  cherry: 50
};

const discounted: PriceMap = Object.fromEntries(
  Object.entries(prices).map(([name, price]) => [name, price * 0.8])
);

// Generic funkce pro filtraci objektu
function filterObject<T extends Record<string, any>>(
  obj: T,
  predicate: (value: T[keyof T]) => boolean
): Partial<T> {
  return Object.fromEntries(
    Object.entries(obj).filter(([key, value]) => predicate(value))
  ) as Partial<T>;
}

const cheapFruit = filterObject(prices, price => price < 30);
// cheapFruit: Partial<PriceMap>

TypeScript přidává:

• ✅ Typovou kontrolu - TypeScript inferuje typy výsledků
• ✅ keyof operator - typově bezpečný přístup ke klíčům
• ✅ Record<K, V> - typ pro objekty s definovanými klíči a hodnotami
• ✅ Prevenci chyb - upozorní na neexistující klíče

Rozdíl JS vs TS

JavaScript:

• Object metody fungují bez typové kontroly
• Můžeš omylem přistoupit k neexistujícímu klíči
• Flexibilnější, ale nebezpečnější

TypeScript:

• TypeScript inferuje typy výsledků
• keyof pro typově bezpečný přístup
• Bezpečnější, prevence chyb

// JavaScript - může způsobit problémy
const keys = Object.keys(user);
keys.forEach(key => {
  console.log(user[key].toUpperCase());  // Runtime error pokud hodnota není string!
});

// TypeScript - kontrola typů
const entries = Object.entries(user);
entries.forEach(([key, value]) => {
  if (typeof value === 'string') {
    console.log(value.toUpperCase());  // ✅ OK - type guard
  }
});

Tip

💡 Preferuj Object.entries() pro iteraci:

// ❌ for...in - nebezpečné (zděděné vlastnosti)
for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(obj[key]);
  }
}

// ✅ Object.entries - bezpečné a čisté
for (const [key, value] of Object.entries(obj)) {
  console.log(value);
}

💡 Používej Object.fromEntries pro transformaci:

// ✅ Transformuj objekt funkčně
const doubled = Object.fromEntries(
  Object.entries(prices).map(([key, price]) => [key, price * 2])
);

// ✅ Filtruj objekt
const filtered = Object.fromEntries(
  Object.entries(obj).filter(([key, value]) => value > 10)
);

💡 Object.keys().length pro počet vlastností:

// ✅ Počet vlastností
const count = Object.keys(user).length;

// ✅ Kontrola, zda je objekt prázdný
const isEmpty = Object.keys(obj).length === 0;