Перейти к основному содержимому

200 вопросов по JavaScript

В РАЗРАБОТКЕЛАБОРАТОРИЯНЕ ОБЯЗАТЕЛЬНО

200 вопросов по JavaScript​

Основы JavaScript​

Вопрос​

Что такое JavaScript?

Ответ​

JavaScript — это высокоуровневый язык программирования, предназначенный для создания интерактивного поведения на веб-страницах. Он поддерживает объектно-ориентированное, функциональное и императивное программирование.

Вопрос​

Какие среды выполнения поддерживают JavaScript?

Ответ​

JavaScript выполняется в браузерах через движки, такие как V8 (Chrome, Edge), SpiderMonkey (Firefox), JavaScriptCore (Safari). Также он работает на сервере через Node.js, в мобильных приложениях через React Native и в десктопных приложениях через Electron.

Вопрос​

Что такое ECMAScript?

Ответ​

ECMAScript — это стандарт, определяющий синтаксис, семантику и библиотеки языка JavaScript. Реализации JavaScript, такие как в браузерах или Node.js, соответствуют определённой версии стандарта ECMAScript (например, ES6, ES2020).

Вопрос​

В чём разница между let, const и var?

Ответ​

var объявляет переменную с функциональной областью видимости и поднимается (hoisting) со значением undefined.
let объявляет переменную с блочной областью видимости и не инициализируется до присваивания.
const объявляет константу с блочной областью видимости; её значение нельзя переназначить после инициализации.

Вопрос​

Что такое hoisting?

Ответ​

Hoisting — это поведение JavaScript, при котором объявления переменных и функций перемещаются в начало своей области видимости во время компиляции. Объявления var и функций становятся доступными до их фактической строки кода.

Вопрос​

Можно ли использовать переменную до её объявления с помощью let?

Ответ​

Нет. Переменные, объявленные с помощью let, находятся во временной мёртвой зоне (Temporal Dead Zone) с начала блока до строки объявления. Попытка доступа до объявления вызывает ошибку ReferenceError.

Вопрос​

Что выведет следующий код?

console.log(x);
var x = 5;

Ответ​

Код выведет undefined. Объявление переменной x поднимается, но присваивание остаётся на месте. На момент вызова console.log переменная существует, но ещё не инициализирована.

Вопрос​

Что выведет следующий код?

console.log(y);
let y = 5;

Ответ​

Код вызовет ошибку ReferenceError: Cannot access 'y' before initialization. Переменная y находится во временной мёртвой зоне до строки объявления.

Типы данных и операторы​

Вопрос​

Какие примитивные типы данных есть в JavaScript?

Ответ​

Примитивные типы: number, string, boolean, null, undefined, symbol, bigint.

Вопрос​

Является ли null объектом?

Ответ​

Тип null возвращается оператором typeof как "object" из-за исторической ошибки в языке. Однако null является примитивным значением, обозначающим отсутствие значения.

Вопрос​

Что такое NaN?

Ответ​

NaN означает «Not-a-Number». Это специальное числовое значение, которое возникает при недопустимых математических операциях, например, 0 / 0 или Math.sqrt(-1).

Вопрос​

Как проверить, является ли значение NaN?

Ответ​

Используется функция Number.isNaN(value). Она возвращает true, только если значение действительно NaN. Глобальная функция isNaN() менее надёжна, так как приводит аргумент к числу перед проверкой.

Вопрос​

Чем отличаются == и ===?

Ответ​

Оператор == выполняет сравнение с приведением типов. Оператор === сравнивает значения без приведения типов: он возвращает true, только если типы и значения совпадают.

Вопрос​

Что выведет выражение [] == ![]?

Ответ​

Выражение выведет true.
Пояснение:

  • ![] преобразуется в false (массив — truthy, инверсия даёт false).
  • [] == false → "" == 0 → 0 == 0 → true.

Вопрос​

Что такое falsy-значения в JavaScript?

Ответ​

Falsy-значения: false, 0, -0, 0n, "", null, undefined, NaN. Все остальные значения считаются truthy.

Вопрос​

Что делает оператор typeof?

Ответ​

Оператор typeof возвращает строку, указывающую тип операнда. Например:

  • typeof 42 → "number"
  • typeof "hello" → "string"
  • typeof undefined → "undefined"
  • typeof null → "object" (известная особенность)

Вопрос​

Как определить, является ли значение массивом?

Ответ​

Используется метод Array.isArray(value). Он возвращает true, если значение является массивом.

Вопрос​

Что такое Symbol?

Ответ​

Symbol — это уникальный и неизменяемый примитивный тип, создаваемый вызовом Symbol(). Каждый символ уникален, даже если создан с одинаковым описанием. Символы часто используются как ключи свойств объектов для избежания коллизий имён.

Вопрос​

Что такое BigInt?

Ответ​

BigInt — это примитивный тип для представления целых чисел произвольной точности. Создаётся добавлением суффикса n к целому числу (123n) или вызовом BigInt(123).

Функции​

Вопрос​

Как объявить функцию в JavaScript?

Ответ​

Функцию можно объявить тремя способами:

  1. Function Declaration: function foo() {}
  2. Function Expression: const foo = function() {}
  3. Arrow Function: const foo = () => {}

Вопрос​

Что такое стрелочная функция?

Ответ​

Стрелочная функция — это краткий синтаксис для записи функций. Она не имеет своего this, arguments, super или new.target. Пример: const add = (a, b) => a + b;

Вопрос​

Чем отличается Function Declaration от Function Expression?

Ответ​

Function Declaration поднимается целиком и доступна до строки объявления. Function Expression поднимается только как переменная (undefined до присваивания), если объявлена через var, или недоступна до объявления, если через let/const.

Вопрос​

Что такое IIFE?

Ответ​

IIFE (Immediately Invoked Function Expression) — это функция, которая вызывается сразу после объявления. Пример:

(function() {
  console.log("Выполнено немедленно");
})();

Вопрос​

Что такое параметры по умолчанию?

Ответ​

Параметры по умолчанию задаются в сигнатуре функции и используются, если аргумент не передан или равен undefined. Пример:

