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

Быстрый старт в кибербез: с нуля до первой работы Ищешь перспективную профессию с быстрым ростом зарплаты? Кибербезопасность — востребованная сфера с острой нехваткой специалистов. Здесь реально выйти на доход от 70 000 уже за полгода. Даже без опыта и образования в ИТ. С чего начать и как построить карьеру, расскажут эксперты Солара на вебинаре 14 ноября в 19:00: ✅ Какие профессии доступны новичкам без опыта и как быстро их освоить. ✅ Как найти свою первую работу. ✅ Какие ошибки допускают новички в начале пути. Всем участникам подарим пошаговый план по саморазвитию и быстрому старту в кибербезопасность. Присоединяйтесь! Зарегистрироваться #реклама 16+ rt-solar.ru О рекламодателе

🤔 Какие знаешь методы итерации? - for, while, do...while — базовые; - for...in — по ключам объекта; - for...of — по значениям итерируемых коллекций; - forEach, map, filter, reduce, some, every — методы массива. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как понять что код работает корректно? Чтобы понять, что код работает корректно, нужно провести его тестирование, что включает в себя проверку кода на соответствие ожидаемым результатам в различных ситуациях. Вот основные подходы и шаги: 🚩Проверка требований Прежде чем тестировать код, нужно понять, что он должен делать. Обычно для этого используют техническое задание или описание требований. Например: если вы пишете функцию, которая складывает два числа, то ожидается, что при вызове add(2, 3) результат будет 5. 🚩Тестирование (Test Cases) Тестирование предполагает выполнение кода с разными входными данными и проверку, что результат соответствует ожиданиям. 🟠Ручное тестирование Вы запускаете код с различными значениями и проверяете результаты. 🟠Автоматизированное тестирование Пишете тестовые скрипты, которые автоматически проверяют корректность работы.

function add(a, b) {
    return a + b;
}

Мы можем протестировать её так

console.log(add(2, 3)); // Должно вывести 5
console.log(add(0, 0)); // Должно вывести 0
console.log(add(-1, -1)); // Должно вывести -2

Однако лучше использовать автоматическое тестирование. Например, с помощью Jest

test('add function works correctly', () => {
    expect(add(2, 3)).toBe(5);
    expect(add(0, 0)).toBe(0);
    expect(add(-1, -1)).toBe(-2);
});

🚩Обработка крайних случаев Иногда код может работать корректно для обычных данных, но давать сбои в "необычных" случаях. Эти ситуации называют крайними случаями. Пустой ввод (например, add() вместо двух чисел). Очень большие числа. Неправильные типы данных (например, строка вместо числа).

   console.log(add()); // undefined или ошибка
   console.log(add('2', 3)); // Может вернуть '23' или ошибку, если функция не проверяет типы
   

🚩Отладка (Debugging) Если код не работает как надо, нужно использовать инструменты для отладки 🟠console.log() Вывод данных для проверки логики. 🟠Инструменты разработчика в браузере Для работы с JavaScript в реальном времени. 🟠Дебаггер Позволяет пошагово выполнять код. 🚩Проверка производительности Иногда корректная работа кода связана не только с правильным результатом, но и с его скоростью. Если код работает слишком медленно, это может быть проблемой. Инструменты, такие как performance.now() в JavaScript, позволяют измерять время выполнения функций. 🚩Code Reviews и тестирование пользователями После тестов полезно показать код другим разработчикам для проверки (code review) или провести тестирование с реальными пользователями. Это позволяет найти ошибки, которые могли быть упущены. Ставь 👍 и забирай 📚 Базу знаний

🤔 Почему у нас в CSS нет селектора на родителя? Потому что CSS работает по потоку сверху вниз (parent → child). Добавление селектора на родителя вызвало бы рекурсивные циклы, так как: - ребёнок должен знать родителя; - родитель зависит от стилей ребёнка; - это нарушает производительность и модель каскада. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 С помощью чего можно рассчитать идентификатор в js? В JavaScript есть несколько способов сгенерировать уникальный идентификатор (ID), в зависимости от требований: 🟠 Генерация UUID UUID (универсально уникальный идентификатор) – это 128-битное число, представленное строкой в формате xxxxxxxx-xxxx-Mxxx-Nxxx-xxxxxxxxxxxx. Генерация с помощью crypto.randomUUID() (современный способ)

const id = crypto.randomUUID();
console.log(id); // Например: "3d593c8e-7a34-45f7-9a14-2f5f5788d4ec"

Использование библиотеки uuid

import { v4 as uuidv4 } from 'uuid';

const id = uuidv4();
console.log(id); // "f47ac10b-58cc-4372-a567-0e02b2c3d479"

🟠Хеш-функции (SHA, MD5) Если нужно вычислить уникальный идентификатор на основе входных данных (например, строки или объекта), можно использовать хеш-функции. SHA-256 через crypto.subtle

