FAQ Портал
Категорії
Пошук
Про нас
Контакти
UK
RU
EN
Головна
Технології
Програмування
JavaScript
JavaScript
100 питань
Чим відрізняються var, let і const?
•
var — функціональна область видимості, hoisting.
•
let — блочна область, не можна переоголосити.
•
const — блочна область, не можна переприсвоїти.
•
Об’єкти const можна мутувати.
•
Використовуйте const за замовчуванням, let при необхідності.
Які типи даних у JavaScript?
•
Примітиви: string, number, boolean, null, undefined, symbol, bigint.
•
Об’єкти: object, array, function.
•
typeof перевіряє тип.
•
null — це object (історична помилка).
•
NaN — це number.
Що таке hoisting?
•
Підняття оголошень вгору області видимості.
•
var піднімається з undefined.
•
let/const піднімаються, але в тимчасовій мертвій зоні.
•
Функції піднімаються цілком.
•
Лише оголошення, не присвоювання.
Як працює == vs ===?
•
== порівнює з приведенням типів.
•
'5' == 5 поверне true.
•
=== — строгое порівняння без приведення.
•
'5' === 5 поверне false.
•
Завжди використовуйте ===.
Що таке truthy і falsy значення?
•
Falsy: false, 0, '', null, undefined, NaN.
•
Все інше — truthy.
•
[] і {} — truthy!
•
Використовується в умовах if.
•
Boolean(value) для явного перетворення.
Як працюють логічні оператори?
•
&& — повертає перший falsy або останній.
•
|| — повертає перший truthy або останній.
•
?? — nullish coalescing (тільки null/undefined).
•
! — заперечення.
•
Short-circuit evaluation.
Що таке шаблонні літерали?
•
Рядки у зворотних апострофах: `text`.
•
Інтерполяція: `Hello ${name}`.
•
Багаторядкові рядки.
•
Tagged templates: tag`text`.
•
Вкладені вирази: `${a + b}`.
Як оголосити функцію?
•
Оголошення функції: function name() {}.
•
Вираз функції: const fn = function() {}.
•
Стрілкова функція: const fn = () => {}.
•
Підняття оголошень, вирази ні.
•
IIFE: (function() {})().
Як працюють стрілкові функції?
•
Скорочений синтаксис: (x) => x *
2.
•
Без {} — неявне return.
•
Не мають свого this.
•
Не мають arguments.
•
Не можна використовувати як конструктор.
Що таке scope (область видимості)?
•
Глобальна область — доступна скрізь.
•
Область функції — всередині функції.
•
Блочна область — всередині {} (let, const).
•
Лексична область — визначається при написанні.
•
Ланцюг областей для пошуку змінних.
Що таке замикання (closure)?
•
Функція запам’ятовує лексичне оточення.
•
Доступ до зовнішніх змінних після виходу з функції.
•
Використовується для приватних змінних.
•
Фабрики функцій.
•
Каррінг.
Як працює this?
•
У методі об’єкта — сам об’єкт.
•
У звичайній функції — window/undefined.
•
У стрілковій — з зовнішнього контексту.
•
З new — новий об’єкт.
•
call/apply/bind — явне вказання.
Що таке call, apply, bind?
•
call — виклик з this і аргументами: fn.call(obj, a, b).
•
apply — аргументи масивом: fn.apply(obj, [a, b]).
•
bind — повертає нову функцію з прив’язаним this.
•
bind не викликає функцію одразу.
•
Корисно для запозичення методів.
Як працювати з масивами?
•
Створення: [], new Array(), Array.from().
•
push/pop — кінець, shift/unshift — початок.
•
slice — копія частини, splice — зміна.
•
concat, spread для об’єднання.
•
includes, indexOf для пошуку.
Які методи масивів для ітерації?
•
forEach — без повернення.
•
map — перетворення.
•
filter — фільтрація.
•
reduce — скорочення.
•
find/findIndex — пошук.
•
some/every — перевірка.
Як працює reduce?
•
arr.reduce((acc, curr) => acc + curr, 0).
•
Другий аргумент — початкове значення.
•
Повертає одне значення.
•
Можна створити об’єкт, масив.
•
Потужний, але складний для читання.
Як працювати з об'єктами?
•
Створення: {}, new Object().
•
Доступ: obj.key, obj['key'].
•
Object.keys/values/entries.
•
Spread: {...obj1, ...obj2}.
•
Object.assign для копіювання.
Що таке деструктуризація?
•
Масиви: const [a, b] = [1, 2].
•
Об'єкти: const {name, age} = user.
•
Перейменування: const {name: n} = user.
•
Значення за замовчуванням: const {x = 0} = obj.
•
Вкладена: const {a: {b}} = obj.
Що таке spread і rest?
•
Spread (...) розгортає.
•
[...arr1, ...arr2] — об'єднання.
•
{...obj, newKey: val}.
•
Rest збирає: function f(...args).
•
В деструктуризації: const [first, ...rest] = arr.
Як глибоко скопіювати об'єкт?
•
structuredClone(obj) — сучасний.
•
JSON.parse(JSON.stringify(obj)).
•
Lodash: _.cloneDeep().
•
Рекурсивна функція.
•
Spread — лише поверхнева копія.
Що таке Map і Set?
•
Map — ключ будь-якого типу.
•
new Map(), set(), get(), has().
•
Set — унікальні значення.
•
add(), has(), delete().
•
WeakMap, WeakSet — слабкі посилання.
Що таке Symbol?
•
Унікальний примітивний тип.
•
Symbol('desc') !== Symbol('desc').
•
Для унікальних ключів об'єктів.
•
Symbol.for() — глобальний реєстр.
•
Well-known: Symbol.iterator.
Як працювати зі рядками?
•
Методи: length, charAt, slice, substring.
•
split, join, trim.
•
toLowerCase, toUpperCase.
•
includes, startsWith, endsWith.
•
replace, replaceAll.
•
padStart, padEnd.
Що таке регулярні вирази?
•
/pattern/flags або new RegExp().
•
test() — перевірка.
•
match(), matchAll() — пошук.
•
replace() — заміна.
•
Флаги: g, i, m, s, u.
Як працювати з числами?
•
parseInt, parseFloat.
•
Number.isNaN(), Number.isFinite().
•
toFixed(), toPrecision().
•
Math: round, floor, ceil, random.
•
BigInt для великих чисел.
Що таке асинхронність у JS?
•
JavaScript однопоточний.
•
Асинхронні операції не блокують.
•
Callbacks, Promises, async/await.
•
Event Loop обробляє чергу.
•
Web APIs виконують асинхронні задачі.
Що таке Event Loop?
•
Механізм асинхронності.
•
Call Stack — виконання коду.
•
Task Queue — callbacks.
•
Microtask Queue — promises.
•
Мікрозадачі пріоритетніші.
Що таке callbacks?
•
Функція, передана як аргумент.
•
Викликається після завершення операції.
•
Callback hell — вкладені callbacks.
•
Перший аргумент часто error.
•
Заміщені на Promises.
Що таке Promise?
•
Об’єкт для асинхронних операцій.
•
Стан: pending, fulfilled, rejected.
•
new Promise((resolve, reject) => {}).
•
then(), catch(), finally().
•
Ланцюжки — chainable.
Як створити Promise?
•
new Promise((resolve, reject) => { ... }).
•
resolve(value) при успіху.
•
reject(error) при помилці.
•
Promise.resolve(value) — одразу resolved.
•
Promise.reject(error) — одразу rejected.
Як обробляти помилки Promise?
•
.catch(error => {}).
•
Другий аргумент .then(null, onRejected).
•
catch ловить всі помилки в ланцюжку.
•
Необроблений rejection — unhandledrejection.
•
finally() виконується завжди.
Що таке Promise.all?
•
Promise.all([p1, p2, p3]).
•
Чекає всі promises.
•
Повертає масив результатів.
•
Відхиляється при першій помилці.
•
Паралельне виконання.
Що таке Promise.race, allSettled, any?
•
race — перший завершився (успіх або помилка).
•
allSettled — чекає всі, повертає статуси.
•
any — перший успішний.
•
allSettled не відхиляється.
•
any відхиляється, якщо всі rejected.
Як працює async/await?
•
async function повертає Promise.
•
await призупиняє виконання.
•
Лише всередині async функцій.
•
try/catch для помилок.
•
Синтаксичний цукор над Promises.
Як обробляти помилки в async/await?
•
try { await ... } catch (e) { }.
•
Або .catch() на виклику.
•
finally для cleanup.
•
Можна комбінувати.
•
Необроблені — unhandledrejection.
Як виконати async паралельно?
•
await Promise.all([fn1(), fn2()]).
•
Не await кожен окремо.
•
Результати у масиві.
•
Promise.allSettled, якщо потрібні всі результати.
•
Деструктуризація: const [a, b] = await Promise.all([...]).
Що таке setTimeout і setInterval?
•
setTimeout(fn, ms) — один раз.
•
setInterval(fn, ms) — повторюваний.
•
clearTimeout, clearInterval для скасування.
•
Повертають ID таймера.
•
Мінімальна затримка ~4мс.
Що таке requestAnimationFrame?
•
Для анімацій, синхронізований з екраном.
•
~60fps зазвичай.
•
cancelAnimationFrame для скасування.
•
Ефективніше за setInterval для анімацій.
•
Припиняється у фонових вкладках.
Що таке fetch API?
•
Сучасний спосіб HTTP-запитів.
•
fetch(url, options).
•
Повертає Promise.
•
response.json(), .text(), .blob().
•
Не відхиляється при 404, 500.
Як зробити POST-запит fetch?
•
fetch(url, { method: 'POST', headers: {...}, body: JSON.stringify(data) }).
•
Content-Type: application/json.
•
FormData для файлів.
•
await response.json().
•
Перевіряйте response.ok.
Як скасувати fetch-запит?
•
AbortController.
•
const controller = new AbortController().
•
fetch(url, { signal: controller.signal }).
•
controller.abort() для скасування.
•
Ловіть AbortError.
Що таке Web Workers?
•
Виконання JS у окремому потоці.
•
new Worker('worker.js').
•
postMessage для спілкування.
•
onmessage для отримання.
•
Немає доступу до DOM.
Що таке Service Workers?
•
Проксі між браузером і мережею.
•
Офлайн-функціональність.
•
Push-сповіщення.
•
Кешування ресурсів.
•
Працюють лише на HTTPS.
Що таке WebSocket?
•
Двонапрямний зв’язок із сервером.
•
new WebSocket('ws://...').
•
onopen, onmessage, onclose, onerror.
•
send() для відправки.
•
Постійне з’єднання.
Що таке queueMicrotask?
•
Додає мікрозадачу.
•
Виконується після поточного коду.
•
Вищий пріоритет за setTimeout.
•
queueMicrotask(() => {}).
•
Як Promise.resolve().then().
Що таке прототипне наслідування?
•
Кожен об’єкт має [[Prototype]].
•
Пошук властивостей по ланцюгу.
•
Object.getPrototypeOf().
•
Object.create() для створення.
•
__proto__ — геттер/сеттер.
Як працюють класи ES6?
•
class Name { constructor() {} }.
•
Синтаксичний цукор над прототипами.
•
extends для наслідування.
•
super() викликає батька.
•
Методи в prototype.
Що таке static у класах?
•
static method() {} — статичний метод.
•
static property = value.
•
Виклик: ClassName.method().
•
Не доступні через екземпляр.
•
Для утилітних функцій.
Що таке геттер і сеттер?
•
get propertyName() { return this._value; }.
•
set propertyName(val) { this._value = val; }.
•
Викликаються як властивості, не методи.
•
Для валідації, обчислюваних властивостей.
•
У літералах об'єктів теж.
Що таке приватні поля класів?
•
#privateField — приватна властивість.
•
#privateMethod() {} — приватний метод.
•
Доступні лише всередині класу.
•
Помилка при доступі ззовні.
•
ES2022+.
Як працює наслідування класів?
•
class Child extends Parent {}.
•
super() у constructor обов'язковий першим.
•
super.method() викликає батьківський.
•
Переозначення методів.
•
instanceof для перевірки.
Що таке new.target?
•
Вказує на конструктор, викликаний з new.
•
undefined, якщо без new.
•
Для абстрактних класів.
•
У стрілочних — з зовнішнього контексту.
•
ES6+.
Що таке instanceof?
•
obj instanceof Class.
•
Перевіряє ланцюжок прототипів.
•
Працює з класами і функціями-конструкторами.
•
Symbol.hasInstance для кастомізації.
•
typeof для примітивів.
Що таке міксины?
•
Додавання методів у клас.
•
Object.assign(Class.prototype, mixin).
•
Або через extends з функцією.
•
Композиція поведінки.
•
Альтернатива множинному наслідуванню.
Що таке Object.create()?
•
Створює об'єкт із вказаним прототипом.
•
Object.create(proto, descriptors).
•
Object.create(null) — без прототипу.
•
Для чистого наслідування.
•
Descriptors для властивостей.
Що таке Object.defineProperty?
•
Визначає властивість із дескриптором.
•
value, writable, enumerable, configurable.
•
get, set для accessor.
•
За замовчуванням false для флагів.
•
Object.getOwnPropertyDescriptor.
Що таке Proxy?
•
Обгортка для перехоплення операцій.
•
new Proxy(target, handler).
•
Traps: get, set, apply, construct.
•
Для реактивності, валідації.
•
Reflect для виклику оригіналу.
Що таке Reflect?
•
Методи для операцій над об'єктами.
•
Reflect.get, set, has, deleteProperty.
•
Повертає boolean замість виключення.
•
Працює з Proxy.
•
Більш явний API.
Як зробити об'єкт незмінним?
•
Object.freeze() — повне замороження.
•
Object.seal() — заборона додавання/видалення.
•
Object.preventExtensions() — заборона додавання.
•
Перевірка: isFrozen, isSealed.
•
Поверхневе замороження.
Що таке Object.entries/keys/values?
•
keys — масив ключів.
•
values — масив значень.
•
entries — масив [ключ, значення].
•
Тільки перераховувані власні властивості.
•
Object.fromEntries для зворотнього.
Як вибрати елементи DOM?
•
getElementById — за id.
•
querySelector — CSS селектор.
•
querySelectorAll — всі відповідності.
•
getElementsByClassName, getElementsByTagName.
•
querySelector повертає перший.
Як змінити вміст елемента?
•
textContent — тільки текст.
•
innerHTML — HTML розмітка.
•
innerText — видимий текст.
•
innerHTML небезпечний для XSS.
•
Використовуйте textContent для безпеки.
Як працювати з атрибутами?
•
getAttribute(), setAttribute().
•
removeAttribute().
•
hasAttribute().
•
dataset для data-* атрибутів.
•
el.dataset.userId для data-user-id.
Як працювати з класами елемента?
•
classList.add(), remove(), toggle().
•
classList.contains() — перевірка.
•
classList.replace(old, new).
•
className — рядок усіх класів.
•
classList — DOMTokenList.
Як змінити стилі елемента?
•
el.style.color = 'red'.
•
el.style.backgroundColor (camelCase).
•
el.style.cssText = 'color: red;'.
•
getComputedStyle(el) — обчислені.
•
CSS custom properties: setProperty.
Як створити та додати елемент?
•
document.createElement('div').
•
parent.appendChild(el).
•
parent.insertBefore(el, ref).
•
el.append(), prepend().
•
insertAdjacentHTML, insertAdjacentElement.
Як видалити елемент?
•
el.remove() — сучасний.
•
parent.removeChild(el).
•
el.replaceWith(newEl).
•
innerHTML = '' — видалити вміст.
•
Видалені елементи можна вставити назад.
Що таке event bubbling і capturing?
•
Bubbling — подія піднімається від цілі до батьків.
•
Capturing — від window до цілі.
•
addEventListener(type, fn, true) для capturing.
•
event.stopPropagation() зупиняє.
•
За замовчуванням bubbling.
Що таке event delegation?
•
Один обробник на батькові.
•
event.target — фактичний елемент.
•
event.currentTarget — елемент з обробником.
•
Ефективно для динамічних елементів.
•
matches() або closest() для фільтрації.
Як запобігти дії за замовчуванням?
•
event.preventDefault().
•
Скасовує стандартну поведінку.
•
Наприклад, відправка форми, перехід по посиланню.
•
return false в старому стилі.
•
event.defaultPrevented — перевірка.
Що таке DOMContentLoaded і load?
•
DOMContentLoaded — DOM готовий.
•
load — всі ресурси завантажені.
•
DOMContentLoaded швидше.
•
defer скрипти після DOMContentLoaded.
•
document.readyState для перевірки.
Як працювати з формами в JS?
•
form.elements — колекція елементів.
•
input.value — значення.
•
form.submit() — програмна відправка.
•
form.reset() — скидання.
•
FormData для збору даних.
Що таке FormData?
•
new FormData(formElement).
•
append(), get(), delete().
•
entries() для ітерації.
•
Відправка з fetch.
•
Для файлів і даних форми.
Як працювати з localStorage?
•
localStorage.setItem(key, value).
•
getItem(key).
•
removeItem(key).
•
clear() — очистити все.
•
Тільки рядки — JSON.stringify/parse.
Чим відрізняються localStorage і sessionStorage?
•
localStorage — постійне збереження.
•
sessionStorage — до закриття вкладки.
•
Обидва ~5-10 МБ.
•
Синхронні операції.
•
Однаковий API.
Що таке cookie в JavaScript?
•
document.cookie — рядок.
•
Встановлення: document.cookie = 'name=value'.
•
expires, max-age, path, domain.
•
HttpOnly недоступні з JS.
•
4 КБ ліміт на cookie.
Як працювати з API історії?
•
history.pushState(state, title, url).
•
history.replaceState().
•
history.back(), forward(), go().
•
подія popstate.
•
Для SPA навігації.
Що таке Intersection Observer?
•
Спостереження за перетином елементів.
•
new IntersectionObserver(callback, options).
•
observer.observe(element).
•
Lazy loading зображень.
•
Безкінечний прокрут.
Що таке Mutation Observer?
•
Спостереження за змінами DOM.
•
new MutationObserver(callback).
•
observer.observe(target, config).
•
childList, attributes, characterData.
•
subtree для вкладених.
Що таке Resize Observer?
•
Спостереження за розміром елемента.
•
new ResizeObserver(callback).
•
observer.observe(element).
•
entry.contentRect — розміри.
•
Ефективніше за window resize.
Що таке ES модулі?
•
export const x = 1; export default fn.
•
import {x} from './module'.
•
import * as M from './module'.
•
Статичні імпорти.
•
type='module' в HTML.
Що таке динамічний імпорт?
•
import('./module').then(module => {}).
•
await import('./module').
•
Для code splitting.
•
Лінива завантаження.
•
Повертає Promise.
Чим відрізняються CommonJS і ES модулі?
•
CommonJS: require(), module.exports.
•
ES: import/export.
•
CommonJS — синхронний, Node.
•
ES — асинхронний, стандарт.
•
Node підтримує обидва.
Що таке bundler?
•
Об’єднує модулі у файли.
•
Webpack, Vite, Rollup, esbuild.
•
Tree shaking — видалення не використовуваного.
•
Code splitting.
•
Мінімізація.
Що таке tree shaking?
•
Видалення не використовуваного коду.
•
Працює з ES модулями.
•
Статичний аналіз імпортів.
•
sideEffects у package.json.
•
Зменшує розмір bundle.
Що таке source maps?
•
Зв’язок мінімізованого і вихідного коду.
•
Для відлагодження в DevTools.
•
.map файли.
•
devtool у Webpack.
•
Не включайте у production публічно.
Що таке транспіляція?
•
Перетворення нового JS у старий.
•
Babel — основний транспілятор.
•
Підтримка старих браузерів.
•
TypeScript також транспілює.
•
Polyfills для нових API.
Що таке polyfill?
•
Код, що додає відсутню функціональність.
•
core-js — популярна бібліотека.
•
Для старих браузерів.
•
Polyfills для Promise, fetch.
•
@babel/polyfill (застарілий) → core-js.
Що таке npm і package.json?
•
npm — менеджер пакетів Node.
•
package.json — конфігурація проекту.
•
dependencies, devDependencies.
•
scripts для команд.
•
package-lock.json фіксує версії.
Що таке yarn і pnpm?
•
yarn — альтернатива npm від Facebook.
•
pnpm — ефективне зберігання.
•
yarn.lock, pnpm-lock.yaml.
•
Швидше і надійніше npm.
•
Сумісні з npm registry.
Що таке memory leaks?
•
Неосвобожджена пам’ять.
•
Глобальні змінні.
•
Забуті таймери і слухачі.
•
Замикання з DOM-елементами.
•
Chrome DevTools Memory для аналізу.
Що таке garbage collection?
•
Автоматичне звільнення пам’яті.
•
Алгоритм mark-and-sweep.
•
Недосяжні об’єкти видаляються.
•
WeakMap/WeakSet для слабких посилань.
•
Не можна викликати вручну.
Що таке debounce і throttle?
•
debounce — виконання після паузи.
•
throttle — не частіше ніж N мс.
•
debounce для пошуку, resize.
•
throttle для scroll, mousemove.
•
lodash.debounce, lodash.throttle.
Що таке currying?
•
Перетворення f(a, b) у f(a)(b).
•
Часткове застосування аргументів.
•
const add = a => b => a + b.
•
Композиція функцій.
•
Функціональне програмування.
Що таке immutability?
•
Об’єкт не змінюється після створення.
•
Новий об’єкт при змінах.
•
{...obj, key: newVal}.
•
Immer для зручності.
•
Важливо для React, Redux.
Що таке Web Components?
•
Custom Elements — свої теги.
•
Shadow DOM — ізоляція стилів.
•
HTML Templates — шаблони.
•
customElements.define().
•
Працюють без фреймворків.
Що таке Canvas API?
•
Малювання 2D графіки.
•
canvas.getContext('2d').
•
fillRect, strokeRect, arc.
•
drawImage для зображень.
•
Анімації з requestAnimationFrame.
Що таке WebGL?
•
3D графіка в браузері.
•
canvas.getContext('webgl').
•
Шейдери на GLSL.
•
Three.js спрощує роботу.
•
GPU прискорення.
Що таке Web Audio API?
•
Обробка аудіо в браузері.
•
AudioContext — контекст.
•
Oscillator, Gain, Filter nodes.
•
Аналіз частот.
•
Просторовий звук.
Які нові можливості ES2023+?
•
Array.prototype.toSorted, toReversed.
•
Array.prototype.with().
•
Граматика Hashbang.
•
Symbols як ключі WeakMap.
•
Array.fromAsync().
JavaScript — Програмування — Технології — FAQ Портал