function greet(name = "Гость") {
  console.log("Привет, " + name);
}

Вопрос​

Что такое rest-параметры?

Ответ​

Rest-параметры собирают все оставшиеся аргументы функции в массив. Обозначаются троеточием перед именем параметра. Пример:

function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}

Вопрос​

Что такое spread-оператор?

Ответ​

Spread-оператор (...) раскрывает итерируемый объект (массив, строку, Set и т.д.) в отдельные элементы. Используется при вызове функций, создании массивов или объектов. Пример:

const arr1 = [1, 2];
const arr2 = [...arr1, 3]; // [1, 2, 3]

Вопрос​

Можно ли передать больше аргументов, чем параметров в функции?

Ответ​

Да. JavaScript не ограничивает количество передаваемых аргументов. Лишние аргументы игнорируются, недостающие получают значение undefined. Доступ ко всем аргументам возможен через объект arguments (в обычных функциях) или rest-параметры.

Вопрос​

Что такое объект arguments?

Ответ​

arguments — это псевдомассив, доступный внутри обычных функций, содержащий все переданные аргументы. Он не является настоящим массивом и не имеет методов вроде map или forEach.

Вопрос​

Почему стрелочные функции не имеют arguments?

Ответ​

Стрелочные функции не создают собственного контекста выполнения и наследуют arguments из внешней обычной функции. Для доступа к аргументам в стрелочных функциях рекомендуется использовать rest-параметры.

Область видимости и замыкания​

Вопрос​

Что такое лексическая область видимости?

Ответ​

Лексическая область видимости означает, что функция имеет доступ к переменным, объявленным в том блоке кода, где она была определена, а не где вызвана.

Вопрос​

Что такое замыкание?

Ответ​

Замыкание — это комбинация функции и лексического окружения, в котором эта функция была определена. Замыкание позволяет функции обращаться к переменным внешней функции даже после её завершения.

Вопрос​

Приведите пример замыкания.

Ответ​

function outer(x) {
  return function inner(y) {
    return x + y;
  };
}
const add5 = outer(5);
console.log(add5(3)); // 8

Функция inner сохраняет доступ к переменной x из outer.

Вопрос​

Что выведет следующий код?

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}

Ответ​

Код трижды выведет 3. Переменная i объявлена через var и имеет функциональную область видимости. К моменту выполнения setTimeout цикл завершён, и i равна 3.

Вопрос​

Как исправить предыдущий код, чтобы выводились числа 0, 1, 2?

Ответ​

Можно использовать let вместо var:

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}

Каждая итерация создаёт новую привязку i в блочной области видимости.

Вопрос​

Что такое модуль в JavaScript?

Ответ​

Модуль — это файл, который экспортирует значения (функции, объекты, примитивы) с помощью export и импортирует их в другие файлы с помощью import. Модули имеют собственную область видимости.

Вопрос​

Чем отличаются var и let в цикле с setTimeout?

Ответ​

var создаёт одну переменную на всю функцию, поэтому все замыкания ссылаются на одно и то же значение. let создаёт новую переменную на каждой итерации, поэтому каждое замыкание захватывает своё значение.

Вопрос​

Что такое каррирование?

Ответ​

Каррирование — это преобразование функции с несколькими аргументами в последовательность функций, каждая из которых принимает один аргумент. Пример:

const add = a => b => a + b;
const add5 = add(5);
console.log(add5(3)); // 8

Вопрос​

Что такое частичное применение функции?

Ответ​

Частичное применение — это создание новой функции путём фиксации некоторых аргументов исходной функции. Оно отличается от каррирования тем, что не требует пошагового применения одного аргумента за раз.

Вопрос​

Как создать функцию, которая вызывается только один раз?

Ответ​

Можно обернуть функцию в замыкание с флагом:

function once(fn) {
  let called = false;
  return function(...args) {
    if (!called) {
      called = true;
      return fn.apply(this, args);
    }
  };
}

Объекты и прототипы​

Вопрос​

Что такое объект в JavaScript?

Ответ​

Объект в JavaScript — это коллекция пар «ключ–значение», где ключи являются строками или символами, а значения могут быть любого типа, включая другие объекты и функции.

Вопрос​

Как создать объект в JavaScript?

Ответ​

Объект можно создать несколькими способами:

  • Литерал объекта: const obj = { key: 'value' };
  • Конструктор Object: const obj = new Object();
  • Функция-конструктор или класс (см. ниже)

Вопрос​

Что такое свойство объекта?

Ответ​

Свойство объекта — это пара «ключ–значение», где ключ называется именем свойства, а значение может быть примитивом, объектом или функцией.

Вопрос​

Что такое метод объекта?

Ответ​

Метод объекта — это свойство, значением которого является функция. Например:

const obj = {
  greet() {
    console.log("Привет!");
  }
};

Вопрос​

Как получить список всех ключей объекта?

Ответ​

Используется метод Object.keys(obj). Он возвращает массив строковых имён собственных перечисляемых свойств объекта.

Вопрос​

В чём разница между Object.keys, Object.values и Object.entries?

Ответ​

  • Object.keys(obj) возвращает массив ключей.
  • Object.values(obj) возвращает массив значений.
  • Object.entries(obj) возвращает массив пар [ключ, значение].

Вопрос​

Что такое деструктуризация объекта?

Ответ​

Деструктуризация — это синтаксис для извлечения значений из объекта в отдельные переменные. Пример:

const user = { name: "Алиса", age: 30 };
const { name, age } = user;

Вопрос​

Что такое this в методе объекта?

Ответ​

this внутри метода объекта ссылается на сам объект, которому принадлежит метод. Например:

const obj = {
  value: 42,
  getValue() {
    return this.value;
  }
};

Вопрос​

Как работает this в стрелочной функции?

Ответ​

Стрелочная функция не имеет собственного this. Она заимствует this из лексического окружения, в котором была определена.

Вопрос​

Что такое прототип объекта?

Ответ​

