Запитання по JavaScript on Співбесіда: Запитання по JavaScript

Загальні

Mon, 01 Jan 0001 00:00:00 +0000

Загальні #

Розкажіть про функціональне програмування. #

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

Основні концепції:

Чисті функції - це функції, які не мають побічних ефектів введення-виведення та пам’яті (вони залежать тільки від своїх параметрів і повертають лише свій результат).
Незмінність даних (Імумутабельність) - дані не змінюються після створення. Натомість створюються нові версії даних із потрібними змінами.
Рекурсія - це використання функцій, які викликають самі себе. Рекурсія дозволяє описувати складні операції, а також по можливості замінювати звичні цикли.
Функції вищого порядка - такі функції приймають інші функції як аргументи або повертають функції як результат.
Каррування (Currying) - даний концепт, дозволяє легко комбінувати функції та створювати нові функції за допомогою вже існуючих.
Лініві обчислення - це концепція, яка дозволяє обчислювати значення тільки в той момент, коли воно дійсно необхідне для виконання програми.

Переваги функціонального програмування

JS Core

Mon, 01 Jan 0001 00:00:00 +0000

JS Core #

Які існують типи даних у JS? #

Як перевірити, чи об’єкт є масивом? #

Як перевірити, чи число є скінченним? #

Як перевірити, що змінна рівна NaN? #

Чим відрізняється поведінка isNaN() та Number.isNaN()? #

Порівняйте ключові слова var, let, const. #

Що таке область видимості? #

Що таке деструктуризація? #

Для чого призначені методи setTimeout і setInterval? #

Порівняйте підходи роботи з асинхронним кодом: сallbacks vs promises vs async/await. #

Чи можна записувати нові властивості / функції в прототипи стандартних класів (Array, Object тощо)? Чому ні? У яких випадках це робити можна? Як убезпечити себе, якщо потрібно розширити прототип? #

Назвіть методи масивів, які пам’ятаєте, і скажіть, для чого вони потрібні. #

Які перебираючі методи масиву знаєте? У чому їхня відмінність? #

Як працюють оператори присвоєння / порівняння / рядкові / арифметичні / бітові тощо? #

Опишіть призначення і принципи роботи з колекціями Map і Set. #

Що означає глибока (deep) та поверхнева (shallow) копія об’єкта? Як зробити кожну з них? #

Функції

Mon, 01 Jan 0001 00:00:00 +0000

Функції #

Яка різниця між декларацією функції (function declaration) та функціональним виразом (function expression)? #

Що таке анонімна функція? #

Розкажіть про стрілкові функції (arrow function). В чому полягають відмінності стрілкових функцій від звичайних? #

Що таке і для чого використовують IIFE (Immediately Invoked Function Expression)? #

Що таке hoisting, як він працює для змінних і функцій? #

Що таке замикання (closure) і які сценарії його використання? #

Як ви розумієте замикання? Що буде виведено в консолі в цьому випадку? #

var f = function() {
  console.log(1);
}

var execute = function(f) {
  setTimeout(f, 1000);
}

execute(f); // что выведет в консоль и почему

f = function() {
  console.log(2);
}

Що таке рекурсія? #

Що означає ключове слово this? #

Що таке втрата контексту, коли відбувається і як їй запобігти? #

Методи функцій bind / call / apply — навіщо і в чому різниця? #

Front-end

Mon, 01 Jan 0001 00:00:00 +0000

Front-end #

Що таке DOM? #

Порівняйте атрибути підключення скрипту async і defer в HTML-документі. #

Яка різниця між властивостями HTML-елементів innerHTML і innerText? #

Опишіть процес спливання (bubbling) подій у DOM. #

Як зупинити спливання (bubbling) події? #

Як зупинити дефолтну обробку події? #

Чому дорівнює this в обробнику подій (event handler)? #

Що таке LocalStorage і SessionStorage? Який максимальний розмір LocalStorage? #

Як отримати висоту блоку? Його положення щодо меж документа? #

