JavaScript Advanced

Question 1

Типи данних в JS

Answer 1

1. String;
2. Number;
3. Symbol;
4. Null;
5. Boolean;
6. Undefined;
   7.BigInt;
7. Object;

На основі object створюються такі дані (структура даних):
1. Arrray;
2. Set;
3. Map;
4. Date;
5. Function;
6. Promise;
7. RegExp;
8. Math;
9. Generators;

Question 2

Чим відрізняється тип даних від структури

Answer 2

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

Question 3

Які оператори є в JS

Answer 3

1. Основні арифметичні оператори:
   + (додавання)
   - (віднімання)
   * (множення)
   / (ділення)
   % (залишок від ділення)
   ++ (інкремент)
   – (декремент)
2. Оператори порівняння:
   == (рівність)
   != (нерівність)
   === (строга рівність)
   !== (строга нерівність)
   < (менше)
   > (більше)
   <= (менше або рівне)
   >= (більше або рівне)
3. Логічні оператори:
   && (логічне І)
   || (логічне АБО)
   ! (логічне заперечення)
4. Оператори присвоювання:
   = (присвоєння)
   += (присвоєння з додаванням)
   -= (присвоєння з відніманням)
   *= (присвоєння з множенням)
   /= (присвоєння з діленням)
   %= (присвоєння з взяттям залишку)
5. Тернарний оператор:
   condition ? expression1 : expression2
6. Порівняння та операції з об’єктами:
   typeof (повертає тип операнду)
   instanceof (перевірка на належність об’єкту до певного класу)
   in (перевірка, чи є властивість у об’єкта)
7. Побітові оператори (рідкісні):
   & (побітове І)
   | (побітове АБО)
   ^ (побітове виключне АБО)
   ~ (побітове заперечення)
   &laquo_space;(побітовий зсув вліво)
   » (побітовий зсув вправо)
   »> (беззнаковий побітовий зсув вправо)

8.Інші оператори:
, (оператор коми для виразів)
delete (видалення властивостей об’єкта)
new (створення нового об’єкта)
void (використовується для повернення undefined)
yield (використовується в генераторах)

Question 4

Що таке Set()

Answer 4

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

// Створюємо новий Set
const mySet = new Set();

// Додаємо значення до Set
mySet.add(1);

// Дублікати автоматично відкидаються
mySet.add(1); // Не спрацює, так як 1 вже є у Set

// Перевірка наявності значення в Set
console.log(mySet.has(1)); // Вертає true
console.log(mySet.has(4)); // Вертає false

// Видаляємо значення з Set
mySet.delete(2);

// Перебір усіх значень у Set
mySet.forEach(value => {
console.log(value);
});

// Отримуємо кількість елементів у Set
console.log(mySet.size); // Вертає 2

// Очищаємо Set
mySet.clear();

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

Видалення в Set визначається значенням елемента, яке ви хочете видалити. Це відбувається за допомогою методу delete(), який приймає саме значення. Немає жодних індексів для видалення елементів з Set.

Set - це об’єкт, і він успадковує властивості та методи від прототипу Object, як і більшість інших об’єктів в JavaScript. АЛЕ МАЄ ВЛАСНИЙ ПРОТОТИП NEW SET().

Важливо зауважити, що Set не успадковує властивості та методи масивів (Array), оскільки це окрема структура даних.

Question 5

Map в JS

Answer 5

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

Основні особливості Map включають:

1. Додавання та видалення пар ключ-значення: Ви можете додавати нові пари ключ-значення в Map і видаляти їх за ключем.
2. Пошук значення за ключем: Ви можете швидко знаходити значення за ключем.
3. Доступ до розміру Map: Ви можете дізнатися, скільки пар ключ-значення зберігається в Map.
4. Ітерація через всі пари ключ-значення: Ви можете перебирати всі пари в Map за допомогою циклу for…of.
5. Використання різних типів ключів: Ключами в Map можуть бути різні типи даних, включаючи об’єкти та функції.

Question 6

В Чому різниця між Map та Object

Answer 6