Прототип — это объект, от которого другой объект наследует свойства и методы. Каждый объект в JavaScript имеет внутреннее свойство [[Prototype]], указывающее на его прототип.

Вопрос​

Как получить прототип объекта?

Ответ​

Используется метод Object.getPrototypeOf(obj) или свойство __proto__ (устаревшее, не рекомендуется).

Вопрос​

Что делает Object.create(proto)?

Ответ​

Object.create(proto) создаёт новый объект с указанным прототипом proto. Это позволяет явно задать цепочку прототипов.

Вопрос​

Что такое цепочка прототипов?

Ответ​

Цепочка прототипов — это механизм поиска свойств: если свойство не найдено в объекте, JavaScript ищет его в прототипе, затем в прототипе прототипа и так далее, пока не достигнет null.

Вопрос​

Что выведет следующий код?

const obj = {};
console.log(obj.toString());

Ответ​

Код выведет "[object Object]". Метод toString унаследован от Object.prototype.

Вопрос​

Можно ли изменить прототип существующего объекта?

Ответ​

Да, с помощью Object.setPrototypeOf(obj, newProto), но это не рекомендуется из-за потери производительности.

Вопрос​

Что такое hasOwnProperty?

Ответ​

hasOwnProperty — это метод, который проверяет, содержит ли объект указанное собственное (не унаследованное) свойство. Пример:

obj.hasOwnProperty('key');

Вопрос​

Как проверить, что свойство существует в объекте (включая унаследованные)?

Ответ​

Используется оператор in:

'key' in obj; // true, даже если свойство унаследовано

Вопрос​

Что такое Object.freeze()?

Ответ​

Object.freeze(obj) делает объект неизменяемым: нельзя добавлять, удалять или изменять его свойства. Однако заморозка поверхностная — вложенные объекты остаются изменяемыми.

Вопрос​

Что такое Object.seal()?

Ответ​

Object.seal(obj) запрещает добавление и удаление свойств, но разрешает изменение значений существующих свойств.

Вопрос​

Что такое Object.is()?

Ответ​

Object.is(a, b) выполняет строгое сравнение двух значений, корректно обрабатывая особые случаи:

  • Object.is(NaN, NaN) → true
  • Object.is(0, -0) → false

Массивы и методы работы с ними​

Вопрос​

Что такое массив в JavaScript?

Ответ​

Массив — это объект, предназначенный для хранения упорядоченной коллекции элементов. Индексы начинаются с 0.

Вопрос​

Является ли массив объектом?

Ответ​

Да. Массив — это специализированный объект с числовыми ключами и дополнительными методами, унаследованными от Array.prototype.

Вопрос​

Как проверить, что значение является массивом?

Ответ​

Используется Array.isArray(value). Этот метод надёжнее, чем typeof или instanceof.

Вопрос​

Что делает метод map?

Ответ​

map создаёт новый массив, применяя указанную функцию к каждому элементу исходного массива. Исходный массив не изменяется.

Вопрос​

Что делает метод filter?

Ответ​

filter создаёт новый массив, содержащий только те элементы, для которых переданная функция возвращает true.

Вопрос​

Что делает метод reduce?

Ответ​

reduce применяет функцию-аккумулятор к каждому элементу массива, сводя всё к одному значению. Пример:

[1, 2, 3].reduce((acc, val) => acc + val, 0); // 6

Вопрос​

В чём разница между slice и splice?

Ответ​

  • slice(start, end) возвращает новый массив, не изменяя исходный.
  • splice(start, deleteCount, ...items) изменяет исходный массив: удаляет и/или добавляет элементы.

Вопрос​

Что делает метод find?

Ответ​

find возвращает первый элемент массива, для которого функция возвращает true. Если такого элемента нет — возвращает undefined.

Вопрос​

Что делает метод some?

Ответ​

some возвращает true, если хотя бы один элемент массива удовлетворяет условию в переданной функции.

Вопрос​

Что делает метод every?

Ответ​

every возвращает true, если все элементы массива удовлетворяют условию в переданной функции.

Вопрос​

Как объединить два массива?

Ответ​

Можно использовать spread-оператор:

const arr3 = [...arr1, ...arr2];

Или метод concat:

const arr3 = arr1.concat(arr2);

Вопрос​

Что такое «плоский» массив?

Ответ​

Плоский массив — это массив, не содержащий вложенных массивов. Метод flat() преобразует многомерный массив в плоский.

Вопрос​

Что делает метод flat()?

Ответ​

flat(depth) создаёт новый массив, в котором все вложенные массивы раскрываются до указанной глубины (по умолчанию 1).
Пример:

[[1, 2], [3, [4]]].flat(2); // [1, 2, 3, 4]

Вопрос​

Что делает метод flatMap()?

Ответ​

flatMap сначала применяет функцию к каждому элементу (как map), затем выравнивает результат на один уровень (как flat(1)). Полезен при трансформации, возвращающей массивы.

Вопрос​

Как проверить, содержит ли массив определённое значение?

Ответ​

Используется метод includes(value), который возвращает true или false.

Вопрос​

Что делает метод indexOf?

Ответ​

indexOf(value) возвращает индекс первого вхождения value в массиве или -1, если значение не найдено.

Вопрос​

В чём разница между push и unshift?

Ответ​

  • push добавляет элементы в конец массива.
  • unshift добавляет элементы в начало массива.

Вопрос​

В чём разница между pop и shift?

Ответ​

  • pop удаляет и возвращает последний элемент массива.
  • shift удаляет и возвращает первый элемент массива.

Вопрос​

Что такое «мутабельные» методы массива?

Ответ​

Мутабельные методы изменяют исходный массив. Примеры: push, pop, shift, unshift, splice, sort, reverse.

Вопрос​

Что такое «иммутабельные» методы массива?

Ответ​

Иммутабельные методы возвращают новый массив, не изменяя исходный. Примеры: map, filter, slice, concat, flat.

Асинхронность​

Вопрос​

Что такое асинхронное программирование?

Ответ​

Асинхронное программирование — это подход, при котором операции (например, сетевые запросы) не блокируют выполнение программы. Результат обрабатывается позже, когда он становится доступен.

