# Перебирання обʼєкта

Об'єкт - це неітерабельна сутність і його не можна перебрати циклами <mark style="background-color:red;">for</mark> або <mark style="background-color:red;">for...of</mark>. Для перебору обʼєктів використовують інші підходи.

## **Цикл** for...in

Цикл <mark style="background-color:red;">for...in</mark> використовують для перебору <mark style="background-color:red;">ключів</mark> об'єкта. Цей цикл дозволяє пройтися по всіх перераховуваних властивостях об'єкта, включаючи його власні властивості та властивості, які знаходяться в ланцюжку прототипів.

```javascript
for (key in object) {
  // інструкції
}
```

На кожній ітерації цього циклу береться ключ однієї властивості. Утім знаючи ключ використовуючи синтаксис квадратних дужок можна отримати і значення властивості.

```javascript
let user = {
  name: "Alex",
  age: 30,
  hobby: ["electronics", "programming", "gym"],
};

for (let key in user) {
  console.log(key); // На кожній ітерації виведе: name, age, hobby
  console.log(user[key]); // На кожній ітерації виведе: "Alex", 30, ["electronics", "programming", "gym"]
}
```

<figure><img src="https://2207544843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnGZ6aKsaRNTtzzpVD8b0%2Fuploads%2FOPdA5VVE1C47Iz4rOKQM%2Ffor-in.png?alt=media&#x26;token=51489f0f-1934-44c4-bd55-2794137575b9" alt="" width="375"><figcaption></figcaption></figure>

## **Метод** Object.create()

Метод <mark style="background-color:red;">Object.create()</mark> використовують для створення нового об'єкта з вказаним прототипом та властивостями.&#x20;

Припустимо у нас є обʼєкт <mark style="background-color:red;">car</mark>, в якому описана властивість кількості коліс - 4. На його основі ми можемо створити  новий обʼєкт <mark style="background-color:red;">myCar</mark>, який у прототипі успадкує властивості обʼєкту <mark style="background-color:red;">car</mark>.

В наступному прикладі обʼєкт <mark style="background-color:red;">myCar</mark> - має властивість <mark style="background-color:red;">model</mark>. Але якщо звернутися до його властивості <mark style="background-color:red;">wheels</mark> - нам покаже 4. Це відбувається тому, що не знайшовши власну таку властивість JavaScript шукатиме таку властивість у прототипі обʼєкта і якщо знайде, то поверне це значення. якщо не знайде, то шукатиме у прототипі прототипа і так далі. Якщо і в прототипах не знайде такої властивості, то поверне <mark style="background-color:red;">undefined</mark>.&#x20;

```javascript
const car = {
  wheels: 4,
};

const myCar = Object.create(car);
myCar.model = "Audi";

console.log("car", car);
console.log("myCar", myCar);
console.log("myCar.wheels", myCar.wheels);
```

<figure><img src="https://2207544843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnGZ6aKsaRNTtzzpVD8b0%2Fuploads%2F0MkcghoILPIbQqsgWToC%2Fproto-wheels.png?alt=media&#x26;token=d8bb1509-6897-4c5b-91c7-5be77e6c10f1" alt="" width="375"><figcaption></figcaption></figure>

Як бачимо, обʼєкт може мати власні властивості, а може мати властивості прототипа.

Якщо потрібно створити об'єкт без додаткових властивостей прототипа. Це може бути корисним в деяких випадках, коли необхідно створити об'єкт без будь-яких унаслідованих властивостей:

```javascript
let emptyObject = Object.create(null);
```

## **Метод** hasOwnProperty()

Давайте вищезазначений обʼєкт myCar спробуємо перебрати циклом <mark style="background-color:red;">for...in</mark>.

```javascript
const car = {
  wheels: 4,
};

const myCar = Object.create(car);
myCar.model = "Audi";

for (let key in myCar) {
  console.log(key); // На кожній ітерації виведе: model, wheels
  console.log(myCar[key]); // На кожній ітерації виведе: "Audi", 4
}
```

<figure><img src="https://2207544843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnGZ6aKsaRNTtzzpVD8b0%2Fuploads%2FDc5GybwiHZ3bcS3frlFG%2Ffor-in-all-propert.png?alt=media&#x26;token=9ffe9b33-3c44-4572-bb28-9c56debb2fa3" alt="" width="375"><figcaption></figcaption></figure>