Map
1. Пустий за замоучуванням;
2. Ключем може бути все що завгодно;
3. Можемо отримати size;
4. Оптимізований для чистих операцій;
5. По замовчуванню не має stringify\ parse;

Object
1. Має prototype ключі;
2. Ключами можуть бути string, Symbol;
3. Ручний трекінг розміру;
4. Не оптимізований для чистих операцій;
5. Є stringify / parse

Question 7

WeakMap()

Answer 7

WeakMap - це спеціальний тип Map в JavaScript, основною перевагою є швидко зберігати дані які квикористовують як кеш.
Часто використовується для кеша!
Ось ще пару прикладів

1. Слабкі посилання: Однією з ключових особливостей WeakMap є те, що вона використовує слабкі посилання на ключі. Це означає, що, якщо жоден інший код не посилається на ключ, він може бути автоматично видалений з WeakMap системою сміття (garbage collector). Це зазвичай робить WeakMap корисним для збереження даних, які пов’язані з об’єктами і можуть бути видалені, якщо об’єкт вже не використовується.
2. Ключами можуть бути лише об’єкти: У WeakMap ключами можуть бути лише об’єкти (включаючи функції), а не примітивні значення, як у звичайних об’єктів або Map.
3. Відсутній метод size та ітерація: WeakMap не надає методу size для отримання кількості пар ключ-значення, і ви не можете ітерувати через всі пари в WeakMap.
4. WeakMap часто використовується в ситуаціях, де потрібно зберігати приватні дані для об’єктів, і ці дані повинні автоматично видалятися, коли об’єкт стає недосяжним (наприклад, коли він видаляється з пам’яті). Також, WeakMap використовується в деяких внутрішніх реалізаціях JavaScript для зберігання слабких посилань на DOM-елементи та інші об’єкти.

Question 8

WeakSet()

Answer 8

Працює так само як і WeakMaр різниця у вигляді зберігаємих даних.

Question 9

Принципи ООП

Answer 9

1. Абстракція;
2. Інкапсуляція;
3. Успадкування;
4. Поліморфізму;
5. Абстракція - Цей принцип передбачає виділення важливих характеристик об’єкта та приховання деталей реалізації, щоб спростити взаємодію з об’єктом і зробити код більш зрозумілим та обслуговуваним.
   Прикладом абстракції може бути клас “Автомобіль”, який має метод “прискорити”, метод “гальмувати” та властивість “швидкість”. З точки зору користувача цього класу, немає необхідності знати, як саме відбувається прискорення або гальмування в механізмі автомобіля. Важливо лише використовувати публічний інтерфейс для керування автомобілем.
6. Інкапсуляція - інкапсуляція в ООП полягає в обмеженні доступу до деталей реалізації об’єкта та використанні інтерфейсу для взаємодії з об’єктом.
   пример пользователь при добовление товара пользуется публичним методом добавить в карзину, но приватние методи (скритие) расчитивают количество, общую сумму.
7. Успадкування - дозволяє успадковувати дані та функції іншого класу. Це дозволяє переіспользувать логіку між іншими класами. У нас є класс ноутбук в якому є загальна функціональність (екран, клавіатураб тачпад). Щоб не дублювати код ми можемо створити свій ноутбук (MacBook) успадковавши загальний класс ноутбук.
8. Поліморфізму дозволяє в незалежності від типу міняти під конкретний тип методи.

class Circle extends Shape {
constructor(radius) {
super();
this.radius = radius;
}

// Перевизначення методу getArea для обчислення площі кола
getArea() {
return Math.PI * this.radius * this.radius;
}
}

class Square extends Shape {
constructor(side) {
super();
this.side = side;
}

// Перевизначення методу getArea для обчислення площі квадрата
getArea() {
return this.side * this.side;
}
}

// Функція, яка приймає будь-яку фігуру і обчислює її площу
function calculateArea(shape) {
return shape.getArea();
}

// Створення об’єктів різних фігур
const circle = new Circle(5);
const square = new Square(4);

console.log(circle.getArea());
console.log(square.getArea());