async function generateHash(input) {
    const encoder = new TextEncoder();
    const data = encoder.encode(input);
    const hashBuffer = await crypto.subtle.digest('SHA-256', data);
    return [...new Uint8Array(hashBuffer)].map(b => b.toString(16).padStart(2, '0')).join('');
}

generateHash("hello").then(console.log);
// Например: "2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824"

🟠Генерация случайного идентификатора Если нужна просто случайная строка, можно использовать Math.random(). Базовая генерация ID

const id = Math.random().toString(36).substring(2, 10);
console.log(id); // Например: "5g7f8a1z"

Более безопасный вариант с crypto.getRandomValues()

function generateRandomId(length = 16) {
    const array = new Uint8Array(length);
    crypto.getRandomValues(array);
    return [...array].map(b => b.toString(16).padStart(2, '0')).join('');
}

console.log(generateRandomId(8)); // Например: "a3f9b8c7"

🟠Инкрементальные ID Если нужно просто увеличивающееся число (например, ID для записей в массиве), можно использовать счётчик

let counter = 0;
function generateIncrementalId() {
    return ++counter;
}

console.log(generateIncrementalId()); // 1
console.log(generateIncrementalId()); // 2
console.log(generateIncrementalId()); // 3

🟠Хеширование строки (например, объекта) Можно создать ID, основываясь на JSON-объекте.

function hashObject(obj) {
    return JSON.stringify(obj)
        .split("")
        .reduce((hash, char) => {
            return ((hash << 5) - hash) + char.charCodeAt(0);
        }, 0)
        .toString(16);
}

console.log(hashObject({ name: "Alice", age: 25 })); // Например: "-3d4e5f"

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

🤔 Как определить, что состояние является глобальным? Если данные используются в нескольких независимых компонентах или влияют на поведение всего приложения (например, авторизация, тема, язык), это глобальное состояние. Такие данные лучше выносить в централизованное хранилище. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как общаться между iframe и самой страницой? Общение между iframe и родительской страницей может происходить с помощью: Метода postMessage (лучший способ) Доступа к window.frames или window.parent (если тот же домен) Передачи данных через localStorage или cookies 🟠`postMessage` – безопасный способ для разных доменов Метод window.postMessage() позволяет передавать сообщения между разными окнами (iframe, popup, другие вкладки) даже если они на разных доменах. 🚩Передача данных из `iframe` в родительскую страницу *Код в iframe (child.html)

// Отправляем сообщение родительскому окну
window.parent.postMessage({ type: "hello", data: "Привет, родитель!" }, "*");

Код в родительской странице (index.html)

window.addEventListener("message", (event) => {
    console.log("Получено сообщение от iframe:", event.data);
});

* в postMessage означает, что сообщение отправляется любому домену. Лучше указывать конкретный, например:

window.parent.postMessage({ type: "hello" }, "https://example.com");

🚩Передача данных из родителя в `iframe` Код в родительской странице (index.html)

const iframe = document.getElementById("myIframe");

// Ждём, когда iframe загрузится
iframe.onload = () => {
    iframe.contentWindow.postMessage({ type: "greeting", data: "Привет, iframe!" }, "*");
};

Код в iframe (child.html)

window.addEventListener("message", (event) => {
    console.log("Получено сообщение от родителя:", event.data);
});

🚩Доступ к `window.frames` и `window.parent` (только если тот же домен!) Если iframe и основная страница находятся на одном домене, можно обращаться к их window напрямую. Родительская страница → iframe

const iframe = document.getElementById("myIframe");

// Получаем объект `window` внутри `iframe`
iframe.contentWindow.document.body.style.backgroundColor = "lightblue";

iframe → Родительская страница

console.log(window.parent.document.title); // Доступ к заголовку страницы

🚩`localStorage` или `cookies` (если оба окна на одном домене) Можно сохранять данные в localStorage или cookies, а другая сторона будет их читать. Запись в localStorage из iframe

localStorage.setItem("message", "Привет от iframe!");

Чтение localStorage в родительской странице

console.log(localStorage.getItem("message")); // "Привет от iframe!"

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

🤔 Что происходит в момент запроса в браузере? Браузер выполняет преобразование URL в IP через DNS, устанавливает соединение с сервером, отправляет HTTP-запрос и получает ответ, после чего обрабатывает данные и рендерит страницу. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое семантические коммиты? Семантические коммиты – это соглашение о формате сообщений коммитов в системе контроля версий (обычно Git), которое помогает делать историю изменений более понятной и удобной для автоматического анализа. Обычно используется стандарт Conventional Commits, который вводит строгую структуру сообщений коммитов. 🚩Формат семантического коммита Коммит должен начинаться с типа изменения, а затем кратко описывать суть правки. Основной шаблон

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

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

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

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

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

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

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

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

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

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