Вопрос​

Какие есть способы работы с асинхронностью в JavaScript?

Ответ​

Основные способы:

  • Callback-функции
  • Promise
  • async/await

Вопрос​

Что такое callback?

Ответ​

Callback — это функция, передаваемая как аргумент другой функции и вызываемая после завершения какой-либо операции. Пример:

setTimeout(() => console.log("Готово"), 1000);

Вопрос​

Что такое «callback hell»?

Ответ​

«Callback hell» — это ситуация, когда колбэки вкладываются друг в друга на несколько уровней, что затрудняет чтение и поддержку кода.

Вопрос​

Что такое Promise?

Ответ​

Promise — это объект, представляющий результат асинхронной операции, который может быть в состоянии «ожидание», «выполнен успешно» или «выполнен с ошибкой».

Вопрос​

Как создать Promise?

Ответ​

const promise = new Promise((resolve, reject) => {
  // асинхронная операция
  if (успех) resolve(результат);
  else reject(ошибка);
});

Вопрос​

Как обработать результат Promise?

Ответ​

Используются методы .then() для успеха и .catch() для ошибки:

promise
  .then(result => console.log(result))
  .catch(error => console.error(error));

Вопрос​

Что делает метод .finally() у Promise?

Ответ​

.finally() выполняет код независимо от того, был ли Promise выполнен успешно или с ошибкой. Часто используется для очистки ресурсов.

Вопрос​

Что такое async/await?

Ответ​

async/await — это синтаксический сахар над Promise, позволяющий писать асинхронный код в синхронном стиле. Функция, помеченная async, всегда возвращает Promise.

Вопрос​

Как использовать await?

Ответ​

await ставится перед вызовом функции, возвращающей Promise. Он приостанавливает выполнение до получения результата:

const result = await fetchData();

Вопрос​

Можно ли использовать await вне async-функции?

Ответ​

Нет. await можно использовать только внутри функции, объявленной с ключевым словом async.

Вопрос​

Как обработать ошибку при использовании async/await?

Ответ​

Используется конструкция try...catch:

try {
  const data = await fetch('/api');
} catch (error) {
  console.error(error);
}

Вопрос​

Что делает Promise.all()?

Ответ​

Promise.all(iterable) возвращает новый Promise, который завершается успешно, когда все переданные Promise завершены успешно. Если хотя бы один завершается с ошибкой — весь Promise.all завершается с этой ошибкой.

Вопрос​

Что делает Promise.allSettled()?

Ответ​

Promise.allSettled(iterable) возвращает Promise, который завершается после завершения всех входящих Promise, независимо от их результата. Результат — массив объектов с полями status ("fulfilled" или "rejected") и value/reason.

Вопрос​

Что делает Promise.race()?

Ответ​

Promise.race(iterable) возвращает Promise, который завершается сразу, как только завершится первый из переданных Promise (успешно или с ошибкой).

Вопрос​

Что такое микрозадачи и макрозадачи?

Ответ​

JavaScript использует две очереди задач:

  • Микрозадачи: Promise.then, queueMicrotask, MutationObserver. Выполняются сразу после текущего скрипта, до макрозадач.
  • Макрозадачи: setTimeout, setInterval, ввод-вывод. Выполняются после микрозадач.

Вопрос​

Что выведет следующий код?

console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));
console.log(4);

Ответ​

Код выведет:

1
4
3
2

Пояснение: синхронный код → микрозадачи (Promise.then) → макрозадачи (setTimeout).

Вопрос​

Что такое queueMicrotask()?

Ответ​

queueMicrotask(callback) добавляет функцию в очередь микрозадач, что гарантирует её выполнение до следующего цикла событий, но после текущего синхронного кода.

Вопрос​

Как отменить Promise?

Ответ​

Стандартный Promise не поддерживает отмену. Для отмены используются:

  • AbortController (в сочетании с fetch)
  • Сторонние библиотеки
  • Логика внутри Promise (например, проверка флага)

Вопрос​

Что такое «промисификация»?

Ответ​

Промисификация — это преобразование функции, использующей callback, в функцию, возвращающую Promise. Это упрощает работу с асинхронным кодом.

Работа с DOM​

Вопрос​

Что такое DOM?

Ответ​

DOM (Document Object Model) — это программный интерфейс для HTML и XML документов. Он представляет документ в виде дерева объектов, где каждый узел — это объект, представляющий часть документа.

Вопрос​

Как получить элемент по идентификатору?

Ответ​

Используется метод document.getElementById('id'). Он возвращает первый элемент с указанным значением атрибута id.

Вопрос​

Как получить элементы по классу?

Ответ​

Используется метод document.getElementsByClassName('class'). Он возвращает живую HTML-коллекцию элементов.

Вопрос​

Как получить элементы по селектору CSS?

Ответ​

Используются методы:

  • document.querySelector('селектор') — возвращает первый найденный элемент.
  • document.querySelectorAll('селектор') — возвращает статическую NodeList всех найденных элементов.

Вопрос​

В чём разница между HTMLCollection и NodeList?

Ответ​

HTMLCollection — это живая коллекция, которая автоматически обновляется при изменениях в DOM.
NodeList может быть живой или статической; querySelectorAll возвращает статическую NodeList.

Вопрос​

Как создать новый элемент DOM?

Ответ​

Используется метод document.createElement('tagName'). Например:

const div = document.createElement('div');

Вопрос​

Как добавить элемент в DOM?

Ответ​

Используются методы:

  • parent.appendChild(child) — добавляет в конец.
  • parent.insertBefore(newNode, referenceNode) — вставляет перед указанным узлом.

Вопрос​

Как удалить элемент из DOM?

Ответ​

Используется метод element.remove(). Альтернативно: parent.removeChild(child).

Вопрос​

Что такое textContent?

Ответ​

textContent возвращает или задаёт текстовое содержимое элемента, включая всё вложенное содержимое, без разметки.

Вопрос​

Что такое innerHTML?

Ответ​

innerHTML возвращает или задаёт HTML-содержимое элемента в виде строки. При присваивании строка парсится как HTML.