Question 10

В чому різниця методів Абстракції та Інкапсуляції

Answer 10

class Automobile {
constructor(make, model) {
this.make = make;
this.model = model;
let speed = 0;

    const setSpeed = (newSpeed) => {
        if (newSpeed >= 0) {
            speed = newSpeed;
        }
    };
    this.getSpeed = () => {
        return speed;
    };

    this.accelerate = (amount) => {
        setSpeed(speed + amount);
        console.log(
            `Автомобіль ${this.make} ${this.model} рухається зі швидкістю ${speed} км/год.`
        );
    };
} } В даному коді:

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

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

Абстракція:

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

Таким чином, цей код поєднує в собі інкапсуляцію для приховання деталей реалізації (поле speed та метод setSpeed) і абстракцію для надання публічного інтерфейсу (метод accelerate), який дозволяє користувачам взаємодіяти з об’єктом класу “Automobile” без знання всіх деталей його реалізації.

Question 11

Види створення класів

Answer 11

Constructor functions - старий підхід;
const User = function(email, password) {
this.email = email;
this.password = password;
}
const user1 = new User(‘a@a.com, ‘123’);

1. Створює пустий об’єкт;
2. Визивається User функція;
3. this = пустому об’єкту;
4. Об’єкт звязується з prototype;
5. Повертає об’єкт;

ES6 Classes
Object.create()

Question 12

Які прототипи є в JS

Answer 12

Основні:

1. Object.prototype: Прототип для всіх об’єктів JavaScript.
2. Function.prototype: Прототип для всіх функцій.
3. Array.prototype: Прототип для всіх масивів.
4. String.prototype: Прототип для всіх рядків.
5. Number.prototype: Прототип для всіх чисел.
6. Boolean.prototype: Прототип для всіх булевих значень (true і false).
7. Date.prototype: Прототип для всіх дат.
8. RegExp.prototype: Прототип для всіх регулярних виразів.
9. Error.prototype: Прототип для всіх об’єктів помилок.

Додаткові прототипи:

1. Set.prototype: Прототип для всіх об’єктів типу Set.
2. Map.prototype: Прототип для всіх об’єктів типу Map.
3. Promise.prototype: Прототип для всіх об’єктів типу Promise.
4. Symbol.prototype: Прототип для всіх об’єктів типу Symbol.
5. Generator.prototype: Прототип для всіх об’єктів генераторів.
6. Proxy.prototype: Прототип для всіх об’єктів типу Proxy.
7. TypedArray.prototype: Прототип для всіх об’єктів типу TypedArray (наприклад, Int8Array, Uint8Array, тощо).
8. ArrayBuffer.prototype: Прототип для всіх об’єктів типу ArrayBuffer.
9. DataView.prototype: Прототип для всіх об’єктів типу DataView.
10. WeakRef.prototype: Прототип для всіх об’єктів типу WeakRef, які використовуються для створення слабких посилань на інші об’єкти.
11. FinalizationRegistry.prototype: Прототип для всіх об’єктів типу FinalizationRegistry, які використовуються для реєстрації колбеків фіналізації після видалення об’єктів.
12. Intl.Collator.prototype: Прототип для всіх об’єктів Collator, які використовуються для порівняння рядків залежно від локалізації.
13. Intl.DateTimeFormat.prototype: Прототип для всіх об’єктів DateTimeFormat, які використовуються для форматування та локалізації дат та часу.
14. Intl.NumberFormat.prototype: Прототип для всіх об’єктів NumberFormat, які використовуються для форматування та локалізації чисел.
15. URL.prototype: Прототип для всіх об’єктів URL, які використовуються для роботи з URL-адресами.
16. Headers.prototype: Прототип для всіх об’єктів Headers, які використовуються для роботи з HTTP-заголовками.
17. Request.prototype: Прототип для всіх об’єктів Request, які представляють HTTP-запити.
18. Response.prototype: Прототип для всіх об’єктів Response, які представляють HTTP-відповіді.

Question 13

Як працює Хеш-таблиця в JS