Що таке webpack? #

Чим відрізняється dev-збірка від prod? #

Верстка

Mon, 01 Jan 0001 00:00:00 +0000

Верстка #

Що таке блокова модель CSS? #

Які способи центрування блокового контенту по горизонталі та вертикалі знаєте? #

Які підходи у верстці вам відомі (float, flex, grid, etc)? #

Як зробити додаток responsive? #

Які є принципи семантичної верстки? #

Навіщо потрібні префікси для деяких CSS-властивостей (-webkit-, -moz- тощо)? #

Як спростити написання кросбраузерних стилів? #

Практичне завдання: прокоментувати та виправити приклад поганого CSS або HTML. #

Що таке CSS-препроцесори? З якими працювали? Що нового вони приносять у стандартний CSS? #

Angular

Mon, 01 Jan 0001 00:00:00 +0000

Angular #

Перерахуйте основні компоненти фреймворку (модуль, роут, директива тощо). #

У чому різниця між компонентом і директивою? #

Розкажіть про життєвий цикл компонента. #

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

У чому різниця між конструктором і ngOnInit-хуком? #

Як захистити роут від несанкціонованого доступу? Які механізми надає для цього фреймворк? #

Що таке Lazy loading, як і для чого використовується? #

Яке призначення RouterOutlet? #

Як компоненти можуть взаємодіяти один з одним? #

Як створити two-way binding властивість для компонента? #

Які типи форм є у фреймворку? У яких випадках і що краще використовувати? #

Які стани є у форми і як це можна застосувати? #

Навіщо потрібні сервіси? Як з ними працювати? #

Що таке singleton-сервіси? Яке їхнє призначення? Спосіб створення? #

Які є способи оголошення сервісів? #

Для чого потрібні модулі? Скільки їх має бути в проєкті? #

Навіщо потрібні загальні модулі (shared)? #

Які переваги типізації в TypeScript? #

Які можливості TypeScript можна використовувати для типізації (тут мають на увазі інтерфейси, типи, enum тощо)? #

Яка різниця між інтерфейсом і класом? #

У чому різниця між інтерфейсом і абстрактним класом? #

Яка різниця між інтерфейсом і типом? #

Що таке RxJS? Як він використовується у фреймворку? Які компоненти фреймворку тісно пов’язані з ним? #

Чим відрізняються Observable і Promise? #

Для чого потрібні Subjects? Які типи Subjects існують? #

Як зробити кілька послідовних запитів до API за допомогою HTTP-сервісу і RxJS? #

Яка різниця між switchMap, concatMap, mergeMap? #

Як можна конфігурувати Angular-застосунок? #

Навіщо потрібні environment-файли? Коли їх краще не використовувати? #

У чому різниця між «розумним» (smart) і «дурним» (dumb) компонентами? У яких випадках застосовується кожен з них? #

У чому різниця між NgForm, FormGroup і FormControl і як їх застосовують для побудови форм? #

Навіщо потрібен і як працює async pipe? #

Як стежити за розвитком фреймворку? Яких відомих людей, пов’язаних з Angular, знаєте / читаєте? #

React

Mon, 01 Jan 0001 00:00:00 +0000

React #

Чи працювали з класовими компонентами? У чому їхня особливість? #

Які дані краще зберігати в стані компонента, а які передавати через пропси? Наведіть приклад. #

Чи ознайомлені з хуками? У чому їхні переваги? Чи доводилося робити свої і з якою метою? #

Чи ознайомлені з фрагментами та порталами? Навіщо вони потрібні? #

Коли й для чого використовують рефи? #

Які ви знаєте методи життєвого циклу компонента? #

В якому методі життєвого циклу компонента краще робити запити на сервер? Чому? #

В якому методі життєвого циклу компонента краще робити підписку і відписку від лістенера? Чому? Навіщо відписуватися? #

Чи був досвід роботи з контекстом? Коли його варто використовувати? #

У чому особливість PureComponent? #