Вопрос​

Чем опасно использование innerHTML?

Ответ​

Использование innerHTML с ненадёжными данными может привести к XSS-атакам. Для безопасной вставки текста предпочтительнее использовать textContent.

Вопрос​

Что такое dataset?

Ответ​

dataset — это свойство элемента, предоставляющее доступ к его пользовательским атрибутам data-*. Например, data-user-id доступен как element.dataset.userId.

Вопрос​

Как проверить, содержит ли элемент другой элемент?

Ответ​

Используется метод parent.contains(child). Он возвращает true, если child является потомком parent.

Вопрос​

Что такое document.readyState?

Ответ​

document.readyState показывает текущее состояние загрузки документа:

  • "loading" — документ загружается
  • "interactive" — DOM построен
  • "complete" — все ресурсы загружены

Вопрос​

Как дождаться полной загрузки DOM?

Ответ​

Можно использовать событие DOMContentLoaded:

document.addEventListener('DOMContentLoaded', () => {
  // DOM готов
});

События​

Вопрос​

Что такое событие в браузере?

Ответ​

Событие — это сигнал о том, что произошло какое-либо действие: клик, нажатие клавиши, загрузка страницы и т.д.

Вопрос​

Как назначить обработчик события?

Ответ​

Используется метод element.addEventListener('тип', обработчик). Например:

button.addEventListener('click', () => console.log('Клик'));

Вопрос​

Что такое всплытие событий?

Ответ​

Всплытие — это фаза распространения события от целевого элемента вверх по иерархии DOM до корня документа.

Вопрос​

Что такое перехват событий?

Ответ​

Перехват (capturing) — это фаза распространения события от корня документа вниз к целевому элементу. Включается третьим параметром в addEventListener.

Вопрос​

Как остановить всплытие события?

Ответ​

Вызывается метод event.stopPropagation() внутри обработчика события.

Вопрос​

Как отменить стандартное действие браузера?

Ответ​

Вызывается метод event.preventDefault() внутри обработчика события.

Вопрос​

Что такое делегирование событий?

Ответ​

Делегирование событий — это техника, при которой обработчик назначается на родительский элемент, а не на каждый дочерний. Определяется целевой элемент через event.target.

Вопрос​

Почему делегирование событий полезно?

Ответ​

Делегирование уменьшает количество обработчиков, упрощает работу с динамически создаваемыми элементами и снижает потребление памяти.

Вопрос​

Что такое event.target и event.currentTarget?

Ответ​

  • event.target — элемент, на котором событие произошло.
  • event.currentTarget — элемент, на котором установлен обработчик.

Вопрос​

Как удалить обработчик события?

Ответ​

Используется метод element.removeEventListener('тип', обработчик). Обработчик должен быть ссылкой на ту же функцию, что и при добавлении.

Модули​

Вопрос​

Что такое модуль в JavaScript?

Ответ​

Модуль — это файл, который экспортирует значения с помощью export и импортирует их с помощью import. Модули имеют собственную область видимости.

Вопрос​

Как экспортировать значение по умолчанию?

Ответ​

Используется синтаксис export default значение. Пример:

export default function greet() {}

Вопрос​

Как импортировать значение по умолчанию?

Ответ​

Используется синтаксис import имя from 'модуль'. Имя может быть любым. Пример:

import greet from './greet.js';

Вопрос​

Как выполнить именованный экспорт?

Ответ​

Используется синтаксис export const name = value или export { name }. Пример:

export const PI = 3.14;

Вопрос​

Как импортировать именованные значения?

Ответ​

Используется синтаксис import { name } from 'модуль'. Имена должны совпадать с экспортируемыми.

Вопрос​

Можно ли переименовать импортируемое значение?

Ответ​

Да. Используется синтаксис import { oldName as newName } from 'модуль'.

Вопрос​

Что такое «живые» привязки в модулях?

Ответ​

Импортируемые значения — это «живые» привязки к экспортируемым переменным. Если значение в модуле изменяется, это отражается и в импорте.

Вопрос​

Как импортировать всё из модуля?

Ответ​

Используется синтаксис import * as namespace from 'модуль'. Все экспорты становятся свойствами объекта namespace.

Вопрос​

Поддерживают ли модули циклические зависимости?

Ответ​

Да. Модули поддерживают циклические зависимости, но при этом импортируемые значения могут быть не полностью инициализированы на момент использования.

Вопрос​

Как подключить модуль в HTML?

Ответ​

Используется атрибут type="module" в теге <script>:

<script type="module" src="main.js"></script>

Обработка ошибок​

Вопрос​

Как обрабатывать ошибки в JavaScript?

Ответ​

Используется конструкция try...catch...finally. Код, который может вызвать ошибку, помещается в блок try.

Вопрос​

Что содержит объект error в блоке catch?

Ответ​

Объект error содержит свойства:

  • name — тип ошибки (например, "TypeError")
  • message — описание ошибки
  • stack — стек вызовов (не стандартизирован, но поддерживается во всех средах)

Вопрос​

Можно ли выбрасывать собственные ошибки?

Ответ​

Да. Используется оператор throw с экземпляром Error или его наследником:

throw new Error("Что-то пошло не так");

Вопрос​

Какие встроенные типы ошибок есть в JavaScript?

Ответ​

Основные типы: Error, TypeError, ReferenceError, SyntaxError, RangeError, URIError.

Вопрос​

Будет ли поймана ошибка в асинхронной функции без try...catch?

Ответ​

Нет. Ошибки в асинхронных функциях, не обёрнутых в try...catch, приводят к отклонённому Promise. Их нужно ловить через .catch() или try...catch при вызове.

Продвинутые встроенные возможности​

Вопрос​

Что такое итератор?

Ответ​

Итератор — это объект с методом next(), который возвращает объект { value, done }. Он определяет последовательность и завершение обхода коллекции.

Вопрос​

Что такое итерируемый объект?

Ответ​

Итерируемый объект — это объект, имеющий метод [Symbol.iterator], возвращающий итератор. Примеры: массивы, строки, Set, Map.