Answer 13

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

1. Створення хеш-таблиці: Хеш-таблиця зазвичай представлена як масив, в якому значення зберігаються за певними індексами. Індекси генеруються за допомогою хеш-функції.
2. Хеш-функція: Хеш-функція приймає ключ (у вигляді рядка або числа) та перетворює його в ціле число (хеш), яке служить індексом в масиві. Головною метою хеш-функції є рівномірний розподіл ключів по індексах, щоб зменшити конфлікти.
3. Збереження значень: Значення зберігаються у масиві за обчисленим хешем як ключ. Якщо інший ключ має той самий хеш, відбувається колізія, і потрібні додаткові дії для вирішення конфлікту.
4. Розв’язання колізій: Колізія виникає, коли два ключа мають однаковий хеш. Існує декілька способів розв’язання колізій, такі як метод лінійного зондування, метод подвійного хешування, метод відкритого зв’язування тощо. Кожен з цих методів вирішує, куди зберігати значення, якщо індекс вже зайнятий.
5. Отримання значень за ключем: При отриманні значення за ключем, ви використовуєте хеш-функцію для знаходження індексу у масиві, а потім отримуєте значення з цього індексу.
6. Оновлення та видалення значень: Щоб оновити або видалити значення, ви також використовуєте ключ для знаходження індексу за допомогою хеш-функції, а потім змінюєте або видаляєте значення за індексом.

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

Question 14

Хеш таблиця у Frontend розробці

Answer 14

Кешування даних: Ви можете використовувати хеш-таблиці для кешування даних, щоб зменшити кількість запитів на сервер та зберегти дані локально. Наприклад, ви можете зберігати вже завантажені зображення, результати запитів або інші дані.

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

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

2. Збереження стану додатків: Хеш-таблиці можуть бути корисними для зберігання стану додатків, наприклад, для збереження параметрів конфігурації, вибраних параметрів фільтрів або стану віджетів.

Приклад: Ви створюєте віджет фільтрації для списку товарів. Всі обрані параметри фільтра зберігаються в об’єкті для збереження стану і використовуються для фільтрації відображуваних товарів.

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

Приклад: Ви створюєте віджет фільтрації для списку товарів. Всі обрані параметри фільтра зберігаються в об’єкті для збереження стану і використовуються для фільтрації відображуваних товарів.

4. Управління даними в компонентах: Якщо ви розробляєте компоненти відомими як “реактивні”, ви можете використовувати хеш-таблиці для відстеження залежностей між даними та компонентами.

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

5. Імплементація кеш-пам’яті на клієнті: Хеш-таблиці можуть бути використані для збереження результатів обчислень або обчислених значень для подальшого використання без повторного розрахунку.

Приклад: Ви розробляєте реактивний компонент для відображення даних користувача. Об’єкт Map використовується для відстеження залежностей між даними та відображенням і оновлення компонента при зміні даних.

6. Зазвичай для роботи з хеш-таблицями в JavaScript використовують об’єкти (як асоціативні масиви), а також класи Map і Set, які надають більше функціональності та контролю.

Приклад: Ви створюєте графічну бібліотеку, яка обчислює та зберігає інтерпольовані значення для прискорення рендерингу графіки. Значення зберігаються в об’єкті Map, щоб уникнути повторного обчислення

Question 15

Цикли “for”, “for in”, “for of”

Answer 15

1. “for” - Перебирає структури даних в яких є індекс;
2. for…of - Перебирає значення об’єкта структури даних по значенню не включаючи успадковані властивості, і може бути використаний для ітерації значень в ітерабельних об’єктах (підходить до масивів, рядків, Set, Map).
3. for … in - перебирає імена властивостей об’єкта, включаючи успадковані властивості.

Question 16

Що таке функція і процедура

Answer 16

Функція завжди має return;
Процедура нічого не повертає;

Question 17

Робота функцій та пам’яті на прикладі:
function sun(a, b) { return a+ b}

Answer 17

Для цієї функції виділиться місце в пам’яті яке буде виглядати ось так:
sum: –> fn –>
(примає параметри щось робить повертає результат);