Чи працював з мемоізованими селекторами (memoized selectors)? Для чого їх використовують і який принцип роботи? #

У чому бачите переваги бібліотеки React? #

Чому бібліотека React швидка? Що таке Virtual DOM і Shadow DOM? #

Навіщо в списках ключі? Чи можна робити ключами індекси елементів масиву? Коли це виправдано? #

В чому основна ідея Redux? #

Робота зі стилями в React. #

React — це бібліотека чи фреймворк? Яка різниця між цими двома поняттями. #

Чи можна використовувати jQuery разом з React? Чому так / ні? #

Що таке codemod? #

Чи доводилося налаштовувати проєкт React з нуля? За допомогою яких інструментів ви це робили? #

Перерахуйте всі бібліотеки, які використовували у зв’язці з React. #

Що найскладніше доводилося реалізовувати за допомогою React? #

Back-end

Mon, 01 Jan 0001 00:00:00 +0000

Back-end #

Що таке REPL? #

Що таке streams в Node.js? #

Що таке middleware? #

Для чого використовують функцію setImmediate? #

Навіщо потрібен app.param() в express? #

Що таке token based authentication? #

Бази даних

Mon, 01 Jan 0001 00:00:00 +0000

Бази даних #

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

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

Спроєктуйте просту схему бази даних для бібліотеки. #

Для чого використовують SQL-оператор HAVING? #

Навіщо використовують SQL-оператор LEFT JOIN? #

Чим відрізняється embed- від reference-зв’язку в MongoDB? #

В одному проєкті програмісти зберігають дані в MongoDB-колекції коментарів, використовуючи такі типи даних (дивіться нижче). Що поганого в цьому рішенні? #

id: ObjectID
text: string
author_id: string
created_at: Date

У проєкті знадобилося внести зміни в структуру таблиць, додати кілька полів і індекси. Як програмісти будуть робити це на продакшені? #

Інструменти

Mon, 01 Jan 0001 00:00:00 +0000

Інструменти #

Щоразу, коли ви робите pull, чомусь трапляється конфлікт в останньому рядку в усіх файлах, які ви редагували. Що відбувається? #

Що робить команда git fetch? #

Які git hygiene підходи ви знаєте? #

Що таке CI/CD? Для чого це потрібно? #

Практичні завдання

Mon, 01 Jan 0001 00:00:00 +0000

Практичні завдання #

Розкажіть, які є способи копіювання простого об’єкта типу obj = {a: 1, b: 2, c: 3} #

Напишіть deep clone для об’єкта. #

Назвіть різні способи, як поміняти місцями значення двох змінних. #

Менеджер попросив у задачі поміняти статуси з «active, inactive» на «active, removed», але в коді фігурують тільки цифри й незрозуміло, який статус відповідає якій цифрі. Як допомогти майбутнім програмістам не лізти в документацію за кодом? Питання ставлять на конкретному прикладі з кодом. #

Необхідно зробити мініпроєкт — список користувачів з формою створення/редагування користувача: #

Для зберігання користувачів використовуйте Firebase (це безкоштовно).
Для стилізації використовуйте Bootstrap.
Мінімальний набір полів користувача:
- ім’я;
- прізвище;
- електронна пошта;
- телефон (у форматі +380 (XX) XXX-XX-XX);
- дата народження;
- буде плюсом — додавання аватара та можливість crop-картинки.
Список користувачів повинен мати можливість фільтрації та пагінацію.
Проєкт має містити README-файл з кроками для запуску.

Загальні

Mon, 01 Jan 0001 00:00:00 +0000

Загальні #

Розкажіть про піраміду тестування. #

Які типи автоматизованих тестів випадала нагода писати? Які бібліотеки при цьому використовували? Яким інструментам віддаєте перевагу і чому? #

Що таке unit-тести? Яке місце в піраміді тестування займають unit-тести? #

Що таке code coverage? Чи обов’язкове 100% покриття тестами коду? #

Як заборонити браузеру віддавати кеш на HTTP-запит? #

