Вопросы для собеседования на позицию начинающего Frontend-разработчика: основы HTML, CSS и JavaScript

Введение

Это подробное руководство содержит 32 тщательно отобранных вопроса для собеседования, охватывающих основные принципы frontend разработки: HTML, CSS и JavaScript. Это вопросы, с которыми младшие frontend разработчики действительно сталкиваются на собеседованиях в 2024-2025 годах. Каждый вопрос включает в себя подробный ответ, оценку редкости и рейтинг сложности, основанные на анализе сотен реальных собеседований из крупных технологических компаний и стартапов.

Это Часть 1 нашего полного руководства по собеседованиям. Вопросы по React, инструментам сборки, оптимизации производительности, отладке, доступности, тестированию и soft skills смотрите в Части 2: React, Tools & Advanced Topics.

Основы HTML (7 вопросов)

1. Что такое семантические HTML элементы и почему они важны?

Ответ: Семантические HTML элементы четко описывают свое значение и назначение как для браузеров, так и для разработчиков. Примеры включают <header>, <nav>, <main>, <article>, <section>, <aside> и <footer>. Они важны, потому что улучшают доступность для программ чтения с экрана и вспомогательных технологий, улучшают SEO, помогая поисковым системам понимать структуру контента, и делают код более поддерживаемым и читаемым. В отличие от общих элементов <div> и <span>, которые не предоставляют контекста, семантические элементы сообщают о роли и значении контента.

Редкость: Часто
Сложность: Легко

2. Объясните разницу между inline, block и inline-block элементами

Ответ:

• Block элементы начинаются с новой строки и занимают всю доступную ширину (например, <div>, <p>, <h1>). Вы можете установить свойства width и height.
• Inline элементы остаются на той же строке и занимают только необходимую ширину (например, <span>, <a>, <strong>). Вы не можете установить width или height.
• Inline-block элементы остаются inline, но позволяют устанавливать width и height, как у block элементов. Это сочетает в себе поток inline с возможностями изменения размера block.

Редкость: Часто
Сложность: Легко

3. Что такое void (самозакрывающиеся) элементы в HTML?

Ответ: Void элементы - это HTML элементы, которые не имеют закрывающих тегов и не могут содержать контент. Распространенные примеры: <img>, <br>, <hr>, <input>, <meta>, <link>, <area>, <base>, <col>, <embed> и <source>. Эти элементы завершены только своим открывающим тегом и атрибутами. Например, <img src="photo.jpg" alt="description"> не нуждается в закрывающем теге </img>.

Редкость: Часто
Сложность: Легко

4. Как сделать веб-сайт доступным? Какие HTML атрибуты улучшают доступность?

Ответ: Чтобы сделать веб-сайты доступными:

• Используйте семантические HTML элементы (<nav>, <main>, <header>, <footer>)
• Предоставляйте атрибуты alt для всех изображений, описывающие их контент
• Поддерживайте правильную иерархию заголовков (H1-H6) без пропусков уровней
• Помечайте поля формы элементами <label> с использованием атрибута for
• Обеспечьте доступность с клавиатуры с правильным порядком табуляции
• Используйте ARIA атрибуты, когда семантического HTML недостаточно: aria-label, aria-describedby, aria-hidden, aria-live
• Добавьте атрибуты role для сложных виджетов
• Обеспечьте достаточный цветовой контраст (4.5:1 для обычного текста)
• Сделайте интерактивные элементы фокусируемыми и предоставьте видимые индикаторы фокуса

Редкость: Часто
Сложность: Средне

5. Объясните разницу между методами GET и POST в формах

Ответ:

• GET: Добавляет данные формы в URL в виде параметров запроса, делая данные видимыми в браузере. Имеет ограничения по длине (~2000 символов), может быть кэширован и добавлен в закладки, небезопасен для конфиденциальных данных. Используется для получения данных, когда запрос не изменяет состояние сервера (поиск, фильтры).
• POST: Отправляет данные в теле запроса, не виден в URL. Нет ограничений по длине, не может быть кэширован по умолчанию, более безопасен для конфиденциальной информации. Используется для отправки данных, которые изменяют состояние сервера (формы входа, загрузка файлов, создание записей).

Пример: Формы поиска обычно используют GET, чтобы результаты можно было добавить в закладки, в то время как формы входа используют POST, чтобы скрыть учетные данные.

Редкость: Часто
Сложность: Легко-Средне

6. Каково назначение тега <meta>?