Бесплатный курс по дизайну: веб, графический и UX/UI Научись создавать дизайн сайтов и приложений, инфографику для карточек на маркетплейсах и работать в Figma! Студенты курса в среднем зарабатывают от 68 000 ₽ уже во время обучения💰 Этот курс для тебя, если ты: ✅ мечтаешь о новой профессии в digital, но не знаешь, с чего начать; ✅ чувствуешь, что хочешь большего — свободы, самореализации, творчества; ✅ полный новичок и хочешь систему, а не хаос; ✅ хочешь начать зарабатывать удалённо. Зарегистрироваться #реклама 16+ ydaev.ru О рекламодателе

🤔 Что делает и для чего нужна функция Function.prototype.bind? Метод bind позволяет создать новую функцию с жёстко привязанным контекстом (this) и при необходимости — предустановленными аргументами. Полезен при передаче методов в колбэки, где может потеряться контекст. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Какие особенности слежения за "глубокими" объектами? Когда мы отслеживаем изменения в объектах (например, в 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 });

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

🤔 TDD или Code First? - TDD (Test-Driven Development) — надёжнее, но требует культуры. - Code First — быстрее, но не всегда безопасно. Комбинируем: бизнес-критичный код — через TDD, остальное — гибко. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как работают плавающие элементы (floats)? float – это CSS-свойство, которое позволяет "выплывать" элементу из обычного потока документа и обтекаться другими элементами (например, текстом). Основные значения float

<img src="image.jpg" class="float-img">
<p>Это текст, который будет обтекать картинку.</p>

.float-img {
  float: left;
  margin-right: 10px;
}

🟠Почему родитель "схлопывается" при `float`? Когда внутри div есть только float-элементы, браузер считает, что он пустой, потому что float убирает элемент из потока.

<div class="container">
  <img src="image.jpg" class="float-img">
  <p>Текст обтекает картинку.</p>
</div>

.container {
  background: lightgray;
}
.float-img {
  float: left;
}

Решение 1: overflow: hidden;

.container {
  overflow: hidden; /* Контейнер теперь учитывает float-элементы */
}

Решение 2: clearfix (старый способ)

.container::after {
  content: "";
  display: block;
  clear: both;
}

🟠Как остановить обтекание (`clear`)? Чтобы отменить обтекание, используется clear.

<img src="image.jpg" class="float-img">
<p>Этот текст обтекает картинку.</p>
<div class="clear"></div>
<p>Этот текст пойдёт на новую строку.</p>

.float-img {
  float: left;
  margin-right: 10px;
}
.clear {
  clear: both;
}

🚩Почему `float` устарел и что использовать вместо него? Раньше float использовали для создания колонок и сеток, но сегодня его заменили: Flexbox (display: flex;) – лучше для адаптивных макетов. CSS Grid (display: grid;) – мощный инструмент для сложных сеток.

.container {
  display: flex;
  align-items: center;
}

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

🤔 Какие элементы в HTML5 могут иметь ARIA-атрибут? Любой HTML-элемент может иметь ARIA-атрибут, особенно если он участвует в интерфейсном взаимодействии. Однако ARIA особенно полезна для элементов: - интерактивных (button, input, a, nav, dialog); - структурных (section, article, aside, header, footer); - пользовательских компонентов (custom elements или div, span, выполняющие роль UI). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Чего стоит и не стоит избегать в оптимизации сайта? 🟠Оптимизация изображений Сжатие без потери качества: Используйте инструменты, такие как TinyPNG или ImageOptim. Использование современных форматов: WebP и AVIF обеспечивают лучшее сжатие и качество. Lazy Loading: Загружайте изображения по мере их появления в области видимости пользователя. 🟠Минификация и объединение файлов Минификация: Уменьшайте размеры CSS, JavaScript и HTML-файлов с помощью инструментов, таких как UglifyJS и CSSNano. Объединение: Сокращайте количество HTTP-запросов, объединяя несколько файлов в один. 🟠Использование CDN (Content Delivery Network) Размещайте копии вашего сайта на серверах по всему миру, чтобы уменьшить задержки для пользователей из разных регионов. 🟠Кэширование На стороне клиента: Настройте заголовки кэширования HTTP. На стороне сервера: Используйте технологии, такие как Varnish или Nginx. 🟠Асинхронная загрузка и критический CSS Асинхронная загрузка: Используйте атрибуты async и defer для JavaScript. Критический CSS: Встраивайте важные стили прямо в HTML, чтобы ускорить начальную отрисовку страницы. 🟠Улучшение производительности сервера Сжатие данных: Включите gzip или Brotli. HTTP/2: Переходите на HTTP/2 для мультиплексирования запросов. 🟠Использование современных технологий Service Workers: Для офлайн-работы и улучшенного кэширования. Prefetching и Preloading: Предзагрузка и предзапросы ресурсов. 🟠Мониторинг и анализ Google Lighthouse, PageSpeed Insights: Используйте для анализа производительности. Реальное время: Применяйте Google Analytics, New Relic. 🚩Чего стоит избегать при оптимизации сайта 🟠Избегайте чрезмерной минимизации Читаемость кода: Минимизация без генерации карт кода (source maps) может усложнить отладку. 🟠Не используйте большие, несжатые изображения Размер файлов: Это замедляет загрузку и увеличивает потребление трафика пользователем. 🟠Не загружайте все ресурсы сразу Асинхронная загрузка: Используйте техники lazy loading и асинхронной загрузки. 🟠Не пренебрегайте кэшированием Отсутствие кэширования: Увеличивает время загрузки для повторных посещений. 🟠Избегайте блокирующих ресурсов JavaScript и CSS: Не блокируйте рендеринг страницы тяжелыми файлами. 🟠Не злоупотребляйте анимациями и большими скриптами Производительность: Сложные анимации и большие скрипты могут замедлить сайт, особенно на мобильных устройствах. 🟠Избегайте чрезмерного использования плагинов Нагрузки: Избыток плагинов может значительно замедлить сайт и создать проблемы с безопасностью. 🟠Не забывайте про оптимизацию для мобильных устройств Мобильная версия: Сайт должен быть оптимизирован для мобильных пользователей, так как большинство пользователей используют мобильные устройства. Ставь 👍 и забирай 📚 Базу знаний