Що таке XSS (Cross-Site Scripting)? #

Розкажіть про патерни Observer, Pub / Sub. Яка між ними різниця? Наведіть приклади реалізації цих патернів у відомих фреймворках / бібліотеках / браузерних API. #

З якою метою може бути використаний event listener події fetch self.addEventListener(’fetch’, event => {}) ? #

Що таке Event loop і як він працює? Розкажіть про мікрозадачі та макрозадачі. #

JS Core

Mon, 01 Jan 0001 00:00:00 +0000

JS Core #

Які типи даних бувають у JavaScript? Який буде результат виконання коду? #

let firstObj = { name: 'Hello' };

let secondObj = firstObj;

firstObj = { name: 'Bye' };

console.log(secondObj.name);

Що таке temporal dead zone? #

Як працює boxing / unboxing у JavaScript? #

У чому різниця між оператором in і методом hasOwnProperty? #

Опишіть, за допомогою чого в JS реалізуються такі ООП-парадигми, як інкапсуляція, поліморфізм, абстракція? #

Що таке прототип? Як працює прототипне наслідування в JS? Поясніть роботу коду. #

function Main () {}
Main.prototype = { protected: true };

const obj = new Main();
Main.prototype = { protected: false };

console.log('Object protection: ', obj.protected);

Яка різниця між композицією та наслідуванням? #

Чому не варто використовувати конструктори типу new String? #

Розкажіть про базовий пристрій і механізм роботи Event loop. #

Що таке записи (records) і кортежі (tuples)? Чим вони відрізняються від звичайних об’єктів? #

Які відмінності в поведінці ES5 функції-конструктора та ES2015 класу? #

Як реалізувати патерн «Модуль»? #

Чому typeof null повертає object? #

Що таке приведення (перетворення) типів у JS? #

Що таке явне і неявне приведення (перетворення) типів даних у JS? Як відбувається перетворення типів у таких прикладах: #

{}+[]+{}+[1]
!!"false" == !!"true"
['x'] == 'x'

Що таке Garbage Collector? #

Опишіть основні принципи роботи «збирача сміття» у JS-рушіях (engines). #

Опишіть призначення і принципи роботи з колекціями WeakMap і WeakSet? Чим вони відрізняються від колекцій Map і Set відповідно? #

Чим відрізняється Observable від Promise? #

Що таке Promise? Назвіть порядок виконання then і catch у ланцюжку. #

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); // ??
  });

Розкажіть про послідовне і паралельне виконання асинхронних функцій. У чому різниця між Promise.all () і Promise.allSettled ()? #

Що таке дескриптори властивостей об’єктів? Розкажіть про їхнє практичне застосування. #

Назвіть кілька способів створення незмінного об’єкта в JavaScript. #

Як створити властивість в об’єкта, яку не можна буде змінити? #

Навіщо потрібен конструктор Proxy? Наведіть приклад використання. #

Що таке 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();

Розкажіть про тип даних Symbol і його практичне застосування. Як перевести число з 10-розрядної системи в 16(2,8)-розрядну систему числення? #

Функції

Mon, 01 Jan 0001 00:00:00 +0000

Функції #

Поясніть, що означає currying. Наведіть приклад використання на практиці. #

Наведіть приклад функції з мемоізацією. Коли варто застосовувати цю техніку? #

Що таке чейнінг функцій? Напишіть приклад з використанням цього підходу. #

У чому різниця між function і arrow function? Яким буде результат виконання коду? #

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, [])
}

Front-end

Mon, 01 Jan 0001 00:00:00 +0000

Front-end #

У чому принципова різниця між подіями mouseleave і mouseout? #

У якому порядку обробляються призначені для користувача події в DOM (click, mouseover тощо)? FIFO чи LIFO? #

Що таке Event bubbling та Event capturing? #

Порівняйте методи об’єкта event stopPropagation та stopImmediateProparation. #

Які є підходи оптимізації продуктивності вебсторінки? #