Ответ: Тег <meta> предоставляет метаданные о HTML документе, которые не отображаются на странице, но используются браузерами, поисковыми системами и другими веб-сервисами. Распространенные случаи использования:

• Кодировка символов: <meta charset="UTF-8">
• Настройки viewport для адаптивного дизайна: <meta name="viewport" content="width=device-width, initial-scale=1.0">
• SEO описания: <meta name="description" content="Описание страницы">
• Информация об авторе: <meta name="author" content="Имя">
• Ключевые слова (менее актуальны сейчас): <meta name="keywords" content="ключевое слово1, ключевое слово2">

Редкость: Часто
Сложность: Легко

7. В чем разница между <script>, <script async> и <script defer>?

Ответ:

• Обычный <script>: Блокирует разбор HTML во время загрузки и выполнения скрипта. Отрисовка страницы останавливается до завершения скрипта.
• <script async>: Загружает скрипт параллельно с разбором HTML, но выполняет немедленно, когда готов (потенциально блокируя разбор). Порядок выполнения не гарантируется. Хорошо подходит для независимых скриптов, таких как аналитика.
• <script defer>: Загружается параллельно, но выполняется только после завершения разбора HTML, сохраняя порядок скриптов. Лучше всего подходит для скриптов, которые зависят от DOM или других скриптов.

Рекомендуемый подход: Разместите <script defer> в <head> для оптимальной производительности, обеспечивая при этом правильный порядок выполнения.

Редкость: Не часто
Сложность: Средне

Основы CSS (10 вопросов)

8. Объясните CSS Box Model (блочную модель)

Ответ: CSS Box Model описывает, как элементы отображаются с четырьмя компонентами (изнутри наружу):

1. Content (Содержимое): Фактическое содержимое (текст, изображения)
2. Padding (Внутренний отступ): Пространство между содержимым и границей (внутри)
3. Border (Граница): Граница, окружающая padding
4. Margin (Внешний отступ): Пространство за пределами границы (между элементами)

Свойство box-sizing влияет на расчеты:

• box-sizing: content-box (по умолчанию): Ширина/высота применяются только к содержимому; padding и border добавляются
• box-sizing: border-box: Ширина/высота включают содержимое + padding + border (более интуитивно понятно)

Пример: С box-sizing: border-box, элемент с width: 100px; padding: 10px; border: 2px; остается ровно 100px в ширину.

Редкость: Часто
Сложность: Легко-Средне

9. Объясните CSS specificity (специфичность) и как она работает

Ответ: CSS specificity определяет, какие стили применяются, когда несколько правил нацелены на один и тот же элемент. Специфичность вычисляется путем подсчета селекторов:

• Inline стили: 1000 баллов
• IDs: 100 баллов каждый
• Классы, атрибуты, псевдоклассы: 10 баллов каждый
• Элементы, псевдоэлементы: 1 балл каждый

Примеры:

• #nav .button = 110 (1 ID + 1 класс)
• .header .nav a = 21 (2 класса + 1 элемент)
• div p = 2 (2 элемента)

Когда специфичность равна, побеждает последнее правило (каскадирование). !important переопределяет все, но его следует избегать. Рекомендуемый подход: Используйте классы для стилизации, избегайте IDs и !important.

Редкость: Часто
Сложность: Средне

10. Что такое Flexbox и когда вы бы его использовали?

Ответ: Flexbox - это одномерная система макета для размещения элементов вдоль одной оси (строки или столбца).

Свойства родителя (flex container):

• display: flex - включает flexbox
• flex-direction - row, column, row-reverse, column-reverse
• justify-content - выравнивание по главной оси (center, space-between, space-around)
• align-items - выравнивание по поперечной оси (center, flex-start, flex-end, stretch)
• flex-wrap - контролирует перенос (nowrap, wrap)

Свойства дочернего элемента (flex item):

• flex-grow - насколько элемент растет относительно других
• flex-shrink - насколько элемент сжимается
• flex-basis - начальный размер перед ростом/сжатием
• align-self - переопределяет align-items для отдельного элемента

Используйте Flexbox для: Панелей навигации, макетов карточек, центрирования элементов, равномерного распределения пространства, выравнивания элементов внутри контейнеров.

Редкость: Часто
Сложность: Средне

11. Что такое CSS Grid и чем он отличается от Flexbox?

Ответ: CSS Grid - это двумерная система макета для создания сложных макетов со строками И столбцами одновременно.