Вопрос​

Как сделать объект итерируемым?

Ответ​

Нужно реализовать метод [Symbol.iterator], возвращающий итератор. Пример:

obj[Symbol.iterator] = function* () {
  yield 1; yield 2;
};

Вопрос​

Что такое генератор?

Ответ​

Генератор — это функция, которая может приостанавливать своё выполнение и возобновлять его позже. Обозначается function*.

Вопрос​

Как работает ключевое слово yield?

Ответ​

yield приостанавливает выполнение генератора и возвращает значение. При следующем вызове next() выполнение возобновляется с места остановки.

Вопрос​

Что возвращает вызов генератора?

Ответ​

Вызов генератора возвращает итератор. Этот итератор можно использовать в циклах или вручную вызывать next().

Вопрос​

Что такое Proxy?

Ответ​

Proxy — это объект, который оборачивает другой объект и перехватывает операции над ним, такие как чтение свойств, запись, вызов и т.д.

Вопрос​

Как создать Proxy?

Ответ​

const proxy = new Proxy(target, handler);

target — целевой объект, handler — объект с ловушками (traps), например get, set.

Вопрос​

Что такое ловушка get в Proxy?

Ответ​

Ловушка get(target, property, receiver) вызывается при чтении свойства объекта. Она позволяет контролировать доступ к свойствам.

Вопрос​

Что такое Reflect?

Ответ​

Reflect — это встроенный объект, предоставляющий методы для перехвата операций JavaScript. Методы Reflect соответствуют ловушкам Proxy.

Вопрос​

Зачем использовать Reflect.get(target, prop, receiver) вместо target[prop]?

Ответ​

Reflect.get корректно работает с геттерами и наследованием, особенно внутри ловушек Proxy, где важно сохранить контекст receiver.

Вопрос​

Можно ли перехватить операцию new с помощью Proxy?

Ответ​

Да. Используется ловушка construct(target, argumentsList, newTarget), которая вызывается при создании экземпляра через new.

Вопрос​

Что такое Symbol.iterator?

Ответ​

Symbol.iterator — это хорошо известный символ, используемый для определения итератора по умолчанию для объекта.

Вопрос​

Какие ещё есть хорошо известные символы?

Ответ​

Примеры: Symbol.toStringTag, Symbol.hasInstance, Symbol.isConcatSpreadable, Symbol.toPrimitive.

Вопрос​

Что делает Symbol.toStringTag?

Ответ​

Symbol.toStringTag определяет строку, возвращаемую Object.prototype.toString.call(obj). Позволяет кастомизировать представление объекта.

Вопрос​

Что такое globalThis?

Ответ​

globalThis — это стандартное свойство, которое предоставляет доступ к глобальному объекту независимо от среды (браузер, Node.js и др.).

Классы и наследование​

Вопрос​

Что такое класс в JavaScript?

Ответ​

Класс — это синтаксическая конструкция для создания объектов и управления наследованием. Он является «синтаксическим сахаром» над прототипным наследованием.

Вопрос​

Как объявить класс?

Ответ​

Используется ключевое слово class:

class User {
  constructor(name) {
    this.name = name;
  }
}

Вопрос​

Что такое конструктор в классе?

Ответ​

Конструктор — это специальный метод constructor, вызываемый при создании экземпляра класса через оператор new. Он инициализирует свойства объекта.

Вопрос​

Можно ли создать экземпляр класса без new?

Ответ​

Нет. Попытка вызвать класс как функцию без new приведёт к ошибке TypeError.

Вопрос​

Как реализовать наследование между классами?

Ответ​

Используется ключевое слово extends:

class Admin extends User {
  constructor(name, role) {
    super(name);
    this.role = role;
  }
}

Вопрос​

Что делает вызов super()?

Ответ​

super() вызывает конструктор родительского класса. Он обязателен в конструкторе дочернего класса до обращения к this.

Вопрос​

Можно ли вызывать super.method() вне конструктора?

Ответ​

Да. super.method() позволяет вызывать методы родительского класса из методов дочернего класса.

Вопрос​

Что такое статические методы?

Ответ​

Статические методы объявляются с ключевым словом static и вызываются на самом классе, а не на его экземплярах. Пример: ClassName.staticMethod().

Вопрос​

Можно ли наследовать статические методы?

Ответ​

Да. Статические методы наследуются дочерними классами.

Вопрос​

Поддерживают ли классы приватные поля?

Ответ​

Да. Приватные поля и методы объявляются с префиксом #:

class Counter {
  #count = 0;
  increment() { this.#count++; }
}

Работа с датами и временем​

Вопрос​

Как создать объект даты?

Ответ​

Используется конструктор new Date(). Он может принимать строку, метку времени, отдельные компоненты или ничего (текущее время).

Вопрос​

Что возвращает new Date() без аргументов?

Ответ​

Возвращает объект, представляющий текущую дату и время в локальной временной зоне.

Вопрос​

Как получить метку времени в миллисекундах?

Ответ​

Используется метод Date.now(). Он возвращает количество миллисекунд с 1 января 1970 года UTC.

Вопрос​

Как сравнить две даты?

Ответ​

Объекты Date можно сравнивать напрямую с помощью операторов <, >, так как они автоматически преобразуются в числовые метки времени.

Вопрос​

Как отформатировать дату?

Ответ​

Используется метод toLocaleDateString() или Intl.DateTimeFormat. Пример:

new Date().toLocaleDateString('ru-RU');

Вопрос​

Является ли Date изменяемым объектом?

Ответ​

Да. Методы вроде setDate, setHours изменяют исходный объект.

Регулярные выражения​

Вопрос​

Что такое регулярное выражение?

Ответ​

Регулярное выражение — это шаблон для поиска и манипуляции текстом. В JavaScript создаётся литералом /pattern/flags или через new RegExp('pattern', 'flags').

Вопрос​

Какие флаги поддерживаются в регулярных выражениях?

Ответ​

Основные флаги:

