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

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

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

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

Контент

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

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

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

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

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

**`Object.entries()`, це вбудований метод JavaScript, який повертає масив пар `[ключ, значення]` для всіх власних (не успадкованих) перелічуваних властивостей об'єкта.** Він об'єднує те, що окремо дають `Object.keys()` і `Object.values()`, і тому є основним інструментом для перебору об'єкта.

## Теорія

### TL;DR

- Повертає **масив масивів**, де кожен внутрішній масив, це `[ключ, значення]`.
- Тільки **власні** і тільки **перелічувані** (enumerable) властивості.
- Порядок збігається з `Object.keys()` та `Object.values()`.
- Ключ у парі завжди рядок, значення зберігає свій тип.
- Ідеально лягає на `for...of` з деструктуризацією: `for (const [key, value] of ...)`.
- Зворотне перетворення: `Object.fromEntries()`. Конвертація в `Map`: `new Map(Object.entries(obj))`.

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

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

console.log(Object.entries(user));
```

Результат:

```javascript
[
  ['name', 'Maria'],
  ['age', 25],
  ['city', 'Kyiv']
]
```

Кожна пара `[ключ, значення]`, це один елемент підсумкового масиву.

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

```javascript
Object.entries(obj)
```

- `obj`, об'єкт, властивості якого потрібно перетворити на пари.
- Повертає **масив масивів**, де кожен внутрішній масив, це `[key, value]`.

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

1. Повертає **тільки власні** властивості:

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

console.log(Object.entries(user)); // [['name', 'Maria']]
   ```

2. Повертає **тільки перелічувані** властивості (`enumerable: true`):

```javascript
   const obj = {};
   Object.defineProperty(obj, 'hidden', { value: 42, enumerable: false });
   obj.visible = 10;

console.log(Object.entries(obj)); // [['visible', 10]]
   ```

3. Порядок збігається з `Object.keys()` і `Object.values()`: спочатку цілочисельні ключі за зростанням, потім решта в порядку додавання.

Символьні ключі метод не повертає, як і два його сусіди.

### Перебір об'єкта

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

for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}
```

Виведе:

```javascript
name: Maria
age: 25
```

Це найчитабельніший спосіб пройтися по об'єкту: на відміну від `for...in`, тут не потрібна перевірка на успадковані властивості, бо їх у масиві просто немає. Так само зручно фільтрувати та перетворювати об'єкт:

```javascript
const prices = { apples: 120, bread: 45, milk: 80 };

const expensive = Object.entries(prices)
  .filter(([, price]) => price > 50)
  .map(([name]) => name);

console.log(expensive); // ['apples', 'milk']
```

### Перетворення об'єкта на Map

```javascript
const user = { name: 'Maria', age: 25 };
const userMap = new Map(Object.entries(user));

console.log(userMap.get('age')); // 25
```

`Object.entries()` зручно використовувати для конвертації між `Object` і `Map`, бо конструктор `Map` приймає саме масив пар. У зворотний бік працює `Object.fromEntries(map)`.

### Зворотне перетворення: Object.fromEntries

```javascript
const entries = [
  ['name', 'Maria'],
  ['age', 25]
];

const user = Object.fromEntries(entries);
console.log(user); // { name: 'Maria', age: 25 }
```

Пара `entries` плюс `fromEntries` дає стандартний прийом «перебрати об'єкт і зібрати новий»:

```javascript
const raw = { name: ' Maria ', city: ' Kyiv ' };

const trimmed = Object.fromEntries(
  Object.entries(raw).map(([key, value]) => [key, value.trim()])
);

console.log(trimmed); // { name: 'Maria', city: 'Kyiv' }
```

### Підсумок по трьох методах

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

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

- **Забувати про дужки в деструктуризації.** Правильно `for (const [key, value] of Object.entries(obj))`, а не `for (const key, value of ...)`.
- **Очікувати об'єкт на виході.** Метод повертає масив; щоб отримати назад об'єкт, потрібен `Object.fromEntries()`.
- **Розраховувати на успадковані властивості.** Того, що лежить у прототипі, у результаті не буде, як і неперелічуваних та символьних ключів.
- **Вважати ключ числом.** Ключ у парі завжди рядок: `Object.entries({ 1: 'a' })` поверне `[['1', 'a']]`.
- **Використовувати на великих об'єктах у гарячому коді.** Метод створює новий масив і масив на кожну пару, тому в циклі, що виконується часто, дешевше пройтися по `Object.keys()`.
- **Плутати з `entries()` у масивів.** `array.entries()` повертає ітератор пар `[індекс, значення]`, а не масив.

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

Для рев’юера

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

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