README.md

<h1>
  JavaScript <img src="./assets/javascript.svg" width="40" height="40" />
</h1>

<h2>Найпопулярніші запитання та відповіді на співбесіді з JavaScript</h2>

<details>
<summary>1. Що таке JavaScript?</summary>

#### JavaScript

#### Опис JavaScript:

JavaScript - це динамічна, прототипно-орієнтована мова програмування, яка
використовується для створення інтерактивного контенту на вебсторінках. Вона
підтримує подієве програмування, асинхронність і працює в браузері, а також на
сервері через Node.js.

</details>

<details>
<summary>2. Які ключові слова використовуються для оголошення змінних у JavaScript?</summary>

#### JavaScript

#### У JavaScript змінні можна оголошувати за допомогою трьох ключових слів:

1. **`var`**

- Старий спосіб оголошення змінних.
- Область видимості: функціональна (в межах функції, а не блоку).
- Підтримує підняття (hoisting): змінну можна використовувати до оголошення, але
  значення буде undefined.
- Не рекомендується через можливість помилок.

```javascript
var x = 10;
```

2. **`let`**

- Використовується для змінних, які можуть змінювати значення.
- Область видимості: блочна (в межах {}).
- Не дозволяє повторного оголошення в межах однієї області.
- Не піддається підняттю з доступом до значення.

```javascript
let y = 20;
y = 30; // Можна змінити значення
```

3. **`const`**

- Використовується для змінних, значення яких не змінюється.
- Область видимості: блочна.
- Потрібно обов’язково ініціалізувати при оголошенні.
- Якщо змінна є об’єктом або масивом, значення властивостей можна змінювати, але
  саму змінну перевизначити не можна.

```javascript
const z = 40;
// z = 50; // Помилка
```

#### Рекомендації:

- Використовувати `const` для змінних, які не змінюються.
- Використовувати `let` для змінних, які змінюють значення.
- `var` уникати, якщо це не потрібно для специфічної підтримки старих браузерів.

</details>

<details>
<summary>3. Перерахуйте типи даних у JavaScript.</summary>

#### JavaScript

#### Типи даних у JavaScript

1. **Примітивні:**

- `string`
- `number`
- `boolean`
- `null`
- `undefined`
- `bigint`
- `symbol`

2. **Складні:**

- `object` (включаючи масиви, функції, дати тощо).

</details>

<details>
<summary>4. У чому різниця між функціональним (functional) і подієвим (event-driven) програмуванням у JavaScript?</summary>

#### JavaScript

#### Різниця між функціональним та подієвим програмуванням у JavaScript

**Функціональне програмування:**

- Базується на чистих функціях, які не мають побічних ефектів.
- Дані не змінюються, використовується іммутабельність.
- Код пишеться у вигляді композиції функцій (`map`, `reduce`, `filter`).
- Наприклад: обробка даних у масиві через функції вищого порядку.

**Подієве програмування:**

- Реакція на події (`click`, `hover`, `async responses`).
- Використовує слухачі (`event listeners`) та обробники подій (`callbacks`).
- Побудоване на взаємодії з подіями в середовищі (браузері чи Node.js).
- Наприклад: виклик функції при кліку на кнопку.

</details>

<details>
<summary>5. У якому році відбувся перший реліз JavaScript, і в якому браузері він був вперше використаний?</summary>

#### JavaScript

#### Рік першого релізу JavaScript та перший браузер

Перший реліз JavaScript відбувся в 1995 році. Він був вперше реалізований у
браузері Netscape Navigator.

</details>

<details>
<summary>6. Чим відрізняється масив та обʼєкт? У яких випадках що використовуєте?</summary>

#### JavaScript

#### Різниця між масивом та обʼєктом і їх використання в JavaScript

**Масив:**

- Використовується для зберігання впорядкованих елементів.
- Індексовані значення (0, 1, 2, …).
- Підходить для роботи з колекціями даних, де порядок важливий або коли потрібно
  виконувати операції типу сортування.

**Обʼєкт:**

- Використовується для зберігання пар "ключ-значення".
- Доступ до значень через ключі (не індекси).
- Підходить для зберігання даних з різними властивостями або для створення
  складних структур.

**Використання:**

- **Масив:** коли порядок елементів важливий або ви працюєте з колекцією
  однотипних елементів (наприклад, список користувачів).
- **Обʼєкт:** коли потрібно зберігати дані з різними властивостями або
  асоціативні пари (наприклад, профіль користувача з різними атрибутами).

</details>

<details>
<summary>7. Events в JavaScript. Розкажіть про event propagation, bubbling, delegation, preventing тощо.</summary>

#### JavaScript

#### Обробка подій в JavaScript: Propagation, Bubbling, Delegation, Preventing тощо

**Event Propagation** - це процес, при якому подія, що сталася на елементі,
"поширюється" через DOM дерево. Є два основні етапи:

1. **Bubbling** (Спливання): Подія спочатку викликається на найбільш вкладеному
   елементі, потім вона спливає до батьківських елементів (від внутрішнього до
   зовнішнього). Наприклад, якщо клікнути на кнопку всередині контейнера, подія
   спочатку буде оброблятися кнопкою, потім контейнером, і так далі, поки не
   досягне кореневого елемента (document).

2. **Capturing** (Ловлення): Подія спочатку обробляється на найвищому рівні DOM
   дерева (наприклад, document), а потім спускається вниз до цільового елемента.

**Event Delegation** - це техніка обробки подій, коли ви додаєте один обробник
подій на батьківський елемент, а не на кожен окремий дочірній елемент. Це
дозволяє зменшити кількість обробників і є ефективним способом обробки подій на
динамічно створених елементах.

**Preventing Default Behavior** (Запобігання стандартній поведінці):

- Метод event.preventDefault() дозволяє зупинити стандартну поведінку події.
  Наприклад, можна скасувати перезавантаження сторінки при натисканні на
  посилання або скасувати відправку форми.

**stopPropagation() vs. stopImmediatePropagation():**

- stopPropagation(): Зупиняє подальше поширення події по DOM, але не скасовує
  інші обробники подій на поточному елементі.
- stopImmediatePropagation(): Зупиняє подальше поширення події і скасовує інші
  обробники подій, що могли бути зареєстровані на тому самому елементі.

</details>

<details>
<summary>8. Чи можливо перевизначити const?</summary>

#### JavaScript

#### Перевизначення значення `const`

Ні, значення, оголошене через const, не можна змінити. Це означає, що ви не
можете переназначити змінну, оголошену з const, на нове значення. Однак, якщо
const використовується для оголошення обʼєкта або масиву, ви все ще можете
змінювати його вміст (наприклад, додавати властивості до обʼєкта або елементи до
масиву). Тобто, const гарантує, що сама змінна не може бути переназначена, але
не захищає від змін всередині складних типів даних (масивів, обʼєктів).

</details>

<details>
<summary>9. Чи відомі вам принципи DRY, KISS, YAGNI, SOLID?</summary>

#### JavaScript

#### Принципи DRY, KISS, YAGNI, SOLID

Так, ці принципи широко використовуються в програмуванні для забезпечення
чистого, підтримуваного і ефективного коду.