CRM, которая помогает управлять отделом продаж Что делает Битрикс24 CRM: – ставит задачи менеджерам автоматически – интегрируется с 1С и онлайн-кассами – показывает, где теряются деньги – возвращает клиентов и ищет повторные продажи – помогает руководителю контролировать процессы. Битрикс24 CRM работает на результат. Регистрируйтесь бесплатно Зарегистрироваться #реклама 16+ bitrix24.ru О рекламодателе

🤔 Как происходит процесс утечки? Обычно это происходит, когда ссылки на объекты сохраняются, даже если они больше не нужны: в глобальных переменных, замыканиях, обработчиках событий, коллекциях (Map, Set) и таймерах. GC не может очистить объект, пока есть ссылка на него. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как передать данные из родительского компонента в дочерний? Передача данных из родительского компонента в дочерний компонент — это одна из основных задач в работе с компонентами в React. Это делается с помощью пропсов (props). Пропсы — это способ передачи данных и событий от родительского компонента к дочернему. 🚩Шаги для передачи данных из родительского компонента в дочерний 1⃣Создание родительского компонента В родительском компоненте мы создаем состояние или просто определяем данные, которые хотим передать. Затем передаем эти данные в дочерний компонент через пропсы. 2⃣Приём данных в дочернем компоненте В дочернем компоненте мы получаем пропсы и используем их для отображения данных или выполнения других действий. Родительский компонент (ParentComponent.js)

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
    const message = "Привет, дочерний компонент!";
    
    return (
        <div>
            <h1>Родительский компонент</h1>
            <ChildComponent message={message} />
        </div>
    );
}

export default ParentComponent;

Дочерний компонент (ChildComponent.js)

import React from 'react';

function ChildComponent(props) {
    return (
        <div>
            <h2>Дочерний компонент</h2>
            <p>{props.message}</p>
        </div>
    );
}

export default ChildComponent;

🚩Пояснение 1⃣В родительском компоненте `ParentComponent`: Создаем переменную message, содержащую строку "Привет, дочерний компонент!". В JSX разметке мы рендерим дочерний компонент ChildComponent, передавая ему пропс message со значением переменной message. 2⃣В дочернем компоненте ChildComponent: Принимаем пропс message через параметр props. Используем props.message для отображения переданной строки внутри тега <p>. 🚩Дополнительные примеры Родительский компонент (ParentComponent.js)

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
    const user = {
        name: "Иван",
        age: 25
    };
    
    return (
        <div>
            <h1>Родительский компонент</h1>
            <ChildComponent user={user} />
        </div>
    );
}

export default ParentComponent;

Дочерний компонент (ChildComponent.js)

import React from 'react';

function ChildComponent(props) {
    return (
        <div>
            <h2>Дочерний компонент</h2>
            <p>Имя: {props.user.name}</p>
            <p>Возраст: {props.user.age}</p>
        </div>
    );
}

export default ChildComponent;

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

Tefal X-Clean 10: Умные технологии для комфортной уборки Tefal X-Clean 10 — беспроводной моющий вертикальный пылесос для влажной уборки. Главная изюминка — система самоочистки роликовой щётки и сушка горячим воздухом до 65°C Подробнее #реклама tefal.ru О рекламодателе