Питання на співбесіді з JavaScript з відповідями

Приклади запитань

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

JavaScript · Junior

1. Скільки типів даних у JavaScript за специфікацією?

   Правильна відповідь: 8: сім примітивів і object

   Примітиви: number, bigint, string, boolean, null, undefined, symbol. Усе інше - object, включно з масивами, функціями, датами. Функції - це об'єкти, хоча typeof для них повертає 'function'.

2. Що поверне typeof null?

   Правильна відповідь: 'object'

   Це історична помилка першої реалізації мови, яку залишили заради сумісності. null - окремий примітив. Перевіряти його треба строгим порівнянням: value === null.

3. Що поверне typeof NaN?

   Правильна відповідь: 'number'

   NaN (Not-a-Number) - спеціальне значення числового типу, результат некоректної математичної операції, наприклад 0 / 0 або Number('abc'). Перевірка - Number.isNaN(x).

4. Чим let відрізняється від var?

   Правильна відповідь: let обмежений блоком {}, var - функцією

   Змінна var, оголошена всередині if чи for, видима в усій функції. Крім того, var піднімається зі значенням undefined і на верхньому рівні стає властивістю window, а let і const до оголошення перебувають у «тимчасовій мертвій зоні».

JavaScript · Middle

1. Чим call, apply і bind відрізняються один від одного?

   Правильна відповідь: call/apply викликають одразу, bind повертає нову функцію

   fn.call(ctx, a, b), fn.apply(ctx, [a, b]) - негайний виклик із заданим this. fn.bind(ctx, a) повертає функцію з назавжди прив'язаним контекстом і частково застосованими аргументами. На стрілкові функції всі три не впливають: у них немає власного this.

2. Як рушій шукає властивість, якої немає в самого об'єкта?

   Правильна відповідь: Піднімається ланцюжком прототипів, доки не знайде властивість або не дійде до null

   Кожен об'єкт має приховане посилання [[Prototype]] (Object.getPrototypeOf). Так масиви отримують map з Array.prototype, а всі об'єкти - toString з Object.prototype. Пошук областями видимості стосується змінних, а не властивостей.

3. Що робить Object.create(proto)?

   Правильна відповідь: Створює новий порожній об'єкт, прототипом якого буде proto

   Властивості proto не копіюються - вони доступні через ланцюжок прототипів. Object.create(null) створює об'єкт узагалі без прототипу: зручний «чистий» словник без успадкованих ключів на кшталт toString.

4. Чим насправді є класи в JavaScript?

   Правильна відповідь: Синтаксисом поверх прототипного успадкування з низкою додаткових перевірок

   Методи класу потрапляють у Class.prototype, extends вибудовує ланцюжок прототипів. Але є відмінності від функцій-конструкторів: клас не можна викликати без new, тіло виконується в строгому режимі, методи неперелічувані, є приватні поля #x і static.

JavaScript · Senior

1. Як event loop обробляє задачі в браузері?

   Правильна відповідь: Одна макрозадача, потім уся черга мікрозадач, потім можливий рендер

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

2. Як глобально відстежити необроблені відхилення промісів у браузері?

   Правильна відповідь: Подія unhandledrejection на window

   window.addEventListener('unhandledrejection', e => report(e.reason)) - стандартний спосіб надсилати такі помилки в моніторинг. Синхронні необроблені помилки ловить подія error на window. Методу Promise.onError немає.

3. Що робить for await...of?

   Правильна відповідь: Перебирає асинхронний ітерований об'єкт, чекаючи на кожне значення

   Працює з об'єктами, що мають Symbol.asyncIterator: async-генераторами, потоками (ReadableStream), пагінацією API. Ітерації йдуть послідовно. Для паралельної обробки масиву промісів використовують Promise.all.

4. Для чого використовують Proxy?

   Правильна відповідь: Щоб перехоплювати операції над об'єктом: читання, запис, видалення

   Пастки get, set, has, deleteProperty та ін. дають змогу реалізувати реактивність (так працює Vue 3), валідацію, логування, значення за замовчуванням. Reflect надає стандартну поведінку операцій для використання всередині пасток.

Збірні тести з цією темою

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