Як бачимо цикл <mark style="background-color:red;">for...in</mark> перебирає як власні властивості, так і властивості свого прототипу і не бачить між ними різниці. Але у більшості випадків потрібно перебирати саме власні вдастивості обʼєкта.

Щоб дізнатись, чи містить об'єкт власну властивість, використовують метод <mark style="background-color:red;">hasOwnProperty(key)</mark>, який повертає <mark style="background-color:red;">true</mark> або <mark style="background-color:red;">false</mark>.&#x20;

```javascript
const car = {
  wheels: 4,
};

const myCar = Object.create(car);
myCar.model = "Audi";

console.log("Has own property model: ", myCar.hasOwnProperty("model")); //true
console.log("Has own property wheels: ", myCar.hasOwnProperty("wheels")); //false
```

Використовуючи цей метод, щоб вибрати тільки власні властивості обʼєкта - на кожній ітерації потрібно проводити перевірку чи це є власною властивістю.

```javascript
const car = {
  wheels: 4,
};

const myCar = Object.create(car);
myCar.model = "Audi";

for (let key in myCar) {
  if (myCar.hasOwnProperty(key)) {
    console.log(key); // На ітерації виведе: model
    console.log(myCar[key]); // На ітерації виведе: "Audi"
  }
}
```

## **Метод** Object.keys()[**​**](https://textbook.edu.goit.global/javascript-yk5evp/v2/uk/docs/lesson-05/iteration#%D0%BC%D0%B5%D1%82%D0%BE%D0%B4-objectkeys)

Метод <mark style="background-color:red;">Object.keys()</mark> використовують для отримання масиву зі всіма власними перераховуваними властивостями об'єкта, які мають строкові ключі. Цей метод повертає масив із ключами властивостей об'єкта, які можна перерахувати. Якщо власних властивостей нема - повернеться порожній масив.

```javascript
const car = {
  wheels: 4,
};

const myCar = Object.create(car);
myCar.model = "Audi";
myCar.color = "red";

console.log(Object.keys(myCar)); // ['model', 'color']
```

Отримавши масив ключів власних властивостей, тепер можна перебрати обʼєкт використовуючи цикл <mark style="background-color:red;">for...of</mark> не роблячи перевірку чи це власна властивість на кожній ітерації.

```javascript
const car = {
  wheels: 4,
};

const myCar = Object.create(car);
myCar.model = "Audi";
myCar.color = "red";

const keys = Object.keys(myCar);
console.log(keys);

for (const key of keys) {
  console.log(key);
  console.log(myCar[key]);
}
```

## **Метод** Object.values()

Метод <mark style="background-color:red;">Object.values()</mark> використовують для отримання масиву зі всіма значеннями перераховуваних вдасних властивостей об'єкта. Якщо вдастивостей немає, то повернеться порожній массив.

```javascript
const car = {
  wheels: 4,
};

const myCar = Object.create(car);
myCar.model = "Audi";
myCar.color = "red";

const values = Object.values(myCar);
console.log(values); // ['Audi', 'red']
```

Масив значень властивостей також можна перебрати циклом <mark style="background-color:red;">for...of</mark>, наприклад, для отримання загальної суми числових значень.

```javascript
const cars = {
  audi: 3,
  ford: 5,
  bmw: 2,
  toyota: 6,
};

const values = Object.values(cars); //[3, 5, 2, 6]

let total = 0;

for (let value of values) {
  total += value;
}

console.log("total: ", total); // total: 16
```

## **Метод** Object.entries()

Метод <mark style="background-color:red;">Object.entries()</mark> використовують для отримання масиву зі всіма записами (парами ключ-значення) перераховуваних властивостей об'єкта. Цей метод повертає масив, в якому кожен елемент сам є масивом, що містить ключ та відповідне йому значення.

```javascript
const car = {
  wheels: 4,
};

const myCar = Object.create(car);
myCar.model = "Audi";
myCar.color = "red";

const result = Object.entries(myCar);
console.log(result); // [['model', 'Audi'], ['color', 'red']]
```

На практиці метод <mark style="background-color:red;">Object.entries()</mark> використовують рідко, тільки для якихось дуже специфічних завдань.
