Frontend | Вопросы собесов

🤔 Как предотвратить рекурсию?

Чтобы избежать бесконечной рекурсии:
- Всегда нужно базовое условие выхода, которое не вызывает рекурсивный вызов.
- Использовать ограничения по глубине вызова.
- Проверять входные параметры.
- Можно заменить рекурсию на итеративный подход (цикл), если глубина вызовов слишком большая.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Какие типы данных существуют?

Существует несколько основных типов данных, которые можно разделить на две категории: примитивные типы и объекты.

🚩Примитивные типы:

🟠Number
представляет как целые числа, так и числа с плавающей точкой. Например, 42 или 3.14.

🟠String
представляет текстовые данные. Строки неизменяемы. Пример: "Привет, мир!".

🟠Boolean
имеет два значения, true и false, и используется для работы с логическими операциями.

🟠Undefined
переменная имеет тип undefined, если она была объявлена, но ей не было присвоено никакого значения.

🟠Null
специальное значение, которое представляет собой "ничего" или "пустое значение". Важно отметить, что null является объектом из-за ошибки в ранних версиях JavaScript.

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

🟠BigInt
тип данных, позволяющий работать с целыми числами произвольной точности. Введен для представления чисел, которые больше, чем максимальное значение, которое может представить тип Number.

🚩Объекты

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

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое SVG?

SVG (Scalable Vector Graphics) — это векторный графический формат, основанный на XML. Он позволяет отображать графику (фигуры, линии, текст) с возможностью масштабирования без потери качества.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Для чего нужна методология в html?

Методология в HTML (и в веб-разработке в целом) нужна для организации и структурирования кода так, чтобы он был понятным, поддерживаемым и масштабируемым. Она помогает разработчикам работать в команде, избегать хаоса в проекте и ускоряет развитие продукта, делая код простым для чтения и изменения.

🚩Зачем это нужно

🟠Понятность кода
Без единого подхода код может стать "кашей" из классов и тегов. Методология помогает дать элементы структуры, которые легко понять не только автору кода, но и другим разработчикам.

🟠Снижение ошибок
Если есть четкие правила, уменьшается риск дублирования, неправильных имен или конфликтов стилей.

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

🟠Легкость сопровождения
С методологией легко найти нужные элементы и вносить изменения.

🚩Примеры популярных методологий
🟠БЭМ (Блок, Элемент, Модификатор)
Одна из самых популярных методологий для HTML и CSS.
- Она предлагает структурировать классы так:
- Блок: независимый компонент (например, menu).
- Элемент: часть блока (например, menu__item).
- Модификатор: вариант блока или элемента (например, menu__item--active).
Пример кода

     <div class="menu">
       <div class="menu__item menu__item--active">Главная</div>
       <div class="menu__item">О нас</div>
       <div class="menu__item">Контакты</div>
     </div>
     

🟠Atomic Design
Основана на создании интерфейсов из "атомов" (простейшие элементы, например, кнопки), "молекул" (комбинации атомов, например, форма) и "организмов" (сложные компоненты, например, шапка сайта).
Пример

     <!-- Атом -->
     <button class="button">Клик</button>
     <!-- Молекула -->
     <div class="form">
       <label class="form__label">Имя</label>
       <input class="form__input" type="text">
     </div>
     

🟠SMACSS (Scalable and Modular Architecture for CSS)
Делит код на модули (например, глобальные стили, компоненты, утилиты) и предлагает поддерживать независимость и минимизацию дублирования кода.

Ставь 👍 и забирай 📚 Базу знаний

🤔 Как отменить обтекание картинки текстом?

Используется свойство clear, которое говорит элементу не обтекать плавающие элементы. Можно применить clear: both или вставить блок с этим стилем после float-элемента.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Какие особенности слежения за "глубокими" объектами?

Когда мы отслеживаем изменения в объектах (например, в React, Vue или MobX), важно понимать, что JavaScript не умеет автоматически следить за вложенными свойствами. Это называется глубокое слежение (deep watching).

Проблема: поверхностное слежение (`shallow watching`)

JavaScript сравнивает только ссылки на объекты, а не их содержимое.