Як реалізований механізм same-origin policy в браузері? На які браузерні API він поширюється? #

Назвіть способи зберігання даних у браузері. Порівняйте їх. #

Web worker’и. Опишіть особливості передачі даних між worker’ами та основним потоком, між розділеними worker’ами. #

Що таке Transferable-об’єкти? #

Розкажіть про способи оптимізації виконання ресурсомістких операцій JS для поліпшення продуктивності рендерингу контенту на сторінці. #

Чому ResizeObserver викликає події зміни розміру до відтворення елемента, а не після? #

Розкажіть, як ви розумієте Web Accessibility? #

Опишіть алгоритм створення функціоналу, що забезпечує читання вмісту .txt-файлу при перетягуванні його з файлової системи у вікно браузера. #

Що таке Virtual DOM? #

Верстка

Mon, 01 Jan 0001 00:00:00 +0000

Верстка #

Поясніть різницю між одиницями вимірювання px, em, rem. #

Для чого потрібні CSS-змінні? Наведіть кілька прикладів використання. #

Що станеться при додаванні наступного селектора? #

* { box-sizing: border-box; }

Як адаптувати сторінку для друку? #

Опишіть особливості кастомізації стилів стандартних елементів форм. #

Що таке progressive рендеринг? Які підходи використовуються? #

Назвіть кілька способів реалізації lazy-loading медіаресурсів на сторінці. #

Назвіть популярні шаблонізатори для фронтенд-розробки. Опишіть особливості їх використання. #

Назвіть популярні CSS-методології та їхні відмінності. #

Як працює CSS Grid? #

Які формати зображень підтримують анімацію? #

Як відстежити прогрес / закінчення CSS @keyframes анімацій або плавних переходів, реалізованих за допомогою transition, у JS? #

Які CSS-властивості можуть бути оброблені безпосередньо через GPU? Що таке композитні шари й чому їх велика кількість може призвести до аварійного завершення роботи браузера на мобільних пристроях? #

Як перевикористати інлайнові SVG-елементи на сторінці? #

Опишіть способи оптимізації SVG-файлів. #

Як реалізувати іконковий шрифт з певного набору SVG-файлів? #

Що таке хибне жирне або хибне курсивне (Faux) накреслення шрифтів? #

Що таке #shadow-root в інспекторі HTML-сторінки? #

Навіщо потрібні Custom Elements? #

Чому видалення зайвих символів пробілів / символів перенесення в HTML не відбивається на кінцевій продуктивності завантаження сторінки? #

Що таке контекст відображення canvas? Які існують типи контексту для рендерингу двовимірної та тривимірної графіки? #

Angular

Mon, 01 Jan 0001 00:00:00 +0000

Angular #

Як працює Dependency injection? Навіщо це потрібно? Розкажіть про використання кастомних інжекторів. #

Що таке zone.js? Для чого Angular використовує зони? З якою метою можна використовувати NgZone-сервіс? #

Як працює Change detection? Як можна оптимізувати компонент за допомогою схем Change detection? Які ще прийоми є для оптимізації рендерингу (пов’язані з Change detection)? #

Як виконати конфігурацію HTTP-сервісу? Навіщо вона потрібна? Обробка HTTP-помилок? #

Які є підходи до організації роботи з даними? #

Як підготувати збірку до деплою? #

Що таке NgRx? Коли варто використовувати? #

У яких випадках краще використовувати Renderer-сервіс замість нативних методів? І навпаки? #

Як працюють і для чого потрібні резолвери? Як отримати дані, завантажені резолверами? #

Як працюють і навіщо потрібні динамічні компоненти? Наведіть приклади їх доцільного використання. #

Яка різниця між @ViewChild і @ContentChild? #

Що робить код і як інакше можна пов’язати клас компонента зі змінною? #

@HostBinding('class.valid') isValid;

Як можна кешувати дані, використовуючи сервіси або RxJS? #

Що таке асинхронна валідація форм? Коли застосовується і як реалізується? #

