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 поднимаются, но в temporal dead zone.
•
Функции поднимаются полностью.
•
Только объявления, не присваивания.
Как работает == 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.
Что такое template literals?
•
Строки в обратных кавычках: `text`.
•
Интерполяция: `Hello ${name}`.
•
Многострочные строки.
•
Tagged templates: tag`text`.
•
Вложенные выражения: `${a + b}`.
Как объявить функцию?
•
Function declaration: function name() {}.
•
Function expression: const fn = function() {}.
•
Arrow function: const fn = () => {}.
•
Declaration hoisting, expression нет.
•
IIFE: (function() {})().
Как работают стрелочные функции?
•
Короткий синтаксис: (x) => x *
2.
•
Без {} — неявный return.
•
Не имеют своего this.
•
Не имеют arguments.
•
Нельзя использовать как конструктор.
Что такое scope (область видимости)?
•
Global scope — доступен везде.
•
Function scope — внутри функции.
•
Block scope — внутри {} (let, const).
•
Lexical scope — определяется при написании.
•
Scope chain для поиска переменных.
Что такое замыкание (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 таймера.
•
Минимальная задержка ~4ms.
Что такое 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?
•
Proxy между браузером и сетью.
•
Офлайн-функциональность.
•
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().
•
Не доступны через экземпляр.
•
Для утилитных функций.
Что такое getter и setter?
•
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 — массив [key, value].
•
Только enumerable own properties.
•
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.
Как работать с history 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 публично.
Что такое transpilation?
•
Преобразование нового JS в старый.
•
Babel — основной транспилятор.
•
Поддержка старых браузеров.
•
TypeScript тоже транспилирует.
•
Polyfills для новых API.
Что такое polyfill?
•
Код, добавляющий отсутствующую функциональность.
•
core-js — популярная библиотека.
•
Для старых браузеров.
•
Promise, fetch polyfills.
•
@babel/polyfill (deprecated) → 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?
•
Неосвобождённая память.
•
Глобальные переменные.
•
Забытые таймеры и listeners.
•
Замыкания с 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 grammar.
•
Symbols as WeakMap keys.
•
Array.fromAsync().