Ключевые различия:

• Grid: Двумерный (строки + столбцы), лучше всего подходит для макетов страниц
• Flexbox: Одномерный (одна ось), лучше всего подходит для компонентов

Свойства Grid:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 3 столбца */
  grid-template-rows: 100px auto 50px;
  grid-gap: 20px; /* или gap */
}

Когда использовать:

• Grid: Общие макеты страниц, дизайны в стиле журналов, сложные структуры сетки
• Flexbox: Панели навигации, карточки, компоненты внутри ячеек сетки
• Оба вместе: Grid для макро-макета, Flexbox для микро-макетов

Редкость: Часто
Сложность: Средне

12. Как вы центрируете div по горизонтали и вертикали?

Ответ:

Современные подходы (предпочтительно):

/* Flexbox */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid */
.parent {
  display: grid;
  place-items: center;
}

Устаревшие подходы:

/* Absolute positioning */
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Margin auto (только по горизонтали, требуется ширина) */
.child {
  margin: 0 auto;
  width: 300px;
}

Flexbox и Grid теперь являются стандартными решениями, поскольку они чище и более гибкие.

Редкость: Часто
Сложность: Легко-Средне

13. Объясните CSS positioning (позиционирование): static, relative, absolute, fixed и sticky

Ответ:

• Static (по умолчанию): Нормальный поток документа, без специального позиционирования
• Relative: Позиционируется относительно своей нормальной позиции с использованием top/right/bottom/left. Исходное пространство в потоке документа сохраняется. Часто используется в качестве контекста позиционирования для абсолютных дочерних элементов.
• Absolute: Удаляется из потока, позиционируется относительно ближайшего позиционированного предка (или viewport, если его нет). Не влияет на другие элементы.
• Fixed: Удаляется из потока, позиционируется относительно viewport. Остается на месте при прокрутке.
• Sticky: Гибрид relative и fixed. Действует как relative до порога прокрутки, затем становится fixed. Полезно для липких заголовков, которые начинаются в потоке.

Пример: Навигация, которая становится фиксированной после прокрутки, использует position: sticky; top: 0;

Редкость: Часто
Сложность: Средне

14. В чем разница между display: none, visibility: hidden и opacity: 0?

Ответ:

• display: none: Элемент полностью удален из потока документа, не занимает места, недоступен для программ чтения с экрана, нет pointer events
• visibility: hidden: Элемент невидим, но сохраняет место в макете, все еще в DOM, недоступен для программ чтения с экрана, нет pointer events
• opacity: 0: Элемент невидим, но сохраняет место, все еще в DOM, ВСЕ ЕЩЕ доступен для программ чтения с экрана, ВСЕ ЕЩЕ получает pointer events

Случаи использования:

• display: none - переключение видимости (модальные окна, выпадающие списки)
• visibility: hidden - поддержание макета при скрытии
• opacity: 0 - fade animations, сохранение интерактивности элемента

Редкость: Часто
Сложность: Легко-Средне

15. Что такое CSS pseudo-classes (псевдоклассы) и pseudo-elements (псевдоэлементы)? Приведите примеры.

Ответ:

Pseudo-classes (одно двоеточие) - Выбирают элементы на основе состояния или позиции:

a:hover { color: blue; }          /* наведение мыши */
input:focus { border: 2px solid blue; }  /* фокус клавиатуры */
li:nth-child(odd) { background: #eee; }  /* нечетные элементы списка */
button:disabled { opacity: 0.5; }  /* состояние disabled */

Другие примеры: :active, :checked, :first-child, :last-child, :nth-of-type()

Pseudo-elements (двойное двоеточие) - Стилизуют определенные части или вставляют контент:

p::first-line { font-weight: bold; }  /* первая строка абзаца */
p::first-letter { font-size: 2em; }   /* буквица */
.icon::before { content: "→"; }        /* вставить контент */
input::placeholder { color: gray; }    /* текст placeholder */

Pseudo-elements отлично подходят для декоративных элементов без добавления HTML.

Редкость: Часто
Сложность: Средне

16. Как создать адаптивные макеты? Объясните media queries (медиа запросы).

Ответ: Адаптивные макеты адаптируются к различным размерам экрана, используя:

Media Queries:

/* Мобильный первый подход (рекомендуется) */
.container { width: 100%; }

@media screen and (min-width: 768px) {
  .container { width: 750px; }  /* Планшет */
}

@media screen and (min-width: 1024px) {
  .container { width: 960px; }  /* Десктоп */
}

Общие breakpoints (точки останова):

• 320px: Маленький мобильный
• 768px: Планшет
• 1024px: Десктоп
• 1440px: Большой десктоп

Другие адаптивные методы:

• Fluid layouts (процентные значения, vw/vh единицы)
• Гибкие Flexbox и Grid
• Адаптивные изображения (max-width: 100%, srcset атрибут)
• min-width запросы (mobile-first) vs max-width (desktop-first)

Редкость: Часто
Сложность: Средне

17. Что такое z-index и как он работает?

Ответ: z-index контролирует порядок наложения позиционированных элементов (relative, absolute, fixed, sticky) вдоль оси z (спереди назад).

Ключевые моменты:

• Работает только на позиционированных элементах (не static)
• Более высокие значения появляются спереди
• Можно использовать отрицательные значения
• Значение по умолчанию - auto (фактически 0)
• Создает "stacking context" (контекст наложения), который влияет на то, как накладываются дочерние элементы

Распространенная ошибка:

.parent { position: relative; z-index: 1; }
.child { position: absolute; z-index: 9999; }

Дочерний элемент с z-index 9999 не может появиться над другим элементом с z-index 2, который находится за пределами контекста наложения родителя.

Редкость: Часто
Сложность: Средне

Основы JavaScript (15 вопросов)

18. Объясните разницу между var, let и const

Ответ:

• var: Function-scoped (область видимости - функция), hoisted (поднимается) и инициализируется как undefined, может быть переобъявлен, в значительной степени устарел в современном коде
• let: Block-scoped (область видимости - блок), hoisted, но в Temporal Dead Zone (TDZ) до объявления, не может быть переобъявлен в той же области видимости
• const: Block-scoped, hoisted, но в TDZ, должен быть инициализирован при объявлении, не может быть переназначен (но содержимое объекта/массива может быть изменено)

Рекомендуемые подходы:

• Используйте const по умолчанию
• Используйте let, когда вам нужно переназначить
• Никогда не используйте var в современном JavaScript

Пример:

const name = "Alice";     // Нельзя переназначить
let count = 0;            // Можно переназначить
count = 1;                // ОК
name = "Bob";             // Ошибка!

const user = { age: 25 };
user.age = 26;            // ОК - изменение свойства объекта
user = {};                // Ошибка - переназначение

Редкость: Часто
Сложность: Легко

19. Что такое closures (замыкания) и приведите практический пример?

Ответ: Замыкание - это когда внутренняя функция имеет доступ к переменным из области видимости ее внешней (охватывающей) функции, даже после того, как внешняя функция вернула значение. Внутренняя функция "замыкается" на этих переменных.

Пример:

function createCounter() {
  let count = 0;  // Private variable
  
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

Внутренняя функция сохраняет доступ к count, даже если createCounter закончила выполнение. Это обеспечивает конфиденциальность данных - count не может быть доступен напрямую извне.

Случаи использования: Конфиденциальность данных, фабрики функций, callbacks, паттерны модулей, обработчики событий

Редкость: Часто
Сложность: Средне

20. Объясните == vs === в JavaScript

Ответ:

• == (loose equality - нестрогое равенство): Выполняет type coercion (приведение типов) перед сравнением, преобразует типы для соответствия
• === (strict equality - строгое равенство): Проверяет и значение, И тип, без приведения типов

Примеры:

5 == '5'       // true (строка приведена к числу)
5 === '5'      // false (разные типы)

null == undefined   // true (особый случай)
null === undefined  // false (разные типы)

0 == false     // true (оба приведены)
0 === false    // false (число vs boolean)

Рекомендуемый подход: Всегда используйте === и !==, чтобы избежать неожиданных ошибок из-за приведения типов.

Редкость: Часто
Сложность: Легко

21. Что такое hoisting (поднятие) в JavaScript?

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

Различное поведение hoisting:

console.log(x);  // undefined (hoisted, initialized)
var x = 5;

console.log(y);  // ReferenceError (hoisted but in TDZ)
let y = 5;

sayHello();      // "Hello!" (function fully hoisted)
function sayHello() {
  console.log("Hello!");
}

sayHi();         // TypeError (not a function)
var sayHi = function() {
  console.log("Hi!");
};

Ключевые моменты:

• var объявления поднимаются и инициализируются как undefined
• let/const поднимаются, но остаются неинициализированными (Temporal Dead Zone)
• Function declarations (объявления функций) полностью поднимаются (включая реализацию)
• Function expressions (функциональные выражения) не полностью поднимаются

Редкость: Часто
Сложность: Средне

22. Объясните ключевое слово this и чем оно отличается в arrow functions (стрелочных функциях)

Ответ: this относится к контексту, в котором выполняется функция. Его значение зависит от ТОГО, как вызывается функция.

Обычные функции:

const obj = {
  name: "John",
  greet: function() {
    console.log(this.name);  // "John"
  }
};
obj.greet();  // this = obj

const greet = obj.greet;
greet();  // this = undefined (strict mode) or window

Стрелочные функции:

const obj = {
  name: "John",
  greet: () => {
    console.log(this.name);  // undefined
  }
};
obj.greet();  // this = lexical scope (enclosing context)

Ключевые различия:

• Обычные функции: this определяется местом вызова
• Стрелочные функции: this лексически наследуется из охватывающей области видимости
• Стрелочные функции не имеют своих собственных this, arguments или super

Случай использования: Стрелочные функции отлично подходят для callbacks, где вы хотите сохранить внешний this:

class Timer {
  start() {
    setTimeout(() => {
      console.log(this);  // Timer instance (lexical)
    }, 1000);
  }
}

Редкость: Часто
Сложность: Средне-Сложно

23. Что такое template literals (шаблонные литералы) и каковы их преимущества?

Ответ: Template literals - это строковые литералы, использующие обратные кавычки (`), которые поддерживают string interpolation (интерполяцию строк) и multi-line strings (многострочные строки).

Особенности:

const name = "Alice";
const age = 25;

// String interpolation
const message = `Hello, my name is ${name} and I'm ${age} years old.`;

// Multi-line strings
const html = `
  <div>
    <h1>${title}</h1>
    <p>${content}</p>
  </div>
`;

// Expression evaluation
const price = `Total: $${(quantity * unitPrice).toFixed(2)}`;

Преимущества:

• Более чистый синтаксис, чем конкатенация строк
• Нет необходимости в \n для переносов строк
• Можно встраивать любое JavaScript выражение с помощью ${}
• Лучше для генерации HTML/CSS

Редкость: Часто
Сложность: Легко

24. Объясните Promises (промисы) и их три состояния

Ответ: Promise представляет собой возможное завершение (или сбой) асинхронной операции и ее результирующее значение.

Три состояния:

1. Pending (Ожидание): Начальное состояние, операция не завершена
2. Fulfilled (Выполнено): Операция успешно завершена
3. Rejected (Отклонено): Операция не удалась

Пример:

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve({ data: "User info" });
    } else {
      reject(new Error("Failed to fetch"));
    }
  }, 1000);
});