const obj = { user: { name: "Иван" } };
const copy = obj; 

copy.user.name = "Петр"; 
console.log(obj.user.name); // "Петр" (оба объекта ссылаются на одно и то же)

🚩Глубокое копирование vs поверхностное

Обычный Object.assign() или spread-оператор ({ ...obj }) делают поверхностное копирование:

const obj = { user: { name: "Иван" } };
const shallowCopy = { ...obj };

shallowCopy.user.name = "Петр";
console.log(obj.user.name); // "Петр" 😱 (изменился оригинал!)

Для глубокого копирования можно использовать structuredClone() или JSON.parse(JSON.stringify(obj)):

const deepCopy = structuredClone(obj);
deepCopy.user.name = "Петр";

console.log(obj.user.name); // "Иван" ✅ (оригинал не изменился)

🚩Как следить за глубокими объектами?

🟠React: следим через `useState` и `useEffect`
В React состояние обновляется только при изменении ссылки (shallow compare).

const [user, setUser] = useState({ name: "Иван" });

useEffect(() => {
  console.log("Имя изменилось:", user.name);
}, [user]); // Работает только если user — новый объект!

// НЕ сработает:
user.name = "Петр"; // user остался тем же объектом

Решение – создавать новый объект при изменении:

setUser(prev => ({ ...prev, name: "Петр" }));

🟠Vue: `watch` vs `watchEffect` (глубокое слежение)

Обычный watch следит только за первой вложенностью

watch(user, (newValue) => {
  console.log("Изменено:", newValue);
});

Глубокое слежение (deep: true)

watch(user, (newValue) => {
  console.log("Изменено:", newValue);
}, { deep: true });

Ставь 👍 и забирай 📚 Базу знаний

🤔 Как очистить форму?

- Установить значения всех полей в "", null или undefined.
- Использовать reset() на DOM-форме.
- В фреймворках — сброс v-model/state.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что такое meta теги?

Meta-теги – это специальные HTML-теги, которые содержат метаинформацию о веб-странице. Они располагаются внутри <head> и не отображаются на самой странице, но помогают браузерам, поисковым системам и социальным сетям правильно обрабатывать и отображать страницу.

🚩Зачем нужны meta-теги?

Улучшают SEO (поисковую оптимизацию)
Управляют отображением в соцсетях и поисковиках
Настраивают адаптивность страницы (например, на мобильных устройствах)
Определяют кодировку, язык и авторство страницы

🚩Основные meta-теги с примерами

Кодировка страницы

<meta charset="UTF-8">

Описание страницы (SEO)

<meta name="description" content="Лучший сайт с рецептами вкусных блюд!">

Ключевые слова (SEO, устарело)

<meta name="keywords" content="рецепты, еда, кулинария, блюда">

Автор страницы

<meta name="author" content="Иван Иванов">

Запрет индексации страницы

<meta name="robots" content="noindex, nofollow">

Адаптивность на мобильных устройствах

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Социальные сети (Open Graph, Twitter Cards)
Facebook и другие соцсети (Open Graph)

<meta property="og:title" content="Вкусные рецепты">
<meta property="og:description" content="Попробуйте лучшие блюда со всего мира!">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">

Twitter-карточки

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Рецепты для гурманов">
<meta name="twitter:image" content="https://example.com/image.jpg">

Ставь 👍 и забирай 📚 Базу знаний

🤔 Как мы можем заставить элемент быть выше другого?

Через z-index, но только если элемент позиционирован (relative, absolute, fixed, sticky).

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Опасности использования `innerHTML` в JavaScript

innerHTML – это свойство, которое позволяет вставлять HTML-код внутрь элемента как строку. Однако оно небезопасно и может привести к серьезным проблемам.

document.getElementById("content").innerHTML = "<h1>Привет!</h1>";

🟠Уязвимость: XSS-атаки (внедрение вредоносного кода)
Если innerHTML получает данные от пользователя (например, из формы или URL), хакер может вставить вредоносный JavaScript-код.

const userInput = "<script>alert('Вас взломали!');</script>";
document.getElementById("content").innerHTML = userInput;

