Interview Questions 02.10.

2022

General WEB questions

1.Що таке прогресивний рендеринг

---Це технологія яка використовується для швидшого відрисовування

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

2.Що таке прогресивний SSR

---Він рендерить чанки сторінки як тільки отримує їх не чекаючи на

повне завантаження сторінки

3.Що таке потік документу

---Це принцип організації елементів на сторінці тобто який простір

займають елементи і як вони впорядковані на сторінці

4.Що таке кроссбраузерність

---Це максимально одинакове і правильне відображення сайту в

різних браузерах

5.Що таке препроцессор

---Препроцессор це програма яка дозволяє генерувати CSS код

використовуючи свій власний унікальний синтаксис. На данай момент
найпопулярніші це Sass Less
6.Що таке babel і для чого він використовується

---Це транспайлер який переписує код нового стандарту EcmaScript На

більш ранній. Використовується щоб браузери які ще не впровадили
нові фічі могли їх використовувати. Конфігурація babel прописується в
файлі .babelrc або в babel.config

7.Різниця між feature detection feature interference i user-agent

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

можливостей користувача (підтримувані фічі, АРІ і тд…)

Feature detection заключаєся у визначенні того чи підтримує браузер

користувача даний фрагмент коду, і якщо код не підтримується то
буде виконаний аналог або поліфіл:
If(“geolocation” in navigator){

navigatot.geolocation

///…

else{

polifill()

Feature interference – це преревірка на наявність визначених

можливостей, предпологаючи що дана можливість вже існує
If(document.getElementById){ document.getElementById(“someElement”) }

User agent це рядок який представляє собою інформацію про клієнт і

пристрій і допомагає визначити тип додатку, операційну систему,
версію і тд… , використовується через navigator.agent

Краще всього виористовувати Feature Detection, оскілки цей метод

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

---Це технологія яка дозволяє створювати багатократно

використовуваний код (елемент) функціональність яких
інкапсулюється від іншого коду

До прикладу якщо є багато однакових елементів і вони залежать лише

від атрибутів які передаються в них то їх можна реалізувати за
допомогою веб компонентів

Технології що використовуються:

- custom elements: це API що дозволяє створювати кастомні елементи

- html <template>: дозволяє створювати ізольовані DOM елементи, - -
- shadowDOM: ізолює DOM і стилі в елементах
9.Способи зменшення часу завантаження веб сторінки

---Мінімація і конкатенація CSS і JS файлів, оптимізація і стиснення

зображень, використання CDN – сервери в різних точках світу і при
підключенні сайту до мережі користувачу віддають дані з
найближчого до нього серверу, використання JZ методу компресії,
використання кешування

10. Особливості розробки багатомовних сайтів

-Використання lang атрибуту

-Перенаправлення користувача на потрібну версію сайту відповідно

мові

-Напрямок тексту (зліва направо або зправа наліво)

-Форматування дати і валюти

11.Що таке Flash of Unstyled content і як його уникнути

---Це поява на якусь мить не стилізованого контенту через те що стилі

для нього ще не встигли загрузитися. Його можна уникнути
використовуючи loader (вікно яке закриває цілу сторінку до моменту
поки все не прогрузиться), loader можна реалізувати за допомогою
window.onload() події

12.Різниця між layout, painting i composition

-layout (розкладка) - це розразунок місця для елемента на веб сторінці

на основі css правил, painting (відрисовка) – це відрисовка пікселів для
відображення візуальних елементів, composition (композиція) – це
відрисовка слоїв в визначеному порядку, тобто правильне
накладання елементів і тд… на основі вкладення елементів і значень
z-index

13.Що таке міжсайтовий скриптинг.

---Це вразливість веб додатків суть якої заключається в тому що

лиходію вдається внедрити на сторінку JS код який не був
передбачений розробниками і за допомогою цього коду можуть бути
отримані різні дані такі як cookies, логіни, паролі і тд… Оскільки
браузер користувача не знає що цей код є шкідливим і тому виконує
його
14.Що таке API

---API (Application programming interface) це набір методів або функцій

які дозволяють двом інтерфейсам (системам) розуміти один одного і
взаємодіяти між собою, і за цими методами стоїть логіка яка
абстрагована (схована) від розробника щоб зробити розробку
легшою, розробник лише використовує методи (функції). Якщо брати
до прикладу клієнт і сервер, використовуючи метод fetch() від Fetch
API, то клієнт використовує лише саму функцію fetch(), передаючи
деякі параметри, потім сервер отримує цей запит (інструкцію), і
виконує (якщо сервер підтримує дане API). API це набір функцій,
розроблених іншим розробником, код яких абстраговано(сховано),
щоб було легше писати код і не прописувати весь код самостійно
(DOM API, Fetch API, XMLHTTPRequest API).

Воно використовує інкапсуляцію, і розробник не париться з тим що

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

15. Що таке CDN

---Contend Delivery Network (мережа доставки контенту) це група

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

16.Що таке ІР (Internet Protocol) адрес

---Це унікальний адрес що позначає (обозначає, defines) пристрій в

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

17.Різниця між host i domain

---Host Це сервер на якому знаходиться (зберігається) сайт і його дані,

а домен це ім’я яке потім за допомогою DNS перетворюється в IP
адрес який указує на сервер на якому знаходиться сайт

18. Різниця між URL (Uniform resourse locator) і URI (Uniform resourse
identifier)

---URL: http//:small-dao/roadmap – it identifies location

URI: http//:small-dao/roadmap/#posts – It identifies resourse

URI can represent both URL and URN of a resource simultaneously,

whereas URL can only specify the address of the resource on the internet

19.Що таке BOM (Browser Object Model, об’єктна модель браузера)

---Це, це модель яка дозволяє JavaScript взаємодіяти з браузером,

дана модель включає в себе такі об'єкти як Navigator, location, history,
screen XMLHttpRequest. Коротко кажучи BOM це об’єкти які надає
браузер щоб працювати з всім що є в браузері крім документа,
модель BOM не є стандартизована, тому може відрізнятися в різних
браузерах
 HTML

1. Чому зазвичай краще розташувати CSS підключення між тегами

<head></head>

---Рекомендується підключити стилі в head, щоб сторінка якомога

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

2.Як забезпечити коректне відображення тексту на сторінці на

різних мовах (en, ua, du…)

---Прописати стандарт кодування (зазвичай UTF-8) .Кодування HTML-

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

3.Яку функцію виконує doctype?

---За допомогою цього елемента вказується тип поточного документа..

Завдяки цьому браузер може визначити тип документу і потім
правильно його пропарсити і відобразити для правильної роботи
сторінки

4.Для чого потрібні data атрибути?

---Для зберігання додаткової інформації або значень що асоціюються

з елементом. Атрибут пишеться: data-description, data-count, data-
name
5. Яка різниця між cookies sessionStorage i localStorage

---Ці всі технології використовуються для зберігання даних в браузері

localStorage зберігає дані в браузері користувача необмежену

кількість часу, не мають терміну життя,

sessionStorage зберігає дані так само як localStorage, відмінність в

тому що дані з sessionStorage видаляються як тільки закінчується
сессія тобто закривається вкладка

Cookies - зберігають інформацію невеликими чатинами до 4Кб, мають

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

6. Що таке Тег

---Це чанк розмітки який позначає початок і кінець HTML елемента в

документі, який потім відображаються на сторінці у вигляді елемента

7. Що таке карта зображень <map>

---Карти зображень - це комбінація URL-адрес та зображень, де

зображення ділиться на декілька частин і до кожної частини
привнатискання на зображення відкриває URL до якого зображення
було прив'язано

8. Що таке гіперпосилання?
---Гіперпосилання - це посилання, яке дозволяє користувачеві
переходити з однієї веб-сторінки на іншу при натисканні.
Гіперпосилання використовується як для тексту так і для зображеннь

9. Поясніть поняття веб сховища в HTML5.

---Це браузерне API яке дозволяє зберігати дані локально в браузері

користувача

10. Поясніть API геолокації

---API Геолокації викоримтовується для визаначення географічної

точки пристрою

11. Поясніть графіку в HTML

---Графіка в може бути намальована двома способами: Canvan і SVG

Canvas використовується для написання растрової графіки, базується

на пікселях, тому підходить для написання ігор. SVG використовується
для створення векторної графіки, базується на фігурах (об’єкти з
координатами)

12.Що таке мігровані теги

---Це теги що були перенесені з HTML4 до HTML5

13. Для чого потрібні мета-теги

--- Мета теги це теги які не відображаються на сторінці і

використовуються для опису інформації про сторінку, початкова
ширина сторінки, кодування тексту, опис, ключові слова…Метадані це
якби інформація про дані

14.Що таке HTML5

---HTML5 це новий стандарт головною ціллю якого є можливість
представляти будь-який контент без використання додатквоих
плагінів таких як Flash Player

15. Що таке SVG

---SVG це елемент для створення векторної графіки за допомогою

наборів координат

16.Що таке canvas

---Це область документу, в якій можна малювати растрову графіку за

допомогою canvas API використовуючи JavaScript

17.Що таке семантика

---Семантика це використання правильних тегів які описують значення

свого контенту контенту такі як : <header> <footer> <main> <aside> <p>

18 Різниця міє <i> i <em>

--- <i> Просто робить текст курсивом, <em>(emphisized) теж робить

текст курсивом, але при цьому він ще додає обернотому елементу
логічне виділення, і потім це виділення використовується пошуковими
роботами так само з <b> I <strong>

19. Види списків в HTML

-Маркований <ul> <li>

-Нумерований <ol> <li>

-Список визначень <dl>(definition list) <dt> (term) <dd>(definition)

20.Як семантично правильно зверстати картинку з підписом?

---Використовуючи елемент <figure>, який містить тег <img> із

зображенням і <figcaption> який містить підпис зображення:
<figure>

<img src=”some image” />

<figcaption>Descriptive text</figcaption>

</figure>

21. Різниця між margin I padding

Margin- це зовнішній відступ, визначає відстань від бордера елементу

до іншого елементу paddind – внутрішній відступ, визначай відступ від
контенту елемента до бордера елемента

22.Різниця між display: none і visibility: hidden

visibility: hidden робить елемент невидимим, але елемент

залишається в потоці документу, тобто те місце що було зайняте
елементом то воно і залишається зайнятим, зробити елемент
невидими можна виставивши opacity: 0

display: none Повністю видаляє елемент з потоку документу, також

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

23. Що таке HTML і для чого він використовується

---HTML (Hyper Text Maknup Language) Це мова гіпертекстової

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

24. Види input елементів

25.Що таке canvas

---canvas це HTML5 елемент який використовується для створення

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

26.Різниця між id i class

---id це унікальний ідентифікатор який позначає якиїсь унікальний

елемент на сторінці може бути лише один на цілу сторінку (light DOM
або shadow DOM), class використовується для позначення групи
однотипних елементів, class можна задавати багато разів на сторінці,
елемент може мати лише один id в той час коли class може бути
присутнім довільну кількість разів, id має більшу приорітетність

Краще всього class використовувати для додавання стилів, а id для

написання JavaScript логіки (елемент на якому буде реалізована
логіка)

Class для CSS | Id для JS

27.Категорії контенту в HTML5

28.Основні категорії контенту в HTML

---Метадані, Потоковий контент, секціонний контент, фразовий
контент, Вбудований контент, інтерактивний контент, явний контент,
контент форм

29.Якщо представити HTML5 як відкриту платформу то з яких блоків

від складається

30.Чи є у елементів свої дефолтні специфічні стилі

---Звичайно є, беручи тег <b/>, то він має жирний шрифт, беручи

заголовок, він має жирний і великий текст і тд…

32.<datalist> в комбінації з <input/>

33.Тег <head>

---Даний тег містить метадані про сторінку які не відображаються на

сторінці,може містити такі теги як <meta> - визначають інформацію як
кодування, опис сторінки, ключові слова… <title> - заголовок сторінки
<link> підключення CSS, шрифтів, ресурсів,<script> підключення
скриптів, <base> визначає базове URL, <noscript> спрацьовує коли
скрипти відключені ,

34.Що таке тег <meta> з name=’viewport’

---Використовується при розробці адаптивної (responsive) версії сайту.

Атрибут content містить поля як:

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

а може мати значення device-width що є рівним ширині пристрою

-initial-scale – Масштабування сторінки при першому відображенні

-max/min-scale – Максимальне/мінімаьне дозволене масштабування

для користувача
-user-scalable=”yes|no” – Дозволяє і забороняє масштабування

35.Для чого потрібно атрибут autocomplete

---Для автозаповнення полів текстом який раніше вже був введений

користувачем. Приймає значення on/off

36.Що таке тег <output>

---Використовується для відображення вичислювань

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="b" name="b" value="50" /> +
<input type="number" id="a" name="a" value="10" /> =
<output name="result" for="a b">60</output>
</form>
37.Що таке атрибут target

---Цей атрибут визначає як буде відкриватися нова сторінка, це може

бути поточна вкладка або ж нова вклдка. Приймає значення _blank
_parent, _self, _top

38.Application catche

---Це інерфейс який дозволяє розробнику вказати які файли і ресурси

слід кешувати для використання оффлайн

39. Тег picture

---<picture> використовується для відображеня зображень у

відповідності з розміром вікна пристрою. Містить теги src за
допомогою яких визначається яке зображення буде відображено

40.srcset атрибут

---Атрибут тега <img> який відображає зображення в залежності від

ширини екрану

41.Як семантично правильно зверстати навігаційне меню

Використовуючи тег <nav> <ul> <li> <a>, тег <nav> містить <ul> який
містить <li> в яких знаходяться гіперпосилання (<a>)
<nav>

<ul>

<li></li>

<li></li>

<li></li>

</ul>

<nav>

42. Що таке <iframe>

---Inline frame це елемент який дозволяє вставити будь-який HTML

документ (сторінку) з іншого джерела, використовується для реклами,
додавання відео з ресурсія таких як YouTube, і для інтерактивного
контенту

43. Теги sub i sup

---Використовуються для виділення тексту, sub відображає текст у

вигляді нижнього індекса, sup вигляді верхнього індекса
<b>

<span>y</span>

^{e ²}

</b>

Відображає y^(e^2)

44.Як можна сховати елемент не використовуючи CSS i JS

---За допомогою атрибута hidden

45. атрибут novalidate

---Використовується щоб відключити нативну валідацію форми яку

браузер виконує при субміті форми

CSS

1.Що таке селектори

---Селектори це штука за допомогою якої можна вибрати певний

елемент на який потрібно накласти певні стилі

2.Як розбити контент елементу на колонки

---За допомогою CSS властивості column-count: <number>

3.Що таке блокова модель CSS (Документу)

---Кожен елемент представляється у вигляді прямокутної коробки. Це

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

4. Властивість display.

Визначає відображення елементу на сторінці. Основні значення:

 none – елемент буде видалено з документу і він не

відображатиметься взагалі
 inline – елементи вистроюються в рядок, ширина кожного
елементу рівна ширині його контенту
 block – Елемент займає 100% ширини батькківського елемента
 inline-block – Елементи вистроюються в ряд, початкова ширина
рівна ширині контенту, може бути задана ширина і висота
елемента
  flex – Елемент стає флекс-контейнером, де потім можна
змінювати лайоут дочірніх елементів
 grid– Елемент стає грід-контейнером

5. Що таке keyframes
---Визначає ключові кадри по яких буде працювати анімація

6.Властивість position
---Визначає позиціонування елементу (його позицію в
документообізі). Приймає значення:
 static – дефолтне значення, елемент знаходиться в звичайному
обізі
 relative – зміщується (позиціонується) відносно своєї початкової
позиції причому залишаючи за собою пустий простір рівний його
блоковій моделі
 absolute - елемент виривається з документного обігу, не
залишаючи за собою порожнього простору, зміщується
(позиціонується) відносно найближчого батьківського
позиціонованого елементу.
 fixed – елемент виривається з документообігу і зміщується
(позиціонується) відносно в’юпорту
 sticky – елемент тримає position: absolute поки батьківський
елемент не проскролено, потім приймає static

7.box-sizing: border-box
---Дана властивість визначає як вираховуються висота і ширина
елементу, коли значення border-box, то розмір елемента починає
включати в свій розмір рамку і внутрішні відступи. До прикладу маємо
#box із шириною 100px і якщо добавляємо border 10px padding 40px,
то при box-sizing: contern-box ширина буде 140px, якщо box-sizing:
border-box, то ширина не зміниться і залишиться 100px, але 50px
будуть займати border i padding

8.Як браузер обробляє веб-сторінку

1.Формується DOM дерево із HTML
2.Загружаються стилі
3.На основі DOM і CSS формується дерево рендерингу
4.Для кожного елементу розраховується положення на сторінці
5.Відрисовка в браузері

9.Inline стилі
---Це стилі які пишуться напряму в аттрибуті style, мають найвищий
приорітет
10.Різниця між border i outline
---border є частиною елементу (box-model) outline не є чатиною
елементу і не впливає на його блокову модель, це просто візуальна
складова
11.Що таке BEM (Block, Element, Modifier [Блок, елемент,
модифікатор]).
---Це методологія написання CSS, в якій в його сонові лежить принцип
розділення елементів на незалежні блоки, Block – самостійна частина
яка має самостійне значення, Element – частина блоку, яка не має
самостійного значення і семантично прив'язана до свого блоку
Modifier – флаг на елементі (блок або елемент), використовується для
зміни зовнішнього вигляду і поведінки
Blocks, Elements and Modifiers

Block

Standalone entity that is meaningful on its own.

Examples

header, container, menu, checkbox, input

Element

A part of a block that has no standalone meaning and is semantically tied to its block.

Examples

menu item, list item, checkbox caption, header title

Modifier

A flag on a block or element. Use them to change appearance or behavior.

Benefits:
Modularity,
Block styles are never dependent on other elements on a page, so you will never experience problems from
cascading.

Reusability,
Composing independent blocks in different ways, and reusing them intelligently, reduces the amount of CSS
code that you will have to maintain

Structure
BEM methodology gives your CSS code a solid structure that remains simple and easy to understand.

12. Що таке семантичні елементи

---Семантичні елементи були введені в 5, вони призначені для того
щоб виділяти окремі частини сторінки (header, aside, footer, section),
вони не представляють ніякої відмінності від div, і використовуються
для виділення частин сторінки (описують контент який містять),
правильна розмітка покращує пошукову оптимізацію, що дозволяє
пошуковим роботам краще оптимізувати сторінку
13. З чого складається розмір елементу
-З розміру контенту, внутрішніх відступів, рамки і зовнішніх відступів
14. z-index
---Керує вертикальним порядком перекривання елементів, тобто як
елементи будуть накладатися один на одного, доступний лише на
позиціонованих елементах
15. Приорітетність селекторів
 Селектор тега: 1
 Селекстор класу: 10
 Селектор ID: 100
 Inline стилі: 1000
16. Що таке псевдокласи
Псевдоклас це селектор, який вибирає елементи, які знаходяться в
якомусь певному стані наприклад hover, checked, focus, lang, invalid…
17. Значення background-size
---Має значення: cover i contain
cover: Зображення зберігає свої пропорції і зменшується щоб
підходити під розмір елементу, зображення може обрізатися якщо
пропорції елемента не рівні пропорціям зображення
contain: Зменшує зображення так шоб воно повністю сталося в блок
size: Задвання розміру в одиницях
18.Псевдоелементи
---Дозволяє стилізувати якусь вибрану частину елементу
19.!important
Використовується шоб збільшити приорітет селектору і перевизначити
стилі
20 Стилізація інпутів
---Інпути стилізуються за допомогою <label> який прив’язаний до них,
а сам <input /> приховується
21.Селектори атрибутів
---Селектори аттрибутів використовуються щоб вибрати елемент який
має певний атрибут із певним значенням або без нього
22.Способи додавання CSS на сторінку
1.Інлайнові стилі: написання стилів в аттрибуті style
2.Додавання глобальних стилів за допомогою <style> тега
3.Додавання локальних стилів за допомогою <style> тега
4.Зовнішній файл із стилями

22. Як можна задати кнопку:

-За допомогою тега <button>

-За допомогою тега <input type=’submit’>

-Можна створити силку <a> і потім стилізувати під кнопку

23.Що таке інлайнові стилі і чи можна їх перевизначити

---Інлайнові стилі це стилі написані в атрибути style. Перевизначити
можна лише за допомогою дерективи !important

24.Що таке селектор

---Селектор це штука (css правило) яка вказує до якого елемента буде

присвоєно стилі, селектори діляться на прості і складні

-прості: p{}, a[href=’test’], *{}, #{}

-:складні (визначена комбінація простих селестрів) h1, h2, span{}, div >
p{}, li > a {}

25.Що таке специфічність і вага селектора

Специфічність це властивість за допомогою якої браузер визначає які
силі буде присвоєно до елемента, причина в тому що на одному
елементі може бути різна кількість стилів, і ті які будуть відображені
визначається селектором із найбільшою вагою:
Inline selector: 1000;
Id: 100;
Class/attribute/pseudo-class: 10;
Element(tag)/pseudo-element: 1;
Щоб порахувати вагу селектора то потрібно просто просумувати
прості селектори:
-#main .item /*===> 100 + 10 = 110*/
-#test p /*===> 100 + 1 = 101*/
26. Reset.css i Normalize.css
---Reset.css файл використовується для повного скидання всіх
дефолтних стилів, Normalize.css файл використовується лише для
скидання і налаштування деяких дефолтних стилів. Діло в тім що
практично всі HTML елементи мають дефолтні стилі і в різних
браузерах вони відображаться по різному (кожен браузер має свої
дефолтні стилі), тож щоб елементи у всіх браудераз були онакові,
використовується скидання або нормалізація. Reset.css Normalize.css
це файл який підключається на початку сторінки, який скидує або
нормалізує дефолтні стилі (тобто зберігає дефолтні стилі і робить їх
однаковими)
27. Adaptive i responsive дизайн
---Адаптивний це коли маємо декілька варіантів сайту (файлів), які
завантажуються в залежності від типу пристрою в якому
відображається сайт, responsive дизайн робить перестройку сайту в
залежності від розміру екрану
29.Що таке вендорні префікси

---Це приставка до CSS властивості, яка забезпечує підтримку

властивості в різних браузерах:
*-webkit-opacity: 0.5; /*Chrome, Safari*/

*-moz-opacity: 0.5; /*Firefox*/

*-ms-opacity: 0.5; /*Internet explorer & Edge*/

*-o-opacity: 0.5; /*Opera*/

*opacity: 0.5;

Підтримування всіх властивостей можна подивитись на сайті ‘Can I

use’
30.Що таке Progressive enhancement graceful degradation
---Progressive enhancement поетапне створення інтерфейсу веб
додатку починаючи з простого інтерфейсу, на кожному етапі
створюється версія інтерфейсу як покращена версія попереднього, як
приклад це створення додатку спочатку для мобільних пристроїв а
потім його трансформація під планшети і в десктоп версію (під пк) від
простої до складної
Mobile -> Tablet -> Desktop (PC)
Graceful degradation це Progressive enhancement у зворотньому
порядку, від складної до простої
Desktop (PC) -> Tablet -> Mobile

31.Що таке margin-collapse

32.Що таке z-index і як формується контекст накладання, порядок

накладання елементів в CSS

33.Як визначити використовуючи лише CSS чи підтримує браузер

властивість

---За допомогою дерективи @supports:

@supports (display: grid){

.main{

display: grid;

Якщо умова спрацьовує, то буде виконано css код всередині фігурник

дужок

34.Як підтримувати сторінки в браузерах з обмеженими функціями

--- бібліотека modernizer, директива @support, сайт caniuse.com

35.Як виправляти специфічні проблеми зі стилями для різних

браузерів (Коли сайт виглядає не однаково в різних браузерах)
---Це може бути використання autoprefixer, Reset.css або Normalize.css,
використання сторонніх бібліотек таких як bootstrap

36.Глобальні ключові слова в CSS

---*initial: По замовчуванню, скидує властивість до початкового

значення (наслідуване або не наслідуване значення)

*inherit: Наслідується від батьківського елементу і приміняється до

всіх вкладених елементів

*unset: З властивостями які наслідуються веде себе як inherit, а з

властивостями які не наслідуються веде себе як initial

*revert – Скидує значення до значення яке задано браузером за

замовчуванням

37. Функція attr()

---Допомагає отримати значення атрибуту який був заданий для HTML

елемента content: <attr(title)>; background-color: <attr(color)>;

38.Перерахування селекторів

---Селектори перераховуються через кому, це дозволяє уникнути

дублювання коду коли елементи мають однакові стилі, то краще ці
елементи винести в окремий блок з перерахуванням селекторів,
таким чином стилі будуть присвоєні до декількох елементів і немає
необходності писати стилі для кожного:
h1, h2, h3, h4, h5 {…}

39. Ключове слово currentColor

---currentColor зсилається на значення властивості color:

color: red;
box-shadow: 0 0 2px currentColor; /*Red*/

40. Які псевдокласи були додаді в CSS3

---:nth-child(n) – Вибирає н-товий елемент

:nth-last-child(n) – Вибирає н-товий елемент але починаючи з кінця

:last-child – Останній елемент

:only-child – Вибирає елемент якщо він є єдиним дочірнім елементом

батьківського елемента

:nth-of-type(n) – вибирає елемент н-ного типу

:first-of-type – вибирає перший елемент заданого типу всередині

батьківського

:last-of-type - вибирає останній елемент заданого типу всередині

батьківського

41.Які фільтри є в CSS

CSS дозволяє додавати зображенням ефекти за допомогою

властивості filter, значеннями є спеціальні функції, деякі з них:

Original, grayscale(0-1), sepia(0-1), saturate(0-1), hue-rotate(deg),

opacity(0-1), invert(0-1), brightness(0-1), contrast(0-5), blur(px),

Drop-shadow
 JavaScript

1.script, async, defer

2.Різниця між == і ===

---== Порівнює значення операндів, і якщо значення операндів

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

3.strict mode (“use strict”;)

---Дозволяє використовувати більш строгий варіант синтаксису

JavaScript, він заміняє помилки які JavaScript інтерпретатор тихо
пропускає на виключення (помилки), і не дозволяє писати так званий
‘bad syntax’ тож такий режим бажано завжди включати по
необхідності, його можна визначати локально і глобально у
глобальній області видимості або всередині блоку

4. Різниця між funcion declaration I function expression.

Expression присвоюється до змінної, а declaration визначається за

допомогою ключового слова function. Головна відмінність це те що
function declaration має механізм ‘спливання’ інтерпретатор при
запуску коду перш за все шукає function declaration і визначає їх,
томі ці функції доступні перед самим визначенням в найближчому
блоці, а function expression доступна лише після визначення

5.Перевірка слова на паліндром

6. Що таке валідація

---Це провірка HTML документу на відповідність встановленого

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

Першим перевіряється тип документу (doctype), потім перевіряється

код на правильність і відсутність помилок также перевіряється
правильність використання імен тегів та їх вкладеність, і перевірка на
наявність посторонніх тегів, можна перевірити за допомогою
офіційного сайту W3C Markup Validation Service

7.Різниця між null i undefined

---Обидва значення представляють собою відсутність значення

undefined – це значення компілятор присвоює автоматично якщо

змінна або поле не визначені (не ініціалізовано), null – навмисно
присвоюється розробником, щоб позначити відсутність значення
(явне задання відсутності значення)

8.Що таке hoisting

---Підняття це механізм підняття функцій або змінних в глобальну

або функціональну область видимості за допомогою якого можна
звертатися до змінної до її інінціалізації, вся суть в тому що JS
спочатку об’являє а вже потім ініціалізує змінні. Якщо звернутися до
змінної визначеної через var то отримаємо undefined, а вже самі
функції (function declaration) можуть бути доступні до ініціалізації

9. && i ||

--- && Повертає перше не істинне значення, або якщо всі операнди
істинні то повертає останній операнд, || свою чергу повертає перше
істинне значення і якщо обидва операнди не істинні то повертає
останній операнд
10. Найкоротше слово в рядку
----------------------------------------------------------

function findShortestWord(str){
return str
.trim().split(" ")
.sort((a, b) => a.length - b.length)[0] || "No words passed";;
}

console.log(findShortestWord("Sao, bora, ssvd, ssvss"))

11. Що таке область видимості (Scope)

--Scope це місце звідки ми маємо доступ до змінних і функцій, є

Глобальний, функціональний і блоковий.

Область видимості є глобальна, функціональна і блокова(if, label, for,

while…), змінні визначені всередині блоку {} не можуть бути доступні
поза його межами (це не стосується змінних визначених за
допомогою var, var залишається в глобальній області видимотсі навіт
якщо вона була визначена всередені циклу for: for(var i = 0; i < 10;
i++){…} )

12.Різниця між let const i var

---Змінні створені за допомогою var спливають і мають глобальну

облать видимості незалежно від того де змінна була визначена
(функція, блок(if, label…), цикл…). let i const мають блокову область
видимості (доступні лише всередині блоку в якому вони були
визначені), різниця між let I const в тому, що змінна визначена через
const є константою і не може бути змінена (змінювати можна лише
поля об’єкта), змінна яка визначена за допомогою let може бути
змінена

13.Замикання (Closure)

---Це механізм за допомогою якого внутрішня функція (тобто

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

---Якщо визначити змінну всередині функції то при виклику функції

ці змінні записуються в пам’ять, а потім при завершенні функції
видаляються з пам’яті і тому не можуть бути доступні за межами
функції. А якщо внутрішня функція використовує якісь змінні або
значення зовнішньої функції то ці значення не видаляються із
пам’яті після виконання зовніщньої функції, а замикаються на
внутрішній
const createPhrase = (greeting) => {

return (name) => `${greeting}${name}!`;

const sayHello = createPhrase(“Hi”);

sayHello(“Jonh”); //Hi Jonh!

14. Функції вищого порядку

---Це функції, які повертають інншу функцію або приймають функцію

(callback) як аргумент. Приклади таких функцій: map, forEach, reduce,
filter…
15. Callback

---Це функція яка передається в іншу функцію як аргумент і

викликається тією функцією за необхідності у відповідь на якісь дії

16. Що таке DOM

---Це Об’єктна модель документа, яку браузер створює в пам’яті

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

17. Event delegation i Event propagation

19. Перетворити буль-яке значення в булеве

- Boolean(value);
- !!value
Не істинні елементи:
“”, 0, null, undefined, NaN, false,

20. Методи масивів і рядків

21. Сума чисел рядка

function strNumbersSum(str){
 let sum = 0;
const regexp = /[0-9]/;

str.split("")
.forEach((digit) => regexp.test(digit) ? sum += parseInt(digit) : null);

return sum;
}

console.log(strNumbersSum("-12345"))// 15

22. Повернути унікальні значення з масивів

function returnUniqueValues(...arrs){
return [...new Set(arrs.flat())]
}

console.log(returnUniqueValues([1,2], [1,2,3,3,4,5], [6,7,8,9]));

--------------------------------------------------------------------------------------------------

23. Різниця preventDefault() і stopPropagation()

---preventDefault() запобігає дефолтну дію (поведінку) яку браузер

виконує у відповідь на подію.

---stopPropagation() запобігає розповсюдження події у фазах bubbling і

capturing
preventDefault prevents the default action the browser makes on that event.

24.Різниця між методами push, pop, shift, unshift

---push Додає елемент в кінець масиву, pop видаляє елемент з кінця

масиву, shift видаляє елемент з початку масиву unshift додає елемент
на початок масиву. Всі методи модифікують масив і повертають
елемент над яким була проведена маніпуляція
25. Таймери в JavaScript

---setTimeout(): викликає функцію один раз після завершення таймеру

setInterval: викликає функцію інтервально через заданий проміжок
часу, обидві функції повертають id за допомогою якого можна
зупинити таймер використовуючи clearTimeout/clearInterval

26. Ключове слово this

---Це ключове слово яке посилається на об’єкт в контексті якого було

викликано, цей контекст можна змінювати за допомогою call apply i
bind

27.Різниця між call, apply, bind

call() і apply() прив’язують переданий контекст до функції і потім

викликають її, різниця між цими методами в тому що call аргументи
перераховані через кому, а apply приймає масив аргументів, bind()
прив’язує переданий контекст до функції і повертає нову функцію з
прив`язаним контекстом
function doSmth(){

console.log("doing", this.job);

const user = {

job: "WWE"

doSmth.call(user);
28.Як перетворити будь-який тип в булевий, перерахуйте не істинні
значення в JS

--- !!someVar, !!{}, !![], !!”string”, Boolean(someVar)…

Основні не істинні типи: 0, “”, false, null, undefined, NaN

29. Що таке чиста функція

---Це функція яка не модифікує свої параметри (не має побічних

ефектів), і кожен раз коли викликається з одинаковим набором
параметрів вона повертає одинакове (одне й те ж) значення

30.Різниця між forEach, map і filter

---Усі методи є методами масивів для того що перебирати елементи

по порядку, всі приймають колбак як аргумент в який передається
поточний індекс елемент і масив, який буде примінено до кожного
елементу масиву, різниця в тім що forEach не повертає нічого а просто
проходиться по масиву, map проходиться по масиву і повертає новий
масив який який складається із іначень повернутих колбеком, filter
теж повертає новий масив, але цей масив складається з елементів які
задовільнили умову колбека, тобто для яких callback повернув true

31. Чому функції називають об’єктами першого класу

---Це тому що всі типи даних в JS поводяться як об’єкти, навіть

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

---

*: obj.hasOwnProperty(`prop1`); //true|false (метод);

*: `prop1` in obj; //true| false; (Оператор)

*: obj[`prop1`]; //value | undefined (Звернення напряму)

in перевіряє чи властивість з’являється десь в ланцюгу прототипів

hasOwnProperty повертає true якщо властивість не була унаслідувана ,
а була визначена на самому об’єкті

---Обидва підходи призначені для виявлення наявності властивості в

об’єкті in перевіряє наявність не тільки в об’єкті, а й в самих
прототипах, hasOwnProperty перевіряє наявність властивості лише в
самому об’єкті;

33. Що таке IIFE

---Це функція яка викликається відразу після створення, ця штука в

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

34.Що таке псевдомасив arguments

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

псевдомасивом тому що він поводиться як масив і має властивість
length але інші методи йому не доступні, также він де не доступний в
стрілочних функціях, на відміну від arguments rest parameters є
справжнім масивом
35.Різниця між хост-об’єктами і нативними об’єктами

---Хост-об’єкти це об’єкти які пропонуються середовищем виконання,

тобто браузером node.js та іншими до прикладу window, document,
history, location…. В свою чергу нативні об’єкти це об’єкти які є
частиною мови JavsScript такі як число, рядок, масив, regexp і тд… Ну і
є ще третій тип об’єктів – це користувацькі об’єкти, які створені
користувачем (розробником)

36.Чому результат порівняння двох об’єктів це false

---В JS механізми порівняння примітивів і об’єктів відрізняються,

примітиви порівнюються по значенню, а об’єкти порівнюються за
посиланням або адресі в пам’яті, і навіть якщо два об’єкти по
структурі однакові то посилання в них виходять різні, а щоб повертало
true то треба змінній присвоїти об’єкт (в змінну запишеться посилання
на об’єкт посилання), а вже потім порівнювати дану змінну з об’єктом

39. Чому розширення нативних JS об’єктів це погана ідея

---Тому що можна отримати конфлікт методів або властивостей

40. Що таке NaN. І як визначити чи значення рівне NaN?

---Означає Not a Number (значення не є числом). Воно присвоюється

коли математична операція або функція спрацювала неправильно,
доприкладу якщо в parseInt попадає рядок, або якщо число ділимо на
рядок. NaN не рівне саме собі (NaN === NaN => false), провірити чи
значення є NaN за допомогою методу isNaN isNaN(NaN) => true

41. Що таке object wrapper

---Коли маємо строку, то вона не є об’єктом, а є примітивом, але коли

використовуємо деякі методи наприклад toUpperCase(), то все
працює хоча змінна було примітивом, вся справа в тому що при
виклику методу дана змінна перетворюється (обертається) в об’єкт
який містить всі методи і тд, ніби ми створили рядок за допомогою
new String(), а після виконання методу об’єкт відкидається і рядок
перетворюєьться знову в примітив, ось цей об’єкт і називається object
wrapper

42.Як в JS створити об’єкт

--- За допомогою нотації (об’єктний літерал), функція конструктор

(function Person(){…}) така функція викликається за допомогою
ключового слова new, за допомогою класу (new Object()), і за
допомогою Object.create(obj), де передається аргумент obj, який буде
прототипом для нового об’єкту

43.Для чого потрібно ключове слово new

---

Дане слово викликає функцію конструктор

*.Створює порожній об’єкт

*.Прив’язує this контекст до створеного порожнього об’єкта

*.Присвоює прототип

*.Повертає значення this, тобто сам об’єкт

44.Різниця між rest і spread операторами

---spread оператор використовується для розділення колекцій

(масивів, об’єктів) на окремі елементи, тоді як rest призначений для
об’єднання окремих значень в масив, за домомогою spread можна
легко додавати нові значення до масиву чи об’єкту: [1,2,3, …arr],
{a:2,…obj}, дуже часто використовується при копіюванні об’єктів або
масивів, rest дозволяє до прикладу зобрати всі параметри що
залишилися в один масив

45.Що таке деструктуризація

---Деструктуризація надає зручний спосіб витягати значення із об’єктів

і масивів і поміщувати їх в змінні:

const people = [‘Jack’, ‘Max’, ‘Leo’];

const person = { name: “Jack”, age: 20 };

const [jack, max, leo] = people; //jack => ‘Jack’, max => `Max` leo =>`Leo`
const { name, age } = person;

46.Як перевірити чи значення є масивом

---Використовуючи Array.isArray(arr);

47.Для чого використовується оператор взаття залишку (%)

---Для того щоб визначити залишок після цілочислового ділення. Чому

(3 % 7 ) = 3, тому що 3 не ділиться націло на 7, тому результат операції
виходить 0, а залишок 3

48.Boxing/unboxing JavaScript.

---Boxing це обернення примітиву в об’єкт, а unboxing це знищення

(розгортання обертки) Питання 41

49.Що таке мемоїзація

51. Що таке глибока (deep) і поверхнева (shallow) копія об’єкта

---deep – копіювання значень (створення нового, незалежного
об’єкту), shallow - копіювання за посиланням , це як створення
псевдоніму для об’єкта, просто створюється посилання на об’єкт який
був скопійований. Для поверхевої копії достатньо всього лише
присвоїти змінну до об’єкта, а глибоке копіювання можна зробити за
допомогою методу Object.assign(), або за допомогою spread
оператора

52.Що таке ланцюг виклику функцій (chaining) і як реалізувати такий

підхід

Це підхід де методи об’єкту викликаються один за іншим без

додаткового звертання до самого об’єкта

‘test’.split(“”).reverse().join(“”).toUpperCase();

Таку саму штуку також можна виконати за допомогою промісів або

кастомного об’єкту з певними методами які повертають this, тобто
сам об’єкт

53.Що таке невизначена змінна

---Це присвоєння або переприсвоєння зммінної яка не була створена

(за допомогою let, const, var), це веде до створення властивості в
глобальному об’єкті (window), уникнути цього можна використовуючи
strict mode, і при такому присвоєнні буде повертатися помилка, тому
що this в strict mode в глобальному контексті буде undefined

54. Як передаються змінні в функцію, по значенню чи через

посилання
---Параметри передаються по значенню, але параметри, які
представляють собою об’єкти передаються по посиланню,
передається саме посилання на об’єкт а не сам об’єкт

55.Як відрізняються звичайні і стрілочні функції

---

*.У звичайної функції значення this динамічне і залежить від контексту

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

*.Стрілочну функцію неможна використовувати як конструктор

*.У стрілочної функції немає псевдомасиву arguments

*.Синтаксичні відмінності

*.Якщо створити метод який буде встановлювати setTimeout то

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

56.Різниця між const і Object.freeze()

---Різниця в тому що об’єкт визначений за допомогою const не можна
перевизначити, але змінювати, додавати і видаляти методи і поля
можна, а при використанні Object.freeze() змінну можна
переприсвоїти якщо вона визначена не через const, але не можна
модифікувати, додовати і видаляти поля і методи, тобто робить об’єкт
іммутабельним

Іммутабельність це властивість яка визначає чи можна модифікувати

об’єкт, тобто змінювати, додавати або видаляти поля

57.Що таке генератори

---Це новий вид функцій в JS, їх особливість в тому що виконуючись

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

Синтаксис: function * func(){ /*yield*/ }

Всередині функції використовується ключове слово yield для генерації

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

59. Що таке прототипне наслідування і як створити об’єкт без

прототипу

---Всі об’єкти в JS мають прототип (властивість __proto__), що є

посиланням на інший об’єкт від якого поточний об’єкт унаслідував
властивості і методи, коли до властивості об’єкта відбувається
звернення і якщо властивість не знаходиться в поточному об’єкті, то
механізм js переглядає прототип об’єкта і шукає цю властивість там,
потім він йде в прототип прототипа і так до тих пір поки не знайде
указану властивість або доки не дійде до кінця ланцюга прототипів. А
щоб створити об’єкт без прототипу потрібно використати
Object.create(null)

59.Що таке прототип

---Прототип це об’єкт який містить поля і методи які наслідуються

іншим об’єктом при його створенні, кожен об’єкт має поле __proto__
яке є посиланням на об’єкт який був використаний як прототип для
створення даного об’єкту, якщо ми звертаємося до поля об’єкта, якого
в об’єкті немає то JS шукає те поле в об’єкті __proto__ так до тих пір
поки не знайде поле до якого ми зверталися або поки не завершиться
лінцюг прототипів, і якщо __proto__ об’єкт мав поле до якого ми
зверталися (наприклад x) від якого наслідувався останній створений
об’єкт, то значення цього поля повертається

59.Як працює Object.create()

---Це найпростіший метод наслідування одного об’єкту від іншого без

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

60.Різниця між Object.preventExtension(), Object.freeze() i

Object.seal()

---Object.preventExtension забороняє додовання нових полів до

об’єкту Object.freeze() повністю забороняє мутацію (змінення об’єкту),
Object.seal() теж забороняє модифікувати об’єкт (додавати,видаляти
поля), але дозволяє модифікувати значення вже присутніх полів
61. JavaScript це статично чи динамічно типізована мова

---Динамічно типізована мова, тип змінної перевіряється під час

виконання.

62.Різниця між методами slice i splice

---slice повертає вибрані елементи масиву у вигляді нового масиву,

splice Дозволяє видалити елементи з масиву або замінити їх інщими
елементами

63.Як працюють методи find() findIndex() indexOf()

---Метод find(callback(el)) повертає перший елемент який відповідає

заданому критерію який перевіряється в колбекові,
findIndex(callbakc(el)) працює так само як і find() але вже повертає не
сам елемент а його індекс indexOf(element) повертає індекс елементу
який переданий як аргумент, якщо в масиві нема такого елемента то
повертає -1

64.Плюси і мінуси використання useStrict()

Плюси:

*Не дозволяє випадково створювати глобальні змінні

*Будь-яке присвоєння яке в звичайному режимі завершується

невдачею в строгому режимі видає виключення

*При спробі видалити властивості які не видаляються видає помилку

*Потребує щоб імена параметрів функцій були унікальні

*this в глобальній області видимості рівно undefined

*Видає виключення для помилок які б компілятор пропускав

безшумно.
Мінуси:

*Не можна використовувати деякі особливості мови

*Немає доступу до function.caller і function.arguments

*Об’єднання скриптів в строгому режимі може викликати помилки

63.Плюси і мінуси іммутабельності

---Властивість іммутабельності можна досягти за допомогою

Object.freeze(), дана властивість забороняє модифікацію значень.
Плюси:

*Просте і швидке відсліджування змін

*Більш безпечне використання і тестування

Мінуси:

*Різний рівень продуктивності, який залежить від конкретної

реалізації структур даних з якими ведеться робота

64.Типи об’єктів в JavaScript

---Основні типи це об’єкт масиву, строковий об’єкт, Об’єкт дати, число,

логічний об’єкт, функціональний, Math/ RegExp, Object

65. Парадигми програмування в JavaScript

---JavaScript Мультипарадигмальна мова яка підтримує імперативне

процедурне програмування наряду з ООП і функціональним
програмуванням. ООП базується на принципі Наслідування,
Інкапсуляція, Поліморфізм, Абстракція. Функціональе програмування:
Чисті функції, Іммутабельність, Замикання, Функції першого класу,
Функції вищого порядку
66.Типи помилок в JavaScript

---Основні типи помилок в JS EvalError, RangeError (Коли число не

попадає в діапазон), ReferenceError (Зсилання на елемент який не
існує), SyntaxError (Синтаксична помилка), TypeError (Помилка
використання неправильного типу), URIError (При використанні
методів з encode/decode(URI)) з невалідними аргументами, Або
використовуючи ключове слово throw(“Opps”) //Custom error
throw(new Error(“Opps”))

67. typeof і instanceof

---typeof повертає рядок з іменем типу, instanceof працює на рівні

прототипів і перевіряє чи присутній правий операнд в ланцюгу
прототипів лівого операнда, тобто визначає чи об’єкт був створений
за допомогою певного конструктора або його нащадків

68.Що таке регулярні вирази (RegExp)

---Що шаблони що використовуються для співставлення послідовності

символів в рядку, створити регулярний вираз можна двома
методами: за допомогою літерала (/ab+c/g), або за допомогою
конструктора (let re = new RegExp(‘ab+c’, ‘g’)).
Методи регулярних виразів: test i exec, exec повертає значення яке
співпало або масив значень якщо був доданий глобальний флаг ‘g’, а
test повертає булеве значення чи є в рядку фрагмент який задовільняє
регулярний вираз

69. Що таке поліфіл

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

70. Що таке рекурсія

---Рекурсія це коли функція в своєму тілі викликає саму себе
71.Що таке switch

---Це альтернатива if/else, в switch передається значення а потім це

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

72.Типи функцій по здібності (способності) приймати інші функції

---Таких функцій є 3 типи:

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

повертає іншу функцію

*Функція вищого порядку: приймає як аргумент або повертає іншу

функцію

*Унарна функція: Функція яка приймає один аргумент який не є

функцією.

73.Різниця між some i every

---Обидва методи є методами перебору масиву, вони перевіряють

елементи на відповідність деякій умові логіка якої пишетяся в колбек
який передається як аргумент (якщо колбек повертає true то елемент
проходить перевірку, якщо false то елемент не проходить перевірку
на відповідність умові). Різниця між ними в тому що some() перевіряє
чи є хоча б один елемент який задовільняє цю умову, а every()
перевіряє чи всі елементи задовільняють умову.

74. Як працюж збиральник сміття (сборщик мусора)

---Алгоритм називається алгоритм поміток або Mark-and-Sweep.

Збиральник це фоновий процес який для збирання сміття
використовує посилання об’єктів. Періодично збиральник починаючи
від коріня (об’єкт window) знаходить всі об’єкти які можуть бути
доступні з кореня і знаходить всі об’єкти які доступні з даних об’єктів.
Таким чином збиральник знаходить всі досяжні об’єкти і збирає
недосяжні об’єкти. Будь-яке значення вважається досяжним якщо
воно досяжне з коріня за посиланням або по ланцюгу посилань.
Доприкладу якщо маємо об’єкт в глобальній області видимотсі і у
нього є властивість в якому зберігається посилання на інший об’єкт то
цей об’єкт вважається досяжним

Об’єкти зберігаються в пам’яті поки вони є досяжним. Якщо об’єкт є

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

let user = {

house: { area: 20 }

user.house = null
Якщо переприсвоїти властивість house то (user.house = null), то
посилання на об’єкт губиться і він стає недоступним і збірник сміття
збирає об’єкт який раніше був присвоєний до house, так само якщо
переприсвоїти user (user = null), то втрачається посилання на об’єкт і
від забирається збиральником сміття. Об’єкт вважається недосяжним
якщо всі всі посилання на на нього втрачено (об’єкт не може бути
доступний), і він збиражться збирачем і видаляється

Web API

1.Що таке http

---Це протокол для передавання гіпертекстових документів, на даний

час використовується для передавання довільних документів і файлів,
створений в основному для зв’язку між браузерами і веб сервером.
http це протокол без збереження стану, тобто сервер не зберігає дані
між запитами і відповідями. Працює по моделі клієнт-сервер, клієнт
відкриває за’язок і надсилає запит а потім чекає на відповідь від
сервера. HTTP містить Method, Path, Version of protocol і headers (Host,
body, accept-language…). Основні методи які використовуються це GET,
POST, PUT, DELETE, HEAD (як GET але відповідь приходить без тіла
відповіді)

Все програмне забепечення ділиться на 3 категорії: 1.Клієнт

(Споживач) 2.Проксі – використовується для виконання транспортних
служб 3.Сервер (Поставщик послуг)

2. Що таке http cookies

---Це невеликий фрагмент даних які сервер відправляє на браузер

користувача, які браузер може зберегти і відсилати з новим запитом
до даного серверу. cookies додаює стан для зберігання даних про
сессію і інші дані. Отримавши запит, сервер, разом з відповіддю може
відправити хедер ‘set-cookie’, для кукі можна задати термін життя,
після якого вони не будуть дійсними

3.Що таке web socket

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

клієнтом і сервером через постійний зв’язок, дані по цьому з’єднанню
передаються в обох напрямках у вигляді пакетів без розриву зв’язку і
додаткових http запитів. Щоб відкрити з’єднання треба створити
об’єкт за допомогою ```new WebSocket(“ws://ulr”); і за домпомогою
слухачів подій як (onopen, onmessage, onerror, onclose) можна вести
комунікацію з сервером\

4. Різниця між HTTP i HTTPS

HTTPS це покращена версія HTTP яка використовує SSL або TLS

шифрування для передавання даних, дані передаються у
зашифрованому форматі, використовується щоб уникнути крадіжку
даних третіми особами при передаванні даних

5.Різниця між PUT i POST

---POST використовується для створення ресурсу на сервері, а PUT як

для оновлення так і для створення нових даних, якщо ресурсу не
існує, то створється новий

6.Що таке secure, httpsOnly cookies

---Безпечні кукі відсилаються на сервер лише якщо запит виконується

по SSL і HTTPS. Кукі з флагом HttpOnly не доступні через
document.cookie, XMLHttpRequest i Request API, що допомагає
уникнути міжсайтового скриптингу (XSS), встановлювати цей флаг
треба коли немає необхідності працювати з кукі всередині скрипта
6.Що таке Contert Security Policy (CSP)

---Політика безпеки контенту це хедер який дозволяє операторам

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

7.Що таке CORS

---По дефолту в цілях безпеки браузери обмежують між доменні

запити які створюються скриптами, запит може бути відправлено
лише на домен звідки було завантажено сайт (same-origin-policy), це
обмеження не дозволяє JavaScript виконувати запити за межі
поточного домену. CORS це механізм який використовує додаткові
HTTP заголовки, щоб дати можливість браузеру користувача
отримувати дозвіл на отримання ресурсів з іншого домену, який
відрізняється від поточного домену

8. Web Workers

---Це скрипт (в основному файл) який працює в бакграунді

(асинхронно) не блокуючи сторінку і не знижуючи продуктивність.
Воркер створюється за допомогою класу `WebWorker(file.js)`, і потім
воркер може відсилати повідомлення до JS коду який створив цього
воркера, які обробляються за допомогою обробника подій. Воркери
працюють в іншому глобальному контексті, який не є об’єктом
window на даній сторінці. В воркері може працювати будь-який код
крім деяких виключень як маніпуляція DOM елементами. Дані
відправляються між сторінкою і воркером в обох напрямках за
допомогою методу postMessage(), і обробляються за допомогою
onmessage oбробника. Воркери зазвичай використовуються для
складних обчислень результат яких не потрібен зразу

9. Service Workers

10.History API

---Надає доступ до управління історією браузера в рамках

теперішньої сессії, сессія створюється коли користувач відкриває нову
вкладку в браузері. Доступ до цього АРІ через window.history

11.Що таке веб-сховище

---Це інтерфейс який дозволяє зберігати дані локально у вигляді пар

[ключ: значення] у браузері користувача

12.Типи спливаючих вікон в JavaScript

---Є три типи вікон які підтримуються із коробки, які можна

використовувати для взаємодії з користувачем

*alert() – Вікно з кнопкою ОК, використовується для сповіщення

користувача

*confirm – Відображає вікно з кнопками OK i Cancel, які дозволяють

користувачу прийняти або відхилити

*prompt – Вікно як confirm але з полем для вводу даних

 JS in the Browser

1.Що таке розповсюдження подій (eventPropagation)

---Розповсюдження подій це механізм який відпрацьовує коли якась

подія відбувається в браузері. Розповсюдження ділиться на 3 фази:

*Capturing (фаза захвату), подія починається від кореня документу

(window) і проходить по DOM дереву до цільового елемента,

*target, коли подія досягає цільового елемента

*bubbling (спливання), подія повертається від цільового елемента до

кореня (window), паралельно викликаючи всі події на батьківських
елементів.

Виклик подій по дефолту відбувається в bubling фазі але можна задати

щоб воно відбувалося в фазі capturing, це можна зробити додавши
useCapture до addEventListener

2.Що таке делегіювання (делегація) подій

---Це прийом в розробці щоб коли замість того щоб прикріплювати

однотипні оробники на всі елементи, можна додати лише один
обробник на їх спільного предка

До прикладу маємо таблицю 100х100 і при кліці на кожну комірку нам

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

3.Різниця між event.target і event.currentTarget

---event.target це елемент який викликав подію (це може бути
нащадок, який знаходиться в елементі до якого прикріплена подія…),
а event.currentTarget це елемент до якого був прикріплений
обробник

4.Різниця між event.stopPropagation() I

event.stopImmediatePropagation()

---Обидва методи зупиняють розповсюдження події.

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

5.Різниця між подіями load і DOMContentLoaded

---DOMContentLoaded спрацьовує коли браузер повністю завантажив

html і після побудував DOM дерево але зовнішні ресурси по типу
скриптів, файлів і картинок ще могли не загрузитися. Натомість load
спрацьовує коли браузер завантажив html і всі зовнішні ресурси по
типу картинок, скриптів, файлів… Ще є такі події beforeUnload і unload
які спрацьовують коли користувач покидає веб сторінку

6.Різниця між attribute I attribute property

---attribute це статичне значення деякого DOM елемента яке задається

в html розмітці. А attribute property (властивість) це вирахуване
значення DOM елемента і воно може змінюватися. Прикладом такого
атрибута є input.value

7. Різниця між HTMlCollection і Nodelist

---HTMLCollection це динамічна HTML коллекція яка представляє
собою масивоподібний ітерований об’єкт елементів. NodeList це
статичний список нод (або вузлів), в який входять всі знайдені
елементи в документі (елементи, текст…). Різниця в тім якщо до
документу динамічно додасться якиїсь елемент який буде
задовільняти запит, то він додасться лише до HTMLCollection тому що
колекція є динамічною а NodeList статичний тому сюди елемент не
додасться. getElementsByClassName() повертає HTMLCollection a
querySelectorAll() NodeList

8.Типи вузлів DOM дерева

---Основні типи вузлів: document - сама сторінка, elementNode – HTML

теги, textNode – текстовий контент (вузол), commentNode – HTML
коментар, коли додається коментар на сторінку то він предстравляє з
себе окремий вузол

9.Властивості для переміщення по дереву

---previousSibling, nextSibling, firstChild, lastChild, childNodes,

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

* previousElementSibling, nextElementSibling, firstElementChild,

lastElementChild, children, parentElement ці 6 властивостей
звертаються лише до елементів (nodeElements or elementNodes)

10.Типи подій в JavaScript

---Основні види це:

-Події миші такі як mouseup, mousedown, click

-Події клавіатури, коли відбувається натискання клавіш такі як, keyup,

keydown
-Події форми, такі як submit, focus, blur, change

-Події перетягування, drag, dragstart, dragend

11.Як додати обробник подій на елемент в JavaScript

---Є три основні методи:

-Прямо в HTML розмітці елементі за допомогою атрибуту і

передавання в нього функції, мінус в тому що можна додати лише
один обробник

-За допомогою властивості які починаються на on, onclick, ondragover,

onmouseover… Мінус в тому що якщо присвоюємо два обробники
однакового типу то один обробник замінить інший

-Використовувати на практиці. За допомогою addEventListener(‘click’,

testFunc, {config}), він приймає три аргументи, ім’я події, обробник, і
об’єкт конфігурації: {once: true, capture: true, passive: true},

-once: обробник буде автоматично видалено після першого

спрацьовування

-capture: Визначає на якій фазі повинен спрацювати обробник, якщо

true то подія буде перехоплена на стадії capturing (погруженія,
захвату), а якщо false то на стадії bubbling (спливання), замість об’єкту
може стояти true|false і воно буде відноситися до capture

Слухач події можна видалити за допомогою

removeEventListener(‘click’, func), де в якості аргументів передаються
ім’я події і обробник який був переданий в addEventListener()

-passive: Якщо true, то обробник ніколи не викличе preventDefault()

12.Різниця між innerHTML і outerHTML

---Обидві властивості повертають і задають розміту елемента,
innerHTML представляє внутнішній HTML код який знаходиться
всередині елемента, outerHTML представляє повний HTML код
елемента

13.Координати в браузері

---Координати починаються в правому верхньому куті, вісь x йде

вправо, а вісь y іде вниз. В браузері є 2 системи координат: Перша
починається з верхнього правого кута сторінки, а інша з верхнього
правого кута вікна браузера. Властивості pageX pageY відносяться до
документа, clientX, clientY для екрану. Координатами елемента є
відстань від осі системи координат до правого верхнього кута
елемента (в пікселях). За допомогою
window.getBoundingClientRect(element) можна отримати детальні
дані про координати елемента і його розміри

14.Різниця між JSON i XML

JSON і XML це формати обміну даними. JSON (JavaScript Object

Notation) це формат заснований на об’єктах мови JavaScript.
Представляє собою об’єкти і масиви, кожне поле складається з пар
атрибут-значення (атрибута і значення)
{"Geeks":[
{ "firstName":"Vivek", "lastName":"Kothari" },
{ "firstName":"Suraj", "lastName":"Kumar" },
{ "firstName":"John", "lastName":"Smith" },
{ "firstName":"Peter", "lastName":"Gregory" }
]}

XML Це мова розмітки, де кожен тег містить дані

<Geeks>
<Geek>
<firstName>Vivek</firstName> <lastName>Kothari</lastName>
</Geek>
<Geek>
<firstName>Suraj</firstName> <lastName>Kumar</lastName>
</Geek>
<Geek>
<firstName>John</firstName> <lastName>Smith</lastName>
 </Geek>
<Geek>
<firstName>Peter</firstName> <lastName>Gregory</lastName>
</Geek>
</Geeks>

JSON елементи представляються як об’єкти, а XML елементи у

вигляді тегів
Name":"Peter", "lastName":"Gregory" }
]}
JSON XML
Це JavaScript Object Notation Extensible Markup Language

Засновано на JavaScript об’єктах Це мова розмітки що

використовує тегову структуру
щоб представляти дані
Підтримує масиви Не підтримує масиві
.json Файли легко читаються у .xml Файли відносно важко читати
порівнянні з .xml і інтерпретувати
Менш структурована Більш структурована ніж .json
Не підтримує коментарі Підтримує коментарі
Підтримує лише UTF-8 кодування Підтримує різне ко
Менш захищений Більше захищений ніж JSON

ECMASCRIPT

1.Що таке EcmaScript

---Це специфікація стандарту ECMA 262. Це стандарт в якому

прописана специфікація скриптової мови загального призначення, він
має правила, рекомендації і тд які повинні бути дотримані
скриптовою мовою для того щоб мова вважалася совмістимою з,
ECMASCRIPT
2.Чи можна змінити значення визначене за допомогою const

---Саме значення переприсвоювати не можна, якщо значення є

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

3.Що таке тимчасово мертва зона (temporal dead zone)

---Вся суть в тому що змінні визначені за допомогою let i const теж

спливають так само як і var, то щоб позбутися спливання було
створено temporal dead zone, а це значить що інтерпретатор створить
змінні як тільки зайде в область видимості, але вони будуть
недоступні до тих пір поки виконання коду не дійде до місця їх
фактичного визначення, і тільки в цей момент виконається вихід із
тимчасово мертвої зони

4.Різниця між rest i spread операторами ‘…’

---Spread розділяє колекцію на окремі елементи, а rest навпаки,

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

5.Що таке деструктуризація

---Це вираз, який дає спосіб витягнути значення із об’єктів або масивів
і поміщати їх в окремі змінні, використовується щоб мінімізувати код і
зробити його більш зрозумілішим не дивлячись на об’єм
Const names = [ `Volodia`, `The Rock`, `Jonh` ]

Const obj = { name: `ivan`, age: 250 };

Const [ volodia, theRock, jonh ] = names;

Const { name, age } = person;

6.Для чого використовується цикл for of

---Даний оператор допомагає виконати цикл обходу ітерабельних

об’єктів, різниця між for in і for of в тому що for in працює з індексами
і ключами, в той час як for of працює лише із самими значеннями

7.Що таке шаблонні літерали (Template literals)

---Це новий метод створення рядків який був доданий в, за

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

8.Що таке Set Map, WeakMap, WeakSet

---Це колекції, Map це колекція для зберігання записів у вигляді ключ-

значення, на відміну від об’єктів, де ключем може бути лише рядок в
Map ключем може бути будь-яке значення, доприкладу число або
булеве значення. Що стосовно Set то це колекція яка зберігає лише
унікальні значення, кожне значення може зустрічатися лише один
раз. WeakMap WeakSet відрізняються від звичайних Map i Set тим що
в weakMap ключем повинні бути функція або об’єкт (посилання)…

9.Що таке ітератори

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

наборів даних, до масивів, Set, Map,Рядкам і тд… Так можна
перебрати набір даних за допомогою цикла for of. Ітерабельні об’єкти
це об’єкти вміст яких можна перебрати в циклі, у ітерабельних
об’єктів є спеціальний метод який повертає об’єкт (ітератор), у цього
об’єкта є спеціальний метод який називається next(), сам метод
повертає об’єкт у якого є дві властивості, done і value і перебір даних
буде іти до тих пір поки метод не поверне об’єкт з done до якого
присвоєно true

10.Що таке генератори

---Генератор це функція яка виконуючись вони можуть призупинити

своє виконання і повертати проміжкове значення всередині
використовується слово yield, для того щоб звичайну функцію
перетворити в генератор треба додати зірочку на кінець (function*) ,
при запуску функції вона не виконує код а повертає об’єкт (ітератор
або генератор) складається з об’єктів в яких є два поля: value і done,
value – це значення яке було якби повернуто словом yield, таким
чином він дозволяє керувати виконанням функції, для отримання
наступного значення генератора треба викликати його метод next().
Так же є асинхронні генератори які дозволяють працювати з
асинхронними потоками даних

11.Що таке ES6 Модулі

---Використовуються для розділення коду на декілька самотстійних

частин. Коли програма складна і мітсить багато коду то найкращим
методом його організації буде розбиття коду на окремі невеликі
файли, кожен з яких виконує якусь функціональність, до ES6 модулів
були популярні дві модульні системи це common.js i AMD. Для
передачі функціональності файлу використовувався export а для
отримання import. Модулі потрібні для збільшиння читабельності і
полегшення підтримки коду, для повторного використання коду і для
збереження чистоти глобального простору імен

12.Що таке символ (Symbol) в ES6

---Символ це унікальні і незмінні значення, створюються за

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

13.Для чого використовується метод .includes(element, startPosition)

---Цей метод наявний у масивів і рядків, він перевіряє чи містить

масив певний елемент, а для рядків провіряє чи містить рядок
переданий підрядок повертає true | false

Async JavaScript

1.Різниця між синхронними і асинхронними функціями

---Синхронні функції є блокуючими, коли інтерпретатор натикається на

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

2.Що таке AJAX

---Це Asynchronous JavaScript And XML. Це термін який описує підхід

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

3.Що таке Same-origin-policy (Принцип одного джерела)

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

може взаємодіяти з ресурсами із іншого джерела (домену). Цей
принцип не дозволяє документу виконувати запити за межі домену в
якому він знаходиться. Це допомагає ізолювати потенційно шкідливі
документи і не дозволяє шкідливим сценаріям з одного домену (з
одної сторінки) отримати конфіденціальні дані на іншому домені
(іншій сторінці) А для роз таких кросдоменних запитити
використовується CORS

4.Що таке цикл подій і як він працює

---Движок JS є однопотоковим, тобто движок в одиницю часу може

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

---Проміси це один із прийомів роботи з асинхронним кодом в JS.

Проміс це об'єкт який може повернути одне значення це виконане
значення або причина із-за якої проміс не був виконаний (помилку),
проміс може знаходитися в одному з трьох станів: pending
(очікування), fulfulled (виконано), rejected(відхилено), в проміс можна
додати колбек для обробки отриманого значення або для обробки
причини відмови, для такого підходу використовується chaining
(ланцюг виклику), з методами then і catch

6. Прийоми роботи з асинхронним кодом

---Із-за особливості асинхронних функцій не блокувати виконання

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

-Callback: всередині одної асинхронної функції записується інша і так

далі поки не отримується багаторівнева вкладеність, мінус такого
підходу в тому що можна отримати Callback hell, тобто дуже велика
вкладеність

-Promise: В цьому випадку асинхронна функція повертає об’єкт Проміс

використовуючи його і методи .then() i .catch() можна оброблювати
отримані даніі передавати їх далі по ланцюгу

-Async/await- Це використання async/await, де напроти синхронного

коду ставиться слово await і виконання асинхронного коду йде
синхронно

7.Переваги роботи з промісами

-Устраняє Callback Hell

-Робить код більш читабельним

8.Що таке async/await

---Це новий спосіб написання асинхронного коду, побудований на

основі промісів. Змушує код який працює асинхронно виглядати і
виконуватися як синхронний (синхронно), перед функцією додається
ключове слово async яке заставляє функцію повертати проміс,
ключове слово await можна використовувати лише всередині
асинхронної функції, await очікує повернення значення з правої
частини перед виконанням наступного рядка коду, таким чином
асинхронний код виконується послідовно, використовується коли
результат одного запиту залежить від результату іншого запиту,
найчастіше використовується з конструкцією try/catch/finally, яка
дозволяє відловлювати помилки в асинхронних запитах
9. Різниця Promise.all(), Promise.any(), Promice.race();

Всі три методи приймають масив промісів. Promise.all() резолвиться

коли всі передані проміси resolve i реджектиться як тільки один із
промісів реджекнувся, Promise.any() резолвиться як тільки один із
промісів резолвиться і відхиляє коли всі проміси реджекнулися,
Promice.race() резолвиться як тільки один із промісів резолвиться і
реджектиться як тільки один із промісів реджектиться (результат
повертається із першого резовнтутого або реджекнутого проміса);

Всі проміси виконуються (резолвляться) з масивом результатів

10.Що таке callback

---Callback це функція яка передана як аргумент до іншої функції, яка

потім викликається функцією в яку була передана, функції які
приймають callback: map(callback), filter(callback), setTimeout(callback,
time) … При використанні колбеків в асинхронних функціях може
получиться така штука як Callback Hell це вкладеність колбеків при
якій отримується декілька рівнів

11.Метод allSettled()

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

промісів при цьому неважливо чи завершилися вони з помилкою чи
без (резолвиться коли всі проміси були виконані, не важливо чи
проміс резолвнувся чи реджектнулися), і реджектиться коли один із
промісів не виконався (не повернув ні резолв ні реджект)

12. Плюси і мінуси AJAX

Плюси:

-Нові дані можуть бути додані без перезавантаження сторінки

-Стан може бути збережений на сторінці, DOM і JS змінні
зберагаються, оскільки основна сторінка не перезапускається

Мінуси:

-Так як дані додаються динамічно, то будь’які операції треба зберігати

в URL

-Не працює без JS (якщо JS відключено)

-Динамічний контент не бачать деякі пошукові роботи

REACT

1.Що таке React

---Це бібліотека для створення користувацьких інтерфейсів створена

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

2.Основні особливості реакт

-Використання Virtual DOM замість звичайного DOM

-Підтримка Server Side Rendering (SSR), початкова розмітка будується

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

-One-way direction data flow. Має однопоточний потік даних, дані

передаються від корінних (самих верхніх) елементів до вкладених,
але не навпаки
-Використання багатовикористовуваних компонентів для побудови
користувацького інтерфейсу

3.Що таке Virtual DOM і як він працює з React

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

DOM не призначався для роботи з динамічними даними, то динамічні
зміни в DOM використовують багато ресурсів і не є швидкими, тож
щоб збільшити перформанс був створений Virtual DOM, це по суті
об’єкт який являє собою облегшену копію DOM дерева, тому коли в
компоненті відбуваються зміни які ведуть до перерисовки, то
спочатку відбувається порівняння поточної версії Virtual DOM і версією
з оновленими даними і компонентами, після знаходження різниці,
зміни переносяться на реальне DOM дерево, цей процес називається
(узгодження), і перемальовується не вся сторінка, а лише частина
елементів в яких відбулися зміни

4.Для чого потрібен атрибут key при рендері списків

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

змінені, додані або видалені, найчастіше для цього використовується
id елемента, якщо такого id немає то в крайньому випадку можна
використати індекс елементу

5.Що таке PureComponent

---Це компонент який рендерить одинаковий аутпут при при одних і

тих же пропсах і стані. Також використовує в своєму тілі
shouldComponentUpdate() для поверхневої перевірки пропсів і стану
для визначення того чи потрібно ре-реднирити компонент
6.Що таке Higher Order Component(HOC), (Компонент вищого
порядку)

---Це функція яка приймає інший компонент, розширює його

функціональність не змінюючи його код і повертає новий компонент

7.Різниця між контрольованими і не контрольованими

компонентами

---У контрольованих компонентів кожна зміна обробляється за

допомогою обробника і обновлюється за допомогою setState() або за
допомогою хука useState() , неконтрольований компонент це просто
HTML елемент, які обновлюються динамічно і ніяк не пов’язаний з
React. Завдяки контрольованим компонентам дані які зберігаються в
контрольованих компонентах можуть бути доступні за їх межами
ідучи вверх по дереву або вниз дерева

---Контрольований компонент отримує всої значення через пропси і

повідомляє про зміни значень через колбеки такі як onChange, а
батьківський компонент контролює цим процесом оброблюючи
подію (колбек) і керуючи своїм станом і потім передаючи нові
значення в контрольований компонент

А неконтрольований компонент це компонент який сам зберігає свій

стан і його значення отримуються через ref, це більш схоже на
стандартний HTML

8. Методи життєвого циклу компоненту React

-constructor() це метод який викликається до того як компонент буде

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

-componentDidUpdate(), викликається зразу після оновлення

-componentWillUnmount(), викликається безпосередньо перед тим

коли компонент буде видалено (перед розмонтуванням), в ньому
виконується необхідні скидання (відміна таймера, скидання підписок
на слухачі подій і тд…)

-componentShouldUpdate(), викликається зразу перед оновленням

компоненту, визначає чи потрібно оновити компонент

-render(), Створений для повернення розмітки

-getDerivedStateFromProps(), викликається перед викликом методу

render(), повертає об’єкт для обновлення стану або null щоб нічого не
оновлювати, використовується лише коли стан залежить від змін в
пропсах

-getSnapshotBeforeUpdate(), дозволяє брати деяку інформіцію із DOM

перед її можливим оновленням

-getDerivedStateFromError(), викликається після виникання помилки в

компоненті нащадку, приймає помилку в якості параметра і повертає
значення для оновлення стану

-componentDidCatch(), викликається після виникання помилки в

компонента нащадка

9.Стадії життєвого циклу компонента

---Є три основні стадії

-Mounting: Вставка компонена на сторінку, сюди входять методи

constructor(), getDerivedStateFromProps(), render(),
componentDidMount()

-Updating – Стадія оновлення або із-за отримання нових пропсів або

із-за оновлення стану, сюди входять getDerivedStateFromProps(),
shouldComponentUpdate(), render(), getSnapshotBeforeUpdate(),
componentDidUpdate()

-Unmounting, це стадія видалення компоненту із браузерного DOM

має один метод componentWillUnmount()

10.Що таке React recansollation

11.Що таке Portal

---Це компонент який створюється за допомогою createPortal() який

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

12.Що таке Context

---Це метод предачі даних через дерево компонентів без необхідності

передавати дані через компоненти (рівні) які їх не потребують.
Контекст створюється за допомогою useContext або createContext.
Створюється за допомогою createContext() і отримується за
допомогою useContext(). Дозволяє уникнути пропс дрілінга
13.Що таке React Hooks

---Це нововведення в реакт яке дозволяє використання стану,

управління життєвим циклом і інших можливостей React в
функціональному компоненті без написання класових компонентів

Хуки дозволяють використання функціональності класових

компонентів в функціональних компонентах. Крім хуків які присутні в
реакт можна створити свої користувацькі хуки

14.Що таке JSX (JavaScript XML)

---Це розширення синтаксису JS яке дозволяє писати HTML в JS, сам по

собі цей код не може бути прочитаний браузером тому він спочатку
повинен бути конвертований в JavaScript за допомогою babel (i
webpack)

15.Різниця між state i props

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

керується компонентом як змінна визначена всередині функції

16.Що таке fiber

17.Що таке франмент і чому він краще ніж div

---Це паттерн в React який дозволяє групувати декілька елементів які

знаходяться на одному рівні вкладеності в один без використання
зайвих DOM елементів, цей JSX елемент не відрисовується на сторінці.
Фрагмент краще за дів тому що вони трохи швидше і використовують
менше пам’яті, коли фрагмент відрендерився то він не представляє з
себе нічого
18.Що таке синтетичні події в React

---Це кросбраузерна оболонка для нативних подій, всі події в реакт не

є нативними а є всього лише оболонкою, синтетичні події повністю
аналогічні браузерним включаючи stopPropagation() і
stopPropagation(), тому різниця незамітна

19.Що таке Reaсt посилання, як створити посилання (ref)

---Посилання використовуються для отримання посилання на самий

DOM елемент, або екземпляр компоненту в React, ref повертає
посилання на елемент, це майже аналог методу getElementById()

в більшості випадків рекомендується уникати посилань оскільки

структура компонентів, їх вкладеність і передача даних повинні бути
максимально простими для розуміння, щоб створити посилання є 2
варіанти: useRef() і createRef(), useRef() це хук який зберігає значення
напротязі рендерингів як useState(), а createRef() створює нове
посилання на кожноме рендерингу

20.Різниця між shadowDOM і virtualDOM

---Shadow DOM це браузерна технологія що використовується для

ізолювання змінних HTML СSS в веб-компонентах, Virtual DOM це
концепція що використовується для представлення реального DOM
дерева у облегшеному вигляді яке зберігається в оперативній пам’яті

21.Плюси роботи з React

-Збільшення продуктивності за допомогою Virtual DOM

-JSX облегшує читання і написання коду

-Присутній редеринг як на стороні клієнта так і на стороні сервера

-Декларативність (Немає прямих маніпуляцій з DOM…)

-Компонентний підхід

22.Що таке Умовний рендеринг (Conditional Rendering)

---Це відрисовка компонентів на основі якоїсь умови, if…else, switch,

ternary, && ….

23.Що таке компонент перемикач

---Це компонент який рендерить один із декількох компонентів на

основі якоїсь умови (пропси, умова, стан...)

24.Різниця між React і ReactDOM

25.Різниця між Компонентом і контейнером

---Компонент це класовий або функціональний компонент який

описує візуальне представлення додатку, контейнер це
неформальний термін який пов’язаний з Redux Store, контейнери
отримують оновлений Redux state і dispatch actions, і вони зазвичай не
рендерять UI

26.Як реакт обробляє або обмежує використання пропсів певного

типу

---За допомогою PropTypes, воно преставляє собою об’єкт який

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

27.Строгий режим в реакт

---Це інструмент для визначення потенціальних проблем додатку, він

не рендерить нічого а активує додаткоові перевірки і попередження
для дочірніх компонентів
<React.StrictMode><App /></React.StrictMode>

28.Що таке буріння пропсів Props drilling

---Це коли маємо велику кількістm пропсів які треба передавати вниз
до дочірніх елементів, і їх треба передавати через багато рівнів навіть
через компоненти які не потребують цього. Ця проблема вирішується
за допомогою Redux store або Context

29.Різниця між елементом і компонентом

---Компонент це шаблон він може бути функцією або класом, з

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

30.Що таке ReactDOMServer

---Це об’єкт який дозволяє рендерити компоненти у вигляді статичної

розмітки, тобто SSR server-sider-rendering

31.Що таке Pooling

32.Що таке React Boundaries (запобіжники)

---Це компоненти які перехоплюють будь-які помилки які виникають в

дереві нащадків, після чого виводять помилку в консоль, або
відображається резервний UI замість зламаного…

33.Що таке лінива функція

---Це метод із API React Suspend. Це функція яка дозволяє свтворювати

компоненти які завантажуються за допомогою динамічного імпорту
import { lazy } from ‘react’;

const MyComponent = (() => import(`./MyComponent`));

function App(){

<>

<MyComponent />

</>

34.Різниця між рендерингом і монутванням

---Рендеринг це функція яка викликається компонентом і повертає
інструкції для створювання DOM Монтування це встроювання
елементів в браузерний DOM
35.Що таке children
---Це проп який дозволяє приймати компоненти які були передані між
тегами компонента як дочірні
36.Що таке Події указателя Pointer Events
---Це події схожі на події миші але вони не залежать від пристрою, тож
це може бути або миша або дотик і тд… Це позбавлє необхідності
реалізувати слухачі подій для кожного пристрою. Є такі як:
onpointerup, onpointerenter, onpointermove…
37.Що таке інверсія наслідування
38.Як в React реалізувати двостореоннє зв’язування даних
---Це реалізується за допомогою стану, батьківський компонент
тримає стан дочірнього компоненту доприкладу input і передає в
нього той стан і обробник для події onChange(), який змінює даний
стан, тож коли текст в інпуті змінюється це в свою чергу викликає
обробник який передає вверх нове значення і встановлює новий стан
в батьківському компоненті
39.Різниця між класовим і функціональним компонентом

---Функціональні компоненти це звичайні функції в JavaScript які

повертають JSX, в них не можна використовувати методи життєвого
циклу, не мають методу render. Класові компонент це клас який
розширяє React.Component, мають методи життєвого циклу і в них не
можна використовувати хуки як в функціональних компонентах,
також в них можна використовувати методи оптимізації як
shouldComponentUpdate()

40.Різниця між useEffect() і componentDidMount()

---componentDidMount() useEffect() запускаються після монування

компоненту, хук useEffect() це альтернатива методів життєвого
циклу класового компоненту, useEffect() викликається після
відображення на екрані результатів рендерингу, є ще такий хук як
useLayoutEffect яктий викликається до відображення результатів
рендерингу на екрані

41.Переваги хуків

---Роблять код більш чистим і підвищують його читабельність так як

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

42.Обмеження хуків

---Виконувати хуки треба в самому верху ієрархії функції і їх можна

використовувати лише в функціональних компонентах або в
користувацьких хуках

43.Що таке підняття стану вверх (lifting state up)

---Це патерн за допомогою якого один стан може бути використаний

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

44.Метод shouldComponentUpdate()

---Це метод життєвого циклу класового компоненту, який повертає

булеве значення, якщо повертає false то механізм узгодження
(співставлення ) не запуститься тим самим збільшуючи
продуктивність,цей метод дає реакту знати чи вплинули зміни в
стані на вигляд компонента, його аналогом є хук useEffect() який
приймає аргументи від яких залежить перерисовка компонента, в
метод передаються nextProps i nextState

45.Різниця між createElement() i cloneElement()

---createElement(type, [props], […children]) використовується для

створення нового React елемента, type – це тип елементу (div, p, b…),
cloneElement(element, [props], […children])) клонує вже інсуючий
елемент в неї можна передати додаткові пропси, або дочірні
елементи

46.Що таке useReducer()

---Це хук для управління стейтом, приймає функцію reducer,

початковий state і повертає поточний стан і функцію dispatch яка
використовується для передавання об’єкту action до функції reducer,
цей об’єкт складається з називи операції і пейлоада, додаткових
даних які передаються в reducer, useState() розроблений на основі
useReducer()
47.Як реалізувати однократне виконання операції при початковому
рендерингу

---За допомогою метода componentDidMount(), або за допомогою

useEffect(() => …, []) з порожнім масивом залежностей, що є
еквівалентним до методу componentDidMount()

48.Хуки useCallback(), useMemo(), useImperativeHandle(),

useLayoutEffect()

---useMemo(), використовується для оптимізації якихось обчислень і

тд…, приймає callback, який повертає вирахуване значення, яке
повертається хуком useMemo(), і масив залежностей, повторний
обрахунок починається лише при зміні залежностей.

useCallback(), виконує туж саму функцію але повертає колбек

49.Що таке розподілений компонент

50.Навіщо в setState() передавати функцію

---Тому що передана функція отримує стейт як аргумент і на основі

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

Синтаксис: setState(newState, [callback(state, props)]);

*For force update use: component.forceUpdate()

51.Для чого потрібен registerServiceWorker в React

---ServiceWorkers це Web-API яке дозволяє записувати файли

додатку в кеш і повертати їх при відсутності підключення до мережі
або повільному з’єднанні що покращує user experience. React
створює service workers без по замовчуванню

ООП

1.Основні принципи ООП

---ООП базується на 4-х основних принципах як абстракція це

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

2.Що таке SOLID

---

3.Різниця між класовим і прототипним наслідуванням

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

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

4.Однонаправлений потік даних і двохсторонній зв’язок даних, яка

між ними різниця

---

5.Що таке функціональне програмування

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

Композиціювання функцій це процес об’єднання двох або більше

функцій для того щоб створити нову функцію або виконати якісь
обчислення: f(g(x)), str.split(“”).map()…

Побічні ефекти це модитифікування глобальних/локальних змінних

і тд…

6.Різниця між функцією і методом

---Функція це фрагмент коду з іменем який не зв’язаний ні з яким

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

7.Що таке каріровання

---Це прийом в функціональному програмуванні в якому можна

перетворити функцію з декількома аргументами в набір вкладених
функцій з одним агрументом. Функція приймає параметер повертає
іншу функцію яка чекає інший параметер
function mul(a){

return function(b){

return function(c){

return a * b * c;

}
}

mul(2)(3)(4);

8.Дескриптори властивостей об’єктів

---Дискриптор це об’єкт який описує поведінку властивості, як буде

поводитися об’єкт при виконанні операцій над ним, у кожного
дискриптора є 6 основних значеннь:

-value: Значення властивості

-writable: Якщо true то значення можна змінювати, якщо false то ні

-enumerable: Якщо true то властивість буде перераховуватися в

циклі for in і при використанні методу Object.keys()

-configurable: якщо true, то властивість можна перезаписати за

допомогою нових викликів Object.defineProperty(), тобто його
можна налаштовувати після створення

-get: функція яка буде викликана при запиті до властивості

-set: функція яка буде виконана при записі властивості

9.Getters i Setters

---Це функції які викликаються при спробі зчитати або записати

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

10.Що таке статичний метод класу

---Статичні методи це методи і властивотсі які не є прив'язаними до
якогось певного екземпляру класу і викликаються лише за
допомогою класу або всередині нього і не є доступними для
екземплярів класу. Вони мають статичне значення без різниці які
екземпляри зсилаються на властивість або метод. Вони
позначаються спеціальним словом static Доступ екземпярам можна
надати лише використовуючи нестатичний метод в якому
використовуэться статичне значення або статичний метод

11.Різниця між композицією і наслідуванням

---Наслідування це концепція ООП коли один клас наслідує поля і

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

State Management

1.Що таке Redux

---Redux це бібліотека для управління стейтом додатку і базується на

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

2.Що таке Flux

---Це паттерн проектування

---

3.Основні концепції Redux

---action, reducer, store, state, dispatch, subscribe, connect provider,

middleware

4.Що таке єдине джерело правди

---

5.Що таке reducer

---Це чиста функція яка використовується для повернення нового

значення стейту (зміни стейту), як аргументи вона приймає
поточний стан і об’єкт action який містить полe type і необов’язкове
поле payload, і на основі цього об’єкту визгначаєтся як буде змінено
стан додатку

6.Різниця між React state (useState…) i Redux State

---Різниця в тім що зберігається в компоненті локально і за

необхідності стану в інших компонентах воно передається через
пропси (найвищий елемент який потребує даний стан буде його
зберігати і передавати в нижчі які його теж потребують). В Redux
стан зберігається глобально в storage і компонент може отримувати
доступ з стану без використання пропсів, так само як із React Context
7.Як виглядає потік даних в Redux

---Redux розподіляє стан між компонентами за допомогою єдиного

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

8.Плюси і мінуси Redux

Плюси:

-Отримання стану без передавання пропсів що допомагає уникнути

Props Drilling-у

-Розділення інтерфейсу і управління станом

Мінуси:

-Відсутність інкапсуляції, тобто кожен компонент має доступ до

даних що може привести до проблемам з безпекою

-Оскільки стан є іммутабельним то редюсер обновляє його кожний

раз повертаючи стан що тягне за собою додаткове використання
пам’яті

Делегація – доручення задачі від зовнішнього об’єкта внутрішньому

React Ecosystem

1.Що таке React Router і чим відрізняється від звичайної

маршрутизації
---В реакт існує лише один HTML файл коли користувач переходить
по адресу то замість отримання даних нової сторінки від сервера
роутер повертає певний компонент і складається враження
переміщенням між різними сторінками, роутер дивиться в history і
якщо щось змінилося то роутер перемальовує компонент

2.Які хуки були додані в React Router 5

-useHistory() надає доступ до історії посилається на history яка

використовується роутером для гавігації, основна суть полягає в
програмній навігації за допомогою таких методів як push, replace і
тд…

-useLocation() схожий на window.location але доступний в будь-

якому місці

-useParams() – надає доступ до параметрів пошукового рядка в URL

-useRouterMatch()

3.Як передавати пропси в React Router

---Router з пропсом render приймає функцію яка приймає пропси

передані в Route i повертає компонент після чого викликає її замість
реалізації власної логіки рендеринга. В Re