Навіщо потрібна forRoot-функція модуля? #

Яка різниця між декларуванням і експортом компонента з модуля? #

Чому погано «провайдити» сервіс з shared-модуля в lazy-loaded модуль? (Питання про scope модулів.) #

Що таке ::ng-deep і для чого використовується? #

Які тести можна запустити для Angular-програми? Які інструменти використовують для тестування Angular-програми? #

Як протестувати API-сервіс? #

React

Mon, 01 Jan 0001 00:00:00 +0000

React #

Що таке JSX? Що лежить в його основі? #

Як працює алгоритм Virtual DOM? #

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

У чому різниця між функціональними та класовими компонентами? #

Навіщо і коли потрібно передавати props в super () при використанні класових компонентів? #

Чому потрібно використовувати setState () для оновлення внутрішнього стану компонента? #

У чому полягає принцип «підйому стану»? #

Які бібліотеки менеджменту стану React-застосунку ви знаєте? Навіщо вони? #

Коли варто використовувати Redux? Які є альтернативи? #

Redux vs Mobx? #

Розкажіть про базовий принцип роботи React Hooks. #

У чому різниця між createRef і useRef? #

Коли варто використовувати React refs? Коли не варто? #

Які недоліки бібліотеки React бачите? #

Які патерни використовуєте разом з React? #

Як ставитесь до типізації разом з React? #

Як побудувати хорошу архітектуру React-проєкту? #

Оптимізація React-застосунків? Як виміряти продуктивність програми? #

Чи можна застосунок на React вбудувати в інший застосунок на React? #

Back-end

Mon, 01 Jan 0001 00:00:00 +0000

Back-end #

Чому Node.js однопотоковий, а не багатопотоковий? #

Що таке event driven development? #

Порівняйте fork() та spawn() методи. #

Розкажіть про Node.js фреймворки, які використовували. Яка між ними різниця? #

Опишіть словами код ендпоїнта, який повинен зберегти з клієнта файл розміром 4 гігабайти і покласти його на S3 або інший CDN. #

Що таке мікросервіси, навіщо їх використовують? #

У яких випадках ви б обрали моноліт, а в яких — мікросервіси? #

Як зрозуміти, що застосунок у певний момент працює справно? #

Як зрозуміти, що застосунок за останні три дні працював справно? #

Як відбувається перевірка правильності паролю при використанні bcrypt? #

Що таке JWT? #

Джуніор надіслав код на рев’ю. Що тут не так? Як виправити? #

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"})
})

Бази даних

Mon, 01 Jan 0001 00:00:00 +0000

Бази даних #

Що таке Redis і для чого його використовують? #

Які бази даних використовували? Яка різниця між SQL і NoSQL? #

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

Я як замовник прошу вибрати вас базу даних для нового проєкту. Ваші дії? #

Інструменти та інше

Mon, 01 Jan 0001 00:00:00 +0000

Інструменти та інше #

Для чого потрібен package-lock.json? #

У чому різниця між npm install і npm ci? #

Для чого потрібні бандлери? #

Розкажіть про модульне підключення скриптів. Наведіть приклад використання завантажувальників / бандлерів модулів. #

У чому полягає різниця між git merge і git rebase? #

Що таке staging area в git? #

Опишіть процес code review. Назвіть основні правила, способи вирішення конфліктів і суперечок під час його проведення. #

Практичні завдання

Mon, 01 Jan 0001 00:00:00 +0000

Практичні завдання #

Напишіть функцію Sleep (ms), яка зупиняє виконання async-функції на заданий проміжок часу. #

Реалізуйте один з методів масиву (наприклад, splice). #

Напишіть функцію з RegExp для знаходження всіх HTML-посилань у рядку. #

Реалізуйте функцію, яка виконає callback для всіх елементів певної гілки DOM-дерева. #

Реалізуйте таблицю з віртуальним скролом. #

Реалізуйте функцію перетворення URL query рядка в JSON. #

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]