🟠Проблемы с безопасностью CSP (Content Security Policy)
Если в веб-приложении включена CSP (защита от XSS), то innerHTML может нарушать политику безопасности.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

🟠Случайное удаление обработчиков событий
Если заменить содержимое элемента через innerHTML, все обработчики событий внутри него удалятся.

document.getElementById("btn").addEventListener("click", () => {
  alert("Нажато!");
});

document.getElementById("container").innerHTML = "<button id='btn'>Клик</button>";
document.getElementById("btn").click(); // Ошибка, обработчик удален

Ставь 👍 и забирай 📚 Базу знаний

🤔 Какое событие сработает при потере фокуса элементом формы?

Событие blur — срабатывает, когда элемент теряет фокус (например, при переходе к другому полю).

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как добавить слушатель события?

Это важный аспект работы с веб-приложениями, так как позволяет реагировать на действия пользователя, такие как клики, ввод текста, прокрутка и другие. В современных фреймворках и библиотеке JavaScript есть несколько способов добавить слушатели событий.

🚩Почему это нужно?

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

🚩Как это используется?

Рассмотрим три основных подхода к добавлению слушателей событий: в чистом JavaScript, в React и с использованием jQuery.

🟠Чистый JavaScript
Для добавления слушателя события используется метод addEventListener.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Event Listener Example</title>
</head>
<body>
  <button id="myButton">Click me</button>

  <script>
    const button = document.getElementById('myButton');
    
    button.addEventListener('click', () => {
      alert('Button was clicked!');
    });
  </script>
</body>
</html>

🟠React
Обработчики событий добавляются непосредственно к JSX-элементам с использованием специальных атрибутов, таких как onClick, onChange и т.д.

import React from 'react';