потім коли ми визиваєм дану функцію:

const result1 = sum(4, 6);

В цей момент відкривається локальна помять в якої ми маємо дві зміні а=5, b=8. Функція обчислює результат та повертає в глобальну пам’ять значення 13. Після чого вся локальна пам’ять звільняється.

В глобальній пам’яті зберігається змінна result 1: 13

Question 18

Варіанти запису функції

Answer 18

1. Function Declaration
   Класична функція

function sum (a, b) {
return a + b;
}

2. Function Expression
   Коли записуємо функцію в змінну чаще використовуємо для колбеків у вигляді анонімних функцій коли треб створити функцію на лету.

const sum1 = function(a, b) {
return a + b;
}

3. IIFE (Immediately-invoked function expression)
   Сомовизивающая функція

(function(a, b) {
return a + b;
}) (5, 3)

4. Arrow function

const sum2 = (a, b) => {
return a + b;
}

Question 19

В чому різниця між function Declaration та Function Expression в JS

Answer 19

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

Question 20

Hoisting в JS та як він працює

Answer 20

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

Question 21

Як працює інтерпритатор в JavaScript

Answer 21

1. Зчитування та аналіз: Інтерпретатор спочатку зчитує (парсить) JavaScript-код і перетворює його на внутрішню структуру даних, яку він може розуміти та обробляти. Під час цього процесу виявляються синтаксичні помилки.
2. Створення глобальної області видимості (Global Execution Context): Інтерпретатор створює глобальну область видимості, яка включає глобальний об’єкт (window в браузері) та інші глобальні об’єкти та функції, доступні в контексті виконання.
3. Виконання коду: JavaScript-код виконується по одній інструкції (або блоку коду) за раз. Відбувається виконання присвоєнь, обчислення виразів, виклики функцій та інші операції. В результаті цього виконання можуть бути змінені значення змінних, створені нові об’єкти, викликані функції тощо.
4. Стек викликів (Call Stack): Під час виконання JavaScript-коду в інтерпретаторі використовується стек викликів, де зберігаються активні функції та контексти виконання. Кожен раз, коли викликається функція, відбувається додавання нового контексту виконання на верх стеку. Після завершення функції, її контекст вилучається зі стеку.
5. Обробка подій та зворотніх викликів: В браузерному середовищі JavaScript включає обробку подій, таких як кліки мишею, завантаження сторінки, асинхронні запити до сервера і т. д. Інтерпретатор виконує ці події та зворотні виклики (callbacks) відповідно до логіки програми.
6. Зборка сміття (Garbage Collection): Інтерпретатор веде відстеження об’єктів та допомагає видалити невикористовувані об’єкти через процес зборки сміття. Це допомагає уникнути витоків пам’яті та оптимізує роботу програми.

Question 22

Функции вищого порядку

Answer 22

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

Question 23

Чим відрізняється імперативний від декларативного підхода

Answer 23

1. Інперативний підхід:

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

let numbers = [1, 2, 3, 4, 5];
let squaredNumbers = [];

for (let i = 0; i < numbers.length; i++) {
squaredNumbers.push(numbers[i] * numbers[i]);
}

2. Декларативний підхід:

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

let numbers = [1, 2, 3, 4, 5];
let squaredNumbers = numbers.map(number => number * number);

Question 24

Замикання

Answer 24

1. Функції які повертають інші функції
2. Повертающа функція запам’ятовує scope. Всі зміні які вона біля себе бачить

function hello(name) {
const helloName = () => console.log(‘hello’, name);

return helloName; }

hello(world) - нічого не покаже.

щоб відпрацювала ця функція нам треба цю функція призначити в зміну.

1. const helloWorld = helo(‘world’)
2. helloWorld();

1 - ми запишим в глобальну пам’ять зміну helloWorld яка буде мати функцію helloName та в Skope запише всі параметри а потім все видалить:

helloWorld: helloName –> f –>
{
[[scope]]: {name: ‘world’}
}

Question 25

Контекст визова функции