Реалізуйте функцію / клас для генерації 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>

Якщо є проєкт з обмеженими термінами та некритичною продуктивністю, чим будете керуватися при виборі бібліотек, підходів? Чи все ж будете звертати увагу на продуктивність? Або навпаки: терміни нелімітовані, продуктивність важлива. Ваші дії? #

Загальні

Mon, 01 Jan 0001 00:00:00 +0000

Загальні #

Розкажіть про функціональне програмування. #

Що таке TDD (Test Driven Development) / BDD (Behavior Driven Development)? #

Розкажіть детально про роботу HTTPS. #

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

Є проєкт на старих технологіях, необхідно в нього вносити зміни. Як це зробити найкраще? #

Якщо у кандидата є досвід роботи з кількома фреймворками: який будете використовувати для наступного проєкту? Які фактори будуть впливати на вибір? #

Що таке V8 Engine? #

JS Core

Mon, 01 Jan 0001 00:00:00 +0000

JS Core #

Реалізація патерну Class Free OOP (HTTPs://observablehq.com/@bratter/class-free-oop). #

Патерн async disposer (HTTPs://advancedweb.hu/what-is-the-async-disposer-pattern-in-javascript). #

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

Front-end

Mon, 01 Jan 0001 00:00:00 +0000

Front-end #

Як браузер визначає, чи ми можемо спілкуватися між вкладками? #

Що таке Content Security Policy? #

Як уникнути завантаження кешованих файлів скриптів і стилів? #

Що таке requestAnimationFrame? #

Розкажіть про мікросервісну архітектуру Front-end App. #

Що таке Shadow DOM? #

Порівняйте nextElementSibling та nextSibling. #

Які знаєте метрики вебсайту? #

Angular

Mon, 01 Jan 0001 00:00:00 +0000

Angular #

Як проводиться конфігурація NgZone-модуля? Коли це необхідно? #

Що дратує у фреймворку? Що б ви змінили? #

Якби ви вирішували, що додати в наступному релізі фреймворку, яка б фіча це була? #

Чи писали кастомні декоратори? Якщо так, то навіщо? #

Зробіть рев’ю коду та дати зауваження щодо архітектури. #

Розкажіть, як би ви робили такі фічі. Опишіть архітектуру фічі в застосунку. #

Back-end

Mon, 01 Jan 0001 00:00:00 +0000

Back-end #

Порівняйте Common.js з AMD Modules та ES6 Imports. #

Який фреймворк вибрали б для бекенду, чому? #

Опишіть своїми словами, як працює OAuth v2. #

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

Є проєкт з performance issues, як їх виявити, усунути та запобігти в майбутньому? #

Бази даних

Mon, 01 Jan 0001 00:00:00 +0000

Бази даних #

Які альтернативні види баз даних використовуєте? #

Що таке RDS і чому він іноді не підходить? #

Що таке SQL Injections і як їх уникнути? #

Чому для запитів у БД треба використовувати плейсхолдери? #

Як спроєктувати кластер на MongoDB? #

Для чого використовують MongoDB Aggregation framework? #

Розкажіть про GraphQL. #

Інструменти

Mon, 01 Jan 0001 00:00:00 +0000

Інструменти #

Чи можете описати суть методології git flow двома словами? #

Що означає вимога робити squash commits під час rebase? #

Яка ваша думка про альтернативні системи контролю версій (Version Control System)? #

Які конвенції знаєте і використовуєте для git? #

Розкажіть про свій досвід використання / впровадження СI/CD. #

Потрібно налаштувати деплой проєкту на кілька середовищ. Розкажіть, як би ви побудували процес? Які інструменти використали б? #

Практичні завдання

Mon, 01 Jan 0001 00:00:00 +0000

Практичні завдання #

Реалізуйте асинхронний метод filter для Array (повинні працювати await). #

Реалізуйте функцію reduce за допомогою рекурсії. #

Як можна було б зробити toggle-компонент, як в iPhone, без використання JS? #