1. **DRY (Don't Repeat Yourself)** - уникайте дублювання коду. Якщо одна й та
   сама логіка зустрічається в кількох місцях, варто створити спільну функцію
   або метод, щоб зробити код більш зручним для підтримки.

2. **KISS (Keep It Simple, Stupid)** - підтримуйте код простим і зрозумілим.
   Уникайте надмірної складності і зайвих абстракцій. Простота покращує
   підтримуваність і знижує ймовірність помилок.

3. **YAGNI (You Aren't Gonna Need It)** - не додавайте функціональність, яку
   наразі не потрібно. Створювати код тільки для майбутніх можливостей може
   призвести до зайвих витрат часу і складності.

4. **SOLID** - набір принципів для об'єктно-орієнтованого програмування, що
   допомагають створювати гнучкий, зрозумілий і підтримуваний код:

- S (Single Responsibility Principle) - кожен клас чи функція має виконувати
  одну задачу.
- O (Open/Closed Principle) - код має бути відкритим для розширення, але
  закритим для модифікації.
- L (Liskov Substitution Principle) - обʼєкти підкласів повинні заміняти обʼєкти
  батьківських класів без порушення роботи програми.
- I (Interface Segregation Principle) - не змушуйте класи реалізовувати
  інтерфейси, які вони не використовують.
- D (Dependency Inversion Principle) - залежності повинні бути від абстракцій, а
  не від конкретних класів.

</details>

<details>
<summary>10. У чому відмінності LocalStorage від SessionStorage?</summary>

#### JavaScript

#### Відмінності між LocalStorage та SessionStorage

**LocalStorage:**

- Зберігає дані без обмежень по часу, дані зберігаються навіть після закриття
  браузера або вкладки.
- Доступні для всіх вкладок і вікон того ж самого домену.
- Обмеження на обсяг - зазвичай 5-10 МБ на домен.
- Дані зберігаються, поки вони не будуть явно видалені.

**SessionStorage:**

- Дані зберігаються тільки в межах однієї сесії (до закриття вкладки або вікна
  браузера).
- Доступні тільки в тій самій вкладці або вікні, в якій були збережені.
- Обсяг схожий на LocalStorage (5-10 МБ).
- Дані видаляються автоматично при закритті вкладки або браузера.

**Основні відмінності:**

- **Тривалість зберігання:** LocalStorage - дані зберігаються постійно,
  SessionStorage - тільки на час сесії.
- **Доступність:** LocalStorage доступний для всіх вкладок, SessionStorage -
  тільки для поточної вкладки.

</details>

<details>
<summary>11. Що таке замикання (closure) в JavaScript і як воно працює?</summary>

#### JavaScript

#### Замикання (closure) в JavaScript та його принцип роботи.

**Замикання (closure)** - це функція, яка "запам'ятовує" оточення, в якому була
створена. Це дозволяє функції доступ до змінних, навіть після того, як зовнішня
функція, в якій вона була оголошена, завершила своє виконання.

**Як це працює:**

- **Оточення:** Кожна функція в JavaScript має доступ до змінних, які
  знаходяться в її власному оточенні (локальні змінні), а також до змінних, які
  були доступні в оточенні, де функція була створена.
- **Замикання:** Коли функція всередині іншої функції повертається або
  передається, вона все ще має доступ до змінних оточення, навіть якщо зовнішня
  функція вже завершила виконання.

**Приклад:**

```javascript
function outer() {
  let counter = 0; // локальна змінна зовнішньої функції

  return function inner() {
    // внутрішня функція
    counter++; // доступ до змінної outer()
    console.log(counter);
  };
}

const increment = outer(); // викликаємо outer, що повертає функцію inner
increment(); // виведе 1
increment(); // виведе 2
```

</details>

<details>
<summary>12. Що таке Кукі (cookies) і як вони працюють в JavaScript?</summary>

#### JavaScript

#### Кукі (cookies) в JavaScript: як вони працюють і для чого використовуються.

Кукі (cookies) - це невеликі фрагменти даних, які вебсайт зберігає в браузері
користувача. Вони використовуються для зберігання інформації, яка може бути
використана для ідентифікації користувача, збереження налаштувань,
відслідковування сесій тощо.

**Як працюють кукі в JavaScript:**

1.  **Зчитування кукі:** Веб-браузер автоматично додає всі кукі для поточного
    домену до заголовка запиту, і JavaScript може отримати їх через
    document.cookie.

    ```javascript
    const cookies = document.cookie;
    console.log(cookies); // виведе всі кукі у вигляді рядка
    ```

2.  **Запис кукі:** Кукі встановлюються за допомогою властивості
    document.cookie. Формат для встановлення кукі виглядає так:

    ```javascript
    document.cookie =
      'name=value; expires=Thu, 31 Dec 2025 23:59:59 UTC; path=/';
    ```

    **У цьому прикладі:**

    - "name=value" - це ключ-значення кукі.
    - expires - вказує дату, коли кукі стане неактивним. Якщо не вказано, кукі
      буде тимчасовим і видалиться після закриття браузера.
    - path - визначає, до якого шляху на сайті доступна кукі.

3.  **Видалення кукі:** Щоб видалити кукі, потрібно встановити її термін
    придатності в минуле:

    ```javascript
    document.cookie = 'name=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/';
    ```

**Особливості:**

- Термін дії: Кукі можуть бути тимчасовими або мати встановлений термін дії.
- Обмеження на розмір: Кожна кукі може зберігати до 4 КБ даних, і браузер
  зберігає до 20 кукі на домен.
- Обмеження на доступність: Кукі можуть бути доступні лише на тому домені і
  підкаталозі, де вони були встановлені.
- Безпека: Кукі можуть бути позначені як Secure (щоб передавались лише через
  HTTPS) і HttpOnly (щоб вони не були доступні через JavaScript).

**Використання кукі:**

- Ідентифікація користувача (наприклад, для збереження сесій).
- Збереження налаштувань користувача (темна/світла тема, мова сайту).
- Відслідковування статистики (аналітика).
- Кукі є важливим інструментом для взаємодії між клієнтом і сервером, але їх
  потрібно використовувати обережно через питання конфіденційності та безпеки.

</details>

<details>
<summary>13. Що таке область видимості змінної?</summary>

#### JavaScript

#### Область видимості змінної в JavaScript.

**Область видимості змінної** - це частина коду, в межах якої до змінної можна
отримати доступ. У JavaScript існують три основні типи області видимості:

1. **Глобальна область видимості (Global Scope):**

- Змінна доступна у всьому коді.
- Змінні, оголошені поза будь-якими функціями або блоками, автоматично стають
  глобальними.
- Глобальні змінні створюються з використанням ключових слів var, let, const,
  або без них (хоча останнє - погана практика).

```javascript
var globalVar = 'I am global'; // доступна у всьому коді

function test() {
  console.log(globalVar); // доступ до глобальної змінної
}
test();
```

2. **Функціональна область видимості (Function Scope):**

- Змінні, оголошені всередині функції з використанням var, доступні лише в межах
  цієї функції.
- Ця область видимості застосовується лише до var. Змінні let і const
  підкоряються блочній області видимості.

```javascript
function test() {
  var localVar = 'I am local';
  console.log(localVar); // доступна всередині функції
}
test();
console.log(localVar); // помилка: localVar не визначена
```

3. **Блочна область видимості (Block Scope):**

- Змінні, оголошені з використанням let або const, доступні тільки всередині
  блоку {}.
- Не застосовується до змінних, оголошених через var.

```javascript
{
  let blockVar = 'I am block scoped';
  const blockConst = 'I am also block scoped';
  console.log(blockVar); // доступна
}
console.log(blockVar); // помилка: blockVar не визначена
```

**Вкладені області видимості:**

- Внутрішня область може отримати доступ до змінних з зовнішньої області, але не
  навпаки.

```javascript
function outer() {
  let outerVar = 'outer';
  function inner() {
    console.log(outerVar); // доступ до змінної зовнішньої функції
  }
  inner();
}
outer();
```

**Hoisting (Підняття):**

- У JavaScript змінні, оголошені через var, "піднімаються" на початок своєї
  області видимості, але без ініціалізації.

- Змінні, оголошені через let і const, також піднімаються, але недоступні до
  моменту їхньої ініціалізації (це називається "Temporal Dead Zone").

```javascript
console.log(a); // undefined
var a = 10;

console.log(b); // помилка
let b = 20;
```

</details>

<details>
<summary>14. Що таке анонімна функція (anonymous function)?</summary>

#### JavaScript

#### Анонімна функція в JavaScript.

Анонімна функція - це функція, яка не має імені. Вона часто використовується
там, де функцію потрібно створити швидко і немає необхідності використовувати її
повторно.

**Приклади анонімних функцій у JavaScript:**

1. **Функція як аргумент:** Анонімні функції часто передаються як аргументи до
   інших функцій (наприклад, у методах `map`, `filter`, `forEach`).

   ```javascript
   const numbers = [1, 2, 3];
   const doubled = numbers.map(function (num) {
     return num * 2;
   });
   console.log(doubled); // [2, 4, 6]
   ```

2. **Функціональний вираз:** Анонімна функція може бути присвоєна змінній.

   ```javascript
   const greet = function () {
     console.log('Hello');
   };
   greet(); // Hello
   ```

3. **Самовиконувана функція (IIFE):** Анонімна функція може бути негайно
   виконана.

   ```javascript
   (function () {
     console.log('I am an IIFE');
   })();
   ```

4. **У стрілкових функціях:** Стрілкові функції - це синтаксично скорочений
   варіант анонімних функцій.

   ```javascript
   const add = (a, b) => a + b;
   console.log(add(2, 3)); // 5
   ```

**Переваги анонімних функцій:**

- **Короткий синтаксис:** Особливо у випадку однорядкових функцій.
- **Локальність:** Використовуються лише там, де потрібні, що сприяє чистоті
  коду.

**Недоліки:**

- **Немає імені:** Ускладнюється налагодження коду, оскільки у стеку викликів
  такі функції позначаються як `<anonymous>`.
- **Відсутність повторного використання:** Не можна викликати повторно без
збереження в змінну або передачі куди-небудь.
</details>

<details>
<summary>15. Що таке стрілкова функція і як вона відрізняється від звичайної функції?</summary>

#### JavaScript

#### Стрілкова функція в JavaScript.

Стрілкова функція (arrow function) - це скорочений синтаксис для оголошення
функцій у JavaScript, введений в ES6. Вона має компактну форму і поводиться
інакше, ніж звичайна функція, особливо щодо контексту `this`.

**Синтаксис:**

```javascript
const functionName = (param1, param2) => {
  // тіло функції
  return param1 + param2;
};
```

**Приклад однорядкової функції:**

```javascript
const add = (a, b) => a + b; // автоматично повертає результат
console.log(add(2, 3)); // 5
```

**Основні відмінності:**

1.  **Контекст** `this`:

    - У стрілкових функцій немає власного `this`. Вони успадковують `this` із
      зовнішнього оточення.
    - У звичайних функцій `this` залежить від способу виклику (динамічно
      прив'язується).

    ```javascript
    const obj = {
      value: 10,
      regularFunction: function () {
        console.log(this.value); // 10
      },
      arrowFunction: () => {
        console.log(this.value); // undefined (успадковує this із глобального контексту)
      },
    };

    obj.regularFunction();
    obj.arrowFunction();
    ```

2.  **Конструктор:**

    - Стрілкові функції не можуть використовуватися як конструктори.
    - Виклик new зі стрілковою функцією викликає помилку.

    ```javascript
    const Arrow = () => {};
    const Regular = function () {};

    new Arrow(); // Помилка
    new Regular(); // Працює
    ```

3.  **Синтаксис:**

    - Стрілкова функція більш лаконічна, особливо для однорядкових операцій.
    - Звичайна функція може мати більш розгорнутий вигляд, але є універсальною.

    ```javascript
    // Звичайна функція
    function multiply(a, b) {
      return a * b;
    }

    // Стрілкова функція
    const multiplyArrow = (a, b) => a * b;
    ```

4.  `arguments`:

    - У стрілкових функцій немає псевдомасиву `arguments`. Щоб отримати
      аргументи, слід використовувати оператор rest (...).
    - У звичайних функцій є доступ до `arguments`.

    ```javascript
    const regularFunc = function () {
      console.log(arguments); // Псевдомасив
    };

    const arrowFunc = (...args) => {
      console.log(args); // Справжній масив
    };

    regularFunc(1, 2, 3);
    arrowFunc(1, 2, 3);
    ```

5.  **Ключове слово** `super`:

    - Стрілкові функції успадковують `super` із зовнішнього контексту.
    - У звичайних функцій `super` визначається залежно від їх виклику.

**Коли використовувати:**

- Стрілкові функції добре підходять для коротких виразів, обробників подій,
  методів масивів (`map`, `filter`, `reduce`), а також там, де важливе
  збереження контексту `this`.
- Звичайні функції варто використовувати для більш складних сценаріїв, що
  потребують власного `this`, `arguments` або можливості виклику через `new`.

</details>

<details>
<summary>16. Які методи перебору масивів ви знаєте?</summary>

#### JavaScript

#### Методи перебору масивів в JavaScript

Основні методи перебору масивів у JavaScript:

1.  `forEach`

    - Викликає передану функцію для кожного елемента масиву.
    - Нічого не повертає (завжди undefined).

    ```javascript
    const arr = [1, 2, 3];
    arr.forEach(num => console.log(num));
    // Виведе: 1, 2, 3
    ```

2.  `map`

    - Створює новий масив, застосовуючи передану функцію до кожного елемента.
    - Не змінює вихідний масив.

    ```javascript
    const arr = [1, 2, 3];
    const doubled = arr.map(num => num * 2);
    console.log(doubled); // [2, 4, 6]
    ```

3.  `filter`

    - Створює новий масив із елементів, що відповідають умовам функції.

    ```javascript
    const arr = [1, 2, 3, 4];
    const even = arr.filter(num => num % 2 === 0);
    console.log(even); // [2, 4]
    ```

4.  `reduce`

    - Агрегує масив в одне значення, використовуючи функцію та початкове
      значення.

    ```javascript
    const arr = [1, 2, 3];
    const sum = arr.reduce((acc, num) => acc + num, 0);
    console.log(sum); // 6
    ```

5.  `some`

    - Повертає true, якщо хоч один елемент відповідає умові.

    ```javascript
    const arr = [1, 2, 3];
    console.log(arr.some(num => num > 2)); // true
    ```

6.  `every`

    - Повертає true, якщо всі елементи відповідають умові.

    ```javascript
    const arr = [2, 4, 6];
    console.log(arr.every(num => num % 2 === 0)); // true
    ```

7.  `find`

    - Повертає перший елемент, що відповідає умові, або undefined.

    ```javascript
    const arr = [1, 2, 3];
    console.log(arr.find(num => num > 1)); // 2
    ```

8.  `findIndex`

    - Повертає індекс першого елемента, що відповідає умові, або -1.

    ```javascript
    const arr = [1, 2, 3];
    console.log(arr.findIndex(num => num > 1)); // 1
    ```

9.  `flatMap`

    - Поєднує функціональність map і flat. Повертає плоский масив.

    ```javascript
    const arr = [1, 2, 3];
    console.log(arr.flatMap(num => [num, num * 2])); // [1, 2, 2, 4, 3, 6]
    ```

10. `keys`, `values`, `entries`

    - keys: ітератор ключів (індексів).
    - values: ітератор значень.
    - entries: ітератор пар [індекс, значення].

    ```javascript
    const arr = ['a', 'b', 'c'];
    for (let key of arr.keys()) console.log(key); // 0, 1, 2
    for (let value of arr.values()) console.log(value); // 'a', 'b', 'c'
    for (let [index, value] of arr.entries()) console.log(index, value); // 0 'a', 1 'b', 2 'c'
    ```

11. `for...of`

    - Простий синтаксис для ітерації масивів.

    ```javascript
    const arr = [1, 2, 3];
    for (const num of arr) console.log(num);
    // Виведе: 1, 2, 3
    ```

12. `sort`

    - Сортує масив на місці.

    ```javascript
    const arr = [3, 1, 2];
    arr.sort((a, b) => a - b);
    console.log(arr); // [1, 2, 3]
    ```

13. `reverse`

    - Перевертає порядок елементів у масиві.

    ```javascript
    const arr = [1, 2, 3];
    arr.reverse();
    console.log(arr); // [3, 2, 1]
    ```

14. `slice`

    - Повертає копію частини масиву.

    ```javascript
    const arr = [1, 2, 3];
    const subArr = arr.slice(1);
    console.log(subArr); // [2, 3]
    ```

15. `splice`

    - Додає, видаляє або замінює елементи в масиві.

    ```javascript
    const arr = [1, 2, 3];
    arr.splice(1, 1, 4); // Видаляє 1 елемент із позиції 1, додає 4
    console.log(arr); // [1, 4, 3]
    ```

**Вибір методу залежить від задачі:**

- Для фільтрації: `filter`.
- Для перетворення: `map`.
- Для пошуку: `find` / `findIndex`.
- Для ітерації: `forEach` / `for...of`.

</details>

<details>
<summary>17. Що таке JSON і як працювати з ним у JavaScript?</summary>

#### JavaScript

#### JSON та робота з ним у JavaScript

**JSON (JavaScript Object Notation)** - це текстовий формат обміну даними, що
легко читається як людиною, так і комп'ютером. Його використовують для передачі
даних між клієнтом і сервером. Формат базується на синтаксисі об'єктів
JavaScript, але підтримується в багатьох мовах програмування.

**Основні особливості JSON:**

1. **Ключі:**

   - Завжди рядки.
   - Беруться в подвійні лапки ("").

2. **Значення:**

   - Можуть бути: рядками, числами, логічними значеннями, масивами, об'єктами,
     null.
   - Не підтримує функції, undefined, NaN.

Приклад JSON:

```JSON
  {
  "name": "Alice",
  "age": 25,
  "isStudent": false,
  "courses": ["Math", "Physics"],
  "address": { "city": "Kyiv", "zip": "01001" }
  }

```

**Як працювати з JSON у JavaScript?**

1. **Перетворення об'єкта у JSON (`JSON.stringify`)**:

   - Використовується для перетворення JavaScript-об'єкта в JSON-рядок.

   ```javascript
   const user = {
     name: 'Alice',
     age: 25,
     isStudent: false,
   };

   const jsonString = JSON.stringify(user);
   console.log(jsonString);
   // Виведе: '{"name":"Alice","age":25,"isStudent":false}'
   ```

2. **Перетворення JSON у об'єкт (`JSON.parse`)**:

   - Використовується для перетворення JSON-рядка у JavaScript-об'єкт.

   ```javascript
   const jsonString = '{"name":"Alice","age":25,"isStudent":false}';

   const user = JSON.parse(jsonString);
   console.log(user);
   // Виведе: { name: 'Alice', age: 25, isStudent: false }
   ```

**Робота з сервером:**

Передача даних у форматі JSON:

1. Надсилання даних:

   - Використовуйте fetch із JSON.stringify для передачі JSON.

   ```javascript
   const data = { name: 'Alice', age: 25 };

   fetch('https://example.com/api', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(data),
   });
   ```

2. Отримання даних:

   - Використовуйте fetch із JSON.parse для обробки відповіді.

   ```javascript
   fetch('https://example.com/api')
     .then(response => response.json())
     .then(data => console.log(data));
   ```

**Типові помилки:**

1. **Неправильний формат JSON:**

   ```javascript
   const invalidJson = "{ name: 'Alice' }"; // Помилка: ключі та рядки без подвійних лапок
   JSON.parse(invalidJson); // Викине помилку
   ```

2. **Перетворення циклічного об'єкта:**

   ```javascript
   const obj = {};
   obj.self = obj;
   JSON.stringify(obj); // Викине помилку: Converting circular structure to JSON
   ```

**Застосування JSON:**

- Обмін даними між клієнтом і сервером.
- Збереження налаштувань у файлах чи локальному сховищі.
- API для роботи з веб-сервісами.

</details>

<details>
<summary>18. Як виконується асинхронний код у JavaScript?</summary>

#### JavaScript

#### Асинхронне виконання коду в JavaScript

Асинхронний код у JavaScript виконується за допомогою подій, колбеків, промісів
і `async/await`. Виконання базується на подійному циклі (Event Loop), що
дозволяє обробляти асинхронні задачі поза основним потоком виконання.

**Механізми асинхронного виконання:**

1. **Події та Колбеки**

- Код виконується, коли завершується асинхронна операція (наприклад, таймер,
  запит до сервера).
- Колбек-функції викликаються після завершення операції.

```javascript
setTimeout(() => {
  console.log('Асинхронно через 1 секунду');
}, 1000);
console.log('Цей код виконається першим');
// Виведе:
// Цей код виконається першим
// Асинхронно через 1 секунду
```

2. **Проміси (`Promises`)**

   - `Promise` представляє операцію, яка виконується асинхронно та може
     завершитися успішно або з помилкою.
   - Має методи `.then` і `.catch` для обробки результату.

   ```javascript
   const promise = new Promise((resolve, reject) => {
     setTimeout(() => resolve('Дані отримано'), 1000);
   });

   promise
     .then(data => console.log(data)) // Виведе: Дані отримано
     .catch(err => console.error(err));
   ```

3. `async/await`

   - Синтаксичний цукор для роботи з промісами.
   - Дозволяє писати асинхронний код так, ніби він синхронний.

   ```javascript
   const fetchData = async () => {
     try {
       const response = await fetch(
         'https://jsonplaceholder.typicode.com/posts/1'
       );
       const data = await response.json();
       console.log(data);
     } catch (error) {
       console.error('Помилка:', error);
     }
   };

   fetchData();
   ```

**Ключові поняття:**

1. **Event Loop (Цикл подій):**

- Основний механізм, що дозволяє виконувати асинхронний код.
- Розподіляє задачі між:

  - **Call Stack** (стек викликів): виконує синхронний код.
  - **Task Queue** (черга задач): для колбеків від `setTimeout`, DOM-подій.
  - **Microtask Queue**: для промісів та `async/await`.

2. **Microtasks vs. Macrotasks**:

- Microtasks (вищий пріоритет): Promise.then, MutationObserver.
- Macrotasks: setTimeout, setInterval, I/O, події DOM.

```javascript
console.log('Початок');

setTimeout(() => console.log('Macrotask'), 0);

Promise.resolve().then(() => console.log('Microtask'));

console.log('Кінець');

// Виведе:
// Початок
// Кінець
// Microtask
// Macrotask
```

**Приклади:**

1. **Асинхронний ланцюжок:**

   ```javascript
   fetch('https://jsonplaceholder.typicode.com/posts/1')
     .then(response => response.json())
     .then(data => console.log(data))
     .catch(err => console.error('Помилка:', err));
   ```

2. **Паралельне виконання:**

   ```javascript
   const promise1 = fetch('https://jsonplaceholder.typicode.com/posts/1');
   const promise2 = fetch('https://jsonplaceholder.typicode.com/posts/2');

   Promise.all([promise1, promise2])
     .then(responses => Promise.all(responses.map(r => r.json())))
     .then(data => console.log(data));
   ```

Асинхронний код дозволяє виконувати тривалі операції без блокування головного
потоку.

</details>

<details>
<summary>19. Що таке Event Loop (Цикл подій)?</summary>

#### JavaScript

#### Цикл подій (Event Loop) в JavaScript

**Event Loop** - це механізм в JavaScript, який відповідає за обробку
асинхронних операцій.

#### Він працює так:

1. **Call Stack (Стек викликів):** Зберігає функції, які виконуються.
2. **Task Queue (Черга завдань):** Містить асинхронні колбеки (наприклад,
   setTimeout), готові до виконання.
3. **Microtask Queue (Черга мікрозавдань):** Містить мікрозавдання, як-от
   Promise або MutationObserver.

**Процес:**

Якщо Call Stack порожній, Event Loop бере завдання з Microtask Queue
(пріоритетно) або Task Queue й переміщує їх у Call Stack для виконання.

</details>

<details>
<summary>20. Що таке Call Stack (Стек викликів)?</summary>

#### JavaScript

#### Стек викликів (Call Stack) в JavaScript

- **Call Stack** - це структура даних, яка працює за принципом LIFO (Last In,
  First Out) і використовується для відстеження виконання функцій у JavaScript.

  - Коли викликається функція, вона додається до вершини стеку.
  - Коли функція завершується, вона видаляється зі стеку.
  - Якщо функція викликає іншу функцію, та додається до стеку поверх
    попередньої.

- **Call Stack** обробляє тільки синхронний код. Якщо стек переповнюється
  (наприклад, через рекурсію без базового випадку), це спричиняє помилку
  RangeError: `Maximum call stack size exceeded`.

</details>

<details>
<summary>21. Що таке Task Queue (Черга завдань)?</summary>

#### JavaScript

#### Черга завдань

- **Task Queue** - це черга, яка зберігає асинхронні завдання, готові до
  виконання, наприклад, колбеки з `setTimeout`, `setInterval`, або події DOM.

- Коли **Call Stack** порожній, **Event Loop** бере завдання з **Task Queue** і
  додає його до стеку викликів для виконання.

- **Task Queue** має нижчий пріоритет порівняно з **Microtask Queue**, тому
  мікрозавдання (наприклад, з `Promises`) обробляються першими, навіть якщо в
  **Task Queue** вже є готові завдання.

</details>

<details>
<summary>22. Що таке Microtask Queue (Черга мікрозавдань)?</summary>

#### JavaScript

- **Microtask Queue** - це черга для завдань з високим пріоритетом, наприклад:

  - Колбеки з `Promise` (наприклад, `.then`, `.catch`, `.finally`).
  - Завдання з `MutationObserver`.

- Після виконання кожної операції в **Call Stack**, **Event Loop** перевіряє
  **Microtask Queue** і виконує всі мікрозавдання, перш ніж перейти до **Task
  Queue**.

- Це забезпечує швидку обробку мікрозавдань і робить їх пріоритетними над
  звичайними асинхронними завданнями.

</details>

<details>
<summary>23. Як ви працюєте з асинхронним кодом у JavaScript без використання async/await? Які інші підходи ви розглядаєте для роботи з асинхронністю?</summary>

#### JavaScript

#### Без `async/await` асинхронний код у JavaScript можна обробляти такими підходами:

1. **Callbacks (Колбеки):**

   - Передача функції як аргумент для обробки результату.

   - Мінус: створює "callback hell", ускладнюючи читабельність.

   ```javascript
   setTimeout(() => {
     console.log('Дані завантажені');
   }, 1000);
   ```

2. **Promises:**

   - Використання then, catch, finally для обробки асинхронності.

   - Більш читабельний, ніж колбеки, але може бути громіздким для складних
     сценаріїв.

   ```javascript
   fetch('/api/data')
     .then(response => response.json())
     .then(data => console.log(data))
     .catch(error => console.error(error));
   ```

3. **Event Listeners (Слухачі подій):**

   - Реагування на асинхронні події через обробники, наприклад,
     addEventListener.

   - Використовується для роботи з DOM чи подіями введення користувача.

   ```javascript
   button.addEventListener('click', () => {
     console.log('Кнопка натиснута');
   });
   ```

4. **RxJS (Reactive Extensions):**

   - Використання бібліотеки для роботи з потоками даних через об'єкти
     Observable.

   - Підходить для складних асинхронних сценаріїв, як-от обробка кількох подій
     одночасно.

   ```javascript
   const observable = from(fetch('/api/data'));
   observable.subscribe({
     next: response => console.log(response),
     error: err => console.error(err),
   });
   ```

</details>

<details>
<summary>24. Яка різниця між нестрогим порівнянням == та строгим порівнянням === у JavaScript?</summary>

#### JavaScript

#### В JavaScript `==` і `===` відрізняються способом порівняння:

1. `==` (Нестроге порівняння): Виконує приведення типів (type coercion), тому
   значення можуть бути різних типів.

```javascript
'5' == 5; // true
false == 0; // true
null == undefined; // true
```

2. `===` (Строге порівняння): Порівнює без приведення типів. Значення повинні
   бути одного типу.

   ```javascript
   '5' === 5; // false
   false === 0; // false
   null === undefined; // false
   ```

#### Коротко:

- Використовуйте `===`§, щоб уникнути неочікуваних результатів через приведення
  типів.
- `==` підходить лише у випадках, коли ви точно розумієте, як працює приведення.

</details>

<details>
<summary>25. Що таке прототип у JavaScript?</summary>

#### JavaScript

#### Прототип у JavaScript - це механізм, за допомогою якого об'єкти можуть успадковувати властивості та методи від інших об'єктів.

#### Як це працює:

1. Кожен об'єкт має внутрішнє посилання на свій прототип, яке називається
   `[[Prototype]]`.

2. Прототипом об'єкта може бути інший об'єкт або `null`.

3. Коли ви намагаєтесь отримати доступ до властивості або методу об'єкта,
   JavaScript шукає їх у цьому об'єкті. Якщо не знаходить, переходить до
   прототипу й так далі в ланцюжку прототипів (prototype chain).

#### Приклад:

```javascript
function Person(name) {
  this.name = name;
}

Person.prototype.greet = function () {
  console.log(`Привіт, я ${this.name}`);
};

const user = new Person('Іван');
user.greet(); // Привіт, я Іван
```

- `Person.prototype` - це прототип для всіх об'єктів, створених через `Person`.
- Метод `greet` доступний об'єкту `user` через його прототип.

#### Прототипне наслідування:

```javascript
const animal = {
  eat() {
    console.log('Їм');
  },
};

const dog = Object.create(animal);
dog.bark = function () {
  console.log('Гав!');
};

dog.eat(); // Їм (успадковано з animal)
dog.bark(); // Гав!
```

#### Ключові моменти:

- Прототипи - це основа роботи з об'єктами у JavaScript.
- Ланцюжок прототипів завершується `null`.
- `Object.getPrototypeOf(obj)` дозволяє отримати прототип об'єкта.

</details>

<details>
<summary>26. У чому різниця між null та undefined?</summary>

#### JavaScript

#### різниця між null та undefined

`null` і `undefined` - це два різні типи даних в JavaScript, які обидва
означають "відсутність значення", але вони використовуються в різних контекстах.

1. `null`:

   - Це спеціальний об'єкт у JavaScript, що означає "відсутність значення" або
     "порожній об'єкт".

   - Його зазвичай використовують, щоб явно вказати на відсутність значення або
     на відсутність об'єкта.

   - Ініціалізується вручну.

   ```javascript
   let user = null; // явно вказано, що значення відсутнє
   ```

2. `undefined`:

   - Це примітивний тип в JavaScript, що означає, що змінна була оголошена, але
     їй не було присвоєно значення.
   - Змінні без значення автоматично мають тип undefined.
   - Також використовується як значення за умовчанням для неініціалізованих
     параметрів функцій.

   ```javascript
   let user;
   console.log(user); // undefined

   function test(a) {
     console.log(a); // undefined, якщо параметр не передано
   }
   test();
   ```

#### Основні відмінності:

- `null` - це об'єкт, явно призначений для вказівки на відсутність значення.
- `undefined` - це значення, яке присвоюється змінній, коли їй не було надано
  значення або коли параметр функції не переданий.

#### Порівняння:

- `null` == `undefined` - **true** (при порівнянні з == вони вважаються рівними
  через приведення типів).
- `null` === `undefined` - **false** (при строгому порівнянні вони не однакові,
  бо мають різні типи).

</details>

<details>
<summary>27. Що таке контекст? Як можна змінювати контекст виконання функції?</summary>

#### JavaScript

#### Контекст

**Контекст виконання** (execution context) - це середовище, в якому виконується
JavaScript-код. Контекст визначає, які змінні, функції та об'єкти доступні в
процесі виконання.

#### Існує кілька видів контексту:

1. **Глобальний контекст:** Це початковий контекст, в якому запускається код (в
   браузері - це глобальний об'єкт window).

2. **Контекст функції:** Кожен виклик функції створює новий контекст виконання,
   що дозволяє доступ до змінних і параметрів функції.

3. **Контекст об'єкта:** Коли функція викликається як метод об'єкта, контекстом
   є цей об'єкт.

#### Як змінювати контекст виконання функції?

1. `this` - це ключовий елемент контексту. Він вказує на об'єкт, що є контекстом
   виконання.

2. Методи для зміни контексту:

   - `call()`: Викликає функцію з конкретним контекстом.

   ```javascript
   function greet() {
     console.log(`Привіт, ${this.name}`);
   }

   const person = { name: 'Іван' };
   greet.call(person); // Привіт, Іван
   ```

   - `apply()`: Теж викликає функцію з певним контекстом, але аргументи
     передаються у вигляді масиву.

   ```javascript
   function sum(a, b) {
     console.log(this.name, a + b);
   }

   const person = { name: 'Оля' };
   sum.apply(person, [2, 3]); // Оля 5
   ```

   - `bind()`: Створює нову функцію з прив'язаним контекстом, яку можна
     викликати пізніше.

   ```javascript
   function show() {
     console.log(this.name);
   }

   const person = { name: 'Петро' };
   const showPerson = show.bind(person);
   showPerson(); // Петро
   ```

#### Пояснення:

- `call()` та `apply()` викликають функцію одразу з визначеним контекстом.
- `bind()` створює нову функцію, яка завжди має певний контекст, що може бути
  викликана пізніше.

Зміна контексту важлива, коли потрібно працювати з методами, які викликаються в
різних обставинах, або при роботі з колбеками та асинхронним кодом.

</details>

<details>
<summary>28. Що таке Promise? У яких випадках ви ним користуєтеся?</summary>

#### JavaScript

#### Promise

`Promise`- це об'єкт, який представляє результат асинхронної операції, яка може
бути завершена або з успіхом, або з помилкою. Promise дозволяє працювати з
асинхронним кодом більш зручним способом, ніж через колбеки.

#### Структура:

- **Pending** - стан, коли операція ще не завершена.
- **Resolved** (Fulfilled) - стан, коли операція успішно завершена.
- **Rejected** - стан, коли операція завершена з помилкою.

#### Приклад створення:

```javascript
let promise = new Promise((resolve, reject) => {
  let success = true;

  if (success) {
    resolve('Операція успішна');
  } else {
    reject('Щось пішло не так');
  }
});

promise
  .then(result => console.log(result)) // Обробка успіху
  .catch(error => console.log(error)); // Обробка помилки
```

#### Переваги:

- **Читабельність:** Ланцюжок `.then()` дозволяє більш зручно обробляти
  асинхронні операції.
- **Помилки:** Легше обробляти помилки через `.catch()`.
- **Кілька операцій:** Легко працювати з кількома асинхронними задачами
  одночасно через `Promise.all()` або `Promise.race()`.

Promise робить асинхронний код більш структурованим і менш громіздким порівняно
з використанням колбеків.

</details>

<details>
<summary>29. Які особливості об’єктноорієнтованого програмування у JavaScript?</summary>

#### JavaScript

#### ООП

Об'єктноорієнтоване програмування (ООП) у JavaScript має кілька особливостей,
оскільки мова не є класично об'єктноорієнтованою, як, наприклад, Java або C#.
Однак вона підтримує об'єктноорієнтовані концепції через механізм прототипів і з
введенням класів у `ES6`. Ось основні особливості ООП у JavaScript:

1. **Прототипне наслідування (Prototype-based Inheritance):**

   - JavaScript використовує прототипне наслідування, а не класове. Кожен об'єкт
     може мати прототип, який є іншим об'єктом, і успадковує від нього
     властивості та методи.

   - Коли ви звертаєтеся до властивості об'єкта, JavaScript спочатку шукає її в
     самому об'єкті, а потім переходить до його прототипу.

   ```javascript
   const person = {
     name: 'Іван',
     greet() {
       console.log(`Привіт, я ${this.name}`);
     },
   };

   const user = Object.create(person);
   user.name = 'Оля';
   user.greet(); // Привіт, я Оля
   ```

2. **Функції як конструктори:**

   - У JavaScript функції можуть бути використані як конструктори об'єктів. Це
     дозволяє створювати екземпляри об'єктів із певними властивостями та
     методами.

   ```javascript
   function Person(name, age) {
     this.name = name;
     this.age = age;
   }

   const user = new Person('Іван', 25);
   console.log(user.name); // Іван
   ```

3. **Класи (ES6+ класова синтаксична конструкція):**

   - З введенням `ES6`, JavaScript отримав класову синтаксис для створення
     об'єктів. Це полегшує створення класів і працює на основі прототипного
     наслідування.

   ```javascript
   class Person {
     constructor(name, age) {
       this.name = name;
       this.age = age;
     }

     greet() {
       console.log(`Привіт, я ${this.name}`);
     }
   }

   const user = new Person('Іван', 25);
   user.greet(); // Привіт, я Іван
   ```

4. **Методи та властивості:**

   - Об'єкти можуть мати методи (функції, прив'язані до об'єктів) та властивості
     (дані).
   - Методи можуть бути визначені за допомогою класів або функцій-конструкторів.

   ```javascript
   const person = {
     name: 'Іван',
     greet() {
       console.log(`Привіт, я ${this.name}`);
     },
   };
   person.greet(); // Привіт, я Іван
   ```

5. **Інкапсуляція:**

   - У JavaScript є можливість інкапсулювати дані, використовуючи закриті або
     приватні властивості за допомогою замикань. З `ES2022` також з'явилася
     підтримка приватних полів у класах через `#`.

   ```javascript
   class Person {
     #name;

     constructor(name) {
       this.#name = name;
     }

     getName() {
       return this.#name;
     }
   }

   const person = new Person('Іван');
   console.log(person.getName()); // Іван
   ```

6. **Поліморфізм:**

   - JavaScript підтримує поліморфізм через перезапис методів. Це означає, що
     різні об'єкти можуть мати однакові методи, але з різною реалізацією.

   ```javascript
   class Animal {
     speak() {
       console.log('Робить звук');
     }
   }

   class Dog extends Animal {
     speak() {
       console.log('Гав!');
     }
   }

   const dog = new Dog();
   dog.speak(); // Гав!
   ```

7. **Абстракція:**

   - Абстракція в JavaScript реалізується через класові та функціональні методи,
     що дозволяє приховувати складність реалізації і зберігати лише важливу
     інформацію для користувача.
   - Абстракція може бути досягнута через інтерфейси або базові класи, хоча
     JavaScript не має явної підтримки інтерфейсів, як в інших мовах.

8. **Метод new:**

   - Ключове слово `new` використовується для створення екземплярів класів чи
     функцій-конструкторів, що ініціалізує новий об'єкт і встановлює прототип.

   ```javascript
   function Person(name) {
     this.name = name;
   }

   const person = new Person('Іван');
   ```

#### Підсумок:

- Прототипне наслідування замість класичного.
- Функції-конструктори для створення об'єктів.
- ES6 класи спрощують синтаксис для створення об'єктів та наслідування.
- Можливість реалізації інкапсуляції та поліморфізму.
- Абстракція через методи класів та замикання.

JavaScript поєднує елементи класичного ООП з прототипним підходом, що дозволяє
використовувати різні стилі програмування в залежності від задачі.

</details>

<details>
<summary>30. Як з JavaScript-коду звернутись до HTML-елемента та змінити його текст?</summary>

#### JavaScript

#### Щоб звернутися до HTML-елемента та змінити його текст у JavaScript, можна використовувати різні методи доступу до елементів DOM.

#### Приклад:

- Використовуємо getElementById(), querySelector() або інші методи для доступу
  до елемента.
- Змінюємо текст елемента за допомогою властивості textContent або innerText.

#### Приклад з `getElementById():`

```html
<!DOCTYPE html>
<html lang="uk">
  <head>
    <meta charset="UTF-8" />
    <title>Зміна тексту</title>
  </head>
  <body>
    <p id="example">Старий текст</p>
    <script>
      // Отримуємо елемент за ID
      const element = document.getElementById('example');

      // Змінюємо текст
      element.textContent = 'Новий текст';
    </script>
  </body>
</html>
```

#### Приклад з `querySelector():`

```html
<!DOCTYPE html>
<html lang="uk">
  <head>
    <meta charset="UTF-8" />
    <title>Зміна тексту</title>
  </head>
  <body>
    <p class="example">Старий текст</p>
    <script>
      // Отримуємо елемент за класом
      const element = document.querySelector('.example');

      // Змінюємо текст
      element.textContent = 'Новий текст';
    </script>
  </body>
</html>
```

#### Різниця між `textContent` і `innerText`:

- `textContent:` Оновлює текст у елементі, включаючи прихований текст, але не
  виконує рендеринг CSS.

- `innerText:` Оновлює текст, враховуючи стилі CSS (наприклад, схований текст не
  буде видимим).

Обидва підходи працюють для зміни тексту, але textContent - це більш швидкий і
загальний спосіб.

</details>

<details>
<summary>31. Що таке деструктуризація?</summary>

#### JavaScript

#### Деструктуризація в JavaScript - це синтаксис, який дозволяє розпаковувати значення з масивів або властивості з об'єктів у окремі змінні. Це скорочує код і робить його більш зрозумілим.

1. **Деструктуризація масивів**

- Розпаковує значення елементів масиву в окремі змінні за позицією.

- **Приклад:**

  ```javascript
  const numbers = [10, 20, 30];
  const [a, b, c] = numbers;

  console.log(a); // 10
  console.log(b); // 20
  console.log(c); // 30
  ```

2. **Деструктуризація об'єктів**

- Розпаковує значення властивостей об'єкта в змінні за іменами ключів.

- **Приклад:**

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

  console.log(name); // Evan
  console.log(age); // 25
  ```

3. Деструктуризація в функціях

- Дозволяє передавати об'єкти або масиви у функцію і розпаковувати їх прямо в
  параметрах.

  - **_Масиви:_**

  ```javascript
  function sum([a, b]) {
    return a + b;
  }
  console.log(sum([10, 20])); // 30
  ```

  - **_Об'єкти:_**

  ```javascript
  function greet({ name, age }) {
    console.log(`Привіт, ${name}, тобі ${age} років.`);
  }
  greet({ name: 'Evan', age: 25 });
  ```

#### Переваги:

- Зменшує кількість коду.
- Полегшує роботу з вкладеними структурами.
- Підвищує читабельність.

- Деструктуризація - це потужний інструмент, який широко використовується у
  сучасному JavaScript.

</details>

<details>
<summary>32. Що буде, якщо звернутись до елемента масива, якого немає за індексом?</summary>

#### JavaScript

#### Якщо звернутися до елемента масиву за індексом, якого не існує, JavaScript поверне `undefined`.

- **Причина:**

  - У JavaScript масиви є об'єктами, і доступ до елементів масиву працює через
    властивості об'єкта. Якщо властивість (тобто індекс) не існує, результатом
    буде `undefined`.

</details>

<details>
<summary>33. У чому різниця між for..of та for...in?</summary>

#### JavaScript

#### `for...of` і `for...in` використовуються для ітерації, але мають різне призначення та працюють з різними типами даних.

1. **for...of**

- Ітерує значення ітерабельних об'єктів, таких як масиви, рядки, об'єкти типу
  `Map`, `Set`, або об'єкти з реалізованим методом `Symbol.iterator`.

  - Приклад:

  ```javascript
  const array = ['a', 'b', 'c'];
  for (const value of array) {
    console.log(value); // Виведе: 'a', 'b', 'c'
  }
  ```

  - Особливості:

    - Підходить для роботи з масивами та іншими ітерабельними об'єктами.
    - Використовує значення елементів.
    - Не підходить для ітерації по об'єктах з властивостями.

2. **for...in**

- Ітерує ключі (властивості) об'єкта або індекси масиву.

  - Приклад з об'єктом:

  ```javascript
  const obj = { name: 'Іван', age: 25 };
  for (const key in obj) {
    console.log(key); // Виведе: 'name', 'age'
  }
  ```

  - Приклад з масивом:

  ```javascript
  const array = ['a', 'b', 'c'];
  for (const index in array) {
    console.log(index); // Виведе: '0', '1', '2'
  }
  ```

  - Особливості:

    - Використовується для ітерації по об'єктах.
    - Повертає ключі об'єкта або індекси масиву як рядки.
    - Не рекомендується для масивів, оскільки включає властивості прототипу.

- **Висновок:**

  - `for...of`: Використовуйте для роботи з масивами та іншими ітерабельними
    об'єктами.
  - `for...in`: Використовуйте для ітерації по властивостях об'єкта. Не
    підходить для масивів.

</details>

<details>
<summary>34. Навіщо використовується оператор && логічне І?</summary>

#### JavaScript

#### Оператор `&&` (логічне І) в JavaScript використовується для перевірки логічних умов і короткого замикання. Його основне призначення - повертати перше хибне значення або останнє істинне.

- **Основні випадки використання:**

1. **Перевірка кількох умов:**

   - Повертає true, якщо всі операнди істинні.
   - Якщо хоча б один операнд хибний, повертає цей операнд.

   ```javascript
   const a = true;
   const b = false;

   console.log(a && b); // false
   console.log(a && true); // true
   ```

2. **Коротке замикання:**

   - Якщо перший операнд хибний, далі умови не перевіряються, і повертається
     його значення.
   - Якщо перший операнд істинний, обчислюється і повертається другий.

   ```javascript
   const result = false && console.log('Не виконається'); // false
   const value = true && 'Результат'; // 'Результат'
   ```

3. **Умовне виконання коду:**

   - Використовується для виклику функцій або виконання дій лише при істинності
     умови.

   ```javascript
   const user = { loggedIn: true };
   user.loggedIn && console.log('Користувач увійшов'); // 'Користувач увійшов'
   ```

4. **Використання в присвоєнні значень:**

   - Якщо перший операнд істинний, результатом буде другий.

   ```javascript
   const value = true && 'Hello'; // 'Hello'
   const empty = false && 'World'; // false
   ```

5. **Повернення значень:**

   - && не просто повертає true або false. Він повертає значення одного з
     операндів.
   - Працює з будь-якими типами, не лише з булевими.

   - **Приклад:**

   ```javascript
   console.log('a' && 'b'); // 'b' (останнє істинне значення)
   console.log(false && 'b'); // false (перше хибне значення)
   console.log('a' && 0); // 0 (перше хибне значення)
   ```

- **Висновок:**

  - Оператор && корисний для:

    - Перевірки складених умов.
    - Зупинки виконання при хибному значенні (коротке замикання).
    - Умовного виконання виразів.

</details>

<details>
<summary>35. Навіщо використовується оператор || логічне АБО ?</summary>

#### JavaScript

#### Оператор `||` (логічне АБО) в JavaScript використовується для перевірки логічних умов і короткого замикання. Його основна мета - повертати перше істинне значення або останнє хибне.

- **Основні випадки використання:**

1. **Перевірка кількох умов:**

   - Повертає true, якщо хоча б один операнд істинний.
   - Якщо всі операнди хибні, повертає останнє хибне значення.

   ```javascript
   const a = true;
   const b = false;

   console.log(a || b); // true
   console.log(b || false); // false
   ```

2. **Коротке замикання:**

   - Якщо перший операнд істинний, далі умови не перевіряються, і повертається
     його значення.
   - Якщо перший операнд хибний, обчислюється і повертається другий.

   ```javascript
   const result = true || console.log('Не виконається'); // true
   const value = false || 'Результат'; // 'Результат'
   ```

3. **Значення за замовчуванням:**

   - Використовується для задання дефолтного значення, якщо перше значення
     хибне.

   ```javascript
   const userName = '' || 'Анонім'; // 'Анонім'
   const number = 0 || 42; // 42
   ```

4. **Умовне виконання коду:**

   - Логічне АБО дозволяє виконати альтернативну дію, якщо перша умова не
     спрацювала.

   ```javascript
   const isAuthorized = false;
   isAuthorized || console.log('Доступ заборонено'); // 'Доступ заборонено'
   ```

- **Повернення значень:**

  - || не обмежується булевими значеннями. Він повертає перше істинне значення
    або останнє хибне.

  - **Приклади:**

  ```javascript
  console.log('a' || 'b'); // 'a' (перше істинне)
  console.log(false || 'b'); // 'b' (перше істинне)
  console.log(null || undefined || 0); // 0 (останнє хибне)
  ```

- **Висновок:**

  - Оператор || корисний для:

    - Перевірки чи хоча б одна умова виконується.
    - Встановлення значень за замовчуванням.
    - Короткого замикання для оптимізації виконання коду.

</details>

<details>
<summary>36. Навіщо використовується оператор !!?</summary>

#### JavaScript

#### Оператор `!!` у JavaScript використовується для перетворення будь-якого значення в його булевий еквівалент. Це простий спосіб привести значення до `true` або `false`.

- **Як працює:**

1. Перший `!`: Інвертує значення. Перетворює його на булеве, якщо це ще не було
   зроблено, і змінює на протилежне (істинне → хибне, хибне → істинне).
2. Другий `!`: Знову інвертує значення, повертаючи початкову логіку, але вже у
   булевій формі.

- **Приклади:**

  - Приведення до булевого типу:

  ```javascript
  console.log(!!0); // false (0 вважається "хибним")
  console.log(!!1); // true (1 вважається "істинним")
  console.log(!!''); // false (порожній рядок - "хибний")
  console.log(!!'hello'); // true (непорожній рядок - "істинний")
  console.log(!!null); // false
  console.log(!!undefined); // false
  console.log(!!{}); // true (об'єкти завжди "істинні")
  console.log(!![]); // true (масиви завжди "істинні")
  ```

- Для чого використовується:

1. **Приведення до булевого типу:**

   - Використовується для явного переведення значення в булевий тип в умовах або
     перевірках.

   ```javascript
   const isActive = !!someVariable;
   ```

2. **Перевірка істинності значення:**

   - Зручно для перевірки, чи значення існує або чи є воно "істинним".

   ```javascript
   if (!!userName) {
     console.log("Ім'я користувача задано");
   }
   ```

3. **Явна демонстрація булевого результату:**

   - Використовується, коли важливо явно показати, чи значення є істинним або
     хибним.

   ```javascript
   const isValid = !!(age >= 18); // true, якщо вік >= 18
   ```

- Висновок:

  - Оператор `!!` ефективно перетворює будь-яке значення у булеве. Це зручний
    інструмент для перевірок, умов та обробки даних у коді.

</details>

<details>
<summary>37. Навіщо використовується оператор ! логічне НЕ?</summary>

#### JavaScript

#### Оператор `!` (логічне НЕ) у JavaScript використовується для інверсії булевого значення. Він змінює істинне значення на хибне і навпаки.

- **Основні випадки використання:**

1. **Інверсія булевого значення:**

- Оператор `!` змінює логіку булевого виразу.

  ```javascript
  console.log(!true); // false
  console.log(!false); // true
  ```

2. **Перетворення в булевий тип:**

- Якщо значення не є булевим, оператор `!` автоматично приводить його до
  булевого типу, а потім інвертує.

  ```javascript
  console.log(!0); // true (0 вважається "хибним")
  console.log(!'hello'); // false (рядок вважається "істинним")
  console.log(!undefined); // true
  ```

3. **Умовні перевірки:**

- Використовується для перевірки хибності значення.

  ```javascript
  const isValid = false;
  if (!isValid) {
    console.log('Не валідно');
  }
  ```

4. **Зворотна логіка:**

- Полегшує написання умов, які мають бути виконані при хибних значеннях.

  ```javascript
  const user = null;
  if (!user) {
    console.log('Користувач не знайдений');
  }
  ```

- Приклади з інверсією:

  - Інверсія:

  ```javascript
  const isOnline = false;
  console.log(!isOnline); // true (зворотне значення)
  ```

  - Вкладені перевірки:

  ```javascript
  const isEmpty = !array.length; // true, якщо масив порожній
  ```

- **Висновок:**

  - Оператор `!` інвертує булеве значення та дозволяє зручно перевіряти хибність
    або істинність умов. Це базовий інструмент для роботи з логічними виразами.

</details>

<details>
<summary>38. Які значення в JavaScript є хибними?</summary>

#### JavaScript

#### У JavaScript до **хибних значень (falsy values)** належать ті, що при приведенні до булевого типу стають `false`.

- **Перелік хибних значень:**

1. `false`- логічне значення "хибність".
2. `0` - числовий нуль.
3. `-0` - від'ємний нуль (рідко використовується, але технічно існує).
4. `NaN` - "не число".
5. `""` - порожній рядок (подвійні лапки).
6. `''` - порожній рядок (одинарні лапки).
7. ` (``) ` - порожній рядок (шаблонні літерали).
8. `null` - відсутність значення.
9. `undefined` - невизначене значення.

- **Приклади:**

  ```javascript
  console.log(Boolean(false)); // false
  console.log(Boolean(0)); // false
  console.log(Boolean('')); // false
  console.log(Boolean(null)); // false
  console.log(Boolean(undefined)); // false
  console.log(Boolean(NaN)); // false
  ```

</details>

<details>
<summary>39. Які значення в JavaScript є правдивими?</summary>

#### JavaScript

#### У JavaScript `правдиві значення (truthy values)` - це ті, які при приведенні до булевого типу стають `true`. Це всі значення, які не входять до списку хибних (falsy values).

- **Перелік типових правдивих значень:**

1. **Непорожні рядки:**

   ```javascript
   console.log(Boolean('hello')); // true
   console.log(Boolean(' ')); // true (навіть якщо це пробіл)
   console.log(Boolean('0')); // true
   ```

2. **Числа, крім 0:**

   ```javascript
   console.log(Boolean(42)); // true
   console.log(Boolean(-42)); // true
   console.log(Boolean(Infinity)); // true
   console.log(Boolean(-Infinity)); // true
   ```

3. **Об'єкти (включаючи порожні):**

   ```javascript
   console.log(Boolean({})); // true
   console.log(Boolean([])); // true
   ```

4. **Функції:**

   ```javascript
   console.log(Boolean(function () {})); // true
   ```

5. **Спеціальні значення:**

   - `Symbol()` - завжди істинний.
   - Будь-який `BigInt`, відмінний від `0n`.

</details>

<details>
<summary>40. Як перевірити, чи є значення хибним?</summary>

#### JavaScript

#### Щоб перевірити, чи є `значення хибним (falsy)` у JavaScript, можна скористатися приведенням до булевого типу. Ось кілька способів:

1. **Використання `!` (логічного НЕ):**

   ```javascript
   if (!value) {
     console.log('Значення є хибним');
   }
   ```

   - Логічне НЕ інвертує булеве значення, і для хибного результату умова
     виконається.

2. **Використання `Boolean()`:**

   ```javascript
   if (!Boolean(value)) {
     console.log('Значення є хибним');
   }
   ```

   - Функція Boolean() явно перетворює значення в булеве. Якщо Boolean(value)
     повертає false, значення хибне.

3. **Перевірка через подвійний `!!`:**

   ```javascript
   console.log(!!value); // true для правдивих, false для хибних
   ```

   - Подвійний ! використовується для явного приведення значення до булевого
     типу. Якщо результат false, значення хибне.

4. **Список хибних значень:**

   - Можна порівняти значення з відомими falsy values:

   ```javascript
   if (
     value === false ||
     value === 0 ||
     value === '' ||
     value === null ||
     value === undefined ||
     Number.isNaN(value)
   ) {
     console.log('Значення є хибним');
   }
   ```

- **Приклади:**

  ```javascript
  console.log(!0); // true (0 є хибним)
  console.log(!''); // true (порожній рядок є хибним)
  console.log(!undefined); // true (undefined є хибним)
  console.log(!42); // false (число 42 є правдивим)
  console.log(![]); // false (масив є правдивим)
  ```

- **Висновок:**

  - Найзручніший спосіб перевірити, чи значення хибне - використати !value.

</details>

<details>
<summary>41. Що таке DOM?</summary>

#### JavaScript

#### Document Object Model

- **DOM** (Document Object Model) - це програмний інтерфейс для веб-документів,
  який надає структуру HTML або XML документа у вигляді дерева об'єктів. DOM
  дозволяє програмам та скриптам взаємодіяти з документами, змінюючи їх вміст,
  структуру та стиль.

- **Основні моменти:**

1. **Представлення документа:** DOM представляє HTML або XML документ як дерево
   елементів, де кожен вузол дерева є об'єктом, що відповідає певній частині
   документа (наприклад, тегу, атрибуту або тексту).

2. **Динамічна взаємодія:** Через DOM можна змінювати веб-сторінки на льоту. За
   допомогою JavaScript можна додавати, видаляти або змінювати елементи HTML,
   обробляти події (кліки, введення даних) та змінювати стиль елементів.

3. **Структура дерева:** DOM є деревом з кореневим елементом `<html>`, що
   містить елементи `<head>` та `<body>`, а ті, у свою чергу, містять інші
   елементи (наприклад, `<div>`, `<p>`, `<span>`).

- **Висновок:**
  - DOM є ключовим механізмом для взаємодії з веб-сторінками. Він дозволяє
    програмно змінювати структуру і зміст HTML-документів, що робить
    веб-сторінки динамічними та інтерактивними.

</details>

<details>
<summary>42. Що таке розповсюдження події (Event Propogation)?</summary>

#### JavaScript

#### Event Propogation

- **Розповсюдження події (Event Propagation)** в JavaScript - це процес, за
  якого подія, що сталася на одному елементі, передається іншим елементам в
  DOM-дереві. Розповсюдження події можна розділити на два основні етапи:

1. **Фаза захоплення (Capturing phase):**

   - Це перша фаза, коли подія "захоплюється" від кореня документа і йде вниз
     через усі батьківські елементи до того елемента, на якому була ініційована
     подія. Цей етап рідко використовується.

2. **Фаза цільового елемента (Target phase):**

   - Це етап, коли подія потрапляє безпосередньо на елемент, на якому вона була
     ініційована (наприклад, натискання на кнопку). Тепер подія обробляється
     саме на цьому елементі.

3. **Фаза спливання (Bubbling phase):**
   - Після обробки на цільовому елементі подія "спливає" (bubbles) до
     батьківських елементів і вище, поки не досягне кореня документа. Це
     основний етап, який найчастіше використовується для обробки подій.

- **Висновок:**

  - Розповсюдження події дозволяє ефективно управляти тим, як подія поширюється
    по DOM-дереву. Ви можете використовувати фазу захоплення, цільову фазу або
    спливання для обробки подій, а також контролювати це за допомогою методів
    `stopPropagation()` і `stopImmediatePropagation()`.

</details>

<details>
<summary>43. Чому результат порівняння двох схожих об'єктів є false?</summary>

#### JavaScript

#### Порівняння двох схожих об'єктів

- У JavaScript результат порівняння двох схожих об'єктів за допомогою оператора
  `==` або `===` зазвичай є `false`, навіть якщо ці об'єкти виглядають схожими,
  через те, як працює порівняння об'єктів у JavaScript.

- **Причина:**

  - Об'єкти в JavaScript порівнюються за посиланням, а не за їхнім вмістом.
    Тобто, коли ви порівнюєте два об'єкти, перевіряється чи вони вказують на
    один і той самий об'єкт в пам'яті, а не чи їхні властивості однакові.

- **Приклад:**

  ```javascript
  const obj1 = { name: 'John', age: 30 };
  const obj2 = { name: 'John', age: 30 };

  onsole.log(obj1 == obj2); // false
  onsole.log(obj1 === obj2); // false
  ```

  - Обидва об'єкти `obj1` та `obj2` мають однакові властивості, але це різні
    об'єкти в пам'яті. Оператор `==` та `===` порівнюють посилання на об'єкти,
    тому результат порівняння буде `false`.

- **Пояснення:**

  - `==` - порівнює два значення, приводячи їх до спільного типу (для об'єктів
    це буде порівняння посилань).
  - `===` - порівнює два значення без приведення типів, тому також порівнює
    посилання для об'єктів.

- **Як порівняти об'єкти по вмісту?**

  - Якщо потрібно порівняти об'єкти за їхніми властивостями (по вмісту), вам
    слід вручну порівнювати кожну властивість або використати спеціальні методи,
    такі як `JSON.stringify()`:

  ```javascript
  console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true
  ```

  - Але зверніть увагу, що цей метод не працює для порівняння складніших
    об'єктів, таких як об'єкти з методами чи циклічні посилання.

</details>

<details>
<summary>44. Який найшвидший спосіб перетворення рядка на число?</summary>

#### JavaScript

#### Найшвидший спосіб перетворення рядка на число в JavaScript - це використання унарного оператора +.

- **Приклад:**

  ```javascript
  const str = '42';
  const num = +str;
  console.log(num); // 42
  ```

- Цей метод є дуже швидким і ефективним, оскільки він використовує внутрішнє
  перетворення типів JavaScript.

- **Альтернативи:**

1. `parseInt()`:

- Перетворює рядок на ціле число.

  ```javascript
  const num = parseInt(str, 10); // 42
  ```

- Однак це повільніше, ніж унарний оператор +, через додаткову обробку
  (встановлення бази для чисел).

2. `parseFloat()`:

- Перетворює рядок на число з плаваючою точкою.

  ```javascript
  const num = parseFloat(str); // 42
  ```

- Також повільніше, ніж унарний оператор.

- **Висновок:**

  - Унарний оператор + є найшвидшим і найбільш ефективним способом перетворення
    рядка на число.

</details>

<details>
<summary>45. Як записати кілька виразів в один рядок?</summary>

#### JavaScript

#### Щоб записати кілька виразів в один рядок у JavaScript, можна використовувати крапку з комою `;` для розділення виразів.

- **Приклад:**

  ```javascript
  let a = 5;
  let b = 10;
  let c = a + b;
  console.log(c);
  ```

- Тут ми об’єднали три вирази в одному рядку, розділивши їх крапками з комами.

- **Важливо:**

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

</details>

<details>
<summary>46. Що таке підняття (Hoisting)?</summary>

#### JavaScript

#### Hoisting

- Підняття (Hoisting) - це механізм у JavaScript, при якому оголошення змінних і
  функцій "піднімаються" на початок своєї області видимості під час виконання
  коду, навіть якщо вони знаходяться після використання.

- **Основні моменти:**

1. Оголошення змінних та функцій піднімаються: JavaScript піднімає лише
   оголошення, а не ініціалізацію змінних або значення функцій.

2. Функції: У разі функцій, які оголошуються через function (function
   declaration), піднімається і сама функція разом із її тілами.

3. Змінні: У разі змінних, оголошених через var, піднімається тільки оголошення,
   але не їх ініціалізація (значення). У результаті, змінна буде існувати, але
   її значення буде undefined до моменту присвоєння.

- **Приклад 1: Функції**

  ```javascript
  console.log(greet()); // "Hello!"
  function greet() {
    return 'Hello!';
  }
  ```

- У цьому прикладі виклик `greet()` працює, навіть якщо викликається до її
  оголошення. Це відбувається через підняття, оскільки функція повністю
  піднімається разом зі своїм тілом.

- **Приклад 2: Змінні**

  ```javascript
  console.log(a); // undefined
  var a = 5;
  console.log(a); // 5
  ```

- У цьому прикладі змінна a спочатку матиме значення undefined, оскільки лише
  оголошення (але не ініціалізація) змінної піднімається. Після присвоєння
  значення a стає 5.

- **Підняття з let та const**

- Змінні, оголошені через let або const, не піднімаються так, як var. Вони
  знаходяться у "мертвої зони" (Temporal Dead Zone) між початком області
  видимості та місцем їх оголошення, що означає, що до того, як значення змінної
  буде присвоєно, їх не можна використовувати.

  ```javascript
  console.log(a); // ReferenceError: Cannot access 'a' before initialization
  let a = 5;
  ```

- Тут виклик змінної до її ініціалізації викличе помилку, тому що змінна
  знаходиться в "мертвій зоні".

- **Висновок:**

  - Підняття дозволяє використовувати функції та змінні до їх фактичного
    оголошення в коді, але для змінних, оголошених через var, значення буде
    undefined до присвоєння, а для змінних, оголошених через let або const, це
    призведе до помилки, якщо спробувати доступитися до них до ініціалізації.

</details>

<details>
<summary>47. Що таке область видимості (Scope)?</summary>

#### JavaScript

#### Scope

- **Область видимості (Scope)** в JavaScript - це контекст, у якому визначаються
  змінні, функції та інші ідентифікатори. Область видимості визначає, де саме в
  коді можна звертатися до цих змінних або функцій.

- **Типи областей видимості:**

1. **Глобальна область видимості:**

   - Це область, яка доступна в будь-якому місці вашого коду.
   - Змінні та функції, оголошені поза будь-якими функціями або блоками, мають
     глобальну область видимості.

   ```javascript
   let globalVar = "I'm global";

   function test() {
     console.log(globalVar); // Доступ до глобальної змінної
   }

   test();
   console.log(globalVar); // Також доступно поза функцією
   ```

2. **Область видимості функції (Function Scope):**

   - Кожна функція має свою область видимості, і змінні, оголошені всередині
     функції, доступні тільки в цій функції.

   ```javascript
   function test() {
     let localVar = "I'm local";
     console.log(localVar); // Доступ до localVar всередині функції
   }

   test();
   console.log(localVar); // Помилка: localVar не існує за межами функції
   ```

3. **Область видимості блоку (Block Scope):**

   - Змінні, оголошені за допомогою `let` або `const`, мають область видимості
     на рівні блоку (в межах `{}`).

   ```javascript
   if (true) {
     let blockVar = "I'm block-scoped";
     console.log(blockVar); // Доступно всередині блоку
   }

   console.log(blockVar); // Помилка: blockVar не доступно поза блоком
   ```

4. **Лексичний Scope (Lexical Scope):**

   - Лексичний `scope` визначається на етапі написання коду, а не виконання. Це
     означає, що область видимості функцій визначається тим, де вони були
     оголошені, а не тим, де вони викликаються.

   ```javascript
   function outer() {
     let outerVar = "I'm outer";

     function inner() {
       console.log(outerVar); // Доступ до outerVar через лексичний scope
     }

     inner();
   }

   outer();
   ```

- **Важливі моменти:**

  - Глобальні змінні доступні в усьому коді, але їх використання може призвести
    до проблем, якщо імена змінних збігаються.
  - Функціональні змінні доступні тільки в межах функції.
  - Змінні в межах блоку з `let` і `const` доступні лише в тому блоці, в якому
    вони оголошені.

- **Підсумок:**

  - Область видимості визначає, де змінні і функції можуть бути використані.
    Правильне розуміння області видимості допомагає уникати помилок, пов'язаних
    з доступом до змінних і функцій у некоректних місцях.

</details>

<details>
<summary>48. Навіщо використовується директива use strict?</summary>

#### JavaScript

**use strict**

- Директива `"use strict"` в JavaScript вмикає строгий режим виконання, який
  змінює поведінку мови, роблячи її менш поблажливою до помилок. Вона допомагає
  писати більш безпечний і надійний код, запобігаючи потенційним проблемам.

- **Основні цілі:**

1. Заборона використання небезпечних або застарілих функцій.
2. Посилення перевірок синтаксису.
3. Попередження прихованих помилок, роблячи їх явними.

- **Що змінює строгий режим?**

1. **Заборона використання змінних без оголошення:**

   ```javascript
   'use strict';
   myVar = 10; // Помилка: myVar не оголошена
   ```

2. **Обмеження з `this` у функціях:**

   - У глобальному контексті this дорівнює undefined, а не глобальному об'єкту.

   ```javascript
   'use strict';
   function test() {
     console.log(this); // undefined
   }
   test();
   ```

3. **Заборона дублювання імен параметрів функцій:**

   ```javascript
   'use strict';
   function sum(a, a) {
     // Помилка: дублювання імен параметрів
     return a + a;
   }
   ```

4. **Заборона видалення незмінних властивостей:**

   ```javascript
   'use strict';
   delete Object.prototype; // Помилка
   ```

5. **Заборона застарілих синтаксичних конструкцій:**

Наприклад, восьмеричні літерали (`0123`) заборонені.

6. **Більш безпечна робота з об'єктами:**

   - Запис у `read-only` властивість викликає помилку.

   ```javascript
   'use strict';
   const obj = {};
   Object.defineProperty(obj, 'prop', { value: 42, writable: false });
   obj.prop = 99; // Помилка
   ```

- **Як використовувати?**

  - У верхній частині файлу:

  ```javascript
   "use strict";
    function test() { ... }
  ```

  - У межах певної функції:

  ```javascript
   function test() {
    "use strict";
    ...
  }
  ```

- **Чому це важливо?**

  - Полегшує відловлення помилок під час розробки.
  - Допомагає уникати небажаних поведінок, які можуть призводити до багів.
  - Забезпечує сумісність із новими версіями JavaScript.

- **Висновок:**

  `"use strict"` забезпечує більш жорсткий, безпечний і передбачуваний підхід до
  написання JavaScript-коду.

</details>

<details>
<summary>49. Яке значення має this?</summary>

#### JavaScript

**this**

- Значення `this` залежить від контексту:

1. **Глобально або в функції (strict mode):** `this` - `undefined`.
2. **Глобально або в функції (non-strict mode):** `this` - глобальний об'єкт
   (`window` в браузері, `global` в Node.js).
3. **У методі об'єкта:** `this` посилається на об'єкт-власник методу.
4. **У класі/конструкторі:** `this` - новостворений об'єкт.
5. **У стрілковій функції:** `this` успадковується з контексту, де створена
   функція.
6. **При явному прив'язуванні (call, apply, bind):** `this` визначається вручну.
7. **В обробнику подій:** `this` залежить від способу прив’язки (елемент,
   обробник або явно встановлене).

</details>

<details>
<summary>50. Що таке прототип об'єкта?</summary>

#### JavaScript

**prototype**

- Прототип об'єкта - це механізм JavaScript, який дозволяє об'єктам наслідувати
  властивості та методи від інших об'єктів. Кожен об'єкт має внутрішнє посилання
  на свій прототип, доступне через `[[Prototype]]` (або через `__proto__`, хоча
  це застаріле).

#### Основні моменти:

1. **Наслідування:** Якщо об'єкт не має властивості чи методу, JavaScript шукає
   їх у його прототипі.
2. **Прототипний ланцюг:** Пошук триває по ланцюгу прототипів до null (де ланцюг
   завершується).
3. **Встановлення прототипу:** Через Object.create(), Object.setPrototypeOf()
   або шляхом використання class.
4. **Прототип об'єкта-конструктора:** Новостворені об'єкти через new
   успадковують прототип, заданий властивістю prototype конструктора.

#### Простий приклад:

```javascript
function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function () {
  return `${this.name} makes a noise.`;
};

const dog = new Animal('Dog');
console.log(dog.speak()); // "Dog makes a noise."
```

</details>

<details>
<summary>51. Що таке IIFE?</summary>

#### JavaScript

**Immediately Invoked Function Expression**

- IIFE (Immediately Invoked Function Expression) - це функція, яка викликається
  одразу після її оголошення. Вона використовується для створення ізольованого
  локального контексту, уникаючи забруднення глобального простору імен.

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

```javascript
(function () {
  // Код виконується одразу
})();
```

**Або**

```javascript
(() => {
  // Код виконується одразу
})();
```

#### Ключові аспекти:

1. Замикання: IIFE створює новий лексичний контекст, дозволяючи ізолювати
   змінні.
2. Глобальне забруднення: Уникнення додавання змінних в глобальний об'єкт.
3. Одноразовий код: Зручне виконання коду, який не потрібно викликати повторно.

#### Приклад:

```javascript
(function () {
  const message = 'Hello, IIFE!';
  console.log(message); // "Hello, IIFE!"
})();

// message недоступна за межами IIFE
```

</details>

<details>
<summary>52. Навіщо використовується метод Function.prototype.apply?</summary>

#### JavaScript

**Function.prototype.apply**

- Метод `Function.prototype.apply` використовується для виклику функції із
  вказаним значенням `this` та передачею аргументів у вигляді масиву або
  об'єктоподібного елемента.

#### Основні використання:

1. **Зміна контексту `this`:** Метод дозволяє вручну встановити, що буде
   посиланням `this` у функції.

   ```javascript
   const obj = { name: 'Alice' };
   function greet(greeting) {
     return `${greeting}, ${this.name}`;
   }
   console.log(greet.apply(obj, ['Hello'])); // "Hello, Alice"
   ```

2. **Передача аргументів у вигляді масиву:** Зручно викликати функції, що
   очікують список аргументів.

   ```javascript
   const numbers = [1, 2, 3, 4, 5];
   console.log(Math.max.apply(null, numbers)); // 5
   ```

3. **Використання для наслідування:** Дає змогу викликати конструктор одного
   класу в контексті іншого.

   ```javascript
   function Animal(name) {
     this.name = name;
   }
   function Dog(name, breed) {
     Animal.apply(this, [name]);
     this.breed = breed;
   }
   const myDog = new Dog('Rex', 'Labrador');
   console.log(myDog); // { name: 'Rex', breed: 'Labrador' }
   ```

#### Відмінність від `call`:

- `apply` приймає аргументи у вигляді масиву, тоді як `call` - як список.

</details>

<details>
<summary>53. Навіщо використовується метод Function.prototype.call?</summary>

#### JavaScript

**Function.prototype.call**

- Метод `Function.prototype.call` використовується для виклику функції із
  вказаним значенням `this` і передачею аргументів як окремого списку.

#### Основні використання:

1. **Зміна контексту `this`:**

   - Дає можливість явно вказати, що буде значенням `this` для функції.

   ```javascript
   const obj = { name: 'Alice' };
   function greet(greeting) {
     return `${greeting}, ${this.name}`;
   }
   console.log(greet.call(obj, 'Hello')); // "Hello, Alice"
   ```

2. **Передача аргументів:**

   - Усі аргументи передаються окремо, а не масивом.

   ```javascript
   function sum(a, b, c) {
     return a + b + c;
   }
   console.log(sum.call(null, 1, 2, 3)); // 6
   ```

3. **Наслідування функцій:**

- Дозволяє викликати метод одного об’єкта для іншого.

```javascript
const person = {
  fullName: function () {
    return `${this.firstName} ${this.lastName}`;
  },
};

const john = { firstName: 'John', lastName: 'Doe' };
console.log(person.fullName.call(john)); // "John Doe"
```

4. **Імітація конструктора батьківського класу:**

- Використовується для виклику конструктора іншого класу.

```javascript
function Animal(name) {
  this.name = name;
}
function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}
const dog = new Dog('Rex', 'Labrador');
console.log(dog); // { name: 'Rex', breed: 'Labrador' }
```

#### Відмінність від `apply`:

- `call` приймає аргументи через список.
- `apply` приймає аргументи у вигляді масиву.

</details>

<details>
<summary>54. У чому різниця між методами call та apply?</summary>

#### JavaScript

#### Різниця між методами `call` та `apply` полягає у способі передачі аргументів:

1. `call`:

- Аргументи передаються як окремий список.

  ```javascript
  function greet(greeting, punctuation) {
    return `${greeting}, ${this.name}${punctuation}`;
  }
  const person = { name: 'Alice' };
  console.log(greet.call(person, 'Hello', '!')); // "Hello, Alice!"
  ```

2. `apply`:

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

  ```javascript
  function greet(greeting, punctuation) {
    return `${greeting}, ${this.name}${punctuation}`;
  }
  const person = { name: 'Alice' };
  console.log(greet.apply(person, ['Hello', '!'])); // "Hello, Alice!"
  ```

#### Схожість:

- Обидва змінюють контекст `this`.
- Використовуються для передачі аргументів до функції.

#### Коли що використовувати:

- `call`: Коли аргументи відомі та передаються як список.
- `apply`: Коли аргументи динамічні або доступні як масив (наприклад, з
  `Math.max`).

</details>

<details>
<summary>55. Навіщо використовується метод Function.prototype.bind?</summary>

#### JavaScript

**Function.prototype.bind**

- Метод `Function.prototype.bind` використовується для створення нової функції з
  фіксованим значенням `this` і, за потреби, попередньо заданими аргументами.

#### Основні використання:

1. **Фіксація контексту `this`:**

   - Дозволяє гарантувати, що функція завжди викликатиметься з визначеним
     `this`, незалежно від місця її виклику.

   ```javascript
   const obj = { name: 'Alice' };
   function greet() {
     return `Hello, ${this.name}`;
   }
   const boundGreet = greet.bind(obj);
   console.log(boundGreet()); // "Hello, Alice"
   ```

2. **Попереднє встановлення аргументів:**

   - Можна частково передати аргументи, створюючи функцію із заздалегідь
     заповненими параметрами (каррінг).

   ```javascript
   function multiply(a, b) {
     return a * b;
   }
   const double = multiply.bind(null, 2);
   console.log(double(5)); // 10
   ```

3. **Використання в колбек-функціях:**

   - Гарантує, що метод викликатиметься з правильним контекстом у функціях
     зворотного виклику.

   ```javascript
   const obj = {
     name: 'Alice',
     greet() {
       console.log(`Hello, ${this.name}`);
     },
   };
   const greetFn = obj.greet.bind(obj);
   setTimeout(greetFn, 1000); // "Hello, Alice"
   ```

4. **Неможливість зміни `this`:**

   - Функція, створена через `bind`, не дозволяє змінити `this` іншими методами,
     наприклад, `call` чи `apply`.

**Відмінність від `call` і `apply`:**

- `bind` створює нову функцію з прив'язаним `this`, яку можна викликати пізніше.
- `call` і `apply` викликають функцію негайно.

</details>

<details>
<summary>56. Що таке функціональне програмування?</summary>

#### JavaScript

#### Функціональне програмування

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

#### Основні принципи функціонального програмування:

1. **Чисті функції:** Функції, що для однакових вхідних значень завжди
   повертають однакові результати і не мають побічних ефектів (не змінюють стан
   програми чи глобальні змінні).
2. **Немутованість:** Дані не змінюються, а замість цього створюються нові
   значення.
3. **Функції як першокласні об'єкти:** Функції можна передавати як аргументи,
   повертати з інших функцій і зберігати в змінних.
4. **Вищий порядок функцій:** Функції, які приймають інші функції як аргументи
   або повертають їх.
5. **Лінійна композиція:** Композиція функцій для створення нових функцій, які
   виконують кілька операцій в одному виразі.

</details>

<details>
<summary>57. Які особливості JavaScript дозволяють говорити про нього як про функціональну мову програмування?</summary>

#### JavaScript

#### Особливості JavaScript, що підтримують функціональний стиль:

1. **Функції першого класу:** Функції можуть бути збережені в змінних,
   передаватися як аргументи іншим функціям і повертатися з функцій.

   ```javascript
   const add = (a, b) => a + b;
   const multiply = (a, b) => a * b;
   const apply = (fn, a, b) => fn(a, b);
   console.log(apply(add, 2, 3)); // 5
   ```

2. **Вищі функції:** JavaScript підтримує функції, які приймають інші функції як
   аргументи або повертають їх.

   ```javascript
   const map = (arr, fn) => arr.map(fn);
   console.log(map([1, 2, 3], x => x * 2)); // [2, 4, 6]
   ```

3. **Функції-стрілки (Arrow functions):** Вони забезпечують короткий синтаксис
   для створення функцій, що часто використовуються в функціональному стилі.

   ```javascript
   const square = x => x * x;
   ```

4. **Методи масивів:** Методи, такі як `map`, `filter`, `reduce`, дозволяють
   обробляти колекції даних без змінення вихідних масивів, що є основним
   принципом функціонального програмування.

   ```javascript
   const nums = [1, 2, 3, 4];
   const squares = nums.map(x => x * x);
   ```

5. **Замикання:** JavaScript підтримує замикання, що дозволяє створювати
   функції, які мають доступ до змінних зовнішнього контексту, навіть після
   того, як цей контекст вже завершив своє виконання.

   ```javascript
   function outer(x) {
     return function inner(y) {
       return x + y;
     };
   }
   const addFive = outer(5);
   console.log(addFive(3)); // 8
   ```

6. **Іммутабельність через бібліотеки:** Хоча сам JavaScript не забороняє зміну
   даних, завдяки бібліотекам типу `Immutable.js` можна реалізувати
   немутованість у коді.

   - JavaScript підтримує функціональний стиль завдяки своїм властивостям, але
     він також підтримує об'єктно-орієнтований і імперативний стилі
     програмування, що робить його мультипарадигмовою мовою.

</details>

<details>
<summary>58. Що таке функції вищого ладу (Higher Order Functions)?</summary>

#### JavaScript

#### Higher Order Functions

**Функції вищого порядку (Higher Order Functions, HOF)** - це функції, які
виконують одну або кілька з наступних операцій:

1. Приймають одну або кілька функцій як аргументи.
2. Повертають функцію як результат.

#### Приклад:

- **Функція, що приймає іншу функцію як аргумент:**

```javascript
function applyOperation(a, b, operation) {
  return operation(a, b);
}

const add = (x, y) => x + y;
console.log(applyOperation(2, 3, add)); // 5
```

- **Функція, що повертає іншу функцію:**

```javascript
function multiplyBy(x) {
  return function (y) {
    return x * y;
  };
}

const multiplyBy2 = multiplyBy(2);
console.log(multiplyBy2(5)); // 10
```

- **Приклади стандартних функцій вищого порядку:**

  - `map()`: Приймає функцію як аргумент і застосовує її до кожного елемента
    масиву, повертаючи новий масив.

  ```javascript
   const nums = [1, 2, 3];
   const squared = nums.map(x => x \* x);
   console.log(squared); // [1, 4, 9]
  ```

  - `filter()`: Приймає функцію як аргумент для фільтрації елементів масиву.

  ```javascript
  const nums = [1, 2, 3, 4, 5];
  const even = nums.filter(x => x % 2 === 0);
  console.log(even); // [2, 4]
  ```

  - `reduce()`: Приймає функцію як аргумент для зменшення масиву до одного
    значення.

  ```javascript
  const nums = [1, 2, 3, 4];
  const sum = nums.reduce((acc, x) => acc + x, 0);
  console.log(sum); // 10
  ```

#### Особливості:

- **Функції як аргументи** дозволяють передавати поведінку в інші функції.
- **Функції як результати** дозволяють створювати нові функції на основі вже
  існуючих, забезпечуючи високий рівень абстракції.

</details>

<details>
<summary>59. Чому функції у JavaScript називають об'єктами першого класу (First-class Objects)?</summary>

#### JavaScript

#### Function -> First-class Objects

Функції в JavaScript називають **об'єктами першого класу (first-class
objects)**, тому що вони володіють наступними властивостями, які характерні для
об'єктів першого класу:

1. **Можуть бути збережені в змінних:**

   - Функції можуть бути присвоєні змінним або передаватися як значення.

   ```javascript
   const greet = function () {
     console.log('Hello!');
   };
   greet(); // "Hello!"
   ```

2. **Можуть бути передані як аргументи іншим функціям:**

   - Функції можуть бути передані в якості параметрів іншим функціям.

   ```javascript
   function callFunction(fn) {
     fn();
   }
   callFunction(greet); // "Hello!"
   ```

3. **Можуть бути повернуті як результат з інших функцій:**

   - Функції можуть бути повернуті іншими функціями, дозволяючи створювати нові
     функції на основі існуючих.

   ```javascript
   function createAdder(x) {
     return function (y) {
       return x + y;
     };
   }
   const add5 = createAdder(5);
   console.log(add5(3)); // 8
   ```

4. **Можуть бути динамічно створені в будь-який час:**

   - Функції в JavaScript можна створювати на льоту, як анонімні функції або
     через функції-стрілки.

- Ці властивості роблять функції в JavaScript такими ж важливими та гнучкими, як
  і інші типи даних, дозволяючи використовувати їх як об'єкти першого класу в
  програмі.

</details>

<details>
<summary>60. Що таке об'єкт arguments?</summary>

#### JavaScript

**arguments**

Об'єкт `arguments` - це **вбудований об'єкт**, доступний всередині функції, який
містить усі аргументи, передані в цю функцію, незалежно від того, скільки
параметрів було оголошено в сигнатурі функції. Він дозволяє працювати з
переданими аргументами, навіть якщо їх кількість не збігається з кількістю
параметрів у функції.

#### Основні характеристики об'єкта `arguments`:

1. **Масивоподібний об'єкт:**

   - Він має індекси для кожного переданого аргументу і властивість `length`,
     яка вказує на кількість переданих аргументів. Однак об'єкт `arguments` не є
     справжнім масивом, тому не має методів масиву, таких як `map`, `forEach`
     тощо.

2. **Доступ до аргументів за індексом:** Ви можете звертатися до переданих
   аргументів за індексом, як до елементів масиву.

   ```javascript
   function sum() {
     console.log(arguments[0]); // перший аргумент
     console.log(arguments[1]); // другий аргумент
   }
   sum(1, 2); // 1 2
   ```

3. **Кількість аргументів:** Ви можете використовувати властивість `length` для
   отримання кількості переданих аргументів.

   ```javascript
   function logArgs() {
     console.log(arguments.length);
   }
   logArgs(1, 2, 3); // 3
   ```

4. **Обмеження:**

   - Об'єкт `arguments` не підтримує методи масиву (якщо не використовувати
     додаткові методи для конвертації в масив).
   - Не є доступним у стрілкових функціях, оскільки стрілкові функції не мають
     власного об'єкта `arguments`.

#### Приклад:

```javascript
function example() {
  console.log(arguments); // Масивоподібний об'єкт
  console.log(arguments.length); // Кількість аргументів
  console.log(arguments[0]); // Перший аргумент
}
example(1, 'two', true);
// Виведе:
// [1, "two", true]
// 3
// 1
```

- Перетворення в масив:

  - Оскільки `arguments` не є справжнім масивом, для використання масивних
    методів можна його перетворити в масив:

  ```javascript
  function example() {
    const args = Array.from(arguments); // або [...arguments]
    console.log(args.map(x => x * 2));
  }
  example(1, 2, 3); // [2, 4, 6]
  ```

- Використання: Об'єкт `arguments` корисний для роботи з функціями, коли
  кількість аргументів невідома, або коли ви хочете працювати з переданими
  аргументами незалежно від їх кількості.

</details>

<details>
<summary>61. Як створити об'єкт, який не має прототипу?</summary>

#### JavaScript

**Object.create(null)**

- Щоб створити об'єкт без прототипу в JavaScript, використовується метод
  `Object.create(null)`. Це створює об'єкт, який не має властивостей і методів,
  успадкованих від `Object.prototype`.

#### Приклад:

```javascript
const obj = Object.create(null);

console.log(obj); // {}
console.log(Object.getPrototypeOf(obj)); // null
console.log(obj.hasOwnProperty); // undefined
```

#### Особливості такого об'єкта:

1. **Відсутність прототипу:** Об'єкт не має стандартних методів, таких як
   `toString`, `hasOwnProperty`, які успадковуються від `Object.prototype`.

2. **Корисний для створення чистих словників:** Використовується, якщо ви хочете
   створити об'єкт як чистий хеш-таблицю, де всі ключі є власними властивостями,
   без конфліктів із методами або властивостями прототипу.

   ```javascript
   const dictionary = Object.create(null);
   dictionary.key = 'value';
   console.log(dictionary.key); // "value"
   console.log(dictionary.toString); // undefined
   ```

3. **Обмеження:** Ви не можете безпосередньо використовувати методи
   `Object.prototype` (наприклад, `hasOwnProperty`), тому доведеться
   застосовувати їх через об'єкт `Object`.

- **Як викликати метод `hasOwnProperty` у такому об'єкті:**

  ```javascript
  const obj = Object.create(null);
  obj.key = 'value';

  // Використання Object.prototype.hasOwnProperty
  console.log(Object.prototype.hasOwnProperty.call(obj, 'key')); // true
  ```

Цей підхід дозволяє уникати помилок, пов'язаних із успадкованими властивостями.

</details>

<details>
<summary>62. Що таке ECMAScript?</summary>

#### JavaScript

**ECMAScript**

ECMAScript (ES) - це специфікація мови програмування, яка слугує стандартом для
JavaScript, а також інших мов, таких як JScript і ActionScript. Вона визначає
синтаксис, семантику та базову функціональність мови програмування.

#### Основні аспекти:

1. **Стандартізація:**

   - ECMAScript розробляється та підтримується організацією **_ECMA
     International_**, а саме її технічним комітетом **_TC39_**.

2. **Відносини з JavaScript:**

   - JavaScript є реалізацією специфікації ECMAScript, тобто браузери та інші
     середовища виконання використовують ECMAScript як основу для впровадження
     JavaScript.

3. **Історія версій:**

   - **_ES3 (1999):_** Перший широко підтримуваний стандарт.
   - **_ES5 (2009):_** Додав підтримку `strict mode`, JSON, нові методи масивів.
   - **_ES6 (ES2015):_** Значне оновлення з новими можливостями, такими як
     `let`, `const`, стрілкові функції, класи, модулі.
   - Наступні версії (ES2016, ES2017 тощо) випускаються щороку, додаючи
     поступові покращення (наприклад, `async/await`, оператор `??`, методи
     `includes`).

4. **Особливості ECMAScript:**

   - Визначає синтаксис (наприклад, як оголошуються змінні, функції).
   - Встановлює базові об'єкти (`Object`, `Array`, `Date`).
   - Регулює поведінку виконання коду (обробка помилок, область видимості тощо).

#### Чому це важливо:

- ECMAScript гарантує сумісність та стандартизацію між різними реалізаціями
  JavaScript у браузерах, серверах та інших середовищах.

</details>

<details>
<summary>63. У чому різниця між ключовими словами var, let та const?</summary>

#### JavaScript

**`var` `let` `const`**

- Різниця між `var`, `let` та `const` у JavaScript пов'язана з їхньою областю
  видимості, можливістю перевизначення та поведінкою при використанні.

1. `var`

   - **Область видимості:** Функціональна або глобальна. `var` ігнорує блочну
     область (наприклад, у циклах чи умовах).

     ```javascript
     if (true) {
       var x = 10;
     }
     console.log(x); // 10
     ```

   - **Підняття (Hoisting):** Оголошення `var` піднімається на початок області,
     але значення залишається `undefined` до моменту присвоєння.

     ```javascript
     console.log(a); // undefined
     var a = 5;
     ```

   - **Перевизначення:** Можна перевизначити або повторно оголосити ту саму
     змінну в тій же області.

     ```javascript
     var a = 5;
     var a = 10; // Допустимо
     ```

2. `let`

   - **Область видимості:** Блочна (межі {}). Значення `let` існує тільки в
     межах блоку, де вона оголошена.

   ```javascript
   if (true) {
     let y = 20;
   }
   console.log(y); // Помилка: y is not defined
   ```

   - **Підняття (Hoisting):** Оголошення піднімається, але перебуває у "темній
     зоні" (`Temporal Dead Zone`) до моменту ініціалізації.

   ```javascript
   console.log(b); // Помилка: Cannot access 'b' before initialization
   let b = 5;
   ```

   - **Перевизначення:** Не можна повторно оголосити змінну з тим самим ім'ям у
     межах однієї області.

   ```javascript
   let c = 10;
   let c = 20; // Помилка: Identifier 'c' has already been declared
   ```

3. `const`

   - Область видимості: Блочна, як і у let.

   - Підняття (Hoisting): Аналогічно let, перебуває у "темній зоні".

   - Перевизначення: Значення змінної const не можна змінити після
     ініціалізації.

   ```javascript
   const z = 30;
   z = 40; // Помилка: Assignment to constant variable
   ```

   - Модифікація об’єктів: Об'єкти та масиви, оголошені через const, можуть бути
     змінені, але не може бути змінена сама змінна.

   ```javascript
   const obj = { a: 1 };
   obj.a = 2; // Допустимо
   obj = {}; // Помилка
   ```

#### Коротко:

| Властивість             | `var`                      | `let`              | `const`            |
| ----------------------- | -------------------------- | ------------------ | ------------------ |
| **Область видимості**   | Функціональна/глобальна    | Блочна             | Блочна             |
| **Підняття (Hoisting)** | Так (значення `undefined`) | Так ("темна зона") | Так ("темна зона") |
| **Перевизначення**      | Дозволено                  | Заборонено         | Заборонено         |
| **Зміна значення**      | Дозволено                  | Дозволено          | Заборонено         |

</details>

<details>
<summary>64. Що таке класи (Classes)?</summary>

#### JavaScript

**Classes**

- Класи в JavaScript - це синтаксичний цукор над прототипним успадкуванням, яка
  спрощує створення об'єктів і роботи з ними. Вони були введені в ECMAScript
  2015 (ES6) і дозволяють більш зручну організацію коду, схожу на інші
  об'єктно-орієнтовані мови.

#### Основні характеристики:

1. **Оголошення класу:** Класи визначаються за допомогою ключового слова
   `class`.

   ```javascript
   class Person {
     constructor(name, age) {
       this.name = name;
       this.age = age;
     }
     greet() {
       return `Hi, I'm ${this.name} and I'm ${this.age} years old.`;
     }
   }

   const person = new Person('Alice', 30);
   console.log(person.greet()); // Hi, I'm Alice and I'm 30 years old.
   ```

2. **Конструктор (`constructor`):**

   - Метод, який викликається під час створення екземпляра класу.
   - В ньому зазвичай ініціалізуються властивості об'єкта.

   ```javascript
   class Animal {
     constructor(type) {
       this.type = type;
     }
   }

   const cat = new Animal('Cat');
   console.log(cat.type); // Cat
   ```

3. **Методи класу:**

   - Методи, які є загальними для всіх екземплярів.

   ```javascript
   class MathOperations {
     add(a, b) {
       return a + b;
     }
   }

   const math = new MathOperations();
   console.log(math.add(2, 3)); // 5
   ```

4. **Статичні методи (`static`):**

   - Прив'язані до самого класу, а не до його екземплярів.

   ```javascript
   class Calculator {
     static multiply(a, b) {
       return a * b;
     }
   }

   console.log(Calculator.multiply(4, 5)); // 20
   ```

5. **Наслідування (`extends`):**

   - Дозволяє створювати класи, що успадковують властивості та методи іншого
     класу.

   ```javascript
   class Animal {
     constructor(name) {
       this.name = name;
     }
     speak() {
       return `${this.name} makes a noise.`;
     }
   }

   class Dog extends Animal {
     speak() {
       return `${this.name} barks.`;
     }
   }

   const dog = new Dog('Rex');
   console.log(dog.speak()); // Rex barks.
   ```

6. **Гетери та сетери:**

   - Методи, які дозволяють отримувати або встановлювати значення властивостей.

   ```javascript
   class Rectangle {
     constructor(width, height) {
       this.width = width;
       this.height = height;
     }

     get area() {
       return this.width * this.height;
     }

     set resize(newWidth) {
       this.width = newWidth;
     }
   }

   const rect = new Rectangle(5, 10);
   console.log(rect.area); // 50
   rect.resize = 8;
   console.log(rect.area); // 80
   ```

#### Чому класи корисні?

- **Зрозуміла структура:** Полегшують читання та розуміння коду.
- **Інкапсуляція:** Забезпечують приховування деталей реалізації.
- **Повторне використання:** Завдяки наслідуванню.
- **Сумісність з прототипним підходом:** Під капотом класи все ще використовують
  прототипи.

</details>

<details>
<summary>65. Що таке шаблонні літерали (Template Literals)?</summary>

#### JavaScript

#### Template Literals

- Шаблонні літерали (`Template Literals`) - це синтаксис для створення рядків у
  JavaScript, який дозволяє використовувати багатоособливостей, таких як
  інтерполяція змінних, багаторядкові рядки та додавання виразів. Вони були
  введені в ES6 (ECMAScript 2015).

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

- Шаблонні літерали оголошуються за допомогою зворотних лапок (``), а не
  звичайних лапок ' або ".

#### Основні можливості:

1. **Інтерполяція змінних і виразів:** Використовується синтаксис ${...} для
   вставлення змінних або виразів у рядок.

   ```javascript
   const name = 'Alice';
   const age = 30;
   console.log(`Hi, my name is ${name} and I am ${age} years old.`);
   // Hi, my name is Alice and I am 30 years old.
   ```

2. **Багаторядкові рядки:** Шаблонні літерали дозволяють створювати
   багаторядкові рядки без використання символів переносу \n.

   ```javascript
   const message = `This is a
      multi-line string.`;
   console.log(message);
   // This is a
   // multi-line string.
   ```

3. **Вбудовані вирази:** В шаблон можна вставляти не лише змінні, але й будь-які
   JavaScript вирази.

   ```javascript
   const a = 5;
   const b = 10;
   console.log(`The sum of ${a} and ${b} is ${a + b}.`);
   // The sum of 5 and 10 is 15.
   ```

4. **Виклик функцій у шаблоні:**

   ```javascript
   const getGreeting = () => 'Hello!';
   console.log(`${getGreeting()}, world!`);
   // Hello!, world!
   ```

5. **Використання з тегованими шаблонними літералами (Tagged Templates):**
   Теговані шаблони дозволяють обробляти рядок за допомогою функції перед
   відображенням.

   ```javascript
   function tag(strings, ...values) {
     return strings[0] + values.map(v => v.toUpperCase()).join('');
   }

   const name = 'Alice';
   console.log(tag`Hello, ${name}!`);
   // Hello, ALICE!
   ```

#### Чому шаблонні літерали корисні:

1.  **Зручність і читабельність:**

    - Спрощують створення динамічних рядків.
    - Легше писати багаторядкові рядки.

2.  **Менше помилок:**

    - Відсутність необхідності вручну конкатенувати рядки з +.

3.  **Розширюваність:**

    - Можливість використовувати теговані шаблони для складних обробок тексту
      (наприклад, переклад, перевірка безпеки даних тощо).

#### Приклад:

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

const greeting = `User ${user.name} is ${user.age} years old.`;
console.log(greeting);
// User John is 25 years old.
```

</details>

<details>
<summary>66. Що таке модулі (Modules)?</summary>

#### JavaScript

**Модулі (Modules)** в JavaScript - це спосіб організації коду, який дозволяє
розбивати програму на менші, ізольовані частини (файли) з чітко визначеними
залежностями. Модулі допомагають зробити код більш структурованим, повторно
використовуваним і легшим у підтримці.

#### Основні концепції модулів:

1.  **Експорт (`export`):**

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

           - Іменований експорт (export):

      ```javascript
      export const name = 'Alice';
      export function greet() {
        return 'Hello!';
      }
      ```

           - Експорт за замовчуванням (export default):

      ```javascript
      export default function greet() {
        return 'Hello, world!';
      }
      ```

2.  **Імпорт (`import`):**

    - Використовується для підключення функцій, змінних або об'єктів з іншого
      модуля.
    - Іменований імпорт:

      ```javascript
      import { name, greet } from './module.js';
      console.log(name); // Alice
      console.log(greet()); // Hello!
      ```

    - Імпорт за замовчуванням:

      ```javascript
      import greet from './module.js';
      console.log(greet()); // Hello, world!
      ```

3.  **Строгий режим:** Усі модулі працюють у строгому режимі (`strict mode`) за
    замовчуванням.

4.  **Одинична область видимості:**

    - Кожен модуль має власну область видимості, що запобігає конфліктам змінних
      з іншими модулями.

- **Переваги модулів:**

1. **Ізоляція:**

   - Уникнення глобального простору імен.

2. **Повторне використання коду:**

   - Можливість експортувати та імпортувати компоненти між різними частинами
     програми.

3. **Простота підтримки:**

   - Легше працювати з невеликими частинами коду.

4. **Ясність залежностей:**
   - Модулі чітко вказують, які частини коду їм потрібні.

- **Приклад:**

  `math.js` (модуль):

  ```javascript
  export const add = (a, b) => a + b;
  export const subtract = (a, b) => a - b;
  export default (a, b) => a \* b; // Експорт за замовчуванням
  ```

  `app.js` (основний файл):

  ```javascript
  import multiply, { add, subtract } from './math.js';

  console.log(add(2, 3)); // 5
  console.log(subtract(7, 4)); // 3
  console.log(multiply(3, 4)); // 12
  ```

- **Умови використання:** - Модулі вимагають, щоб файли були з розширенням `.js`
  або `.mjs`. - У браузерах потрібно використовувати атрибут `type="module"` у
  `<script>`:

  ```html
  <script type="module" src="app.js"></script>
  ```

  - Для Node.js модулі доступні через import/export (ESM) або require
    (CommonJS).

- **Різновиди модулів:**

1. ESM (ECMAScript Modules):

- Вбудований стандарт із використанням import/export.
- Сучасний підхід.

2. CommonJS:

   - Використовується в Node.js (require/module.exports).
   - Старіший підхід, менш зручний для браузерів.

</details>

<details>
<summary>67. Навіщо потрібен оператор опціональної послідовності?</summary>

#### JavaScript

**Optional Chaining**

- Оператор опціональної послідовності (**_Optional Chaining_**, `?.`)
  використовується для безпечного доступу до властивостей об'єкта або виклику
  методів, навіть якщо деякі з цих властивостей або методів можуть бути `null`
  або `undefined`. Він запобігає помилкам типу
  `Cannot read property of undefined`.

- **Як працює:**

1. **_Перевіряє наявність властивості:_** Якщо властивість існує, повертає її
   значення. Інакше повертає `undefined`.
2. **_Припиняє виконання, якщо значення `null` або `undefined`:_** Не викликає
   помилок і просто повертає `undefined`.

- Приклади використання:

1. **Доступ до вкладених властивостей:**

   - Без оператора:

   ```javascript
   const user = { profile: { name: 'Alice' } };
   console.log(user.profile.name); // Alice
   console.log(user.address.city); // Помилка
   ```

   - З оператором:

   ```javascript
   const user = { profile: { name: 'Alice' } };
   console.log(user.profile?.name); // Alice
   console.log(user.address?.city); // undefined
   ```

2. **Виклик методів:**

   ```javascript
   const user = {
     greet() {
       return 'Hello!';
     },
   };

   console.log(user.greet?.()); // Hello!
   console.log(user.sayGoodbye?.()); // undefined
   ```

3. **Доступ до елементів масиву:**

   ```javascript
   const data = null;
   console.log(data?.[0]); // undefined
   ```

4. **Комбінування з оператором Nullish Coalescing (`??`):** Для встановлення
   значення за замовчуванням:

   ```javascript
   const user = null;
   console.log(user?.profile?.name ?? 'Default Name'); // Default Name
   ```

- **Навіщо це потрібно:**

1. **Запобігання помилок:** Уникає аварійного завершення програми через доступ
   до невизначених властивостей.
2. **Зручність:** Код стає коротшим і зрозумілішим.
3. **Безпека:** Не потрібно вручну перевіряти кожен рівень вкладеності:

   ```javascript
   if (user && user.profile && user.profile.name) {
     console.log(user.profile.name);
   }
   // Заміна:
   console.log(user?.profile?.name);
   ```

- **Коли використовувати:**

  - При роботі з глибоко вкладеними об'єктами або даними, які можуть бути
    частково відсутні (наприклад, відповіді API).

</details>

<details>
<summary>68. Що таке генератори?</summary>

#### JavaScript

#### Генератори

- **Генератори** - це функції в JavaScript, які можуть призупиняти виконання та
  відновлювати його пізніше, що дозволяє створювати послідовності значень або
  керувати асинхронним кодом. Генератори визначаються за допомогою ключового
  слова `function*` і використовують оператор `yield` для повернення проміжних
  результатів.

- **Основні властивості генераторів:**

1. **Призупинення виконання:**

   - Використання оператора `yield` дозволяє зупинити виконання функції та
     повернути значення.

2. **Відновлення виконання:**

   - Метод `next()` відновлює виконання з того місця, де було зупинено.

3. **Ітератори:**

   - Генератори є ітераторами, тому їх можна використовувати в циклах `for...of`
     та інших контекстах ітерації.

- **Синтаксис:**

  - Оголошення генератора:

    ```javascript
    function* generatorFunction() {
      yield 'First value';
      yield 'Second value';
      return 'Done';
    }
    ```

  - Використання:

    ```javascript
    const gen = generatorFunction();

    console.log(gen.next()); // { value: "First value", done: false }
    console.log(gen.next()); // { value: "Second value", done: false }
    console.log(gen.next()); // { value: "Done", done: true }
    console.log(gen.next()); // { value: undefined, done: true }
    ```

- **Приклади використання:**

  1. Створення послідовностей:

  ```javascript
  function* count() {
    let i = 0;
    while (true) {
      yield i++;
    }
  }

  const counter = count();
  console.log(counter.next().value); // 0
  console.log(counter.next().value); // 1
  console.log(counter.next().value); // 2
  ```

2. Перебір значень за допомогою `for...of`:

   ```javascript
   function* colors() {
     yield 'red';
     yield 'green';
     yield 'blue';
   }

   for (const color of colors()) {
     console.log(color);
   }
   // red
   // green
   // blue
   ```

3. Керування асинхронним кодом: Генератори можуть бути використані для
   асинхронного виконання з функціями, що повертатимуть проміси:

   ```javascript
   function* asyncGenerator() {
     console.log(yield Promise.resolve('First promise resolved'));
     console.log(yield Promise.resolve('Second promise resolved'));
   }

   const gen = asyncGenerator();
   gen.next().value.then(result => gen.next(result).value.then(console.log));
   ```

4. Симуляція нескінченних структур:

   ```javascript
   function* fibonacci() {
     let [prev, curr] = [0, 1];
     while (true) {
       yield curr;
       [prev, curr] = [curr, prev + curr];
     }
   }

   const fib = fibonacci();
   console.log(fib.next().value); // 1
   console.log(fib.next().value); // 1
   console.log(fib.next().value); // 2
   console.log(fib.next().value); // 3
   ```

- **Переваги:**

1. Контроль виконання: Генератори дають змогу вручну керувати виконанням
   функції.
2. Легкість створення послідовностей: Простий спосіб створювати ітеративні
   послідовності.
3. Асинхронне програмування: Спрощують управління асинхронними потоками даних
   (особливо до введення async/await).

- Обмеження:

1. Генератори не паралельні; виконання призупиняється тільки в межах поточного
   виклику.
2. Асинхронність у генераторах менш інтуїтивна порівняно з async/await.

- Висновок: Генератори зручні для роботи з ітераторами, асинхронним кодом та
  складними послідовностями.

</details>

<details>
<summary>69. Що таке регулярні вирази (RegEx)?</summary>

#### JavaScript

**RegEx**

- **Регулярні вирази (Regular Expressions, RegEx)** - це шаблони, які
  використовуються для пошуку, перевірки, або маніпулювання текстом. Вони
  дозволяють ефективно працювати з текстовими рядками за допомогою спеціального
  синтаксису.

- **Основні можливості:**

  - **Пошук:** Знаходження підрядків у тексті.
  - **Перевірка:** Визначення, чи відповідає текст певному шаблону.
  - **Заміна:** Модифікація тексту на основі відповідностей.

- **Синтаксис:**

  - Оголошення регулярного виразу:

    Літеральна нотація:

    ```javascript
    const regex = /pattern/flags;
    ```

    Конструктор:

    ```javascript
    const regex = new RegExp('pattern', 'flags');
    ```

  - Прапори (Flags):
    - `g` - Глобальний пошук (не зупиняється на першій відповідності).
    - `i` - Ігнорування регістру.
    - `m` - Багаторядковий режим.
    - `s` - Дозволяє . збігатися з символом нового рядка.
    - `u` - Включає підтримку Юнікоду.
    - `y` - Суворий пошук з прив’язкою до позиції.

- **Приклади використання:**

  - **Пошук тексту:**

  ```javascript
  const text = 'Hello World!';
  const regex = /world/i;
  console.log(regex.test(text)); // true
  ```

  - **Заміна тексту:**

  ```javascript
  const text = 'foo bar foo';
  const regex = /foo/g;
  console.log(text.replace(regex, 'baz')); // "baz bar baz"
  ```

  - **Витяг відповідностей:**

  ```javascript
  const text = 'email@example.com';
  const regex = /\w+@\w+\.\w+/;
  console.log(text.match(regex)); // ["email@example.com"]
  ```

- **Основні елементи шаблонів:**

1. **Літери та цифри:** Збігаються з буквами та цифрами буквально.

2. **Спеціальні символи:**

   - `.` - Будь-який символ (окрім нового рядка).
   - `\d` - Цифра (0-9).
   - `\w` - Будь-яка літера, цифра або \_.
   - `\s` - Пробіл.
   - `\b` - Межа слова.
   - `^` - Початок рядка.
   - `$` - Кінець рядка.

3. **Модифікатори:**

   - `+` - Один або більше.
   - `*` - Нуль або більше.
   - `?` - Нуль або один.
   - `{n}` - Рівно n разів.
   - `{n,}` - Щонайменше n разів.
   - `{n,m}` - Від n до m разів.

4. **Групи та альтернація:**

   - `(abc)` - Групування.
   - `|` - Або (альтернація).

5. **Екранування:** Щоб використовувати спеціальний символ буквально, перед ним
   додається `\`:

   ```javascript
   const regex = /\./;
   console.log('a.b'.match(regex)); // ["."]
   ```

- **Приклад складного шаблону:**

  - Пошук номерів телефонів у форматі `+380-XX-XXX-XXXX`:

  ```javascript
  const regex = /\+380-\d{2}-\d{3}-\d{4}/;
  console.log('+380-67-123-4567'.match(regex)); // ["+380-67-123-4567"]
  ```

- **Переваги:**

1. Швидка перевірка текстових шаблонів.
2. Універсальність: працюють у багатьох мовах програмування.
3. Потужність: дозволяють описувати складні текстові патерни.

- **Недоліки:**

1. Складність для читання та написання складних шаблонів.
2. Потенційно повільне виконання на великих текстах із неефективними виразами.

- Висновок: Регулярні вирази - незамінний інструмент для роботи з текстами, якщо
  розуміти їхній синтаксис і використовувати обережно.

</details>

<details>
<summary>70. Що таке temporal dead zone?</summary>

#### JavaScript

- **Temporal Dead Zone (TDZ)** - це проміжок часу між початком області видимості
  змінної, оголошеної через let або const, і моментом, коли ця змінна фактично
  ініціалізується. У цей період спроба доступу до змінної призведе до помилки
  `ReferenceError`.

- Як це працює:

1. Змінні, оголошені за допомогою `let` і `const`, піднімаються (`hoisting`),
   але не ініціалізуються.
2. Поки код не досягне місця, де змінна оголошена, вона перебуває в TDZ.

- Приклад:

  ```javascript
  console.log(a); // ReferenceError: Cannot access 'a' before initialization
  let a = 5;
  ```

  - Змінна a піднята (`hoisted`) на початок блоку, але не ініціалізована.
  - Вона перебуває у `TDZ` до моменту, коли код досягає її оголошення
    (`let a = 5`).

- **Особливості TDZ:**

1. **_Область видимості:_** `TDZ` існує в межах блоку, функції чи скрипта, де
   змінна оголошена.

   ```javascript
   {
     console.log(x); // ReferenceError
     let x = 10;
   }
   ```

2. **_Функції та TDZ:_** Якщо змінна використовується в функції до її
   оголошення, це також викличе `ReferenceError`.

   ```javascript
   function test() {
     console.log(y); // ReferenceError
     let y = 20;
   }
   ```

3. **_Відмінність від var:_** Змінні, оголошені через `var`, не мають `TDZ`.
   Вони ініціалізуються значенням `undefined`.

   ```javascript
   console.log(b); // undefined
   var b = 15;
   ```

- Навіщо це потрібно:

  1. Попередження помилок: `TDZ` захищає від доступу до змінної до її явного
     оголошення, зменшуючи кількість логічних помилок.
  2. Забезпечення блочних областей видимості: Гарантує коректну роботу з
     блоками, особливо в умовах, де змінні часто переписуються.

- Висновок: `Temporal Dead Zone` - це механізм, який покращує передбачуваність і
  безпеку коду, але вимагає уважного дотримання порядку оголошення змінних.

</details>

<details>
<summary>71. Яка різниця між function declaration та function expression?</summary>

#### JavaScript

#### Різниця між `Function Declaration` та `Function Expression`

| Властивість                    | Function Declaration                       | Function Expression                                                       |
| ------------------------------ | ------------------------------------------ | ------------------------------------------------------------------------- |
| **Синтаксис**                  | `function name() { ... }`                  | `const name = function() { ... };` або `const name = () => { ... };`      |
| **Ім’я функції**               | Обов’язкове                                | Може бути анонімною                                                       |
| **Підняття (Hoisting)**        | Піднімається повністю, доступна до виклику | Піднімається лише оголошення змінної, але не ініціалізація функції        |
| **Використання до оголошення** | Дозволено                                  | Заборонено (отримаєте `ReferenceError`)                                   |
| **Зручність в рекурсії**       | Просте використання через ім’я функції     | Для рекурсії потрібно використовувати ім’я змінної або `arguments.callee` |
| **Контекст**                   | Підходить для декларативного оголошення    | Часто використовується в якості значення змінної або параметра            |

#### Приклади:

1. **Function Declaration**:

```javascript
// Оголошення
function greet() {
  console.log('Hello!');
}

// Виклик до визначення - працює
greet(); // Hello!
```

2. **Function Expression:**

```javascript
// Оголошення
const greet = function () {
  console.log('Hello!');
};

// Виклик до визначення - ReferenceError
greet(); // Hello!
```

#### Головні відмінності:

1. Підняття:

   - `Function Declaration` доступна до моменту оголошення завдяки hoisting.
   - `Function Expression` не піднімається з ініціалізацією; доступна тільки
     після оголошення.

2. Гнучкість:

   - `Function Expression` може бути анонімною, використовуватись в колбеках і
     як значення змінної.
   - `Function Declaration` завжди має ім’я, зручне для читаємого та
     структурованого коду.

- Висновок: Використовуйте `Function Declaration` для глобальних функцій і
  `Function Expression` для динамічного створення або передачі функцій.

</details>

<details>
<summary>72. Типи таймерів у JavaScript?</summary>

#### JavaScript

#### Типи таймерів у JavaScript

- У JavaScript є два основні типи таймерів:

1. `setTimeout`

- Використовується для виконання коду один раз після заданої затримки (у
  мілісекундах).
- Повертає **ідентифікатор таймера**, який можна використовувати для скасування.

```javascript
const timerId = setTimeout(() => {
  console.log('Виконується через 2 секунди');
}, 2000);

// Скасування таймера
clearTimeout(timerId);
```

2. `setInterval`

- Використовується для виконання коду з фіксованим інтервалом часу (у
  мілісекундах).
- Повертає **ідентифікатор таймера**, який можна використовувати для скасування.

```javascript
const intervalId = setInterval(() => {
  console.log('Виконується кожні 3 секунди');
}, 3000);

// Скасування інтервалу
clearInterval(intervalId);
```

#### Важливі моменти:

- Таймери не гарантують точність виконання через обмеження в Event Loop.
- Затримка не є мінімальним часом виконання, а лише інструкцією для Event Loop.

</details>

<details>
<summary>73. Які методи рядків у JavaScript ти знаєш?</summary>

#### JavaScript

#### Методи рядків у JavaScript

- JavaScript надає різноманітні методи для роботи з рядками. Ось найпоширеніші:

1. `length`

- Повертає довжину рядка.

```javascript
const str = 'Hello, world!';
console.log(str.length); // 13
```

2. `toUpperCase()` / `toLowerCase()`

- Перетворює рядок у верхній або нижній регістр.

```javascript
console.log('hello'.toUpperCase()); // "HELLO"
console.log('WORLD'.toLowerCase()); // "world"
```

3. `trim()`

- Видаляє пробіли з початку та кінця рядка.

```javascript
const str = '   Hello!   ';
console.log(str.trim()); // "Hello!"
```

4. `includes()`

- Перевіряє, чи міститься підрядок у рядку. Повертає true або false.

```javascript
console.log('Hello, world!'.includes('world')); // true
console.log('Hello, world!'.includes('foo')); // false
```

5. `indexOf()` / `lastIndexOf()`

- Повертає індекс першого або останнього входження підрядка. Повертає -1, якщо
  підрядок не знайдено.

```javascript
console.log('Hello, world!'.indexOf('o')); // 4
console.log('Hello, world!'.lastIndexOf('o')); // 8
```

6. `startsWith()` / `endsWith()`

- Перевіряє, чи починається або закінчується рядок на заданий підрядок.

```javascript
console.log('Hello, world!'.startsWith('Hello')); // true
console.log('Hello, world!'.endsWith('world!')); // true
```

7. `slice()`

- Повертає частину рядка між заданими індексами.

```javascript
console.log('Hello, world!'.slice(0, 5)); // "Hello"
console.log('Hello, world!'.slice(-6)); // "world!"
```

8. `substring()`

- Подібний до slice(), але не підтримує негативні індекси.

```javascript
console.log('Hello, world!'.substring(0, 5)); // "Hello"
console.log('Hello, world!'.substring(7)); // "world!"
```

9. `replace()` / `replaceAll()`

- Замінює частини рядка.

```javascript
console.log('Hello, world!'.replace('world', 'JavaScript')); // "Hello, JavaScript!"
console.log('Hello, world! world!'.replaceAll('world', 'JS')); // "Hello, JS! JS!"
```

10. `split()`

- Розділяє рядок на масив підрядків за вказаним роздільником.

```javascript
console.log('a,b,c'.split(',')); // ["a", "b", "c"]
```

11. `repeat()`

- Повторює рядок задану кількість разів.

```javascript
console.log('Ha!'.repeat(3)); // "Ha!Ha!Ha!"
```

12. `padStart()` / `padEnd()`

- Додає символи на початок або кінець рядка до заданої довжини.

```javascript
console.log('5'.padStart(3, '0')); // "005"
console.log('5'.padEnd(3, '0')); // "500"
```

13. `charAt()` / `charCodeAt()`

- Повертає символ або код символу за заданим індексом.

```javascript
console.log('Hello'.charAt(1)); // "e"
console.log('Hello'.charCodeAt(1)); // 101
```

14. `concat()`

- Об'єднує рядки.

```javascript
console.log('Hello'.concat(', ', 'world!')); // "Hello, world!"
```

15. `match()` / `matchAll()`

- Шукає збіги за регулярним виразом.

```javascript
console.log('abc123'.match(/\d+/)); // ["123"]
console.log([...'abc123abc'.matchAll(/abc/g)]); // [Array(1), Array(1)]
```

16. `toString()`

- Повертає рядкове представлення об'єкта.

```javascript
const num = 123;
console.log(num.toString()); // "123"
```

- Ці методи дають широкий вибір для роботи з рядками в JavaScript.

</details>

<details>
<summary>74. Які методи масивів у JavaScript ти знаеш?</summary>

#### JavaScript

#### Методи масивів у JavaScript

- JavaScript надає багатий набір методів для роботи з масивами. Нижче описані
  основні з них:

1. `length`

- Повертає кількість елементів у масиві.

```javascript
const arr = [1, 2, 3];
console.log(arr.length); // 3
```

2. `push()` / `pop()`

- Додає або видаляє елементи з кінця масиву.

```javascript
const arr = [1, 2];
arr.push(3); // [1, 2, 3]
arr.pop(); // [1, 2]
```

1. `unshift()` / `shift()`

- Додає або видаляє елементи з початку масиву.

```javascript
const arr = [2, 3];
arr.unshift(1); // [1, 2, 3]
arr.shift(); // [2, 3]
```

4. `forEach()`

- Виконує задану функцію для кожного елемента масиву.

```javascript
[1, 2, 3].forEach(num => console.log(num));
// Виведе: 1, 2, 3
```

5. `map()`

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

```javascript
const squared = [1, 2, 3].map(num => num ** 2);
console.log(squared); // [1, 4, 9]
```

6. `filter()`

- Створює новий масив із елементів, що відповідають умові.

```javascript
const even = [1, 2, 3, 4].filter(num => num % 2 === 0);
console.log(even); // [2, 4]
```

7. `reduce()` / `reduceRight()`

- Зводить масив до одного значення.

```javascript
const sum = [1, 2, 3, 4].reduce((acc, num) => acc + num, 0);
console.log(sum); // 10
```

8. `find()` / `findIndex()`

- Повертає перший елемент (або індекс), що відповідає умові.

```javascript
const arr = [1, 2, 3, 4];
console.log(arr.find(num => num > 2)); // 3
console.log(arr.findIndex(num => num > 2)); // 2
```

9. `some()` / `every()`

- Перевіряють, чи відповідає хоча б один або всі елементи умові.

```javascript
console.log([1, 2, 3].some(num => num > 2)); // true
console.log([1, 2, 3].every(num => num > 0)); // true
```

10. `sort()`

- Сортує елементи масиву.

```javascript
const arr = [3, 1, 4, 2];
arr.sort((a, b) => a - b); // [1, 2, 3, 4]
```

11. `reverse()`

- Змінює порядок елементів у масиві на протилежний.

```javascript
const arr = [1, 2, 3];
arr.reverse(); // [3, 2, 1]
```

12. `concat()`

- Об'єднує масиви.

```javascript
const arr1 = [1, 2];
const arr2 = [3, 4];
console.log(arr1.concat(arr2)); // [1, 2, 3, 4]
```

13. `slice()`

- Повертає частину масиву.

```javascript
const arr = [1, 2, 3, 4];
console.log(arr.slice(1, 3)); // [2, 3]
```

14. `splice()`

- Додає, видаляє або замінює елементи в масиві.

```javascript
const arr = [1, 2, 3, 4];
arr.splice(1, 2, 'a', 'b'); // [1, "a", "b", 4]
```

15. `join()`

- Об'єднує елементи масиву в рядок.

```javascript
const arr = [1, 2, 3];
console.log(arr.join('-')); // "1-2-3"
```

16. `flat()` / `flatMap()`

- Розгладжує вкладені масиви.

```javascript
console.log([1, [2, [3]]].flat(2)); // [1, 2, 3]
console.log([1, 2, 3].flatMap(num => [num, num * 2])); // [1, 2, 2, 4, 3, 6]
```

17. `fill()`

- Заповнює масив одним значенням.

```javascript
const arr = [1, 2, 3];
arr.fill(0, 1); // [1, 0, 0]
```

18. `Array.isArray()`

- Перевіряє, чи є об'єкт масивом.

```javascript
console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray('hello')); // false
```

- Ці методи забезпечують гнучкість для роботи з масивами у JavaScript.

</details>

<details>
<summary>75. Що таке чиста функція?</summary>

#### JavaScript

#### Що таке чиста функція?

- **Чиста функція (Pure Function)** - це функція, яка має такі характеристики:

1. **Детермінованість**:

   - Повертає однаковий результат для одного і того ж набору вхідних даних.
   - Наприклад, `f(x) = x + 2` завжди поверне `4`, якщо `x = 2`.

2. **Відсутність побічних ефектів**:
   - Функція не змінює зовнішній стан (наприклад, глобальні змінні, DOM, файли
     тощо).
   - Всі операції виконуються лише в межах функції.

- **Приклад чистої функції:**

```javascript
function add(a, b) {
  return a + b;
}

console.log(add(2, 3)); // 5
```

- **Ця функція:**

  - Не змінює жодних зовнішніх змінних.
  - Повертає однаковий результат для однакових аргументів.

- **Приклад нечистої функції:**

```javascript
let counter = 0;

function increment() {
  counter++;
  return counter;
}

console.log(increment()); // 1
console.log(increment()); // 2
```

- **Ця функція:**

  - Змінює зовнішню змінну counter.
  - Має побічний ефект, тому не є чистою.

- **Переваги чистих функцій:**

1. Передбачуваність:

   - Легше тестувати та налагоджувати.

2. Референційна прозорість:

   - Ви можете замінити виклик функції її результатом без зміни логіки.

3. Безпечність у паралельних обчисленнях:

   - Відсутність побічних ефектів робить функції безпечними для
     багатопоточності.

#### Використання в практиці:

- Чисті функції є важливим аспектом функціонального програмування, де функції
  використовуються як будівельні блоки для створення складних програм.
  Наприклад:

```javascript
const double = x => x * 2;
const square = x => x * x;

const result = [1, 2, 3, 4].map(double).map(square);
console.log(result); // [4, 16, 36, 64]
```

- Тут double і square є чистими функціями.

</details>

<details>
<summary>76. Як визначити наявність властивості в об'єкті?</summary>

#### JavaScript

#### Визначення властивості в об'єкті

- Для перевірки, чи існує певна властивість в об'єкті в JavaScript, можна
  використовувати кілька підходів:

1. **Оператор `in`**

- Перевіряє наявність властивості (включаючи успадковані) в об'єкті.

```javascript
const obj = { name: 'Alice', age: 25 };

console.log('name' in obj); // true
console.log('address' in obj); // false
```

2. **Метод `hasOwnProperty`**

- Перевіряє лише власні властивості об'єкта (не успадковані).

```javascript
const obj = { name: 'Alice', age: 25 };

console.log(obj.hasOwnProperty('name')); // true
console.log(obj.hasOwnProperty('toString')); // false (успадкована)
```

3. **Перевірка на `undefined`**

- Працює, якщо значення властивості не є undefined.

```javascript
const obj = { name: 'Alice', age: 25 };

console.log(obj.name !== undefined); // true
console.log(obj.address !== undefined); // false
```

4. **Оператор доступу з умовною перевіркою (`?.`)**

- Використовується для перевірки вкладених властивостей.

```javascript
const obj = { user: { name: 'Alice' } };

console.log(obj?.user?.name); // "Alice"
console.log(obj?.user?.address); // undefined
```

#### Рекомендація:

- Використовуйте `in` для перевірки всіх властивостей (включаючи успадковані).
- Використовуйте `hasOwnProperty`, якщо потрібно перевірити лише власні
  властивості об'єкта.

</details>

<details>
<summary>77. Різниця між host-об'єктами та нативними об'єктами?</summary>

#### JavaScript

#### Різниця між Host-об'єктами та Нативними об'єктами в JavaScript

- JavaScript має два типи об'єктів: **Host-об'єкти** та **Нативні об'єкти**.
  Розглянемо їхні відмінності:

1. **Host-об'єкти**

- Це об'єкти, які надаються середовищем виконання (браузер, Node.js тощо).
- Їхній набір залежить від середовища, в якому працює JavaScript.
- Приклади в браузері:

  - `window`
  - `document`
  - `console`
  - `XMLHttpRequest`
  - `fetch`

- **Приклад:**

```javascript
console.log(window.innerWidth); // Ширина вікна браузера
console.log(document.title); // Назва сторінки
```

- **Особливості:**
  - Не стандартизовані для всіх середовищ.
  - Можуть містити специфічні методи та властивості для конкретного середовища.

2. **Нативні об'єкти**

- Це вбудовані об'єкти, які є частиною специфікації ECMAScript.
- Вони доступні в будь-якому середовищі виконання JavaScript.
- Приклади:

  - `Object`
  - `Array`
  - `Function`
  - `Date`
  - `RegExp`

- **Приклад:**

```javascript
const arr = [1, 2, 3];
console.log(arr.length); // 3
console.log(new Date().getFullYear()); // Поточний рік
```

- **Особливості:**

  - Завжди однакові незалежно від середовища.
  - Визначені стандартом ECMAScript.

#### Основні відмінності між Host-об'єктами та Нативними об'єктами

| **Критерій**                  | **Host-об'єкти**                           | **Нативні об'єкти**                 |
| ----------------------------- | ------------------------------------------ | ----------------------------------- |
| **Джерело**                   | Надаються середовищем виконання            | Вбудовані у специфікацію ECMAScript |
| **Залежність від середовища** | Залежать від середовища (браузер, Node.js) | Незалежні від середовища            |
| **Приклади**                  | `window`, `document`, `console`            | `Object`, `Array`, `Date`           |
| **Стандартизація**            | Може бути специфічною для середовища       | Стандартизовані в ECMAScript        |

- **Рекомендації**

  - Використовуйте Нативні об'єкти для універсального та стандартного коду.
  - Використовуйте Host-об'єкти лише для роботи з конкретним середовищем,
    наприклад, браузером або сервером Node.js.

</details>

<details>
<summary>78. Що таке об'єктна обгортка (Wrapper Objects)?</summary>

#### JavaScript

#### Об'єктна обгортка (Wrapper Objects)

- **Об'єктна обгортка** - це тимчасовий об'єкт, який створюється для примітивних
  типів (`string`, `number`, `boolean`) у JavaScript, щоб дозволити доступ до
  методів і властивостей, характерних для об'єктів.

- Примітиви в JavaScript самі по собі не є об'єктами, але під час доступу до
  методів або властивостей, JavaScript автоматично створює об'єктну обгортку.

### Як це працює?

- Коли викликається метод або властивість примітива:
  - JavaScript створює тимчасовий об'єкт обгортки.
  - Здійснюється доступ до методу/властивості через цей об'єкт.
  - Після цього об'єкт-обгортка видаляється.

### Приклади

1. **Рядок (`String`)**

```javascript
const str = 'hello';
console.log(str.toUpperCase()); // "HELLO"

// JavaScript створює тимчасовий об'єкт String:
// const temp = new String("hello");
// temp.toUpperCase(); -> "HELLO"
```

2. **Число(`Number`)**

```javascript
const num = 42;
console.log(num.toFixed(2)); // "42.00"

// JavaScript створює тимчасовий об'єкт Number:
// const temp = new Number(42);
// temp.toFixed(2); -> "42.00"
```

3. **Булеве значення (`Boolean`)**

```javascript
const bool = true;
console.log(bool.toString()); // "true"

// JavaScript створює тимчасовий об'єкт Boolean:
// const temp = new Boolean(true);
// temp.toString(); -> "true"
```

#### Особливості

1. Тимчасовість

   - Об'єктна обгортка створюється тільки на час доступу до методів/властивостей
     і видаляється одразу після використання.

2. Незмінність примітивів
   - Оскільки примітиви є незмінними, зміни об'єктної обгортки не впливають на
     сам примітив.

```javascript
const str = 'hello';
str.tempProp = 'value';
console.log(str.tempProp); // undefined
```

- Після доступу до `str.tempProp` об'єкт-обгортка видаляється, тому змінена
  властивість не зберігається.

- **Різниця між об'єктами та примітивами**

  - **Примітиви:** зберігають свої значення напряму.
  - **Об'єкти:** є посиланням на область у пам'яті.

#### Ручне створення об'єктних обгорток

- Хоча об'єктні обгортки створюються автоматично, їх можна створити вручну за
  допомогою відповідних конструкторів.

```javascript
const strObj = new String('hello');
console.log(typeof strObj); // "object"
```

- Проте такий підхід не рекомендується через непотрібність у звичайному
  використанні.

</details>

<details>
<summary>79. Навіщо використовується оператор залишку (%)?</summary>

#### JavaScript

#### Використання оператору залишку (%)?

- Оператор залишку (`%`) використовується для визначення залишку від ділення
  одного числа на інше. Він є корисним у багатьох сценаріях програмування.

#### Як працює?

- Оператор залишку обчислює залишок від ділення за формулою:

`a % b = a - (Math.floor(a / b) * b)`

- **a** - ділене.
- **b** - дільник.
- Результат - залишок від ділення.

#### Приклади:

1. **Обчислення залишку**

```javascript
console.log(10 % 3); // 1 (10 = 3 * 3 + 1)
console.log(25 % 4); // 1 (25 = 4 * 6 + 1)
```

2. Робота з від'ємними числами

- У JavaScript залишок може бути від'ємним, якщо ділене негативне.

```javascript
console.log(-10 % 3); // -1
console.log(10 % -3); // 1
```

#### Застосування

1. Визначення парності числа

   - Якщо залишок від ділення на 2 дорівнює 0, число парне.
   - Якщо залишок не дорівнює 0, число непарне.

```javascript
const isEven = num => num % 2 === 0;

console.log(isEven(4)); // true
console.log(isEven(7)); // false
```

2. Циклічність (наприклад, індекси в масивах)

- Оператор залишку корисний для циклічного доступу до елементів.

```javascript
const arr = ['a', 'b', 'c'];
const index = 5 % arr.length; // 5 % 3 = 2
console.log(arr[index]); // "c"
```

3. Розподіл елементів

- Наприклад, для розподілу елементів по групах.

```javascript
const groupByTwo = arr => {
  const group1 = [];
  const group2 = [];

  arr.forEach(num => {
    if (num % 2 === 0) group1.push(num);
    else group2.push(num);
  });

  return { group1, group2 };
};

console.log(groupByTwo([1, 2, 3, 4])); // { group1: [2, 4], group2: [1, 3] }
```

4. Обмеження значення

- Наприклад, для обмеження значень у певному діапазоні.

```javascript
const maxLimit = 5;
console.log(7 % maxLimit); // 2
```

#### Висновок

- Оператор `%` є універсальним інструментом для роботи з залишками, перевірками
  на парність, циклічністю та розподілом. Його використання суттєво спрощує
  вирішення багатьох завдань у програмуванні.

</details>

<details>
<summary>80. Як працює boxing/unboxing у JavaScript?</summary>

#### JavaScript

**`boxing` / `unboxing` у JavaScript**

- **Boxing** та **Unboxing** у JavaScript - це процес автоматичного перетворення
  між примітивними типами даних (наприклад, `number`, `string`, `boolean`) і їх
  об'єктними обгортками (`Number`, `String`, `Boolean`).

#### Boxing (Обгортання)

- **Boxing** - це перетворення примітивного типу на об'єкт. Це відбувається
  автоматично, коли до примітивного значення застосовуються методи або
  властивості, які доступні тільки в об'єктах.

#### Як це працює?

1. JavaScript створює тимчасовий об'єкт обгортки для примітивного значення.
2. Застосовує метод чи властивість.
3. Видаляє тимчасовий об'єкт після використання.

#### Приклад:

```javascript
const str = 'hello';
console.log(str.toUpperCase()); // "HELLO"
```

#### Процес:

1. Boxing: створюється об'єкт `String("hello")`.
2. Викликається метод `toUpperCase()`.
3. Об'єкт видаляється, залишаючи результат `"HELLO"`.

#### Unboxing (Розпаковка)

- **Unboxing** - це зворотний процес, коли значення з об'єктної обгортки
  отримується у вигляді примітивного типу.

- **Як це працює?**

- JavaScript викликає методи `valueOf()` або `toString()` для об'єкта, щоб
  отримати його примітивне значення.

#### Приклад:

```javascript
const num = new Number(42);
console.log(num + 8); // 50
```

#### Процес:

1. Unboxing: викликається num.valueOf(), щоб отримати 42.
2. Виконується додавання: 42 + 8 = 50.

- **Об'єкти-обгортки**

  - JavaScript має вбудовані об'єкти-обгортки для кожного примітивного типу:

| Примітивний тип | Об'єктна обгортка |
| --------------- | ----------------- |
| `string`        | `String`          |
| `number`        | `Number`          |
| `boolean`       | `Boolean`         |
| `symbol`        | `Symbol`          |
| `bigint`        | `BigInt`          |

- **Приклад роботи з об'єктами-обгортками:**

```javascript
const strObj = new String('hello'); // Об'єкт
console.log(typeof strObj); // "object"

const strPrim = strObj.valueOf(); // Примітив
console.log(typeof strPrim); // "string"
```

#### Важливі моменти

1. **Boxing - автоматичний процес:**

   - Коли ви використовуєте методи або властивості примітивного типу.

2. **Unboxing - автоматичний процес:**

   - Відбувається, коли об'єкт використовується в контексті, який очікує
     примітив.

3. **Різниця між примітивами та об'єктами:**
   - Примітиви порівнюються за значенням, а об'єкти за посиланням.

**Приклад порівняння:**

```javascript
const str1 = 'hello';
const str2 = new String('hello');

console.log(str1 == str2); // true (Unboxing str2 до примітиву)
console.log(str1 === str2); // false (Різні типи: примітив і об'єкт)
```

- Висновок:

  - Boxing і Unboxing автоматизують взаємодію між примітивними типами та
    об'єктами, що робить JavaScript більш гнучким для використання методів та
    властивостей примітивів. Це важливий механізм, який допомагає зберігати
    баланс між простотою та потужністю мови.

</details>

<details>
<summary>81. Що таке мемоізація?</summary>

#### JavaScript

#### Мемоізація

- **Мемоізація** - це техніка оптимізації, яка зберігає результати виконання
  функцій для уникнення повторних обчислень при однакових вхідних даних.

#### Як працює мемоізація?

1. Функція перевіряє, чи результат для поточних аргументів вже збережений.
2. Якщо збережений результат знайдено, повертається він.
3. Якщо результату немає, функція обчислює його, зберігає у кеш і повертає.

#### Приклад реалізації мемоізації:

```javascript
function memoize(fn) {
  const cache = new Map();

  return function (...args) {
    const key = JSON.stringify(args);

    if (cache.has(key)) {
      console.log('З кешу:', key);
      return cache.get(key);
    }

    const result = fn(...args);
    cache.set(key, result);
    return result;
  };
}

// Оригінальна функція
function slowFunction(num) {
  console.log('Обчислення для:', num);
  return num * num;
}

// Мемоізована версія
const memoizedFunction = memoize(slowFunction);

console.log(memoizedFunction(5)); // Обчислення для: 5, 25
console.log(memoizedFunction(5)); // З кешу: [5], 25
console.log(memoizedFunction(10)); // Обчислення для: 10, 100
console.log(memoizedFunction(10)); // З кешу: [10], 100
```

- **Переваги мемоізації:**

  - Підвищення продуктивності за рахунок уникнення повторних обчислень.
  - Ефективне використання ресурсів.

- **Недоліки мемоізації:**

  - Збільшення споживання пам’яті через збереження кешу.
  - Можливість застарілих даних у кеші.

- **Де використовується мемоізація?**

  - Веб-додатки (оптимізація рендерингу компонентів).
  - Обчислення складних математичних операцій.
  - Зберігання результатів запитів до API.

</details>

<details>
<summary>82. Різниця між глибокою (deep) та поверхневою (shallow) копіями об'єкта?</summary>

#### JavaScript

#### Різниця між глибокою (deep) та поверхневою (shallow) копіями об'єкта

#### Основні відмінності:

| **Критерій**      | **Поверхнева копія (Shallow Copy)**                           | **Глибока копія (Deep Copy)**                                      |
| ----------------- | ------------------------------------------------------------- | ------------------------------------------------------------------ |
| **Що копіюється** | Лише верхній рівень властивостей.                             | Усі рівні об'єкта, включаючи вкладені структури.                   |
| **Залежність**    | Вкладені об'єкти копіюються за посиланням (shared reference). | Вкладені об'єкти копіюються рекурсивно, створюючи нові екземпляри. |
| **Ризик змін**    | Зміни у вкладених об'єктах відображаються в обох копіях.      | Копія повністю незалежна від оригіналу.                            |

#### Як зробити копію?

- **Поверхнева копія (Shallow Copy)**

##### Способи створення:

1. **Object.assign**:

   ```javascript
   const original = { a: 1, b: { c: 2 } };
   const shallowCopy = Object.assign({}, original);

   shallowCopy.b.c = 42;
   console.log(original.b.c); // Виведе: 42
   ```

2. **Spread-оператор:**

   ```javascript
   const original = { a: 1, b: { c: 2 } };
   const shallowCopy = { ...original };

   shallowCopy.b.c = 42;
   console.log(original.b.c); // Виведе: 42
   ```

- **Глибока копія (Deep Copy)**

#### Способи створення:

1. **JSON** (для об'єктів без функцій або посилань на інші об'єкти):

   ```javascript
   const original = { a: 1, b: { c: 2 } };
   const deepCopy = JSON.parse(JSON.stringify(original));

   deepCopy.b.c = 42;
   console.log(original.b.c); // Виведе: 2
   ```

2. **Рекурсивна функція:**

   ```javascript
   function deepCopy(obj) {
     if (obj === null || typeof obj !== 'object') return obj;

     const copy = Array.isArray(obj) ? [] : {};
     for (const key in obj) {
       if (obj.hasOwnProperty(key)) {
         copy[key] = deepCopy(obj[key]);
       }
     }
     return copy;
   }

   const original = { a: 1, b: { c: 2 } };
   const deepCopyObj = deepCopy(original);

   deepCopyObj.b.c = 42;
   console.log(original.b.c); // Виведе: 2
   ```

3. **Бібліотека Lodash:**

   ```javascript
   const _ = require('lodash');
   const original = { a: 1, b: { c: 2 } };
   const deepCopy = _.cloneDeep(original);

   deepCopy.b.c = 42;
   console.log(original.b.c); // Виведе: 2
   ```

- **Висновок:**

  - Використовуйте поверхневу копію, якщо об'єкт має лише верхній рівень
    властивостей.
  - Застосовуйте глибоку копію, якщо потрібно копіювати вкладені структури, щоб
    уникнути побічних ефектів.

</details>

<details>
<summary>83. Що таке ланцюжок викликів функцій (chaining)?</summary>

#### JavaScript

#### Ланцюжок викликів функцій (chaining)

#### Визначення

- Ланцюжок викликів (chaining) - це техніка в JavaScript, яка дозволяє викликати
  кілька методів об'єкта послідовно в одному виразі. Це досягається завдяки
  поверненню самого об'єкта (`this`) у кожному методі, що дозволяє викликати
  наступний метод без створення нового рядка коду.

#### Приклад:

```javascript
class Calculator {
  constructor(value = 0) {
    this.value = value;
  }

  add(number) {
    this.value += number;
    return this; // Повертаємо поточний об'єкт
  }

  subtract(number) {
    this.value -= number;
    return this; // Повертаємо поточний об'єкт
  }

  multiply(number) {
    this.value *= number;
    return this; // Повертаємо поточний об'єкт
  }

  divide(number) {
    if (number !== 0) {
      this.value /= number;
    }
    return this; // Повертаємо поточний об'єкт
  }

  getResult() {
    return this.value;
  }
}

const result = new Calculator()
  .add(10)
  .subtract(2)
  .multiply(4)
  .divide(2)
  .getResult();

console.log(result); // Виведе: 16
```

#### Особливості:

1. **Переваги:**

   - Зменшує кількість змінних у коді.

   - Робить код компактнішим і легшим для читання.

2. **Обмеження:**

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

   - Код може стати менш зрозумілим у разі надмірного використання.

#### Приклади ланцюжка у вбудованих об'єктах:

1. **Рядки:**

```javascript
const result = ' JavaScript '
  .trim()
  .toUpperCase()
  .replace('JAVASCRIPT', 'CHAINING');

console.log(result); // Виведе: CHAINING
```

2. **Масиви:**

```javascript
const result = [1, 2, 3, 4, 5]
.filter((num) => num % 2 === 0)
.map((num) => num \* 2)
.reduce((sum, num) => sum + num, 0);

console.log(result); // Виведе: 12
```

#### Висновок:

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

</details>

<details>
<summary>84. Що таке неоголошена змінна?</summary>

#### JavaScript

#### Що таке неоголошена змінна?

#### Визначення

- **Неоголошена змінна** (`undeclared variable`) - це змінна, яка
  використовується у коді без попереднього оголошення за допомогою ключових слів
  `var`, `let` або `const`.

#### Як це працює?

- Якщо змінна не оголошена, але їй присвоюється значення, JavaScript автоматично
  створює її як **глобальну змінну**.
- У строгому режимі (`strict mode`) використання неоголошених змінних викликає
  помилку.

#### Приклад без `strict mode`:

```javascript
function example() {
  x = 10; // Неоголошена змінна
  console.log(x); // Виведе: 10
}

example();
console.log(x); // Виведе: 10 (глобальна змінна створена автоматично)
```

Приклад із strict mode:

```javascript
'use strict';

function example() {
  x = 10; // Помилка: x is not defined
}

example();
```

#### Чому уникати неоголошених змінних?

1. **Глобальна область видимості:** Неоголошені змінні автоматично стають
   глобальними, що може призвести до конфліктів і помилок.
2. **Важко відстежити:** Код стає менш передбачуваним і важчим для налагодження.
3. **Сумісність із strict mode:** Використання строгого режиму допомагає
   уникнути неочікуваної поведінки.

#### Правильне оголошення змінних:

- Завжди оголошуйте змінні явно за допомогою `let`, `const` або `var`:

```javascript
function example() {
  let x = 10; // Явно оголошена змінна
  console.log(x); // Виведе: 10
}

example();
console.log(typeof x); // Виведе: undefined (x не є глобальною змінною)
```

#### Висновок:

- Неоголошені змінні можуть призвести до неочікуваної поведінки коду.
  Використовуйте `let` або `const` для безпечного та передбачуваного коду, а
  також активуйте строгий режим (`use strict`) для запобігання випадковому
  створенню неоголошених змінних.

</details>

<details>
<summary>85. Як передаються параметри у функцію: за посиланням чи значенням?</summary>

#### JavaScript

#### Визначення

- У JavaScript параметри функції передаються або **за значенням**, або **за
  посиланням**, в залежності від типу переданого значення.

#### Параметри, що передаються за значенням:

- Примітивні типи даних (наприклад, `number`, `string`, `boolean`, `null`,
  `undefined`, `symbol`, `bigint`) передаються **за значенням**.
- Копія значення передається функції, і будь-які зміни цього значення всередині
  функції не впливають на початкову змінну.

#### Приклад:

```javascript
function changeValue(a) {
  a = 20;
}

let num = 10;
changeValue(num);
console.log(num); // Виведе: 10 (значення не змінюється)
```

#### Параметри, що передаються за посиланням:

- Об'єкти (включаючи масиви та функції) передаються **за посиланням**.
- Функція отримує посилання на оригінальний об'єкт, тому зміни всередині функції
  впливають на оригінальний об'єкт.

#### Приклад:

```javascript
function changeObject(obj) {
  obj.name = 'Alice';
}

let person = { name: 'Bob' };
changeObject(person);
console.log(person.name); // Виведе: "Alice" (об'єкт змінено)
```

#### Чому так відбувається?

1. **Примітиви:** Примітивні значення є копіями самих себе, тому при їх передачі
   в функцію передається їх копія.

2. **Об'єкти:** Об'єкти в JavaScript зберігаються як посилання, тому при
   передачі об'єкта в функцію передається посилання на нього.

#### Висновок

- Примітиви передаються за значенням, тому зміни не впливають на оригінальне
  значення.

- Об'єкти передаються за посиланням, тому зміни в функції змінюють оригінальний
  об'єкт.

</details>

<details>
<summary>86. Плюси та мінуси іммутабельності? Як досягти іммутабельності у JS?</summary>

#### JavaScript

#### Іммутабельність у JavaScript

### Що таке іммутабельність?

**Іммутабельність** означає, що після створення об'єкт або значення не можуть
бути змінені. Будь-яка зміна створює новий об'єкт або значення.

#### Плюси іммутабельності

1. **Простота налагодження:**

   - Легше відслідковувати зміни в коді, оскільки дані не змінюються.

2. **Безпека:**

   - Зменшується ризик побічних ефектів через непередбачені зміни об'єктів.

3. **Сумісність із функціональним програмуванням:**

   - Іммутабельність є основою функціонального підходу, що покращує
     читабельність і тестування коду.

4. **Безпека багатопоточного виконання:**

   - У випадках, коли дані доступні кільком потокам, іммутабельні дані не
     потребують синхронізації.

5. **Оптимізація продуктивності:**

   - Можна використовувати техніки мемоізації або порівняння "за посиланням"
     (`===`).

#### Мінуси іммутабельності

1. **Витрати пам'яті:**

   - Кожна зміна створює нову копію об'єкта або масиву, що може збільшувати
     використання пам'яті.

2. **Зниження продуктивності:**

   - Створення нових об'єктів і копіювання даних може бути повільнішим, ніж
     зміна існуючих об'єктів.

3. **Ускладнення роботи:**

   - Іноді потрібні додаткові бібліотеки або техніки для підтримки
     іммутабельності (наприклад, `Immutable.js`).

#### Як досягти іммутабельності у JavaScript?

1. **Для примітивів:**

   - Примітиви у JavaScript вже іммутабельні.

2. **Для об'єктів:**

   - Використовуйте методи створення копій, такі як `Object.assign` або
     спред-оператор.

#### Приклад:

```javascript
const original = { name: 'Alice', age: 25 };
const copy = { ...original, age: 30 };

console.log(original); // { name: "Alice", age: 25 }
console.log(copy); // { name: "Alice", age: 30 }
```

3. **Для масивів:**

- Використовуйте методи, які не змінюють оригінальний масив (наприклад, map,
  filter, concat).

- **Приклад:**

```javascript
const original = [1, 2, 3];
const updated = [...original, 4];

console.log(original); // [1, 2, 3]
console.log(updated); // [1, 2, 3, 4]
```

4. **Використовуйте `Object.freeze`:**

- Заморожує об'єкт, забороняючи його зміну.

- **Приклад:**

```javascript
const frozen = Object.freeze({ name: 'Alice' });
frozen.name = 'Bob'; // Не змінить значення, у суворому режимі викличе помилку
console.log(frozen); // { name: "Alice" }
```

5. **Застосовуйте бібліотеки:**

- Використовуйте спеціалізовані бібліотеки для роботи з іммутабельними
  структурами даних (наприклад, Immutable.js або Immer).

#### Висновок

- Іммутабельність робить код передбачуванішим і безпечнішим, але може
  збільшувати використання пам'яті та ускладнювати роботу. Її доцільно
  використовувати, коли важливі чистота даних, багатопотоковість або
  функціональний підхід.

</details>

<details>
<summary>87. Типи спливаючих вікон JavaScript?</summary>

#### JavaScript

#### Типи спливаючих вікон у JavaScript

- JavaScript підтримує три основні типи спливаючих вікон для взаємодії з
  користувачем:

1. `alert`

- Використовується для відображення простого повідомлення.
- Не дозволяє взаємодію з рештою сторінки, поки користувач не закриє вікно.

#### Приклад:

```javascript
alert('Це інформаційне повідомлення.');
```

2. `confirm`

- Використовується для підтвердження дії користувачем.
- Повертає true, якщо користувач натиснув "OK", і false, якщо натиснув "Cancel".

#### Приклад:

```javascript
if (confirm('Ви впевнені?')) {
  console.log('Користувач підтвердив.');
} else {
  console.log('Користувач скасував.');
}
```

3. `prompt`

- Дозволяє користувачеві ввести текст.
- Повертає введений текст, або null, якщо користувач натиснув "Cancel".

#### Приклад:

```javascript
const name = prompt("Введіть ваше ім'я:");
if (name) {
  console.log(`Привіт, ${name}!`);
} else {
  console.log('Користувач нічого не ввів.');
}
```

#### Важливі моменти

- Ці методи є синхронними: блокують виконання коду, поки користувач не взаємодіє
  з вікном.
- Їх не рекомендується використовувати у сучасних веб-додатках через негативний
  вплив на UX.
- Краще використовувати кастомні модальні вікна, реалізовані на HTML, CSS і
  JavaScript, для кращого контролю над зовнішнім виглядом і поведінкою.

</details>

<details>
<summary>88. Типи об'єктів JavaScript?</summary>

#### JavaScript

#### Типи об'єктів у JavaScript

- У JavaScript існують різні типи об'єктів, які можна класифікувати наступним
  чином:

1. **Нативні об'єкти (Native Objects)**

- Це вбудовані об'єкти, визначені стандартом ECMAScript.

- **Приклади:**
  - `Object`
  - `Array`
  - `Function`
  - `Date`
  - `RegExp`
  - `Error`
  - `Promise`

2. **Глобальні об'єкти (Global Objects)**

- Доступні в будь-якому контексті без необхідності створення чи імпорту.

- **Приклади:**
  - `Math`
  - `JSON`
  - `console`
  - `globalThis`

3. **Об'єкти середовища виконання (Host Objects)**

- Надаються середовищем виконання (браузер або Node.js).

- **Браузер:**

  - `window`
  - `document`
  - `HTMLElement`
  - `localStorage`

- **Node.js:**
  - `process`
  - `Buffer`
  - `require`

4. **Користувацькі об'єкти (User-Defined Objects)**

- Об'єкти, створені користувачем вручну.

#### Приклад створення:

```javascript
const user = {
  name: 'Alice',
  age: 25,
  greet() {
    console.log(`Привіт, я ${this.name}`);
  },
};
```

5. Спеціалізовані об'єкти (Specialized Objects)

- Це об'єкти, створені через функції-конструктори або класи.

  - Приклади:

    - `Map`, `Set`, `WeakMap`, `WeakSet`
    - `Int8Array`, `Uint8Array`, `ArrayBuffer`
    - `Symbol`

6. **Прототипні об'єкти (Prototype Objects)**

   - Об'єкти, які слугують прототипами для інших об'єктів.
   - Всі об'єкти мають властивість [[Prototype]], яку можна отримати через
     Object.getPrototypeOf() або **proto**.

- **Приклад:**

```javascript
const parent = {
  greet() {
    console.log('Привіт');
  },
};
const child = Object.create(parent);
child.greet(); // "Привіт"
```

#### Коротке резюме

| **Тип об'єкта**    | **Приклади**                              |
| ------------------ | ----------------------------------------- |
| Нативні            | `Object`, `Array`, `Date`, `Promise`      |
| Глобальні          | `Math`, `JSON`, `console`, `globalThis`   |
| Об'єкти середовища | `window`, `document`, `process`, `Buffer` |
| Користувацькі      | Об'єкти, створені вручну                  |
| Спеціалізовані     | `Map`, `Set`, `ArrayBuffer`, `Symbol`     |
| Прототипні         | `Object.prototype`, кастомні прототипи    |

</details>

<details>
<summary>89. Парадигми програмування JavaScript?</summary>

#### JavaScript

#### Парадигми програмування в JavaScript

JavaScript підтримує кілька парадигм програмування, що робить його потужною
мовою для різних завдань.

| **Парадигма**                  | **Опис**                                                                                                                                     |
| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- |
| **Імперативне програмування**  | Фокус на покроковому описі логіки виконання. Код визначає, як виконувати задачу.                                                             |
| **Декларативне програмування** | Замість опису, як виконувати задачу, описується, що має бути виконано. Приклад: маніпуляції DOM за допомогою бібліотек (React, Vue).         |
| **Об'єктно-орієнтоване**       | Організація коду навколо об'єктів, що мають властивості та методи. Підтримується прототипне наслідування.                                    |
| **Функціональне**              | Використання функцій як першокласних об'єктів, уникання змінюваних даних, чисті функції, каррінг, композиція функцій.                        |
| **Асинхронне**                 | Обробка асинхронного коду через колбеки, проміси, `async/await`, що дозволяє ефективно працювати з I/O операціями та таймерами.              |
| **Реактивне**                  | Обробка потоків даних у реальному часі за допомогою бібліотек, таких як RxJS, через стріми, спостережувані об'єкти, оператори трансформацій. |
| **Подієво-орієнтоване**        | Використання подій і їх обробників, що є основою браузерного середовища (наприклад, `addEventListener`, `onClick`).                          |

**Примітка:** JavaScript гнучко підтримує кілька парадигм одночасно, що дозволяє
використовувати найзручніший підхід для конкретного завдання.

</details>

<details>
<summary>90. Типи помилок у JavaScript?</summary>

#### JavaScript

#### Типи помилок у JavaScript

- У JavaScript існує кілька типів помилок, які можуть виникати під час виконання
  коду:

| **Тип помилки**    | **Опис**                                                                                             | **Приклад**                                                                        |
| ------------------ | ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
| **SyntaxError**    | Виникає, коли код містить синтаксичну помилку, яка унеможливлює виконання.                           | `javascript<br>console.log("Привіт); // SyntaxError: missing " after argument<br>` |
| **ReferenceError** | Виникає, коли код звертається до змінної, яка не оголошена.                                          | `javascript<br>console.log(x); // ReferenceError: x is not defined<br>`            |
| **TypeError**      | Виникає, коли виконується операція над значенням некоректного типу.                                  | `javascript<br>null.toString(); // TypeError: Cannot read properties of null<br>`  |
| **RangeError**     | Виникає, коли значення виходить за допустимі межі.                                                   | `javascript<br>let arr = new Array(-1); // RangeError: Invalid array length<br>`   |
| **EvalError**      | Пов'язана з некоректним використанням функції `eval`. У сучасному JavaScript використовується рідко. | `javascript<br>eval("let a = ;"); // EvalError: Unexpected end of input<br>`       |
| **URIError**       | Виникає, коли некоректно використовується функція для роботи з URI (наприклад, `decodeURI`).         | `javascript<br>decodeURI("%"); // URIError: URI malformed<br>`                     |

#### Як обробляти помилки?

- Для обробки помилок використовується конструкція `try...catch`:

```javascript
try {
  const result = JSON.parse('Некоректний JSON');
} catch (error) {
  console.error('Сталася помилка:', error.message);
}
```

</details>

<details>
<summary>91. Різниця між typeof і instanceof?</summary>

#### JavaScript

#### Різниця між `typeof` і `instanceof`

| **Критерій**           | **typeof**                                                           | **instanceof**                                                               |
| ---------------------- | -------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| **Призначення**        | Повертає тип змінної як рядок.                                       | Перевіряє, чи є об'єкт екземпляром певного класу або конструктора.           |
| **Результат**          | Повертає один із базових типів (`string`, `number`, `object`, тощо). | Повертає `true` або `false`.                                                 |
| **Сфера застосування** | Використовується для визначення типу даних.                          | Використовується для перевірки приналежності об'єкта до класу або прототипу. |
| **Обмеження**          | Не відрізняє масиви від об'єктів (`typeof []` повертає `object`).    | Працює тільки з об'єктами, створеними через функції-конструктори.            |

#### Приклади

#### typeof

```javascript
console.log(typeof 'Hello'); // "string"
console.log(typeof 42); // "number"
console.log(typeof {}); // "object"
console.log(typeof []); // "object" (масиви не розрізняються)
console.log(typeof null); // "object" (історична помилка)
console.log(typeof undefined); // "undefined"
```

#### instanceof

```javascript
const arr = [];
console.log(arr instanceof Array); // true
console.log(arr instanceof Object); // true (Array наслідується від Object)

const str = new String('Hello');
console.log(str instanceof String); // true
console.log(str instanceof Object); // true

console.log('Hello' instanceof String); // false (рядок - примітив)
```

#### Ключові відмінності:

1. **Примітиви:**

- `typeof` працює з примітивними типами.
- `instanceof` завжди повертає `false` для примітивів.

2. **Масиви:**

- `typeof []` повертає `"object"`.
- `[] instanceof Array` повертає `true`.

3. **null і undefined:**

- `typeof null` повертає `"object"` (історична помилка в JavaScript).
- `null instanceof Object` повертає `false`.
- `undefined` не має конструктора, тому `instanceof` не використовується.

  - Використовуйте `typeof` для перевірки типу примітивів і базових типів, а
    `instanceof` для перевірки класів і об'єктів.

</details>

<details>
<summary>92. JavaScript статично, чи динамічно типізована мова?</summary>

#### JavaScript

**JavaScript - це `динамічно типізована` мова програмування.**

#### Що це означає?

1.  **Типи змінних визначаються під час виконання:**

    - Тип змінної може змінюватися залежно від значення, яке їй присвоюють.
    - При оголошенні змінної не потрібно вказувати її тип.

      ```javascript
      let value = 42; // Зараз це число (number)
      value = 'Привіт'; // Тепер це рядок (string)
      value = true; // Тепер це булеве значення (boolean)
      ```

2.  **Відсутність компіляційної перевірки типів:**

    - Помилки, пов’язані з типами, виявляються тільки під час виконання, а не на
      етапі компіляції.

      ```javascript
      let num = 42;
      console.log(num.toUpperCase()); // Runtime Error: num.toUpperCase is not a function
      ```

3.  **Автоматичне приведення типів (Type Coercion):**

    - JavaScript автоматично конвертує значення з одного типу в інший у деяких
      ситуаціях.

      ```javascript
      console.log('5' - 2); // 3 (рядок "5" перетворюється в число)
      console.log('5' + 2); // "52" (число 2 конкатенується як рядок)
      ```

####Висновок:

- JavaScript - динамічно типізована мова, що робить її гнучкою, але може
  спричинити помилки, пов’язані з типами. Для більшої строгості можна
  використовувати TypeScript - надбудову над JavaScript, яка додає статичну
  типізацію.

</details>

<details>
<summary>93. Що таке регулярне вираження (Regular Expression)?</summary>

#### JavaScript

#### Регулярне вираження (або **Regex**) - це шаблон, який використовується для пошуку, співставлення та маніпуляції тексту в рядках.

#### Основні можливості:

1. **Пошук тексту**:

   - Виявлення підрядків, які відповідають заданому шаблону.

2. **Замінювання тексту**:

   - Заміна тексту, який відповідає регулярному вираженню, на інший текст.

3. **Перевірка відповідності**:
   - Перевірка, чи відповідає текст певному шаблону.

#### Приклад регулярного вираження:

```javascript
const regex = /hello/;
const text = 'hello world';

console.log(regex.test(text)); // true (знайдено "hello")
console.log(text.match(regex)); // ["hello"] (співпадіння)
```

| **Символ** | **Опис**                                   | **Приклад**               |
| ---------- | ------------------------------------------ | ------------------------- |
| `.`        | Будь-який символ, крім нового рядка        | `/h.llo/` → "hello"       |
| `^`        | Початок рядка                              | `/^Hello/` → "Hello"      |
| `$`        | Кінець рядка                               | `/world$/` → "world"      |
| `*`        | 0 або більше повторень                     | `/ab*c/` → "ac", "abc"    |
| `+`        | 1 або більше повторень                     | `/ab+c/` → "abc", "abbc"  |
| `?`        | 0 або 1 повторення                         | `/colou?r/` → "color"     |
| `{n}`      | Точно n повторень                          | `/a{3}/` → "aaa"          |
| `{n,}`     | Не менше n повторень                       | `/a{2,}/` → "aaa", "aaaa" |
| `{n,m}`    | Від n до m повторень                       | `/a{2,4}/` → "aaa", "aa"  |
| `[abc]`    | Будь-який символ з набору                  | `/[aeiou]/` → "a"         |
| `[^abc]`   | Будь-який символ, крім вказаних            | `/[^aeiou]/` → "b"        |
| `\d`       | Будь-яка цифра (0–9)                       | `/\d/` → "5"              |
| `\D`       | Будь-який нецифровий символ                | `/\D/` → "A"              |
| `\w`       | Будь-який алфавітно-цифровий символ або \_ | `/\w/` → "A", "1"         |
| `\W`       | Будь-який неалфавітно-цифровий символ      | `/\W/` → "@"              |
| `\s`       | Пробільний символ                          | `/\s/` → " "              |
| `\S`       | Будь-який непробільний символ              | `/\S/` → "A"              |
| `(x\|y)`   | Або x, або y                               | `/(cat\|dog)/` → "cat"    |

#### Методи роботи з Regex у JavaScript:

1. `test()`: Перевіряє відповідність шаблону.

```javascript
const regex = /world/;
console.log(regex.test('hello world')); // true
```

2. `match()`: Знаходить співпадіння.

```javascript
const text = 'hello world';
console.log(text.match(/world/)); // ["world"]
```

3. `replace()`: Замінює текст.

```javascript
const text = 'hello world';
console.log(text.replace(/world/, 'JavaScript')); // "hello JavaScript"
```

4. `split()`: Розбиває рядок за шаблоном.

```javascript
const text = 'apple, banana, cherry';
console.log(text.split(/,\s\*/)); // ["apple", "banana", "cherry"]
```

#### Приклади використання:

1. Перевірка email-адреси:

```javascript
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
console.log(emailRegex.test('example@mail.com')); // true
```

2. Витяг номерів телефону:

```javascript
const text = 'Call me at 123-456-7890 or 987-654-3210.';
const phoneRegex = /\d{3}-\d{3}-\d{4}/g;
console.log(text.match(phoneRegex)); // ["123-456-7890", "987-654-3210"]
```

3. Пошук слів у рядку:

```javascript
const text = 'JavaScript is awesome!';
const wordRegex = /\bawesome\b/;
console.log(wordRegex.test(text)); // true
```

- Регулярні вираження - потужний інструмент для роботи з текстом, але їх слід
  використовувати обережно, щоб уникнути складних для розуміння шаблонів.

</details>

<details>
<summary>94. Що таке рекурсія?</summary>

#### JavaScript

#### Рекурсія - це техніка програмування, при якій функція викликає саму себе. Вона дозволяє вирішувати складні завдання шляхом розбиття їх на простіші підзадачі.

#### Основні компоненти рекурсії:

1. **Базовий випадок (Base Case)**:

   - Умова, яка зупиняє подальші виклики функції.
   - Без базового випадку функція буде викликати себе нескінченно, що призведе
     до переповнення стека викликів.

2. **Рекурсивний випадок (Recursive Case)**:
   - Логіка, яка включає виклик функції самою собою із меншими вхідними даними.

#### Приклад рекурсивної функції:

Розрахунок факторіала числа `n!`:

```javascript
function factorial(n) {
  if (n === 0) {
    return 1; // Базовий випадок
  }
  return n * factorial(n - 1); // Рекурсивний випадок
}

console.log(factorial(5)); // 120
```

#### Переваги рекурсії:

- Легше реалізувати задачі, що мають ієрархічну або повторювану структуру
  (наприклад, дерева, графи, пошук).

#### Недоліки рекурсії:

- Може споживати більше пам’яті через створення великої кількості стекових
  кадрів.
- При неправильному базовому випадку може спричинити переповнення стека
  викликів.

#### Альтернатива:

- Рекурсію часто можна замінити ітерацією для оптимізації пам’яті, але це може
  зробити код менш читабельним.

</details>

<details>
<summary>95. Що таке поліфіл (polyfill)?</summary>

#### JavaScript

#### Поліфіл (polyfill) - це код (зазвичай у вигляді бібліотеки або функції), який забезпечує підтримку сучасних функцій JavaScript у старих браузерах або середовищах, де ці функції не реалізовані.

#### Навіщо потрібен поліфіл?

- Гарантує, що код буде працювати у старіших браузерах, які не підтримують нові
  можливості ECMAScript.
- Забезпечує зворотну сумісність для сучасного функціоналу.

#### Приклад поліфіла для `Array.prototype.includes`:

У браузерах, які не підтримують метод `includes`, можна використовувати поліфіл:

```javascript
if (!Array.prototype.includes) {
  Array.prototype.includes = function (valueToFind, fromIndex) {
    if (this == null) {
      throw new TypeError('"this" is null or not defined');
    }
    const o = Object(this);
    const len = o.length >>> 0;
    if (len === 0) {
      return false;
    }
    const n = fromIndex | 0;
    let k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
    while (k < len) {
      if (
        o[k] === valueToFind ||
        (valueToFind !== valueToFind && o[k] !== o[k])
      ) {
        return true;
      }
      k++;
    }
    return false;
  };
}
```

#### Переваги поліфіла:

- Дозволяє використовувати сучасний синтаксис і функції без втрати сумісності з
  застарілими середовищами.

#### Обмеження:

- Поліфіли збільшують розмір вашого коду.
- Вони не завжди забезпечують ідентичну продуктивність, порівняно з нативною
  реалізацією.

#### Альтернатива поліфілам:

- Використання транспайлерів (наприклад, Babel), які перетворюють сучасний
  JavaScript у старішу версію.

</details>

<details>
<summary>96. Що таке switch/case? Правила використання switch/case?</summary>

#### JavaScript

#### `switch/case` - це інструкція умовного виконання в JavaScript, яка дозволяє вибирати одну з багатьох можливих гілок коду для виконання на основі значення виразу.

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

```javascript
switch (expression) {
  case value1:
    // Код для виконання, якщо expression === value1
    break;
  case value2:
    // Код для виконання, якщо expression === value2
    break;
  default:
  // Код для виконання, якщо жоден із case не спрацював
}
```

#### Як працює `switch/case`:

1. Вираз у дужках (`expression`) обчислюється один раз.
2. Значення цього виразу порівнюється зі значеннями в кожному case.
3. Якщо знайдено співпадіння, виконується відповідний блок коду.
4. Якщо співпадіння немає, виконується блок default (якщо він є).
5. Інструкція break завершує виконання блоку і виходить з конструкції `switch`.
   Без неї виконуються всі наступні case до першого `break`.

#### Приклад:

```javascript
const day = 3;

switch (day) {
  case 1:
    console.log('Понеділок');
    break;
  case 2:
    console.log('Вівторок');
    break;
  case 3:
    console.log('Середа');
    break;
  default:
    console.log('Невірний день');
}
```

- Виведе: Середа

#### Правила використання `switch/case`:

1. Строга рівність (`===`): Порівняння в `switch` використовує оператор строгої
   рівності. Типи даних мають збігатися.
2. Використання `break`: Завжди додавайте `break`, щоб уникнути виконання всіх
   наступних гілок.
3. Порядок має значення: Перший case, що відповідає умовам, буде виконаний.
4. Блок `default`: Використовуйте `default` для обробки ситуацій, коли жоден
   case не підходить.
5. Кластеризація case: Якщо декілька case виконують однаковий код, їх можна
   групувати:

```javascript
const fruit = 'apple';

switch (fruit) {
  case 'apple':
  case 'pear':
    console.log('Це фрукт із насінням');
    break;
  case 'banana':
    console.log('Це ягода');
    break;
  default:
    console.log('Невідомий фрукт');
}
```

#### Коли використовувати `switch/case`:

- Коли потрібно перевірити значення змінної на кілька можливих значень.
- Коли вирази в case прості й не вимагають складних умов.

#### Обмеження:

- Не підтримує діапазони або складні умови.
- Може бути менш читабельним, ніж `if/else` для коротких умов.

</details>

<details>
<summary>97. Типи функцій щодо можливості приймати інші функції?</summary>

#### JavaScript

#### У JavaScript функції можуть бути класифіковані на основі того, чи вони приймають інші функції як аргументи, або повертають їх.

1. **Функція вищого порядку (Higher-Order Function)**

- Функція, яка може:
  - Приймати інші функції як аргументи.
  - Повертає інші функції.

#### Приклад:

```javascript
// Функція, яка приймає іншу функцію як аргумент
function higherOrderFunction(callback) {
  callback();
}

// Функція, яка повертає іншу функцію
function createMultiplier(multiplier) {
  return function (value) {
    return value * multiplier;
  };
}

// Використання
higherOrderFunction(() => console.log('Привіт із колбека!')); // Виклик колбеку
const double = createMultiplier(2);
console.log(double(5)); // 10
```

2. **Колбек-функція (Callback Function)**

- Функція, яка передається як аргумент іншій функції та викликається всередині
  цієї функції.

#### Приклад:

```javascript
function greet(name, callback) {
  console.log(`Привіт, ${name}!`);
  callback();
}

greet('Еван', () => console.log('Це колбек-функція!'));
// Виведе:
// Привіт, Еван!
// Це колбек-функція!
```

3. **Анонімна функція (Anonymous Function)**

- Функція без імені, яка зазвичай передається як колбек.

#### Приклад:

```javascript
setTimeout(() => {
  console.log('Анонімна функція викликана через 1 секунду!');
}, 1000);
```

4. **Функція-замикання (Closure)**

- Функція, яка зберігає доступ до змінних із зовнішнього лексичного контексту
  навіть після завершення виконання зовнішньої функції.

#### Приклад:

```javascript
function closureExample() {
  let count = 0;
  return function () {
    count++;
    return count;
  };
}

const counter = closureExample();
console.log(counter()); // 1
console.log(counter()); // 2
```

#### Висновок:

- **_Функції вищого порядку_** використовуються для створення динамічних і
  функціональних підходів у програмуванні.
- **_Колбеки_** дозволяють передавати поведінку як аргумент.
- **_Анонімні функції_** підходять для одноразового використання.
- **_Замикання_** дозволяють зберігати стан у функціях.

</details>

<details>
<summary>98. Що таке вирази (expression) та інструкції (statement) у JavaScript?</summary>

#### JavaScript

#### Вирази (Expression) та Інструкції (Statement) у JavaScript

#### Вирази (Expression)

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

#### Приклади виразів:

```javascript
// Вирази, що повертають значення
5 + 3; // Додає 5 і 3, результат: 8
'x' + 'y'; // Конкатенація, результат: "xy"
Math.max(10, 20); // Визначення максимального числа, результат: 20
```

#### Особливості:

1. Завжди повертають значення.
2. Можуть використовуватись у контексті:
   - Присвоєння (let result = 5 + 3;).
   - Умови (if (x > 0)).
   - Аргументи для функцій (console.log(x + y)).

#### Інструкції (Statement)

- **Інструкція** - це повноцінний фрагмент коду, що виконує дію, але не
  обов’язково повертає значення.
- Інструкції керують виконанням програми.

#### Приклади інструкцій:

```javascript
let a = 5; // Інструкція оголошення змінної
if (a > 0) {
  // Інструкція умовного виконання
  console.log(a); // Інструкція виклику функції
}
```

#### Особливості:

1. Виконують дію (наприклад, оголошення змінної, виклик функції).
2. Можуть містити вирази.

#### Основна відмінність

| Характеристика  | Вираз (Expression)                     | Інструкція (Statement)               |
| --------------- | -------------------------------------- | ------------------------------------ |
| **Призначення** | Обчислює та повертає значення.         | Виконує дію.                         |
| **Приклади**    | `5 + 3`, `"hello" + "world"`, `x > 0`. | `let x = 10;`, `if (x > 0) { ... }`. |
| **Вкладеність** | Може бути частиною інструкції.         | Може містити вирази.                 |
| **Результат**   | Завжди повертає значення.              | Може не повертати значення.          |

#### Комбінування виразів та інструкцій:

```javascript
let x = 10; // Інструкція (оголошення змінної)
let result = x * 2; // Інструкція з виразом (x * 2)
if (result > 10) {
  // Інструкція умовного виконання
  console.log(result); // Інструкція виклику функції
}
```

- У цьому прикладі:
  - `x * 2` - вираз.
  - `let result = x * 2;` - інструкція.

</details>

<details>
<summary>99. Різниця між .some() та .every()?</summary>

#### JavaScript

#### Порівняння методів .some() та .every()

| Метод          | Опис                                                       | Повертає                                                             | Приклад                                |
| -------------- | ---------------------------------------------------------- | -------------------------------------------------------------------- | -------------------------------------- |
| **`.some()`**  | Перевіряє, чи хоча б один елемент масиву відповідає умові. | `true`, якщо хоча б один елемент відповідає умові. Інакше - `false`. | `[1, 2, 3].some(x => x > 2)` → `true`  |
| **`.every()`** | Перевіряє, чи всі елементи масиву відповідають умові.      | `true`, якщо всі елементи відповідають умові. Інакше - `false`.      | `[1, 2, 3].every(x => x > 0)` → `true` |

### Основні відмінності:

1. **`.some()`** зупиняється після знаходження першого відповідного елемента.
2. **`.every()`** зупиняється після знаходження першого невідповідного елемента.

</details>

<details>
<summary>100. Як згенерувати випадкове число у JavaScript?</summary>

#### JavaScript

#### За допомогою використання `Math.random()`

- Метод `Math.random()` повертає випадкове число в діапазоні від `0` (включно)
  до `1` (не включно).

#### Приклади:

1. **Випадкове число від `0` до `1`:**

```javascript
const random = Math.random();
console.log(random); // Наприклад: 0.123456789
```

2. **Випадкове число в діапазоні від `0` до `10`:**

```javascript
const random = Math.random() * 10;
console.log(random); // Наприклад: 7.89432
```

3. **Ціле число в діапазоні від `0` до `10`:**

```javascript
const randomInt = Math.floor(Math.random() * 11); // Включно 0 та 10
console.log(randomInt); // Наприклад: 3
```

4. **Випадкове число в заданому діапазоні (`min`, `max`):**

```javascript
function getRandomInRange(min, max) {
return Math.random() \* (max - min) + min;
}
console.log(getRandomInRange(5, 15)); // Наприклад: 7.23
```

5. **Ціле число в заданому діапазоні (`min`, `max`):**

```javascript
function getRandomIntInRange(min, max) {
return Math.floor(Math.random() _ (max - min + 1)) + min;
}
console.log(getRandomIntInRange(5, 15)); // Наприклад: 12
```

#### Пояснення:

- Math.random() генерує дробове число в діапазоні `[0, 1)`.
- Для масштабування використовується множення `(* max)`.
- Для округлення до цілого числа застосовується `Math.floor()` або
  `Math.round()`.
- Для зміщення мінімального значення додається `+ min`.

</details>

<details>
<summary>101. Типи операторів у JavaScript?</summary>

#### JavaScript

#### Типи операторів у JavaScript

- Оператори в JavaScript використовуються для виконання різних операцій, таких
  як арифметичні обчислення, порівняння, присвоєння тощо.

#### Основні типи операторів:

1. **Арифметичні оператори**

   - Використовуються для виконання математичних операцій:
   - `+, -, *, /, % (залишок від ділення)`, `**` (піднесення до степеня).

2. **Оператори присвоєння**

   - Використовуються для присвоєння значень змінним:
   - `=`, `+=`, `-=`, `*=`, `/=`, `%=`.

3. **Оператори порівняння**

   - Використовуються для порівняння значень і повертають true або false:
   - `==`, `!=`, `===`, `!==`, `<`, `>`, `<=`, `>=`.

4. **Логічні оператори**

   - Використовуються для логічних операцій:
   - `&&` (і), `||` (або), `!` (заперечення).

5. **Тернарний оператор**

   - Скорочений запис для умовних операторів:
   - `condition ? expr1 : expr2`.

6. **Бітові оператори**

   - Працюють на рівні бітів чисел:
   - `&`, `|`, `^`, `~`, `<<`, `>>`, `>>>`.

7. **Оператори типу (Type)**

   - Використовуються для перевірки або конверсії типу значення:
   - `typeof`, `instanceof`.

8. **Оператори рядків**

   - Використовуються для маніпуляції рядками:
   - `+` (конкатенація), `+=` (додавання до рядка).

9. **Оператори доступу**

   - Використовуються для доступу до властивостей або методів об'єктів:
   - `obj.property`, `obj["property"]`.

10. **Оператори розділення (spread/rest)**

    - Використовуються для роботи з масивами або об'єктами:
    - `...`

11. **Оператори виклику**

    - Використовуються для виклику функцій:
    - `func()`, `obj.method()`.

12. **Оператори nullish**

    - Використовуються для перевірки на null або undefined:
    - `??`.

13. **Опціональний ланцюжок**

    - Перевіряє існування властивостей перед доступом до них:
    - `obj?.property`, `obj?.method()`.

</details>

<details>
<summary>102. Яка різниця між параметром та аргументом функції?</summary>

#### JavaScript

#### Різниця:

- **Параметр** - це змінна, яка вказана у визначенні функції. Це місце для
  отримання значення.
- **Аргумент** - це фактичне значення, яке передається функції під час її
  виклику.

#### Приклад:

```javascript
function add(a, b) {
  // a, b - параметри
  return a + b;
}

add(2, 3); // 2, 3 - аргументи
```

</details>

<details>
<summary>103. Правила завдання імен для змінних та функцій JavaScript?</summary>

#### JavaScript

#### Іменування змінних:

1. Ім'я може починатися з літери, знака підкреслення `(_)` або долара `($)`, але
   не з цифри.
2. Далі можуть використовуватись літери, цифри, підкреслення `(_)` або долар
   `($)`.
3. Не можна використовувати зарезервовані слова (наприклад, `class`, `return`).
4. Імена чутливі до регістру (`varName` ≠ `VarName`).
5. Для змінних використовують `camelCase`.
6. Для функцій також рекомендовано `camelCase`.
7. Імена повинні бути осмисленими та описовими.

</details>

<details>
<summary>104. Різниця між явним та неявним перетворенням (Implicit and Explicit Coercion)?</summary>

#### JavaScript

**Implicit and Explicit Coercion**

- **Явне перетворення (Explicit Coercion):**

  - Розробник явно вказує, як і в що перетворити значення, використовуючи методи
    або оператори.

#### Приклади:

```javascript
String(123); // "123"
Number('456'); // 456
Boolean(0); // false
```

- **Неявне перетворення (Implicit Coercion):**

  - JavaScript автоматично змінює типи в залежності від контексту.

#### Приклади:

```javascript
123 + 'abc'; // "123abc" (число перетворено в рядок)
'5' - 1; // 4 (рядок перетворено в число)
!''; // true (рядок перетворено в логічний тип)
```

- **Різниця:** явне перетворення контрольоване, неявне може призводити до
  непередбачуваних результатів.

</details>

<details>
<summary>105. Навіщо застосовується метод Array.from()?</summary>

#### JavaScript

**Array.from() створює новий масив із:**

1. **Масивоподібних об’єктів:** об’єкти з властивістю length (наприклад,
   arguments або NodeList).

```javascript
const nodeList = document.querySelectorAll('div');
const array = Array.from(nodeList); // Перетворює NodeList у масив
```

1. **Ітерабельних об'єктів:** об’єкти, які можна ітерувати (Map, Set, строки
   тощо).

```javascript
const set = new Set([1, 2, 3]);
const array = Array.from(set); // [1, 2, 3]
```

1. **З трансформацією:** другий аргумент - callback-функція для перетворення
   елементів.

```javascript
const array = Array.from([1, 2, 3], x => x * 2); // [2, 4, 6]
```

- **_Призначення:_** зручне створення масивів із нестандартних джерел даних або
  трансформація елементів.

</details>

<details>
<summary>106. Назвіть способи перетворення масиву на об'єкт?</summary>

#### JavaScript

#### Способи перетворення:

1. **`Object.assign()`:**

- Копіює масив у новий об'єкт, де індекси масиву стають ключами.

```javascript
const arr = [1, 2, 3];
const obj = Object.assign({}, arr); // {0: 1, 1: 2, 2: 3}
```

2. **Ручне ітерування:**

- Проходите по масиву й додаєте ключі вручну.

```javascript
const arr = [1, 2, 3];
const obj = {};
arr.forEach((value, index) => {
  obj[index] = value;
});
// {0: 1, 1: 2, 2: 3}
```

3. **`reduce()`:**

- Створює об'єкт, накопичуючи ключі та значення.

```javascript
const arr = ['a', 'b', 'c'];
const obj = arr.reduce((acc, value, index) => {
  acc[index] = value;
  return acc;
}, {});
// {0: 'a', 1: 'b', 2: 'c'}
```

4. **`Object.fromEntries()`:**

- Перетворює масив пар [key, value] на об'єкт.

```javascript
const arr = [
  ['key1', 'value1'],
  ['key2', 'value2'],
];
const obj = Object.fromEntries(arr); // {key1: 'value1', key2: 'value2'}
```

5. **Spread оператор з деструктуризацією:**

- Перетворення в об'єкт із зазначенням ключів.

```javascript
const arr = [1, 2, 3];
const obj = { ...arr }; // {0: 1, 1: 2, 2: 3}
```

</details>

<details>
<summary>107. Різниця між Object та Map?</summary>

#### JavaScript

#### Ключові відмінності між Object і Map:

1. **Типи ключів:**

- `Object`: ключі можуть бути лише рядками або символами.

```javascript
const obj = {};
obj[1] = 'value'; // Ключ '1' перетворюється на рядок
```

- `Map`: ключі можуть бути будь-якого типу (рядки, числа, об’єкти тощо).

```javascript
const map = new Map();
map.set(1, 'value'); // Ключ залишається числом
```

2. **Порядок зберігання:**

- `Object`: порядок ключів не гарантований (крім певних ситуацій).
- `Map`: зберігає ключі в порядку їх додавання.

3. **Продуктивність:**

- `Map`: оптимізований для частого додавання, видалення та пошуку.
- `Object`: повільніше працює з великою кількістю ключів.

4. **Ітерація:**

- `Object`: потрібно використовувати `Object.keys()`, `Object.values()`, або
  `Object.entries()`.
- `Map`: ітерації простіші, є методи `map.keys()`, `map.values()`,
  `map.entries()`.

5. **Розмір:**

- `Object`: немає прямого способу дізнатися кількість ключів (потрібно
  використовувати `Object.keys().length`).
- `Map`: має властивість size.

6. **Прототип:**

- `Object`: має прототип із вбудованими методами, що може викликати конфлікти з
  ключами.
- `Map`: не має прототипу, ключі не конфліктують.

7. **Коли використовувати:**

- `Object`: для структурованих даних (наприклад, конфігурації, `JSON`).
- `Map`: для частих операцій із ключами/значеннями або коли потрібна підтримка
  будь-яких типів ключів.

</details>

<details>
<summary>108. Що таке карірування (currying)?</summary>

#### JavaScript

**currying**

- Карірування (currying) - це техніка функціонального програмування, коли
  функція з кількома аргументами перетворюється на послідовність функцій, кожна
  з яких приймає один аргумент.

#### Приклад:

- Оригінальна функція:

```javascript
function add(a, b) {
  return a + b;
}
add(2, 3); // 5
```

- Карірована версія:

```javascript
function curriedAdd(a) {
  return function (b) {
    return a + b;
  };
}
curriedAdd(2)(3); // 5
```

#### Переваги:

1. Гнучкість: дозволяє створювати частково застосовані функції.

```javascript
const add5 = curriedAdd(5);
console.log(add5(10)); // 15
```

2. **_Читабельність та повторне використання:_** спрощує складні обчислення,
   зберігаючи модульність.

3. **_Композиція:_** добре працює з іншими функціональними методами.

#### Карірування з використанням ES6:

```javascript
const curriedMultiply = a => b => a * b;
console.log(curriedMultiply(4)(5)); // 20
```

- **Карірування** - зручний інструмент для функціонального стилю програмування,
  особливо в роботі з композицією функцій.

</details>

<details>
<summary>109. Навіщо використовують метод Object.seal()?</summary>

#### JavaScript

**`Object.seal()` використовується для обмеження змін у об'єкті.**

- **Особливості:**

1. **Заборона додавання або видалення властивостей:**

   - Ви не можете додати нові властивості чи видалити існуючі.

```javascript
const obj = { a: 1 };
Object.seal(obj);
obj.b = 2; // Нічого не станеться (додавання заборонено)
delete obj.a; // Нічого не станеться (видалення заборонено)
```

2. **Зміна значень дозволена:**

   - Ви можете змінювати значення існуючих властивостей.

```javascript
obj.a = 10; // Працює
```

3. **Статус sealed:**

   - Метод `Object.isSealed()` дозволяє перевірити, чи об'єкт запечатано.

```javascript
console.log(Object.isSealed(obj)); // true
```

4. **Не дозволяє змінювати конфігурацію властивостей:**

   - Наприклад, ви не можете змінити `writable`, `configurable` чи `enumerable`.

#### Використання:

- Захист структури об'єкта, дозволяючи лише змінювати значення.
- Зменшення помилок через випадкові зміни структури.

</details>

<details>
<summary>110. Навіщо використовується властивість .dataset?</summary>

#### JavaScript

**.dataset**

- `dataset` використовується для доступу до спеціальних атрибутів HTML, які
  починаються з `data-`. Це зручний спосіб зберігати кастомні дані в елементах
  DOM.

#### Особливості:

1. **Доступ до даних:**

- Через dataset можна отримати або змінити значення атрибутів data- як
  властивостей об'єкта.

```html
<div id="element" data-id="123" data-name="example"></div>
```

```javascript
const elem = document.getElementById('element');
console.log(elem.dataset.id); // "123"
console.log(elem.dataset.name); // "example"
```

2. **Створення та оновлення:**

```javascript
elem.dataset.newAttr = 'value'; // Додає data-new-attr="value"
elem.dataset.id = '456'; // Оновлює data-id="456"
```

3. **Іменування:**

- Кебаб-кейс у HTML (`data-user-id`) перетворюється в camelCase у JavaScript
  (`dataset.userId`).

4. **Видалення:**

```javascript
delete elem.dataset.newAttr; // Видаляє data-new-attr
```

#### Переваги:

- Інкапсуляція даних, пов'язаних із елементом, без необхідності створення
  окремих JavaScript-змінних.
- Зручно використовувати для динамічної взаємодії елементів із JavaScript,
  наприклад, у додатках або при роботі з атрибутами.

#### Приклад використання:

```html
<button data-action="save" data-user-id="42">Save</button>
```

```javascript
const button = document.querySelector('button');
console.log(button.dataset.action); // "save"
console.log(button.dataset.userId); // "42"
```

</details>

<details>
<summary>111. Як можна обмінюватися кодом між файлами?</summary>

#### JavaScript

#### Обмін кодом між файлами в JavaScript здійснюється через механізми модулів.

- **Основні способи:**

1. **ES Modules (ECMAScript Modules):**

- Сучасний стандарт для імпорту/експорту коду.

- **Експорт:**

```javascript
// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
```

- **Імпорт:**

```javascript
// main.js
import { add, subtract } from './math.js';
console.log(add(2, 3)); // 5
```

- **Експорт за замовчуванням:**

```javascript
export default function multiply(a, b) { return a \* b; }
// Імпорт
import multiply from './math.js';
console.log(multiply(2, 3)); // 6
```

2. **_CommonJS (Node.js):_**

- Використовується в середовищі `Node.js`.

- **Експорт:**

```javascript
// math.js
module.exports = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
};
```

- **Імпорт:**

```javascript
// main.js
const math = require('./math');
console.log(math.add(2, 3)); // 5
```

3. **Скрипти через глобальні змінні (застарілий метод):**

- Підключення файлів у HTML із використанням `<script>`:

```html
<script src="file1.js"></script>
<script src="file2.js"></script>
```

- Недолік: все потрапляє в глобальний простір.

4. **Бандлери (Webpack, Rollup, Vite):**

- Для складних проектів використовуються бандлери, які об'єднують файли. Вони
  підтримують `ES Modules` і `CommonJS`.

5. **JSON файли:**

- `JSON` можна імпортувати напряму як модуль.

```javascript
// data.json
{ "name": "John", "age": 30 }

// main.js
import data from './data.json';
console.log(data.name); // "John"
```

#### Рекомендація:

- Для сучасних веб-додатків використовуйте `ES Modules`. Для `Node.js` -
  `CommonJS` або `ES Modules` (залежно від конфігурації).

</details>

<details>
<summary>112. Як працює «складальник сміття» в JavaScript?</summary>

#### JavaScript

**Garbage Collector**

- **Складальник сміття (Garbage Collector, GC)** в JavaScript автоматично керує
  пам'яттю, звільняючи непотрібні об'єкти, до яких немає посилань. Це дозволяє
  розробникам не турбуватися про ручне управління пам'яттю.

#### Принцип роботи:

1. **Розподіл пам'яті:**

- Коли створюються змінні, об'єкти, масиви тощо, для них виділяється пам'ять у
  `heap` (куча).

2. **Виявлення недосяжних об'єктів:**

- GC знаходить об'єкти, які більше не використовуються, тобто до яких немає
  посилань, і помічає їх для видалення.

3. **Звільнення пам'яті:**

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

#### Основний алгоритм:

- JavaScript зазвичай використовує алгоритм маркування та очищення
  (`Mark-and-Sweep`):

  - **Маркування:** GC починає з "коренів" (глобальні об'єкти, наприклад, window
    в браузері) і перевіряє, які об'єкти досяжні.
  - **Очищення:** Непомічені об'єкти (ті, до яких немає посилань) видаляються.

#### Приклади:

1. **Досяжні об'єкти:**

```javascript
let obj = { name: 'John' };
// obj має посилання, GC не видалить
obj = null; // Тепер об'єкт можна очистити
```

2. **Циклічні посилання (не проблема для сучасного GC):**

```javascript
let a = {};
let b = {};
a.ref = b;
b.ref = a;
a = null;
b = null; // Обидва об'єкти стануть недосяжними
```

#### Типи пам'яті:

- **Stack:** Зберігає примітивні типи та посилання на об'єкти.
- **Heap:** Використовується для зберігання об'єктів і складних структур.

#### Оптимізація роботи з пам'яттю:

1. Уникайте створення зайвих глобальних змінних.
2. Закривайте посилання на об'єкти, які більше не потрібні (`null` або
   `undefined`).
3. Будьте обережні з замиканнями: Не зберігайте зайві змінні в пам'яті.

```javascript
function createClosure() {
  let largeData = new Array(1000000);
  return function () {
    console.log('Closure used');
  };
}
const closure = createClosure();
// largeData досі у пам'яті, поки closure існує
```

- GC працює у фоновому режимі, але при неефективному використанні пам'яті
  можливі "зависання" програми.

</details>

<details>
<summary>113. Що таке витоки пам'яті?</summary>

#### JavaScript

**Memory Leaks**

- **Витоки пам'яті (Memory Leaks)** - це ситуація, коли програма займає пам'ять,
  але більше не використовує її, і ця пам'ять не звільняється, бо на неї все ще
  існують посилання. У JavaScript витоки пам'яті можуть призводити до погіршення
  продуктивності програми або навіть до її аварійного завершення.

#### Основні причини витоків пам'яті:

1. **Невидалені глобальні змінні:**

- Змінні, оголошені без let, const, або var, автоматично стають глобальними.
  Глобальні змінні залишаються в пам'яті протягом усього життя програми.

```javascript
function leak() {
  globalVar = 'I am a leak'; // Глобальна змінна
}
leak();
```

2. **Зайві замикання (closures):**

- Замикання можуть утримувати посилання на змінні, навіть якщо вони більше не
  потрібні.

```javascript
function createLeak() {
  let largeData = new Array(1000000); // Великий масив
  return function () {
    console.log(largeData);
  };
}
const leak = createLeak();
```

3. **Застарілі об'єкти в структурах даних:**

- Об'єкти, які більше не потрібні, але залишаються у масивах або `Map/Set`.

```javascript
let cache = new Map();
function addToCache(key, value) {
  cache.set(key, value);
}
addToCache('user', { name: 'John' }); // Не видалено
```

4. **Детачені (від'єднані) DOM-елементи:**

- DOM-елементи, які видалені з документа, але на них залишаються посилання.

```javascript
let element = document.getElementById('leak');
element.remove();
// element все ще у пам'яті через посилання
```

5. **Інтервали та таймери:**

- Таймери (`setInterval` або `setTimeout`) утримують посилання на функції, які
  можуть посилатися на великі дані.

```javascript
let interval = setInterval(() => {
  console.log('Leaking...');
}, 1000);
// Забули викликати clearInterval(interval);
```

#### Як уникати витоків пам'яті:

1. **Звільняйте пам'ять:**

- Очищайте змінні (`null` або `undefined`) після використання.
- Використовуйте delete для властивостей об'єкта, якщо вони більше не потрібні.

2. Контролюйте глобальні змінні:

- Уникайте використання глобальних змінних, працюйте у локальному контексті.

3. Очищайте DOM:

- Після видалення DOM-елементів видаляйте всі посилання на них.

```javascript
element = null;
```

4. Закривайте інтервали та таймери:

- Використовуйте `clearInterval` і `clearTimeout`.

5. Слабкі посилання:

- Використовуйте `WeakMap` або `WeakSet` для даних, які можуть автоматично
  видалятися, якщо на них немає інших посилань.

#### Діагностика:

- Для виявлення витоків пам'яті використовуйте `DevTools` у браузерах:

  - **Memory tab:** аналізуйте heap snapshots.

  - **Performance tab:** аналізуйте час та споживання ресурсів.

</details>

<details>
<summary>114. Як працює контекст виконання (execution context) у JavaScript?</summary>

#### JavaScript

**Execution context**

- Контекст виконання - це середовище, де виконується код. Є глобальний,
  функціональний і контекст модуля.

1. **Глобальний контекст:** створюється при запуску скрипта, доступні глобальні
   змінні та функції. У браузері це `window` або `globalThis`.

2. **Функціональний контекст:** створюється під час виклику функції, включає
   локальні змінні, аргументи й визначає `this`.

3. **Модульний контекст:** ізольований від глобального, кожен модуль має свій.
   Контексти організовані в стек: викликаний останнім контекст виконується
   першим.

`this` залежить від способу виклику: у глобальному контексті це window, у
методах об’єкта - сам об’єкт, у стрілкових функціях - `this` зовнішнього
контексту.

- Ось приклад для демонстрації контексту виконання:

```javascript
// Глобальний контекст
console.log(this); // У браузері: window

function foo() {
  // Функціональний контекст
  console.log(this); // У строгому режимі: undefined, без нього: window
  bar();
}

function bar() {
  console.log(this); // У строгому режимі: undefined, без нього: window
}

const obj = {
  method() {
    console.log(this); // obj
    const inner = () => {
      console.log(this); // obj (стрілкова функція успадковує this)
    };
    inner();
  },
};

foo(); // Викликаємо функцію в глобальному контексті
obj.method(); // Викликаємо метод об'єкта
```

- У цьому прикладі видно, як this змінюється залежно від способу виклику.

</details>

<details>
<summary>115. Різниця між примітивом та об'єктом?</summary>

#### JavaScript

#### Примітиви та об'єкти в JavaScript відрізняються за сутністю, поведінкою та способом зберігання даних.

#### Примітиви:

1. **Типи:** `string`, `number`, `bigint`, `boolean`, `symbol`, `null`,
   `undefined`.

2. **Незмінність:** Значення примітивів не можна змінити (`immutable`).
   Наприклад, операції над рядками створюють новий рядок, а не змінюють
   існуючий.

3. **Передача за значенням:** Копіюється саме значення, а не посилання на нього.

4. **Властивості:** Можна тимчасово звертатися до властивостей через обгортки
   (`String`, `Number`), але ці об'єкти створюються й одразу знищуються.

```javascript
let a = 10;
let b = a;
b = 20;
console.log(a); // 10 (значення `a` не змінюється)
```

#### Об'єкти:

1. **Типи:** Усе, що не є примітивом, - це об'єкт (включаючи масиви, функції).

2. **Змінність:** Дані в об'єктах можна змінювати (mutable).

3. **Передача за посиланням:** Копіюється посилання, а не самі дані.

4. **Методи та властивості:** Об'єкти можуть мати свої властивості й методи, які
   змінюються динамічно.

```javascript
let obj1 = { x: 10 };
let obj2 = obj1;
obj2.x = 20;
console.log(obj1.x); // 20 (змінюється через спільне посилання)
```

#### Висновок:

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

</details>

<details>
<summary>116. Що означає текст max call stack size exceeded у консолі?</summary>

#### JavaScript

**Maximum call stack size exceeded**

- Помилка "Maximum call stack size exceeded" виникає, коли стек викликів (call
  stack) перевантажується через надмірну кількість вкладених викликів функцій.
  Це зазвичай трапляється через рекурсію без базового випадку або нескінченний
  цикл викликів функцій.

#### Причини:

1. **Безмежна рекурсія:**

```javascript
function recurse() {
  recurse();
}
recurse(); // Викликає помилку
```

- Тут `recurse` викликає саму себе без завершення.

2. **Взаємні виклики функцій:**

```javascript
function a() {
  b();
}
function b() {
  a();
}
a(); // Викликає помилку
```

3. **Велика кількість вкладених викликів:** Якщо функція викликається занадто
   багато разів до завершення попередніх викликів, стек переповнюється.

#### Що таке стек викликів?

- Стек викликів - це структура даних, яка зберігає інформацію про активні
  функції, що виконуються. Кожен новий виклик додається в стек, і видаляється
  після завершення.

#### Як виправити:

1. **_Перевір рекурсію:_** Завжди додавай базовий випадок.

```javascript
function recurse(n) {
  if (n <= 0) return; // Базовий випадок
  recurse(n - 1);
}
recurse(10);
```

2. **_Обмежуй вкладені виклики._** Використовуй ітерації замість глибокої
   рекурсії:

```javascript
function iterate(n) {
  while (n > 0) {
    console.log(n);
    n--;
  }
}
iterate(10);
```

3. **_Перевір взаємозалежності функцій._**

- Ця помилка завжди свідчить про логічну проблему у коді, яку потрібно
  виправити.

</details>

<details>
<summary>117. Як реалізувати відкладене завантаження зображень?</summary>

#### JavaScript

**lazy loading**

- Відкладене завантаження зображень (lazy loading) оптимізує завантаження
  сторінки, завантажуючи зображення лише тоді, коли вони стають видимими в
  області перегляду.

#### Методи реалізації:

1. **_HTML-атрибут `loading="lazy"` (сучасні браузери)_**

   - Найпростіший спосіб. Додаєш атрибут до тега `<img>`:

```html
<img src="high-quality-image.jpg" alt="Description" loading="lazy" />
```

- Підтримується більшістю сучасних браузерів.

2. **_Intersection Observer API (гнучкий контроль)_**

   - Використовує JavaScript для виявлення, коли зображення потрапляє в область
     перегляду:

```html
<img data-src="high-quality-image.jpg" alt="Description" class="lazy" />
```

```javascript
document.addEventListener('DOMContentLoaded', () => {
  const images = document.querySelectorAll('img.lazy');

  const observer = new IntersectionObserver((entries, obs) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.classList.remove('lazy');
        obs.unobserve(img);
      }
    });
  });

  images.forEach(img => observer.observe(img));
});
```

3. **Бібліотеки**

   - Готові рішення для зручності:

     - Lazysizes
     - Lozad.js

4. **CSS для Placeholders**

   - Можна додати стиль для місця, поки зображення не завантажиться:

```css
img.lazy {
  filter: blur(10px);
  transition: filter 0.3s;
}
img.lazy:not([src]) {
  background-color: #f0f0f0;
}
```

#### Що врахувати:

1. Використовуй fallback для старих браузерів.

2. Переконайся, що `alt`-тексти завжди заповнені для SEO та доступності.

3. Перевіряй продуктивність на реальних пристроях.

</details>

<details>
<summary>118. Чим відрізняються події input та change?</summary>

#### JavaScript

**input VS change**

- `input` і `change` в JavaScript - це події, які відслідковують зміни в
  елементах форми, але вони мають різну поведінку.

#### Подія `input`:

- Спрацьовує щоразу, коли змінюється значення елемента (під час введення тексту,
  видалення символів тощо).

- Спрацьовує миттєво, як тільки користувач взаємодіє з елементом.

- Працює з елементами `<input>`та `<textarea>`.

- **Приклад:**

```javascript
const inputField = document.querySelector('#myInput');

inputField.addEventListener('input', event => {
  console.log('Current value:', event.target.value);
});
```

- Введення кожної літери викликає обробник.

#### Подія `change`:

- Спрацьовує тільки після того, як зміна підтверджена, тобто:

  - Користувач втратив фокус з елемента (`blur`).

  - Для `<select>` - після вибору нового значення.

- Працює з `<input>`, `<textarea>`, `<select>`.

- **_Приклад:_**

```javascript
const inputField = document.querySelector('#myInput');

inputField.addEventListener('change', event => {
  console.log('Final value after focus lost:', event.target.value);
});
```

- Обробник викликається тільки після завершення введення і переходу до іншого
  елемента.

#### Ключові відмінності:

| **Критерій**              | **input**                 | **change**                          |
| ------------------------- | ------------------------- | ----------------------------------- |
| **Коли спрацьовує**       | При кожній зміні значення | Після підтвердження зміни           |
| **Швидкість реакції**     | Миттєво                   | Після втрати фокусу                 |
| **Підтримувані елементи** | `<input>`, `<textarea>`   | `<input>`, `<textarea>`, `<select>` |

- Вибір події залежить від того, коли потрібна реакція: під час введення
  (`input`) чи після завершення (`change`).

</details>

<details>
<summary>119. Чому typeof null повертає об'єкт?</summary>

#### JavaScript

**typeof null**

- `typeof null` повертає `"object"` через помилку, яка була допущена в перших
  версіях JavaScript і залишилася зворотно сумісною.

#### Пояснення:

1. **Технічна причина:** У початковій реалізації значення в JavaScript
   зберігалися як бітові мітки (tags). Значення `null` мітилося як тип об'єкта
   через бітовий тег `000` (так само, як і об'єкти). Це стало причиною того, що
   `typeof null` повертає `"object"`.

2. **Чому не виправили:** Зміна цієї поведінки порушила б зворотну сумісність із
   величезною кількістю існуючого коду.

#### Як перевірити, чи значення є `null`:

- Використовуй явну перевірку:

```javascript
value === null; // Повертає true, якщо value є null
```

#### Альтернативні способи перевірки:

1. Через `Object.prototype.toString`:

```javascript
Object.prototype.toString.call(null); // "[object Null]"
```

2. Використання сучасних утиліт: Лінтери або бібліотеки, такі як Lodash, мають
   функції для коректної перевірки типів.

#### Висновок:

- Це історичний артефакт мови, і його потрібно враховувати під час написання
  коду.

</details>

<details>
<summary>120. Навіщо потрібний конструктор Proxy?</summary>

#### Proxy

- Конструктор `Proxy` у JavaScript дозволяє створювати об'єкти, поведінка яких
  може бути динамічно змінена. Він використовується для перехоплення і
  налаштування базових операцій над об'єктами, таких як читання, запис,
  видалення властивостей, виклик функцій тощо.

#### Як працює Proxy:

1. **Цільовий об'єкт:** Це об'єкт, над яким виконується операція.

2. **Обробник (`handler`):** Об'єкт, який містить функції-пастки (`traps`), що
   визначають, як виконуються певні операції.

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

```javascript
const proxy = new Proxy(target, handler);
```

- `target`: Об'єкт, який буде проксуватися.

- `handler`: Об'єкт з методами (пастками), які перехоплюють операції.

#### Основні пастки:

1. `get`: Перехоплює доступ до властивостей.

```javascript
const obj = { name: 'Alice' };
const proxy = new Proxy(obj, {
  get(target, prop) {
    return prop in target ? target[prop] : 'Property does not exist';
  },
});
console.log(proxy.name); // Alice
console.log(proxy.age); // Property does not exist
```

2. `set`: Перехоплює запис у властивість.

```javascript
const obj = {};
const proxy = new Proxy(obj, {
  set(target, prop, value) {
    if (typeof value === 'number') {
      target[prop] = value;
      return true;
    } else {
      throw new TypeError('Value must be a number');
    }
  },
});
proxy.age = 30; // OK
proxy.age = '30'; // TypeError: Value must be a number
```

3. `has`: Перехоплює оператор in.

```javascript
const proxy = new Proxy(
  {},
  {
    has(target, prop) {
      return prop.startsWith('secret');
    },
  }
);
console.log('secretKey' in proxy); // true
console.log('key' in proxy); // false
```

4. `deleteProperty`: Перехоплює видалення властивості.

```javascript
const obj = { key: 'value' };
const proxy = new Proxy(obj, {
  deleteProperty(target, prop) {
    if (prop.startsWith('secret')) {
      return false; // Забороняє видалення
    }
    delete target[prop];
    return true;
  },
});
delete proxy.key; // true
delete proxy.secretKey; // false
```

#### Навіщо потрібний `Proxy`:

1. **Валідація даних:** Перевірка при записі чи зчитуванні.

2. **Створення "захищених" об'єктів:** Наприклад, обмеження доступу до певних
   властивостей.

3. **Логування:** Відстеження операцій над об'єктом.

4. **Динамічний доступ:** Зміна поведінки об'єкта залежно від контексту.

5. **Реалізація об'єктів-заглушок:** Наприклад, для завантаження даних при
   першому зверненні до властивості.

- `Proxy` - це потужний інструмент для налаштування поведінки об'єктів, що
  дозволяє створювати адаптивні рішення та вирішувати складні задачі.

</details>

<details>
<summary>121. Що таке хвостова рекурсія (tail recursion)? Оптимізація рекурсії?</summary>

#### JavaScript

#### Хвостова рекурсія:

- Хвостова рекурсія (tail recursion) - це тип рекурсії, де рекурсивний виклик є
  останньою операцією, що виконується у функції перед її завершенням. Іншими
  словами, результат рекурсивного виклику безпосередньо повертається, і після
  цього більше немає інших операцій.

- **Приклад без хвостової рекурсії:**

```javascript
function factorial(n) {
if (n === 0) return 1;
return n _ factorial(n - 1); // Результат потребує додаткового множення
}
```

- **Приклад з хвостовою рекурсією:**

```javascript
function factorialTail(n, acc = 1) {
if (n === 0) return acc;
return factorialTail(n - 1, acc _ n); // Рекурсивний виклик є останньою дією
}
```

#### Оптимізація хвостової рекурсії:

- Tail Call Optimization (TCO) - це техніка оптимізації, яка дозволяє мовам
  програмування ефективно виконувати хвостову рекурсію. Завдяки цьому для
  кожного рекурсивного виклику не створюється новий запис у стеку викликів.
  Замість цього, попередній запис замінюється новим.

- **Як це працює:**

  - У звичайній рекурсії кожен виклик створює новий фрейм у стеку, який зберігає
    інформацію про поточну функцію.

  - У хвостовій рекурсії з TCO замість створення нового фрейму, існуючий фрейм
    перезаписується, що знижує використання пам’яті.

- **Вигоди оптимізації:**

  - Зменшення витрат пам’яті.

  - Уникнення помилок Maximum call stack size exceeded.

  - Використання рекурсії в обчисленнях без ризику перевантаження стеку.

#### Приклад оптимізованої хвостової рекурсії:

```javascript
function sumTail(n, acc = 0) {
  if (n === 0) return acc;
  return sumTail(n - 1, acc + n);
}

console.log(sumTail(10000)); // Виконання без помилки
```

#### Чи підтримується хвостова оптимізація в JavaScript?

- Стандарт ECMAScript 2015 (ES6) вимагає підтримки TCO, але багато рушіїв
  JavaScript (наприклад, V8) не реалізують її. Тому, навіть із правильно
  написаною хвостовою рекурсією, вона може не оптимізуватися.

- **Альтернатива:**

- Коли хвостова оптимізація недоступна, можна використовувати ітеративний підхід
  або стек вручну:

```javascript
function factorialIterative(n) {
let result = 1;
while (n > 0) {
result \*= n;
n--;
}
return result;
}
```

#### Висновок:

- Хвостова рекурсія - це важливий інструмент, але її ефективність у JavaScript
  залежить від реалізації рушія. Для критичних завдань краще враховувати
  ітеративні підходи.

</details>

<details>
<summary>122. Що таке і як працює debounce() та throttle() в JavaScript?</summary>

#### JavaScript

**debounce() та throttle()**

- `debounce():`

- `debounce` - це техніка, яка обмежує кількість разів, коли функція
  викликається. Вона гарантує, що функція виконається лише після певного часу
  бездіяльності (затримки) після останнього виклику. Використовується для
  зменшення кількості обробок подій, які відбуваються дуже часто.

- **Як працює:**

1. При кожному виклику функції таймер скидається.

2. Функція виконується тільки після завершення затримки.

- **Приклад:**

```javascript
function debounce(func, delay) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}

// Використання:
const onResize = debounce(() => console.log('Resize event!'), 300);

window.addEventListener('resize', onResize);
```

- **Коли корисно?:** Виконання запитів на сервер під час введення в полі пошуку,
  обробка подій `resize` чи `scroll`.

- `throttle()`:

- `throttle` - це техніка, яка обмежує частоту виконання функції. Функція
  викликається не частіше, ніж раз за визначений інтервал часу, незалежно від
  кількості викликів.

- **Як працює:**

1. При першому виклику функція виконується одразу.

2. Після цього функція ігнорує виклики до завершення вказаного інтервалу часу.

- **Приклад:**

```javascript
function throttle(func, limit) {
  let lastCall = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastCall >= limit) {
      lastCall = now;
      func.apply(this, args);
    }
  };
}

// Використання:
const onScroll = throttle(() => console.log('Scroll event!'), 200);

window.addEventListener('scroll', onScroll);
```

- **Коли корисно?:** Події `scroll`, `mousemove`, обробка натискання кнопок.

#### Різниця між `debounce` і `throttle`:

| Критерій         | debounce                            | throttle                             |
| ---------------- | ----------------------------------- | ------------------------------------ |
| Частота викликів | Лише після завершення затримки.     | Не частіше за встановлений інтервал. |
| Використання     | Зменшення обробки "сплесків" подій. | Регулярне виконання функції.         |

#### Висновок:

- `debounce`: Використовуйте, коли потрібен один виклик після завершення серії
  подій.

- `throttle`: Використовуйте, коли потрібен регулярний контроль виконання
  функції.

</details>

<details>
<summary>123. Як у JavaScript працюють декоратори? Як вони можуть бути використані для модифікації поведінки класів та методів?</summary>

#### JavaScript

#### Як працюють декоратори в JavaScript:

- Декоратори - це спеціальний синтаксис для модифікації класів або методів. Вони
  дозволяють додавати чи змінювати функціональність без прямої зміни початкового
  коду. Декоратори реалізовані у вигляді функцій, які приймають об'єкт або
  властивість для модифікації.

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

- Декоратори позначаються символом `@` перед ім'ям функції декоратора.

```javascript
@decorator
class MyClass {}
```

- **Важливо:** На момент 2025 року декоратори є частиною пропозиції ECMAScript і
  можуть потребувати використання транспайлера, такого як Babel або TypeScript.

#### Використання декораторів:

1. **Для класів:** Декоратор може модифікувати або розширювати функціональність
   класу.

```javascript
function addTimestamp(target) {
  target.prototype.timestamp = new Date();
}

@addTimestamp
class Example {}

const instance = new Example();
console.log(instance.timestamp); // Додає властивість timestamp
```

2. **_Для методів:_** Декоратор може змінити поведінку методу, наприклад, додати
   логування.

```javascript
function logMethod(target, propertyKey, descriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args) {
    console.log(`Calling ${propertyKey} with`, args);
    return originalMethod.apply(this, args);
  };
  return descriptor;
}

class Example {
  @logMethod
  sayHello(name) {
    return `Hello, ${name}`;
  }
}

const instance = new Example();
console.log(instance.sayHello('World'));
// Лог:
// Calling sayHello with [ 'World' ]
// Hello, World
```

3. **Для властивостей:** Декоратор може використовуватися для додавання
   метаданих або валідації.

```javascript
function readonly(target, propertyKey, descriptor) {
  descriptor.writable = false;
  return descriptor;
}

class Example {
  @readonly
  name = 'Fixed Name';
}

const instance = new Example();
instance.name = 'New Name'; // TypeError: Cannot assign to read-only property
```

#### Як вони працюють:

- **Класи:** Декоратор приймає сам клас як аргумент і може змінити або повернути
  новий клас.

- **Методи:** Декоратор приймає три аргументи: `target` (клас), `propertyKey`
  (ім'я методу), `descriptor` (опис методу), який можна модифікувати.

- **Властивості:** Обмежені лише додаванням метаданих, оскільки властивості ще
  не створені під час використання декоратора.

#### Використання:

1. **Логування:** Відстеження викликів методів.

2. **Авторизація:** Перевірка доступу до методів.

3. **Кешування:** Збереження результатів виконання функцій.

4. **Додавання метаданих:** Наприклад, для ORM або DI-фреймворків (TypeORM,
   NestJS).

#### Приклад із TypeScript:

- TypeScript має вбудовану підтримку декораторів.

```typescript
function logClass(target: Function) {
  console.log(`Class created: ${target.name}`);
}

@logClass
class Example {}
// Class created: Example
```

- Декоратори дозволяють модифікувати класи, методи або властивості, роблячи код
  більш модульним і розширюваним без порушення принципу відкритості/закритості
  (OCP).

</details>

<details>
<summary>124. Як можна створити об'єкти з приватними властивостями та методами JavaScript?</summary>

#### JavaScript

#### Методи створення об'єктів із приватними властивостями та методами в JavaScript:

1. **Використання слабких карт (WeakMap):**

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

```javascript
const privateData = new WeakMap();

class Example {
  constructor(value) {
    privateData.set(this, { secret: value });
  }

  getSecret() {
    return privateData.get(this).secret;
  }
}

const obj = new Example('hidden');
console.log(obj.getSecret()); // "hidden"
console.log(obj.secret); // undefined
```

2. **Використання `#` (приватні поля та методи):**

   - Приватні поля та методи, позначені символом #, доступні лише всередині
     класу.

```javascript
class Example {
  #secret;

  constructor(value) {
    this.#secret = value;
  }

  getSecret() {
    return this.#secret;
  }
}

const obj = new Example('hidden');
console.log(obj.getSecret()); // "hidden"
console.log(obj.#secret); // SyntaxError: Private field '#secret' must be declared in an enclosing class
```

3. **Використання замикань:**

   - Замикання забезпечують приватність через обмежений доступ до внутрішніх
     змінних функції.

```javascript
function Example(value) {
  let secret = value;

  return {
    getSecret: function () {
      return secret;
    },
  };
}

const obj = Example('hidden');
console.log(obj.getSecret()); // "hidden"
console.log(obj.secret); // undefined
```

4. **Комбінація `Symbol` для унікальності:**

   - Symbol дозволяє створювати властивості, які не конфліктують із іншими.

```javascript
const secretKey = Symbol('secret');

class Example {
  constructor(value) {
    this[secretKey] = value;
  }

  getSecret() {
    return this[secretKey];
  }
}

const obj = new Example('hidden');
console.log(obj.getSecret()); // "hidden"
console.log(obj.secretKey); // undefined
```

#### Коли використовувати:

    - **WeakMap:** Для складних сценаріїв, коли об'єкт потребує багатьох приватних властивостей.

    - **`#` (Приватні поля):** Простий та сучасний спосіб для класів.

    - **Замикання:** Для функціональних підходів.

    - **Symbol:** Для унікальних властивостей із частковою приватністю.

</details>

<details>
<summary>125. Методи перехоплення та обробки помилок у JavaScript?</summary>

#### JavaScript

#### Методи перехоплення та обробки помилок у JavaScript:

1. **try...catch**

- Обробляє синхронні помилки у коді. Не працює з асинхронними операціями
  (наприклад, Promise).

```javascript
try {
  const result = JSON.parse('INVALID_JSON');
} catch (error) {
  console.error('Caught error:', error.message);
}
```

2. **window.onerror**

- Перехоплює необроблені помилки на рівні глобального об'єкта.

```javascript
window.onerror = (message, source, lineno, colno, error) => {
  console.error('Global error:', message, source, lineno, colno, error);
};
```

3. **window.addEventListener('error')**

- Перехоплює помилки в зовнішніх ресурсах, таких як зображення або скрипти.

```javascript
window.addEventListener('error', event => {
  console.error('Resource loading error:', event.message);
});
```

4. **window.addEventListener('unhandledrejection')**

- Обробляє необроблені відхилення обіцянок (Promise).

```javascript
window.addEventListener('unhandledrejection', event => {
  console.error('Unhandled promise rejection:', event.reason);
});
```

5. **Асинхронна обробка помилок (async/await):**

- Використовуйте try...catch для обробки помилок в асинхронному коді.

```javascript
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Async error:', error.message);
  }
}
```

6. **Обробка помилок у Promises:**

- Використовуйте .catch для перехоплення помилок.

```javascript
fetch('https://api.example.com')
  .then(response => response.json())
  .catch(error => console.error('Promise error:', error.message));
```

7. **Користувацька помилка (Custom Error):**

- Створюйте власні помилки для специфічних сценаріїв.

```javascript
class CustomError extends Error {
  constructor(message) {
    super(message);
    this.name = 'CustomError';
  }
}

try {
  throw new CustomError('Something went wrong');
} catch (error) {
  console.error(error.name + ':', error.message);
}
```

8. **Декоратори для обробки помилок:**

- Перехоплюють помилки в методах.

```javascript
function errorHandler(target, name, descriptor) {
  const original = descriptor.value;
  descriptor.value = function (...args) {
    try {
      return original.apply(this, args);
    } catch (error) {
      console.error('Error in method:', name, error.message);
    }
  };
  return descriptor;
}

class Example {
  @errorHandler
  faultyMethod() {
    throw new Error('Oops!');
  }
}

new Example().faultyMethod();
```

9. **Сервіси логування:**

- Використовуйте сторонні сервіси, як-от Sentry або LogRocket, для моніторингу
  помилок у реальному часі.

```javascript
Sentry.init({ dsn: 'your-dsn-url' });
try {
  throw new Error('Critical error');
} catch (error) {
  Sentry.captureException(error);
}
```

#### Підсумок:

- Обробка помилок у JavaScript охоплює широкий спектр інструментів і технік: від
  простого try...catch до використання глобальних обробників та спеціалізованих
  сервісів. Це дозволяє ефективно реагувати на помилки та покращувати надійність
  додатків.

</details>

<details>
<summary>126. За який проміжок часу була створена мова програмування JavaScript?</summary>

#### JavaScript

- Мова програмування JavaScript була створена за рекордно короткий час - лише
  **10 днів** у травні 1995 року.

- Автор мови, **Брендан Айх**, працював тоді в компанії **Netscape** і отримав
  завдання розробити скриптову мову для браузера **Netscape Navigator**.
  Спочатку **JavaScript** називався **Mocha**, потім перейменувався в
  **LiveScript**, а пізніше отримав свою сучасну назву в рамках маркетингової
  угоди з Sun Microsystems для асоціації з популярною на той час мовою Java.

</details>