Answer 25

Стрелочная функция не имеет своего контекста
в примере cat, this посилається на cat так як в нього не має свого контекста.

У випадку cat1 function створюює свій контекст і в цьому випадку this буде посилатися на глобальний об’єкт window

const cat = {
name: ‘Murka’,
say() {
const greeting = () => console.log(this.name);
setTimeout(greeting, 1000)
}
}

const cat1 = {
name: ‘Murka’,
say() {
function greeting() { console.log(this.name);}
setTimeout(greeting, 1000)
}
}

cat.say()
cat1.say()

Question 26

Методи call(), apply(), bind()

Answer 26

Кожен об’єкт має scope де зберігаються всі зміні в області в якій воно створено, а також є prototype який має функції call, apply, bind

protototype: {
call: fn,
apply: fn,
bind: fn,
}

const developer = {
name: ‘Mikhail’,
salary: 2500,

getBonus(sum) {
    console.log(this.name, 'has a salary this month', this.salary + sum);
} }

developer.getBonus(250);

const manager = {
name: ‘Anna’,
salary: 1800,
}
1. Варіант передати контекст:
Щоб передати новий контекст в функцію getBonus ми можемо використати метод call який приймає любу кількість параметрів

developer.getBonus.call(manager, 150);

2. Варіант передати контекст:
   apply - робить все теж саме за одним вийнятком він приймає два параметра, контекст та масив параметрів.

developer.getBonus.aplly(manager, [150]);

3. Варіант передати контекст:
   Ми можемо створити getBonus функцію для об’кта manager

manager.getBonus = developer.getBonus.bind(manager)

Question 27

Чим відрізняється Стек від черги

Answer 27

Queue (FIFO) - first in first out
Stack (FILO) - first in last out

Question 28

Все про Promise

Answer 28

Асинхрона функція яка виконується швидше за інші асинхроні функції типу setTimeout, так як вона попадає в мікро таск в EventLoop.

Має два параметри resolve, reject. Resolve коли код виконується reject коли маємо помилку.

Має три статуси [[PrmiseState]] pending fulfilled reject.

  panding початкове состояние, не виконаний та не відмінений
  
 fulfilled операція пройшла успішно

 reject операція завершена з помилкою

має поле [[PromiseResult]]

В __proto___ має такі методи.
1. catch - це можлливість передати функцію reject
2. finally - функция візовится в любом случае. (Когда мі используем прилоудер коли грузяться дані з функції, і нам треба його убрать без ріщниці відпрацював resolve чи reject)
3. then - це можливість передати функцію в область resolve. then може приймати 2 параметра 1 resolve 2 reject
4. constructor можливість створити через new

Має вбудовані методи:

1. Promise.resolve повертає promise виконаний з результатом value
2. Promise.reject повертає проміс відмовлений із-за reason
   Гарно використовувати для імітації запита.
   ___________________________________________
   Example:

const promise1 = new Promise((resolve, reject) => {
setTimeout(()=> {
resolve(‘foo’)
}, 300)
})

promise1.then((value) => {
    console.log(value);
}).catch(console.error)

Під капотом в глобальній пам’яті ми маємо 3 значення

promise1: PromiseObject

value: значення яке ми очікуємо що воно повернеться нам в результаті роботи проміса. Як тільки сюди потрапляє значення (в нашому прикладі це resolve(‘foo’) ) це є трігером для визова функції яка була написана в then. Де це значчення передається в нашу функцію в якості параметру.

onFulfillment: [] - всі функції яки ми записуємо в then очікуємо що вони попадуть в масив onFulfillment.

onRejection: [] - всі функції які попадають з catch. И когда візавится reject єто будет тригером для візова функции catch

Question 29

fetch()

Answer 29

fetch(url) - приймає url повертає проміс
fetch(‘https://jsonplaceholder.typicode.com/posts’, {method: ‘POST })
.then(response => {
console.log(response => {
response.json()
});
})

Response це буде технічна інформація яка має статус, url, proto якраз через прото нам треба визвати функцію JSON для получення даних.