fetchData
  .then(result => console.log(result))
  .catch(error => console.error(error))
  .finally(() => console.log("Done"));

Преимущества по сравнению с callbacks:

• Избегает callback hell (ада коллбэков)
• Цепочки с .then()
• Лучшая обработка ошибок с .catch()
• Можно использовать Promise.all() для параллельных операций

Редкость: Часто
Сложность: Средне

25. Что такое async/await и как это улучшает читаемость кода?

Ответ: async/await - это syntactic sugar (синтаксический сахар), построенный на Promises, который делает асинхронный код похожим на синхронный и ведет себя как синхронный.

Пример:

// С Promises (сложнее читать)
function fetchUserData() {
  return fetch('/api/user')
    .then(response => response.json())
    .then(data => {
      return fetch(`/api/posts/${data.id}`);
    })
    .then(response => response.json())
    .catch(error => console.error(error));
}

// С async/await (чище)
async function fetchUserData() {
  try {
    const response = await fetch('/api/user');
    const user = await response.json();
    
    const postsResponse = await fetch(`/api/posts/${user.id}`);
    const posts = await postsResponse.json();
    
    return posts;
  } catch (error) {
    console.error(error);
  }
}

Ключевые моменты:

• async функция всегда возвращает Promise
• await приостанавливает выполнение до тех пор, пока Promise не разрешится
• Используйте try/catch для обработки ошибок
• Делает последовательные операции более понятными
• Обработка ошибок более естественна, чем .catch()

Редкость: Часто
Сложность: Средне

26. Объясните Event Loop (цикл событий) и как JavaScript обрабатывает асинхронные операции

Ответ: JavaScript является однопоточным, но обрабатывает асинхронные операции через механизм Event Loop.