function App() {
  const handleClick = () => {
    alert('Button was clicked!');
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default App;

🟠jQuery
Если вы используете его, добавление слушателей событий также очень просто и удобно.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Event Listener Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="myButton">Click me</button>

  <script>
    $(document).ready(function() {
      $('#myButton').on('click', function() {
        alert('Button was clicked!');
      });
    });
  </script>
</body>
</html>

🚩Почему это удобно и важно

🟠Интерактивность
Позволяет создавать динамичные и отзывчивые интерфейсы.
🟠Гибкость
Возможность реагировать на различные действия пользователей.
🟠Удобство
В каждом подходе (чистый JavaScript, React, jQuery) есть свои удобства и особенности, которые помогают решать задачи более эффективно.

Ставь 👍 и забирай 📚 Базу знаний

В нашем канале много ценного для разработчиков по подготовке к собесам👇

Уже 2 года мы развиваем комьюнити, где 10000+ разработчиков, и вместе мы тренируем собеседования и выжимаем из рынка максимум!

Полные разборы собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ

Стримы с гостями и записями:
Как проходить собеседование на английском
Как решать livecoding задачи
Прокачали более 30 резюме вместе с Юрой

Сборники вопросов по темам:
Кибербезопасность на собеседовании
Все вопросы по React на собеседовании
Все вопросы по TypeScript на собеседовании
Как решать задачи двумя указателями
Вопросы с Vue собеседований
Вопросы по сетям и методологиям с 200 собесов
Вопросы по JS с 200 собесов
Какие задачи спрашивают на livecoding чаще

Полезные посты:
Job-борды для поиска работы
Запись нашего самого кринжового собеса
Новый HTTP метод QUERY

Статистика по рынку:
Июль, Июнь, Май, Апрель, Март

Текущие рекорды участников:
Оффер 6800$ net с релокацией на Кипр
Из Шанхая до 4500$ в американскую компанию
Получили 427 000 на руки в Сбер и отказались
Выбили 380 000 на руки в банк и приняли!
Наши встречи в Питере, Москве, Шанхае

Как я прохожу собесы на ютубе:
Оффер 260к на Go в Empoycity
Оффер 300к на Go в "Системная интеграция"
Отжал 390 gross + 25% премии в Иннотех
Оффер на лида 415 gross + 20% премии в ПСБ

А еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме)

Подписывайся 👇
https://t.me/frontend_punks

Реклама, erid: 2W5zFHWEhaH ИП Галактионов Тихон Витальевич, ИНН 771618975809

🤔 Где используются Promise?

Promise применяется при асинхронных операциях, таких как:
- fetch и любые HTTP-запросы
- Асинхронные таймеры (через обёртки)
- Файловые операции (в Node.js)
- Интерфейсы IndexedDB
- Асинхронные анимации, Web APIs

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

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

Семантические коммиты – это соглашение о формате сообщений коммитов в системе контроля версий (обычно Git), которое помогает делать историю изменений более понятной и удобной для автоматического анализа.

Обычно используется стандарт Conventional Commits, который вводит строгую структуру сообщений коммитов.

🚩Формат семантического коммита

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

Основной шаблон

<тип>(<область>): <краткое описание>

🚩Основные типы коммитов

🟠feat
добавление новой функциональности
🟠fix
исправление ошибки
🟠docs
изменение документации
🟠style
исправления, не влияющие на логику (например, форматирование)
🟠refactor
переработка кода без изменения функциональности
🟠test
добавление или обновление тестов
🟠chore
изменения, не влияющие на код (например, обновление зависимостей)

🚩Примеры

1⃣Добавление новой функции

feat(auth): добавлена аутентификация через Google

2⃣Исправление ошибки

fix(login): исправлен баг с неверным редиректом

3⃣Улучшение кода без изменения

refactor(api): оптимизирован алгоритм фильтрации данных

4⃣Обновление документации

docs(readme): добавлены инструкции по развертыванию

Ставь 👍 и забирай 📚 Базу знаний

🤔 Как считается вес селектора?

Вес селектора (специфичность) – это правило, по которому браузер определяет, какой стиль применить, если есть несколько конфликтующих селекторов.

( inline, id, class/атрибут/псевдокласс, элемент/псевдоэлемент )

Пример

/* Специфичность: (0, 1, 0, 0) */
#header { color: red; }

/* Специфичность: (0, 0, 1, 0) */
.header { color: blue; }

/* Специфичность: (0, 0, 0, 1) */
h1 { color: green; }

🟠Примеры сравнения специфичности
Пример 1

h1 { color: red; } /* (0,0,0,1) */
.title { color: blue; } /* (0,0,1,0) */

Пример 2

h1 { color: red; } /* (0,0,0,1) */
#main { color: blue; } /* (0,1,0,0) */

Пример 3 (комбинированные селекторы)

h1.title { color: red; } /* (0,0,1,1) */
#main h1 { color: blue; } /* (0,1,0,1) */

Пример 4 (инлайн-стиль всегда сильнее)

<h1 style="color: green;">Заголовок</h1>

h1 { color: red; } /* (0,0,0,1) */
.title { color: blue; } /* (0,0,1,0) */
#main { color: purple; } /* (0,1,0,0) */

🟠Как повысить вес селектора?
Добавить ID (но не злоупотреблять). Использовать более специфичные селекторы (например, .header h1 вместо h1). Использовать !important (но осторожно!).

h1 { color: red !important; } /* Всегда будет красным */

Ставь 👍 и забирай 📚 Базу знаний

🤔 В каком случае нужно SPA?

SPA (Single Page Application) нужен, когда:
- требуется динамичный интерфейс без перезагрузки страницы;
- важен быстрый отклик UI;
- есть много интерактивных действий на клиенте;
- приложение похоже на десктопное по поведению (например, админки, CRM, почта).
Не нужен — для SEO-критичных лендингов и новостных сайтов.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как уничтожить объект web worker?

В JavaScript, чтобы уничтожить объект Web Worker, необходимо использовать метод terminate(). Этот метод останавливает выполнение worker'а, освобождает связанные с ним ресурсы и завершает его работу. После вызова terminate() объект worker больше не может быть использован.

🚩Зачем уничтожать Web Worker?

Web Worker позволяет выполнять тяжелые операции в фоновом потоке, не блокируя основной поток (UI-поток). Однако, если worker больше не нужен, он продолжает существовать и занимает ресурсы (память, процессорное время). Чтобы избежать утечек памяти и оптимизировать работу приложения, важно уничтожать worker, когда он больше не используется.

🚩Как использовать `terminate()`?

Вы вызываете метод terminate() на экземпляре объекта worker. Это мгновенно останавливает выполнение фонового скрипта.

// Создаем worker
const myWorker = new Worker('worker.js');

// Выполняем какие-то операции через worker
myWorker.postMessage('Hello, worker!');

// Завершаем работу worker, когда он больше не нужен
myWorker.terminate();

🚩Важно помнить

1⃣После вызова terminate() worker полностью уничтожается и больше не может отправлять или получать сообщения.
2⃣Если есть обработчики событий, привязанные к worker (например, onmessage), они автоматически удаляются.
3⃣Доступ к worker после вызова terminate() не приведет к ошибке, но никакие операции через него больше работать не будут.

const worker = new Worker('worker.js');

// Отправляем сообщение
worker.postMessage('Start working');

// Завершаем работу worker
worker.terminate();

// Попытка отправить сообщение после уничтожения worker
worker.postMessage('Will this work?'); // Ничего не произойдет, worker уже завершен

🚩 Когда еще уничтожается worker?

Если вы перезагружаете страницу или закрываете вкладку, все web worker автоматически уничтожаются браузером. Однако в рамках текущей сессии ответственность за уничтожение лежит на разработчике.

Ставь 👍 и забирай 📚 Базу знаний

🤔 Как следует оформлять страницу, в которой контент может быть на разных языках?

- Указывать атрибут lang в <html> и в текстовых блоках;
- Использовать hreflang в <link> и <a> для указания языковых версий;
- Хранить переводы отдельно и подгружать в зависимости от языка (через i18n).

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Зачем нужен ref?

В React ref (сокращение от reference) используется для доступа к DOM-элементам или компонентам напрямую. Он позволяет взаимодействовать с элементами, которые были созданы в процессе рендеринга, предоставляя механизм для манипуляции с ними, получения их размеров, положения или вызова методов у компонент. Это особенно полезно в ситуациях, когда необходимо выполнить операции, которые не могут быть выполнены исключительно через декларативный подход React.

🚩Основные случаи использования `ref`

Доступ к DOM-элементам:
Использование в сторонних библиотеках:
Сохранение состояния вне дерева компонентов:

🚩Примеры использования `ref`

Доступ к DOM-элементам
Установка фокуса на элемент

import React, { useRef, useEffect } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    // Установить фокус на текстовое поле
    inputEl.current.focus();
  };

  return (
    <div>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Установить фокус</button>
    </div>
  );
}