  • g — глобальный поиск
  • i — игнорирование регистра
  • m — многострочный режим
  • s — режим «dotAll» (. включает перевод строки)
  • u — поддержка Unicode
  • y — поиск с привязкой к позиции (sticky)

Вопрос​

Что делает метод test() у регулярного выражения?

Ответ​

regexp.test(str) возвращает true, если шаблон найден в строке, иначе false.

Вопрос​

Что делает метод exec()?

Ответ​

regexp.exec(str) возвращает массив с найденным совпадением и дополнительной информацией (индекс, входная строка) или null, если совпадений нет.

Вопрос​

Как найти все совпадения в строке?

Ответ​

Используется регулярное выражение с флагом g и метод match:

"abc abc".match(/abc/g); // ["abc", "abc"]

Вопрос​

Что такое группы захвата?

Ответ​

Группы захвата — это части шаблона в скобках (...), которые сохраняют найденное значение. Их можно использовать для извлечения подстрок.

Вопрос​

Как использовать именованные группы захвата?

Ответ​

Именованные группы записываются как (?<name>...). Результат доступен через result.groups.name.

Таймеры​

Вопрос​

Что делает setTimeout?

Ответ​

setTimeout(callback, delay) планирует однократный вызов callback через delay миллисекунд.

Вопрос​

Что возвращает setTimeout?

Ответ​

Возвращает числовой идентификатор таймера, который можно передать в clearTimeout, чтобы отменить выполнение.

Вопрос​

Что делает setInterval?

Ответ​

setInterval(callback, delay) вызывает callback повторно каждые delay миллисекунд, пока таймер не будет отменён.

Вопрос​

Как остановить setInterval?

Ответ​

Используется clearInterval(timerId), где timerId — идентификатор, возвращённый setInterval.

Вопрос​

Гарантирует ли setTimeout(fn, 0) немедленное выполнение?

Ответ​

Нет. setTimeout(fn, 0) помещает задачу в очередь макрозадач и выполняет её после завершения текущего стека вызовов и всех микрозадач.

Хранение данных в браузере​

Вопрос​

Какие есть способы хранения данных в браузере?

Ответ​

Основные способы:

  • localStorage — постоянное хранилище
  • sessionStorage — хранение на время сессии
  • IndexedDB — полноценная клиентская база данных
  • Cookies — небольшие данные, отправляемые с каждым запросом

Вопрос​

В чём разница между localStorage и sessionStorage?

Ответ​

localStorage сохраняет данные между перезагрузками и закрытиями браузера. sessionStorage очищается при закрытии вкладки.

Вопрос​

Какие типы данных можно хранить в localStorage?

Ответ​

Только строки. Для хранения объектов используется JSON.stringify, для чтения — JSON.parse.

Вопрос​

Как удалить элемент из localStorage?

Ответ​

Используется метод localStorage.removeItem('ключ').

Вопрос​

Как очистить всё содержимое localStorage?

Ответ​

Используется метод localStorage.clear().

Современные API браузера​

Вопрос​

Что такое fetch?

Ответ​

fetch — это встроенный API для выполнения сетевых запросов. Он возвращает Promise, разрешающийся в объект Response.

Вопрос​

Как отправить POST-запрос с помощью fetch?

Ответ​

fetch('/api', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data)
});

Вопрос​

Как прочитать JSON из ответа fetch?

Ответ​

Используется метод response.json(), который возвращает Promise с распарсенными данными.

Вопрос​

Что такое AbortController?

Ответ​

AbortController позволяет отменять асинхронные операции, такие как fetch. Создаётся вместе с сигналом:

const controller = new AbortController();
fetch(url, { signal: controller.signal });
controller.abort(); // отмена

Вопрос​

Что такое URL API?

Ответ​

URL — это конструктор для безопасной работы с URL-адресами. Позволяет парсить, модифицировать и строить адреса. Пример:

new URL('https://example.com/path?x=1');

Вопрос​

Что такое Web Workers?

Ответ​

Web Workers — это API для запуска скриптов в фоновых потоках, не блокируя основной поток пользовательского интерфейса.

Вопрос​

Как создать Web Worker?

Ответ​

const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = (event) => { /* обработка */ };

Вопрос​

Может ли Web Worker обращаться к DOM?

Ответ​

Нет. Web Worker не имеет доступа к document, window, localStorage и другим API, связанным с DOM.

Вопрос​

Как остановить Web Worker?

Ответ​

Из основного потока: worker.terminate(). Изнутри воркера: self.close().

Вопрос​

Что такое structuredClone?

Ответ​

structuredClone(value) создаёт глубокую копию объекта, включая типизированные массивы, Date, Map, Set и другие сложные структуры.

Безопасность​

Вопрос​

Что такое XSS?

Ответ​

XSS (Cross-Site Scripting) — это уязвимость, при которой злоумышленник внедряет вредоносный JavaScript-код на веб-страницу, который выполняется в браузере других пользователей.

Вопрос​

Как предотвратить XSS при вставке данных в DOM?

Ответ​

Следует избегать прямой вставки ненадёжных данных через innerHTML. Вместо этого использовать textContent или экранировать HTML-символы перед вставкой.

Вопрос​

Что такое Content Security Policy (CSP)?

Ответ​

CSP — это механизм безопасности, ограничивающий источники, из которых могут загружаться скрипты, стили и другие ресурсы. Он снижает риск XSS и инъекций.

Вопрос​

Что такое CORS?

Ответ​

CORS (Cross-Origin Resource Sharing) — это механизм, позволяющий браузеру запрашивать ресурсы с другого домена при условии, что сервер разрешает такой доступ через заголовки.

Вопрос​

Почему fetch может не отправить запрос на другой домен?

Ответ​

Браузер блокирует такие запросы из-за политики одного источника. Сервер должен явно разрешить междоменные запросы, отправив заголовки Access-Control-Allow-Origin и другие.

Производительность и оптимизация​

Вопрос​

Что такое debounce?

Ответ​

Debounce — это техника отложенного вызова функции до тех пор, пока не пройдёт заданный интервал без новых вызовов. Полезна для обработки ввода или прокрутки.

Вопрос​

