Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Метод Object.keys()». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**`Object.keys()`, це вбудований метод JavaScript, який повертає масив усіх власних (не успадкованих) імен властивостей об'єкта у вигляді рядків.** Це найпростіший спосіб перетворити об'єкт на масив, який далі можна перебрати, відфільтрувати або порахувати.

## Теорія

### TL;DR

- Повертає **масив рядків** з іменами властивостей.
- Тільки **власні** властивості, успадковані через `prototype` не враховуються.
- Тільки **перелічувані** (enumerable) властивості, ключі з `enumerable: false` не потрапляють у результат.
- Символьні ключі (`Symbol`) метод теж пропускає, для них є `Object.getOwnPropertySymbols()`.
- Порядок: спочатку цілочисельні ключі за зростанням, далі решта в порядку додавання.
- Працює в парі з `Object.values()` та `Object.entries()`.

### Швидкий приклад

```javascript
const user = {
  name: 'Maria',
  age: 25,
  city: 'Kyiv'
};

console.log(Object.keys(user));
// ['name', 'age', 'city']
```

Усі власні перелічувані ключі об'єкта повертаються одним масивом.

### Синтаксис

```javascript
Object.keys(obj)
```

- `obj`, об'єкт, з якого потрібно отримати список ключів.
- Повертає **масив рядків**.

Для порожнього об'єкта результат теж порожній:

```javascript
console.log(Object.keys({})); // []
console.log(Object.keys({}).length); // 0
```

Саме на цьому будують найпоширенішу перевірку «чи порожній об'єкт»: `Object.keys(obj).length === 0`.

### Які властивості потрапляють у результат

1. **Тільки «власні» властивості**, не ті, що успадковані через `prototype`:

```javascript
   const person = { species: 'human' };
   const user = Object.create(person);
   user.name = 'Maria';

console.log(Object.keys(user)); // ['name']
   ```

Ключ `species` живе у прототипі, тому в масив він не входить, хоча `'species' in user` поверне `true`.

2. **Тільки перелічувані властивості.** Якщо властивість створена з `enumerable: false`, у списку її не буде:

```javascript
   const config = {};
   Object.defineProperty(config, 'secret', {
     value: 42,
     enumerable: false
   });
   config.visible = 1;

console.log(Object.keys(config)); // ['visible']
   ```

3. **Символьні ключі не враховуються.** Для них є окремий метод:

```javascript
   const id = Symbol('id');
   const user = { name: 'Maria', [id]: 1 };

console.log(Object.keys(user));                  // ['name']
   console.log(Object.getOwnPropertySymbols(user)); // [Symbol(id)]
   ```

### Порядок ключів

Для звичайних рядкових ключів порядок збігається з порядком їх додавання в об'єкт:

```javascript
const o = {};
o.b = 1;
o.a = 2;

console.log(Object.keys(o)); // ['b', 'a']
```

Виняток, це ключі, схожі на цілі числа: вони завжди йдуть першими і сортуються за зростанням.

```javascript
const mixed = { b: 1, 2: 'two', a: 3, 1: 'one' };

console.log(Object.keys(mixed)); // ['1', '2', 'b', 'a']
```

Зверніть увагу: числові ключі повертаються як **рядки**, бо ключі звичайного об'єкта завжди рядкові.

### Сусідні методи: Object.values і Object.entries

Отримати список значень:

```javascript
const user = { name: 'Maria', age: 25, city: 'Kyiv' };

Object.values(user); // ['Maria', 25, 'Kyiv']
```

Отримати масив пар ключ-значення:

```javascript
Object.entries(user);
// [['name', 'Maria'], ['age', 25], ['city', 'Kyiv']]
```

Усі три методи мають однакові правила відбору: власні перелічувані нессимвольні властивості.

| Метод | Повертає | Враховує прототип | Тип даних |
| --- | --- | --- | --- |
| `Object.keys(obj)` | список **ключів** об'єкта | Ні | `Array` рядків |
| `Object.values(obj)` | список значень | Ні | `Array` |
| `Object.entries(obj)` | масив пар `[ключ, значення]` | Ні | `Array` масивів |

### Перебір ключів на практиці

```javascript
const user = { name: 'Maria', age: 25, city: 'Kyiv' };

Object.keys(user).forEach(key => {
  console.log(`${key}: ${user[key]}`);
});
```

Вивід:

```javascript
name: Maria
age: 25
city: Kyiv
```

Оскільки результат, це звичайний масив, до нього застосовні всі методи масивів:

```javascript
// скільки всього властивостей
Object.keys(user).length; // 3

// відібрати тільки рядкові значення
Object.keys(user).filter(key => typeof user[key] === 'string'); // ['name', 'city']
```

### Типові помилки

- **Очікувати успадковані властивості.** `Object.keys()` не показує нічого з прототипу. Якщо потрібні й успадковані ключі, беріть цикл `for...in` або оператор `in`.
- **Плутати з `for...in`.** Цикл `for...in` перебирає і власні, і успадковані перелічувані властивості, тому всередині нього часто потрібна перевірка `Object.hasOwn(obj, key)`. У `Object.keys()` така перевірка вже вбудована.
- **Шукати в результаті символьні або неперелічувані ключі.** Їх там не буде ніколи, для повного списку рядкових ключів є `Object.getOwnPropertyNames()`.
- **Розраховувати на суворий порядок додавання.** Цілочисельні ключі завжди піднімаються нагору і сортуються за зростанням, тому для гарантованого порядку беріть `Map` або масив.
- **Забувати, що ключі, це рядки.** `Object.keys({ 1: 'one' })` поверне `['1']`, а не `[1]`, тому порівняння з числом провалиться.
- **Передавати `null` або `undefined`.** `Object.keys(null)` кине `TypeError`. Примітиви від ES2015 не кидають помилку, але дають майже завжди порожній масив: `Object.keys(42)` поверне `[]`.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати678 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.