export default TextInputWithFocusButton;

Получение размеров элемента
Измерение элемента:

import React, { useRef, useEffect, useState } from 'react';

function MeasureDiv() {
  const divRef = useRef(null);
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  useEffect(() => {
    if (divRef.current) {
      const { width, height } = divRef.current.getBoundingClientRect();
      setDimensions({ width, height });
    }
  }, []);

  return (
    <div>
      <div ref={divRef} style={{ width: '100px', height: '100px', backgroundColor: 'lightblue' }}>
        Измеряемый элемент
      </div>
      <p>Ширина: {dimensions.width}px, Высота: {dimensions.height}px</p>
    </div>
  );
}

export default MeasureDiv;

Использование в классовых компонентах
Доступ к методам компонента:

import React, { Component } from 'react';

class CustomComponent extends Component {
  customMethod() {
    console.log('Метод компонента вызван');
  }

  render() {
    return <div>Custom Component</div>;
  }
}

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.customComponentRef = React.createRef();
  }

  handleClick = () => {
    this.customComponentRef.current.customMethod();
  };

  render() {
    return (
      <div>
        <CustomComponent ref={this.customComponentRef} />
        <button onClick={this.handleClick}>Вызвать метод компонента</button>
      </div>
    );
  }
}

export default ParentComponent;

🚩Важно помнить

Прямое управление DOM может нарушить декларативный подход React, поэтому его следует использовать только тогда, когда это действительно необходимо.
Когда необходимо использовать сторонние библиотеки, которые требуют прямого доступа к DOM-элементам.
Состояние приложения и его логика должны по возможности управляться через состояния и пропсы React. ref следует использовать для случаев, которые не могут быть решены этим способом.

Ставь 👍 и забирай 📚 Базу знаний