Что такое throttle?

Ответ​

Throttle — это техника, ограничивающая частоту вызова функции: она вызывается не чаще, чем раз в заданный интервал времени.

Вопрос​

Как избежать утечек памяти в JavaScript?

Ответ​

Следует удалять обработчики событий при удалении элементов, не создавать замыкания, удерживающие большие объекты, и избегать глобальных переменных.

Вопрос​

Почему важно избегать «тяжёлых» операций в основном потоке?

Ответ​

Тяжёлые синхронные операции блокируют рендеринг и взаимодействие с интерфейсом. Такие задачи следует выносить в Web Workers или разбивать на части с помощью setTimeout или queueMicrotask.

Вопрос​

Что такое reflow и repaint?

Ответ​

Reflow — это пересчёт геометрии элементов при изменении макета. Repaint — это перерисовка элементов без изменения макета. Оба процесса влияют на производительность.

Тестирование​

Вопрос​

Какие фреймворки используются для тестирования JavaScript-кода?

Ответ​

Популярные фреймворки: Jest, Mocha, Jasmine, Vitest. Для тестирования компонентов в браузере — Cypress, Playwright, Puppeteer.

Вопрос​

Что такое unit-тест?

Ответ​

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

Вопрос​

Что такое mock?

Ответ​

Mock — это поддельная реализация зависимости, используемая в тестах для контроля поведения и изоляции тестируемого кода.

Вопрос​

Как протестировать асинхронную функцию?

Ответ​

В Jest используется async/await или возврат Promise из теста. Пример:

test('fetches data', async () => {
  const data = await fetchData();
  expect(data).toEqual(expected);
});

Вопрос​

Что такое code coverage?

Ответ​

Code coverage — это метрика, показывающая, какой процент исходного кода был выполнен во время тестов. Помогает оценить полноту тестирования.

Сборка и транспиляция​

Вопрос​

Зачем нужен Babel?

Ответ​

Babel транспилирует современный JavaScript (ES2020+) в более старые версии (например, ES5), совместимые со старыми браузерами.

Вопрос​

Что такое bundler?

Ответ​

Bundler — это инструмент, объединяющий множество модулей и зависимостей в один или несколько файлов для браузера. Примеры: Webpack, Vite, Rollup, Parcel.

Вопрос​

Что такое tree-shaking?

Ответ​

Tree-shaking — это процесс удаления неиспользуемого кода из итоговой сборки. Работает с ES-модулями, так как они статически анализируемы.

Вопрос​

Почему ES-модули предпочтительнее CommonJS для браузеров?

Ответ​

ES-модули поддерживают статический анализ, что позволяет применять tree-shaking и lazy loading. CommonJS динамичен и не подходит для оптимизации на этапе сборки.

Вопрос​

Что такое минификация?

Ответ​

Минификация — это процесс сокращения размера JavaScript-файла за счёт удаления пробелов, переименования переменных и упрощения конструкций.

Различия между средами выполнения​

Вопрос​

Чем отличается глобальный объект в браузере и Node.js?

Ответ​

В браузере глобальный объект — window (или globalThis). В Node.js — global. Современный код использует globalThis для кроссплатформенности.

Вопрос​

Доступен ли document в Node.js?

Ответ​

Нет. Объект document существует только в браузерной среде. В Node.js для работы с DOM используются эмуляторы, такие как JSDOM.

Вопрос​

Поддерживает ли Node.js ES-модули?

Ответ​

Да. Node.js поддерживает ES-модули, если файл имеет расширение .mjs или в package.json указано "type": "module".

Вопрос​

Как определить, выполняется ли код в браузере?

Ответ​

Можно проверить наличие объекта window:

const isBrowser = typeof window !== 'undefined';

Вопрос​

Как определить, выполняется ли код в Node.js?

Ответ​

Можно проверить наличие глобального объекта process и свойства process.versions.node:

const isNode = typeof process !== 'undefined' && process.versions?.node;

Редкие, но важные особенности языка​

Вопрос​

Что такое «явное» и «неявное» приведение типов?

Ответ​

Явное приведение — это когда программист сам преобразует тип, например String(42). Неявное — когда преобразование происходит автоматически, например в выражении '5' + 3.

Вопрос​

Что выведет выражение +true?

Ответ​

Выражение выведет 1. Унарный плюс преобразует true в число.

Вопрос​

Что такое «временная мёртвая зона»?

Ответ​

Временная мёртвая зона — это участок кода от начала блока до объявления переменной через let или const, где переменная недоступна.

Вопрос​

Что делает оператор void?

Ответ​

Оператор void expression вычисляет выражение и возвращает undefined. Часто используется в гиперссылках: javascript:void(0).

Вопрос​

Что такое «явный возврат» и «неявный возврат» в стрелочных функциях?

Ответ​

Если тело стрелочной функции записано как выражение (=> x), возвращается результат этого выражения (неявный возврат). Если используется блок (=> { ... }), требуется явный return.

Вопрос​

Что такое «неизменяемость» в контексте JavaScript?

Ответ​

Неизменяемость означает, что после создания объекта его состояние нельзя изменить. В JavaScript примитивы неизменяемы, а объекты — изменяемы. Для имитации неизменяемости используют Object.freeze или библиотеки.

Вопрос​

Что такое «чистая функция»?

Ответ​

Чистая функция — это функция, которая при одних и тех же аргументах всегда возвращает один и тот же результат и не имеет побочных эффектов.

Вопрос​

Что такое «побочный эффект»?

Ответ​

Побочный эффект — это любое взаимодействие функции с внешней средой: изменение глобальных переменных, модификация входных аргументов, сетевые запросы, запись в консоль.

Вопрос​

Что такое «функциональное программирование»?

Ответ​

Функциональное программирование — это парадигма, основанная на использовании чистых функций, неизменяемых данных и композиции функций.

Вопрос​

Что такое «hoisting» для классов?

Ответ​

Классы не поднимаются. Попытка использовать класс до его объявления вызывает ошибку ReferenceError, так как классы находятся во временной мёртвой зоне.

Освоение главы0%