##Junior
Base CRUD (Create, Read, Update, Delete)
- POST - Create
- GET - Read
- PUT - Update
- DELETE - Delete
- OPTIONS - CORS - Використовується для опису параметрів з'єднання з ресурсом.
- HEAD - запитує ресурс так само, як і метод GET, але без тіла відповіді
- PATCH - Update for part
- TRACE - Виконує виклик тестового повідомлення, що повертається, з ресурсу
- CONNECT - встановлює "тунель" до сервера, визначеного за ресурсом
Hyper Text Transfer Protocol
- HTTP/1.1
- HTTP/2
Інформаційні 100 - 199 Вдалі 200 - 299 Перенаправлення 300 - 399 Клиентскі помилки 400 - 499 Серверні помилки 500 - 599
- 200 OK
- 300 redirect
- 400 Bad Request — Неправильний запит. Запит не може бути виконаний з причини невірного синтаксису.
- 401 Unauthorized — Несанкціонований доступ.
- 403 Forbidden — Заборонено. Запит був коректним, але сервер відмовляється відповідати на нього.
- 404 Not Found — Не знайдено. Ресурс не знайдено
- 500 Internal Server Error — Внутрішня помилка серверу
- CORS — спільне використання ресурсів з різних джерел. механізм безпеки сучасних браузерів, який дозволяє веб-сторінкам використовувати дані, що знаходяться на інших доменах.
- у файл конфігурації треба додати строку "Header set Access-Control-Allow-Origin 'origin-list'"
Існують такі види кукі-файлів: «сеансові» і «постійні». Сеансові кукі є тимчасовими і зберігаються тільки до моменту вимкнення браузера. Постійні кукі залишаються на жорсткому диску комп'ютера або на електронному носії до тих пір, поки їх не видалити, або не закінчиться термін їх дії
- 4093 байта на один домен
- Забезпечує більш сувору перевірку на наявність помилок
- У use strict не можна створити глобальну змінну
- front-end використовує готові дані
- back-end не використовує css та html для js
- Статична — Кожна змінна в статично типізованій мові належить до певного типу, який можна визначити без запуску коду.
- Динамічна — Типи змінних невідомі до того моменту, коли у них є конкретні значення при запуску.
-
Модель клієнт-серверної взаємодії визначається розподілом обов'язків між клієнтом та сервером.
-
Передбачає взаємодію двох програмних модулів — клієнтського та серверного. В залежності від того, як між ними розподіляються наведені вище функції, розрізняють:
-
- модель тонкого клієнта, в рамках якої вся логіка застосунку та управління даними зосереджена на сервері. Клієнтська програма забезпечує тільки функції рівня представлення;
-
- модель товстого клієнта, в якій сервер тільки керує даними, а обробка інформації та інтерфейс користувача зосереджені на стороні клієнта. Товстими клієнтами часто також називають пристрої з обмеженою потужністю: кишенькові комп'ютери, мобільні телефони та ін.
- Representational State Transfer, «передача репрезентативного стану». Підхід до архітектури мережевих протоколів, які надають доступ до інформаційних ресурсів
- мутабельність об'єкту - це зміна цьогож об'єкту без створення його копії. Результатом будь-якої модифікації такого об'єкта завжди буде цей самий об'єкт
- Незмінним (англ. Immutable) називається об'єкт, стан якого не може бути змінено після створення. Результатом будь-якої модифікації такого об'єкта завжди буде новий об'єкт, при цьому старий об'єкт не зміниться.
- Потрібно використовувати панель розробника у браузеру. Вираз "debugger" відкриває доступ до будь-якого доступного в конкретному оточенні функціоналу відладчика
- Ден Абрамов, Николас Закас, Алекс Бенкс, Ева Порселло
- Undefined (Невизначений тип) : typeof instance === "undefined"
- Boolean (Булев, Логічний тип) : typeof instance === "boolean"
- Number (Число) : typeof instance === "number"
- String (Рядок) : typeof instance === "string"
- BigInt : typeof instance === "bigint"
- Symbol (в ECMAScript 6) : typeof instance === "symbol"
- Null (Null тип ) : typeof instance === "object"
- Object (Объект) : typeof instance === "object"
- Function : typeof instance === "function"
- Якщо об'єкт є масивом, то метод "hasOwnProperty" може перевірити, чи існує індекс у масиві.
- Глобальна функція isFinite() визначає, чи є передане значення скінченним числом.
- Використовуйте Number.isNaN() або isNaN(), щоб найбільш зрозумілим чином визначити чи є значення значенням NaN.
На відміну від глобальної функції isNaN(), Number.isNaN() не має проблеми примусового перетворення параметра в число. Це означає, що в нього безпечно передавати значення, які зазвичай перетворюються в NaN
- var - одна на всі ітерації циклу і видно навіть після циклу. Обробляються на початку виконання функції
- Область видимості змінної let - блок {...}, та видна тільки після оголошення.
- Const задає константу, тобто змінну, яку не можна змінювати
Важлива концепція, яка визначає доступність змінних.
Деструктуризація (destructuring assignment) - це особливий синтаксис присвоювання, при якому можна присвоїти масив або об'єкт відразу декільком змінним, розбивши його на частини.
Планування викликів функцій та методів.
- сallback - це функція, яка повинна бути виконана після того, як інша функція завершила виконання
- Об'єкт Promise (проміс) використовується для відкладених і асинхронних обчислень.
- Оголошення async function визначає асинхронну функцію, яка повертає об'єкт AsyncFunction. Ключове слово await допустимо тільки в асинхронних функціях. В іншому контексті ви отримаєте помилку SyntaxError.
25.Чи можна записувати нові властивості / функції в прототипи стандартних класів (Array, Object тощо)? Чому ні? У яких випадках це робити можна? Як убезпечити себе, якщо потрібно розширити прототип?
- Зміни у прототипі Object видимі усім об'єктам через ланцюжок прототипів, якщо властивості та методи, яких стосуються ці зміни, не були перевизначені далі у ланцюжку прототипів. Це надає дуже потужний, хоча й потенційно небезпечний, механізм для перевизначення або розширення поведінки об'єкта.
- Змінюючи поведінку існуючих методів Object.prototype, розгляньте включення коду додаванням вашого розширення до чи після існуючої логіки.
- Оскільки JavaScript, насправді, не має об'єктів підкласу, прототип є зручним обхідним рішенням для створення об'єкта у ролі "базового класу" з певними функціями, що діють як об'єкти.
- Arr.push(...items) - додає елементи в кінець,
- Arr.pop() - витягує елемент з кінця,
- Arr.shift() - витягує елемент з початку,
- Arr.unshift(...items) - додає елементи в початок.
- Array.from() створює нову реалізацію Array з масивоподібного або ітеруємого об'єкта.
- Array.isArray() повертає true, якщо об'єкт є масивом і false, якщо він масивом не є.
- Array.of() створює нову реалізацію масиву Array з довільного числа аргументів, незалежно від числа або типу аргументу.
- forEach - для кожного елемента масиву викликає функцію callback.
- filter - створює новий масив, в який увійдуть тільки ті елементи arr, для яких виклик callback (item, i, arr) поверне true.
- map - створює новий масив, який буде складатися з результатів виклику callback (item, i, arr) для кожного елемента arr
- every/some - використовуються для перевірки масиву
- reduce/reduceRight - Використовується для послідовної обробки кожного елемента масиву із збереженням проміжного результату.
- присвоєння - (x = y) привласнює значення змінної y, змінної x.
- порівняння - Перед порівнянням оператор рівності (x == y) призводить обидві величини до загального типу.
- є три логічних оператора: || (АБО), && (І) і! (НЕ).
- арифметичні - «Унарний», «бінарний», «операнд» - приймають в якості операндів числові значення
- Бітові операції поводяться зі своїми операндами як з 32-х розрядними послідовностями нулів і одиниць
- Об'єкт Map містить пари ключ-значення і зберігає порядок вставки. Будь-яке значення (як об'єкти, так і примітиви) можуть бути використані в якості ключів.
- Об'єкти Set дозволяють вам зберігати унікальні значення будь-якого типу, як примітиви, так і інші типи об'єктів.
- Object.assign() або рест-оператор (...obj) - Поверхнева копія скопіює тільки top-level властивості, але вкладені об'єкти будуть використовуватися між оригіналом, так і копією.
- JSON.parse(JSON.stringify(obj)) - Для глибокого копіювання об'єкта може підійти сериализация об'єкта в рядок, а потім десеріалізацію назад
31.Яка різниця між декларацією функції (function declaration) та функціональним виразом (function expression)?
function declaration - функція, оголошена в основному потоці коду. Створюються інтерпретатором до виконання коду. function expression - оголошення функції в контексті будь-якого виразу, наприклад присвоювання.
Анонімна функція в - особливий вид функцій, які оголошуються в місці використання і не отримують унікального ідентифікатора для доступу до них.
33.Розкажіть про стрілкові функції (arrow function). В чому полягають відмінності стрілкових функцій від звичайних?
Вирази стрілочних функцій мають більш короткий синтаксис в порівнянні з функціональними виразами і лексично прив'язані до значення this (але не прив'язані до власного this, arguments, super, або new.target). Вираз стрілочних функцій не дозволяють задавати ім'я, тому стрілочні функції анонімні, якщо їх ні до чого не привласнити.
Викликається негайно вираз функції - це ідіома мови програмування JavaScript, яка створює лексичну область видимості, використовуючи область видимості функції JavaScript.
Підняття або hoisting - це Механізм в JavaScript, в якому змінні и оголошення функцій, пересуваються вгору своєї області відімості перед тім, як код буде Виконання. Як наслідок, це означає, что зовсім неважливо де були оголошені функція або змінні, всі смороду пересуваються вгору своєї області відімості, Незалежності від того локальна вона або ж глобальна.
Замикання - це комбінація функції, об’єднаної разом (укладена) із посиланнями на оточуючий її стан (лексичне середовище). Іншими словами, замикання дає вам доступ до зони Scope зовнішньої функції з внутрішньої функції. У JavaScript замикання створюються кожного разу, коли створюється функція, під час створення функції.
var f = function() { // ініціювання фукнції
console.log(1);
}
var execute = function(f) { //відкладене виконання фукнції
setTimeout(f, 1000);
}
execute(f); // що буде у консолі і чому - виклик фукнції
f = function() { // перезапис функції але вже без виклику
console.log(2);
}
1 через 1000 мілісекунд
Рекурсія - це виклик функцією самої себе. Рекурсію застосовують, коли розв'язувана задача містить подібні до себе підзадачі.
Ключове слово this відноситься до об'єкта, до якого воно належить.
Втрата контексту відбувається при відкладеному обчисленні,
Bind() ми використовуємо для виставлення значення this в методах та для каррінгу функцій. Bind() дозволяє нам легко виставляти який саме об'єкт буде прив'язаний до this в момент виклику функції або методу. apply() дозволяє нам виконувати функцію в масиві параметрів, ніби кожен параметр передається функції індивідуально, при її виконанні Параметри функції в apply() - масив, в call() - параметри передаються в індивідуальному порядку.
DOM - це незалежний від платформи і мови програмний інтерфейс, що дозволяє програмам і скриптам отримати доступ до вмісту HTML-, XHTML- і XML-документів, а також його анулювання, структуру і оформлення таких документів.
async Підтримується всіма браузерами, крім IE9-. Скрипт виконується повністю асинхронно. Тобто, при виявленні script async src = '...' браузер не зупиняє обробку сторінки, а спокійно працює далі. Коли скрипт буде завантажений - він виконається. defer Браузер гарантує, що відносний порядок скриптів з defer буде збережений. Скрипт з defer спрацює, коли весь HTML-документ буде оброблений браузером.
innerText витягує і встановлює вміст тега у вигляді простого тексту, тоді як innerHTML витягує і встановлює вміст у форматі HTML.
При настанні події обробники спочатку спрацьовують на самому вкладеному елементі, потім на його батьку, потім вище і так далі, вгору по ланцюжку вкладеності.
Для зупинки спливання потрібно викликати метод event.stopPropagation().
Для зупинки спливання потрібно викликати метод event.preventDefault().
Коли викликається обробник подій, ключове слово this всередині обробника встановлюється на елемент DOM, на якому зареєстрований обробник.
- LocalStorage - Цей об'єкт один на все вкладки та вікна в рамках джерела (один і той же домен / протокол / порт). Дані не мають терміну давності, за яким закінчуються і видаляються. Зберігаються після перезапуску браузера і навіть ОС.
- максимальний розмір LocalStorage ~5 Мб в залежності від браузеру
- SessionStorage - існує тільки в рамках поточної вкладки браузера. Інша вкладка з тієї ж сторінкою матиме інше сховище. Але воно розділяється між іфреймамі на тій же вкладці (за умови, що вони з одного і того ж джерела). Дані продовжують існувати після перезавантаження сторінки, але не після закриття / відкриття вкладки.
Webpack- це статичний модульний збирач для додатків на JavaScript. Має чотири базові поняття:
Щоб встановити NODE_ENV в production зазвичай використовується WebPack DefinePlugin. Це дозволить видалити перевірку propType та інші попередження. Також істотно скоротиться код, адже в React.JS передбачений Uglify, який викидає «мертвий код», залишаючи лише необхідне.
65.Перерахуйте часто використовувані хуки життєвого циклу компонента та розкажіть, для чого вони потрібні?
80.Які можливості TypeScript можна використовувати для типізації (тут мають на увазі інтерфейси, типи, enum тощо)?
84.Що таке RxJS? Як він використовується у фреймворку? Які компоненти фреймворку тісно пов’язані з ним?
91.У чому різниця між «розумним» (smart) і «дурним» (dumb) компонентами? У яких випадках застосовується кожен з них?
102.В якому методі життєвого циклу компонента краще робити підписку і відписку від лістенера? Чому? Навіщо відписуватися?
105.Чи працював з мемоізованими селекторами (memoized selectors)? Для чого їх використовують і який принцип роботи?
124.Напишіть запит, який вибирає останні три коментарі для конкретного користувача для двох таблиць: коментарі та користувачі.
129.В одному проєкті програмісти зберігають дані в MongoDB-колекції коментарів, використовуючи такі типи даних (дивіться нижче). Що поганого в цьому рішенні?
id: ObjectID
text: string
author_id: string
created_at: Date
130.У проєкті знадобилося внести зміни в структуру таблиць, додати кілька полів і індекси. Як програмісти будуть робити це на продакшені?
131.Щоразу, коли ви робите pull, чомусь трапляється конфлікт в останньому рядку в усіх файлах, які ви редагували. Що відбувається?
138.Менеджер попросив у задачі поміняти статуси з «active, inactive» на «active, removed», але в коді фігурують тільки цифри й незрозуміло, який статус відповідає якій цифрі. Як допомогти майбутнім програмістам не лізти в документацію за кодом? Питання ставлять на конкретному прикладі з кодом.
Для зберігання користувачів використовуйте Firebase (це безкоштовно).
Для стилізації використовуйте Bootstrap.
Мінімальний набір полів користувача:
ім’я;
прізвище;
електронна пошта;
телефон (у форматі +380 (XX) XXX-XX-XX);
дата народження;
буде плюсом — додавання аватара та можливість crop-картинки.
Список користувачів повинен мати можливість фільтрації та пагінацію.
Проєкт має містити README-файл з кроками для запуску.
2.Які типи автоматизованих тестів випадала нагода писати? Які бібліотеки при цьому використовували? Яким інструментам віддаєте перевагу і чому?
7.Розкажіть про патерни Observer, Pub / Sub. Яка між ними різниця? Наведіть приклади реалізації цих патернів у відомих фреймворках / бібліотеках / браузерних API.
8.З якою метою може бути використаний event listener події fetch self.addEventListener(’fetch’, event => {}) ?
let firstObj = { name: 'Hello' };
let secondObj = firstObj;
firstObj = { name: 'Bye' };
console.log(secondObj.name);
14.Опишіть, за допомогою чого в JS реалізуються такі ООП-парадигми, як інкапсуляція, поліморфізм, абстракція?
function Main () {}
Main.prototype = { protected: true };
const obj = new Main();
Main.prototype = { protected: false };
console.log('Object protection: ', obj.protected);
24.Що таке явне і неявне приведення (перетворення) типів даних у JS? Як відбувається перетворення типів у таких прикладах:
{}+[]+{}+[1]
!!"false" == !!"true"
['x'] == 'x'
27.Опишіть призначення і принципи роботи з колекціями WeakMap і WeakSet? Чим вони відрізняються від колекцій Map і Set відповідно?
Promise.resolve(10)
.then(e => console.log(e)) // ??
.then(e => Promise.resolve(e))
.then(console.log) // ??
.then(e => {
if (!e) {
throw 'Error caught';
}
})
.catch(e => {
console.log(e); // ??
return new Error('New error');
})
.then(e => {
console.log(e.message); // ??
})
.catch(e => {
console.log(e.message); // ??
});
30.Розкажіть про послідовне і паралельне виконання асинхронних функцій. У чому різниця між Promise.all () і Promise.allSettled ()?
35.Що таке ArrayBuffer? У чому різниця між Uint32Array і Float32Array? Який результат виконання коду?
const uint32Array = new Uint32Array();
Array.isArray(uint32Array);
const url = “HTTPs://xyz.com/path<to>page.html”;
encodeURI(url) == encodeURIComponent(url);
function * fn(num) {
for (let i = 0; i < num; i += 1) {
yield console.log(i);
}
}
const loop = fn(5);
loop.next();
loop.next();
39.Розкажіть про тип даних Symbol і його практичне застосування. Як перевести число з 10-розрядної системи в 16(2,8)-розрядну систему числення?
const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj)
const compose = (...fns) => res => fns.reduce((accum, next) => next(accum), res)
const unfold = (f, seed) => {
const go = (f, seed, acc) => {
const res = f(seed)
return res ? go(f, res[1], acc.concat([res[0]])) : acc
}
return go(f, seed, [])
}
45.У якому порядку обробляються призначені для користувача події в DOM (click, mouseover тощо)? FIFO чи LIFO?
51.Web worker’и. Опишіть особливості передачі даних між worker’ами та основним потоком, між розділеними worker’ами.
52.Розкажіть про способи оптимізації виконання ресурсомістких операцій JS для поліпшення продуктивності рендерингу контенту на сторінці.
55.Опишіть алгоритм створення функціоналу, що забезпечує читання вмісту .txt-файлу при перетягуванні його з файлової системи у вікно браузера.
* { box-sizing: border-box; }
68.Як відстежити прогрес / закінчення CSS @keyframes анімацій або плавних переходів, реалізованих за допомогою transition, у JS?
69.Які CSS-властивості можуть бути оброблені безпосередньо через GPU? Що таке композитні шари й чому їх велика кількість може призвести до аварійного завершення роботи браузера на мобільних пристроях?
76.Чому видалення зайвих символів пробілів / символів перенесення в HTML не відбивається на кінцевій продуктивності завантаження сторінки?
77.Що таке контекст відображення canvas? Які існують типи контексту для рендерингу двовимірної та тривимірної графіки?
78.Як працює Dependency injection? Навіщо це потрібно? Розкажіть про використання кастомних інжекторів.
79.Що таке zone.js? Для чого Angular використовує зони? З якою метою можна використовувати NgZone-сервіс?
80.Як працює Change detection? Як можна оптимізувати компонент за допомогою схем Change detection? Які ще прийоми є для оптимізації рендерингу (пов’язані з Change detection)?
87.Як працюють і навіщо потрібні динамічні компоненти? Наведіть приклади їх доцільного використання.
@HostBinding('class.valid') isValid;
94.Чому погано «провайдити» сервіс з shared-модуля в lazy-loaded модуль? (Питання про scope модулів.)
96.Які тести можна запустити для Angular-програми? Які інструменти використовують для тестування Angular-програми?
121.Опишіть словами код ендпоїнта, який повинен зберегти з клієнта файл розміром 4 гігабайти і покласти його на S3 або інший CDN.
router.post ( '/ users', async (req, res, next) => {
const user = await db.createUser (req);
if (user) {
return res.json (users);
}
res.json ({error: "can not create user"})
})
131.Для двох таблиць — коментарі та користувачі — напишіть запит, який вибирає останні три коментарі для кожного користувача.
136.Розкажіть про модульне підключення скриптів. Наведіть приклад використання завантажувальників / бандлерів модулів.
139.Опишіть процес code review. Назвіть основні правила, способи вирішення конфліктів і суперечок під час його проведення.
const inData = "user.name.firstname=Bob&user.name.lastname=Smith&user.favoritecolor=Light%20Blue";
function queryObjectify(arg) {
// ??
}
queryObjectify(inData)
/* Результатом виконання для вхідного рядка, повинен бути наступний об’єкт
{
'user': {
'name': {
'firstname': 'Bob',
'lastname': 'Smith'
},
'favoritecolor': 'Light Blue'
}
};
*/
const first = [1, 2, 3, 4];
const second = [3, 4, 5, 6];
function intersection (a, b) {
// ??
}
intersection(first, second) // -> [3, 4]
147.Реалізуйте функцію / клас для генерації HTML.
const HTMLConstruct = {};
HTMLConstruct.span('foo'); // -> <span>foo</span>
HTMLConstruct.div.span('bar'); // -> <div><span>bar</span></div>
HTMLConstruct.div.p(
HTMLConstruct.span('bar'),
HTMLConstruct.div.span('baz')
); // -> <div><p><span>bar</span><span>baz</span></p></div>
148.Якщо є проєкт з обмеженими термінами та некритичною продуктивністю, чим будете керуватися при виборі бібліотек,
підходів? Чи все ж будете звертати увагу на продуктивність? Або навпаки: терміни нелімітовані, продуктивність важлива. Ваші дії?