Компоненты:

1. Call Stack (Стек вызовов): Выполняет синхронный код (LIFO)
2. Web APIs: Обрабатывают асинхронные операции (setTimeout, fetch, DOM events)
3. Callback Queue (Task Queue - очередь коллбэков): Содержит коллбэки из Web APIs
4. Microtask Queue (очередь микрозадач): Содержит коллбэки Promise (более высокий приоритет)
5. Event Loop: Перемещает задачи из очередей в стек вызовов, когда стек пуст

Порядок выполнения:

console.log('1');

setTimeout(() => console.log('2'), 0);

Promise.resolve().then(() => console.log('3'));

console.log('4');

// Output: 1, 4, 3, 2
// Explanation:
// - Sync code (1, 4) runs first
// - Microtasks (Promise) run before macrotasks
// - Macrotasks (setTimeout) run last

Порядок выполнения: Call Stack → Microtask Queue → Callback Queue (Macrotasks)

Редкость: Часто
Сложность: Сложно

27. Как вы выбираете и манипулируете DOM элементами?

Ответ:

Методы выбора:

// Modern (preferred)
const element = document.querySelector('#myId');
const elements = document.querySelectorAll('.myClass');
const firstItem = document.querySelector('.list-item');

// Legacy (still valid)
const elem = document.getElementById('myId');
const elems = document.getElementsByClassName('myClass');
const tags = document.getElementsByTagName('div');

Манипуляции:

// Content
element.textContent = 'New text';
element.innerHTML = '<span>HTML content</span>';

// Styling
element.style.color = 'blue';
element.style.backgroundColor = '#eee';

// Classes
element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('visible');
element.classList.contains('active');

// Attributes
element.setAttribute('data-id', '123');
element.getAttribute('data-id');

// Creating elements
const newDiv = document.createElement('div');
newDiv.textContent = 'Hello';
document.body.appendChild(newDiv);

Редкость: Часто
Сложность: Легко

28. Объясните event delegation (делегирование событий) и почему это полезно

Ответ: Event delegation - это присоединение одного event listener (слушателя событий) к родительскому элементу вместо нескольких слушателей к дочерним элементам, используя event bubbling (всплытие событий).

Без delegation (неэффективно):

document.querySelectorAll('.item').forEach(item => {
  item.addEventListener('click', handleClick);
});

С delegation (эффективно):

document.getElementById('list').addEventListener('click', (e) => {
  if (e.target.matches('.item')) {
    handleClick(e);
  }
});

Преимущества:

• Лучшая производительность: Один слушатель vs много
• Работает с динамическими элементами: Автоматически обрабатывает элементы, добавленные позже
• Меньшее использование памяти: Меньше event listeners
• Более чистый код: Централизованная обработка событий

Случай использования: Списки, где элементы можно добавлять/удалять динамически (списки дел, корзины покупок, разделы комментариев)

Редкость: Часто
Сложность: Средне

29. Что такое event bubbling (всплытие событий)? Как остановить распространение?

Ответ: Event bubbling - это когда событие, вызванное на дочернем элементе, "всплывает" через его предков к корню документа.

Три фазы:

1. Capturing Phase (Фаза захвата): Событие перемещается вниз от window к target (целевому элементу)
2. Target Phase (Целевая фаза): Событие достигает target element
3. Bubbling Phase (Фаза всплытия): Событие всплывает от target к window (по умолчанию)

Пример:

<div id="parent">
  <button id="child">Click me</button>
</div>

<script>
document.getElementById('parent').addEventListener('click', () => {
  console.log('Parent clicked');
});

document.getElementById('child').addEventListener('click', (e) => {
  console.log('Child clicked');
  // Event всплывает к родителю
});
// Clicking button logs: "Child clicked", then "Parent clicked"
</script>

Остановка распространения:

element.addEventListener('click', (e) => {
  e.stopPropagation();  // Останавливает всплытие
  e.preventDefault();    // Предотвращает поведение по умолчанию (отправка формы, навигация по ссылке)
});

Редкость: Часто
Сложность: Средне

30. Объясните destructuring (деструктуризацию) для объектов и массивов

Ответ: Destructuring извлекает значения из массивов или свойства из объектов в отдельные переменные.

Деструктуризация массива:

const colors = ['red', 'green', 'blue', 'yellow'];

const [first, second, ...rest] = colors;
// first = 'red'
// second = 'green'
// rest