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

🤔 Для чего в js нужна асинхронность? JavaScript – однопоточный язык, где код выполняется **последовательно, но иногда мы ждём ответа (запрос в интернет, чтение файла, таймер). Если всё делать синхронно, программа зависнет. 🟠Проблема синхронного кода Представьте, что мы загружаем данные из API синхронно:

const data = fetch("https://api.example.com/users"); // ❌ Ожидание ответа
console.log("Данные загружены:", data);

🟠Асинхронность решает эту проблему Асинхронный код не блокирует выполнение программы

fetch("https://api.example.com/users")
  .then(response => response.json())
  .then(data => console.log("Данные загружены:", data));

console.log("Этот код выполнится сразу! 🚀");

🚩Как работает асинхронность в JS? Callbacks (обратные вызовы) – старый способ. Promises (fetch(), then/catch) – современный вариант. async/await – удобный синтаксис для асинхронного кода. async/await – лучший способ писать асинхронный код

async function getData() {
    try {
        let response = await fetch("https://api.example.com/users");
        let data = await response.json();
        console.log("Данные:", data);
    } catch (error) {
        console.error("Ошибка загрузки:", error);
    }
}

getData();
console.log("Этот код выполняется, пока ждём данные!");

🚩Где нужна асинхронность? Запросы к серверу Чтение файлов Таймеры Работа с базами данных Взаимодействие с пользователем (ожидание ввода) Ставь 👍 и забирай 📚 Базу знаний

В канале “Frontend менторинг | Косилов” вы можете найти честные зарплатные вилки, разборы резюме и портфолио, стратегии поиска работы и роста в кризис, обзор технологий и мысли по этому поводу. Так же публикует в Инсте смешные ролики и полезный контент про АйТи. https://www.instagram.com/kosilllov?igsh=MXN1ZWxvN3JhaW5uMg%3D%3D&utm_source=qr Всем, кто подпишется и напишет в личку слово js в инстаграме, пришлет список вопросов по JavaScript с собесов + даст краткие ответы/подсказки, как лучше отвечать.

🤔 В каких случаях перерисовывается компонент? Компонент React перерисовывается, если: - Изменился его state. - Пришли новые props. - Изменилась его родительская структура. - Используется forceUpdate() (в классовом компоненте). Также useEffect, useMemo, memo и другие хуки влияют на контроль рендеринга. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое псевдоклассы? Это ключевые слова, добавляемые к селекторам, которые указывают на специальное состояние выбранного элемента. Псевдоклассы позволяют стилизовать элементы на основе их состояния в документе, без необходимости добавления дополнительных классов или ID напрямую в HTML-код. С их помощью можно, например, изменить внешний вид ссылок при наведении курсора, стилизовать четные и нечетные элементы списка, изменять стиль элементов при получении фокуса и многое другое. :hover — применяется к элементу, когда на него наводят курсор мыши.

a:hover {
  color: red; /* Ссылка станет красной при наведении /
}

:focus — применяется к элементу, когда он получает фокус (например, при переходе на элемент с помощью клавиатуры или при клике мыши).

input:focus {
  border-color: blue; / Граница инпута станет синей при фокусе /
}

:active — применяется к элементу в момент его активации пользователем (например, во время клика по кнопке).

button:active {
  transform: scale(0.98); / Кнопка немного уменьшится при клике /
}

:nth-child() — позволяет стилизовать элементы в зависимости от их порядка среди детей родительского элемента.

li:nth-child(odd) {
  background-color: gray; / Заливка каждого нечетного элемента списка /
}

:not() — исключает из выборки элементы, соответствующие указанному селектору.

div:not(.special) {
  color: green; / Применяется к каждому div, который не имеет класса special */
}

🚩Зачем нужны псевдоклассы? Они делают CSS более мощным и гибким, позволяя разработчикам применять стили к элементам на основе их состояния или положения в документе, без изменения HTML-структуры. Это особенно полезно для создания интерактивных и реактивных пользовательских интерфейсов, где визуальное состояние элемента должно меняться в ответ на действия пользователя. Ставь 👍 и забирай 📚 Базу знаний

🤔 Что выбираешь: ООП или функции? Выбор зависит от задачи: - ООП (Объектно-Ориентированное Программирование) – удобнее для работы с сущностями (классами, экземплярами, наследованием). - Функциональное программирование (FP) – удобнее для чистых функций, иммутабельности, композиции. В React чаще используется FP-подход (функциональные компоненты с useState, useEffect), но классы (ООП) до сих пор актуальны. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Чем var отличается от const ? Ключевые слова var и const используются для объявления переменных, но они имеют ряд существенных различий, которые важно понимать для правильного использования в коде. 🚩Область видимости (Scope) 🟠Var Объявления переменных с ее использованием имеют функциональную область видимости (function scope), что означает, что переменная доступна везде в функции, где была объявлена. 🟠Const Как и let, она имеет блочную область видимости (block scope), ограничивая доступность переменной блоком (например, циклом или условным оператором), в котором была объявлена. 🚩Переназначение и изменение 🟠Var Переменные, объявленные с помощью нее, могут быть переназначены и изменены. Это означает, что после объявления переменной её можно не только изменить, но и полностью переназначить на другое значение. 🟠Const Переменные, объявленные с помощью нее, не могут быть переназначены. Однако, если переменная представляет собой объект или массив, её содержимое может быть изменено (например, можно добавить новое свойство в объект или новый элемент в массив). Важно понимать, что const предотвращает переназначение самой переменной, но не защищает содержимое объекта от изменений. 🚩Поднятие (Hoisting) 🟠Var Переменные, объявленные через нее, поднимаются в начало своей функциональной области видимости перед выполнением кода. Однако до их объявления в коде они будут иметь значение undefined. 🟠Const Подобно let, ее объявления тоже поднимаются, но доступ к переменной до её объявления в коде приведёт к ошибке ReferenceError. Это явление известно как "временная мертвая зона". 🚩Инициализация 🟠Var Эти переменные можно объявить без инициализации, и их начальное значение будет undefined. 🟠Const Эти переменные требуют обязательной инициализации при объявлении. Если попытаться объявить его без инициализации, это приведет к синтаксической ошибке.

var varVariable = 1;
varVariable = 2; // Переназначение возможно

const constVariable = { a: 1 };
constVariable.a = 2; // Изменение содержимого объекта возможно
// constVariable = { b: 3 }; // Переназначение вызовет ошибку

if (true) {
  var varScope = "доступна везде в функции";
  const constScope = "доступна только в этом блоке";
}
console.log(varScope); // Выведет строку
console.log(constScope); // Ошибка: constScope не определена

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

🤔 Могут ли возникнуть проблемы при подаче страниц с типом application/xhtml+xml? Да. Страница обрабатывается браузером как XML, и любая синтаксическая ошибка приведёт к полной остановке загрузки. Также старые браузеры и скрипты могут не поддерживать такой MIME-тип корректно. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что произойдет если мы напишем невалидную разметку? Если в HTML-документе будет невалидная разметка, браузер всё равно попытается её обработать и отобразить страницу, но возможны различные неожиданные ошибки и баги. Давайте разберём, что может пойти не так. 🚩Что делает браузер с невалидным HTML? Когда браузер сталкивается с ошибками в разметке, он использует механизм исправления ошибок (HTML Parser Error Handling). Это означает, что: Браузер автоматически исправит некоторые ошибки (например, добавит закрывающий тег). Некоторые элементы могут быть проигнорированы или отображены некорректно. CSS и JavaScript могут работать неправильно из-за ошибки в DOM-структуре. 🚩Примеры ошибок и их последствия Отсутствие закрывающего тега

<p>Привет, мир!
<p>Это новый абзац?

Вложенность тегов в неправильных местах

<p>Текст <div>Блок внутри абзаца</div></p>

По спецификации <div> нельзя вкладывать в <p>, браузер может вынести <div> за пределы абзаца. Итоговый HTML может быть таким:

<p>Текст </p>
<div>Блок внутри абзаца</div>

🟠Отсутствие `DOCTYPE` Если не указать <!DOCTYPE html>, браузер может перейти в режим совместимости (Quirks Mode), что приведёт к некорректному отображению стилей. Неправильные атрибуты в тегах

<img src="image.jpg" alt="Картинка" wrongAttr="что это?">

Незакрытые теги в таблице

<table>
  <tr>
    <td>Ячейка 1
    <td>Ячейка 2
  </tr>
</table>

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

🤔 В чём заключается основная концепция Flux? Flux — это архитектура, где данные двигаются в одном направлении: 1. Действие (action); 2. Диспетчер (dispatcher); 3. Стор (store); 4. Представление (view). Она помогает сделать поток данных предсказуемым и контролируемым. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое git-flow? Это рабочая модель ветвления, предложенная Винсентом Дриссеном в 2010 году. Эта модель определяет строгий набор правил для создания веток и их слияния, что помогает более организованно управлять процессом разработки, особенно в условиях, когда над проектом работает много людей. Он предназначен для упрощения процесса выпуска новых версий программного обеспечения и обеспечения стабильности кодовой базы. 🚩Основные ветки 🟠master Содержит стабильную версию кода, готовую к выпуску (release). 🟠develop Основная ветка для разработки, содержит последние изменения кода для следующего выпуска. 🚩Вспомогательные ветки 🟠feature Для разработки новых функций. Каждая ветка создается для работы над определенной задачей и в конечном итоге сливается с develop. 🟠release Предназначенные для подготовки новых выпусков продукта. В них может вестись работа по исправлению ошибок, документации и другим задачам, связанным с выпуском. После завершения подготовки ветка release сливается с master и с develop. 🟠hotfix Для быстрого исправления ошибок в продакшен-версии. Создаются от ветки master, и после исправления сразу же сливаются обратно в master и develop. Ставь 👍 и забирай 📚 Базу знаний

🤔 Как между собой связаны HTML, CSS и JS HTML задаёт структуру, CSS отвечает за внешний вид, JS — за динамическое поведение. Они взаимодействуют через DOM: JS может читать и изменять HTML и CSS. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

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

🤔 Когда нужно использовать кнопки а когда ссылки? В веб-разработке часто возникает вопрос: использовать кнопку (<button>) или ссылку (<a>) для взаимодействий? Хотя они внешне могут выглядеть одинаково, у них разные назначения и поведение. 🟠Когда использовать `<button>`? Когда действие выполняется на странице без перехода на другую Когда нужна интерактивность (отправка формы, открытие модального окна, запуск скрипта) Отправка формы Открытие/закрытие модального окна Включение/выключение чего-то на странице Взаимодействие с JavaScript (AJAX-запросы, события)

<button onclick="alert('Нажато!')">Кликни</button>

Пример кнопки в форме:

<form>
  <input type="text" placeholder="Введите имя">
  <button type="submit">Отправить</button>
</form>

🟠Когда использовать `<a>`? Когда нужно перейти на другую страницу (или секцию сайта) Когда ссылка ведет на внешний или внутренний ресурс Навигация по сайту Переход на другую страницу Ссылки на соцсети, статьи, файлы

<a href="https://example.com">Перейти на сайт</a>

Ссылка внутри страницы (якорь)

<a href="#section">Перейти вниз</a>
<section id="section">Контент</section>

Открытие в новом окне

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Открыть в новой вкладке
</a>

🟠Ошибки и неправильное использование Ошибка: использовать <button> вместо ссылки

<button onclick="window.location.href='https://example.com'">Перейти</button>

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

Квартиры Санкт Петербург Колпино. Рассрочка без 1 взноса Скидки до 20% в ЖК "Квартал Заречье". 4 девятиэтажных жилых корпуса. 8-этажный крытый гараж на 496 парковочных мест. Рядом детский сад 160 мест и школа 550 мест. Живописное место у реки Ижора. На первых этажах будут размещены магазины, кофейни, поликлиника и зона коворкинга. Перейти на сайт Проектная декларация на сайте https://наш.дом.рф/. Застройщик: ООО "СЗ "ЗАГОРОДНАЯ, 71". Финансовые услуги оказывает: ПАО Сбербанк. #реклама квартал-заречье.рф О рекламодателе

🤔 Что известно про опыт в вёрстке? Опыт может включать: - адаптивную и респонсивную вёрстку; - знание Flexbox, Grid, медиазапросов; - кроссбраузерную поддержку; - верстку по макету (Figma, Zeplin); - интеграцию с шаблонами, CMS или фреймворками. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое нотация о-большое? O-большое (Big O) — это способ описания эффективности алгоритма в зависимости от размера входных данных. Она показывает, как быстро растёт время выполнения или использование памяти при увеличении количества входных данных. 🚩Зачем нужна O-большое? Когда мы пишем код, важно понимать, насколько он эффективен, особенно при работе с большими массивами или сложными вычислениями. Big O помогает: - Оценить время работы алгоритма. - Понять, как алгоритм масштабируется. - Сравнить разные алгоритмы и выбрать лучший. 🚩Примеры сложности алгоритмов O(1) – Константное время

function getFirstElement(arr) {
  return arr[0]; // Не зависит от размера массива
}

O(N) – Линейное время

function findElement(arr, target) {
  for (let i = 0; i < arr.length; i++) { 
    if (arr[i] === target) return i;
  }
  return -1;
}

O(N²) – Квадратичное время (плохо)

function bubbleSort(arr) {
  for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr.length; j++) {
      if (arr[i] > arr[j]) {
        [arr[i], arr[j]] = [arr[j], arr[i]];
      }
    }
  }
  return arr;
}

O(log N) – Логарифмическое время (оптимально)

function binarySearch(arr, target) {
  let left = 0, right = arr.length - 1;
  
  while (left <= right) {
    let mid = Math.floor((left + right) / 2);
    
    if (arr[mid] === target) return mid;
    if (arr[mid] < target) left = mid + 1;
    else right = mid - 1;
  }

  return -1;
}

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

🤔 Что такое делегирование? Делегирование событий — техника, при которой обработчик навешивается на родительский элемент и реагирует на события потомков. Это уменьшает число обработчиков и помогает с динамическим контентом. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое миксины в препроцессорах? Миксины в препроцессорах CSS, таких как Sass, LESS и Stylus, представляют собой переиспользуемые блоки кода, которые можно вставлять в другие блоки стилей. Они позволяют группировать наборы стилей, которые можно повторно использовать по всему CSS-файлу. Это помогает уменьшить дублирование кода и упростить его поддержку. 🚩Примеры использования миксинов 1⃣Определение миксина

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}   

2⃣Использование миксина

.box {
    @include border-radius(10px);
}

.button {
    @include border-radius(5px);
}   

🚩Пример на LESS 1⃣Определение миксина

.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

2⃣Использование миксина

.box {
.border-radius(10px);
}

.button {
.border-radius(5px);
}

🚩Пример на Stylus 1⃣Определение миксина

border-radius(radius)
  -webkit-border-radius: radius
  -moz-border-radius: radius
 border-radius: radius   

2⃣Использование миксина

.box
border-radius(10px)

.button
border-radius(5px

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

🤔 Что такое плавающие элементы (floats)? float — это CSS-свойство, которое позволяет элементу выложиться по левому или правому краю контейнера, при этом текст и другие элементы могут его обтекать. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Чем em отличается от rem? 🟠Как работает `em`? em зависит от размера шрифта родителя (font-size).

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em; /* 1.5 * 20px = 30px */
}

Но если .child вложен в .parent, то он наследует font-size, а его em вычисляется относительно родителя.

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em; /* 30px */
}

.grandchild {
  font-size: 2em; /* 2 * 30px = 60px */
}

🟠Как работает `rem`? rem всегда зависит от font-size у <html>.

html {
  font-size: 16px;
}

.container {
  font-size: 2rem; /* 2 * 16px = 32px */
}

🟠Когда использовать `em`, а когда `rem`? Используйте rem, если нужно, чтобы шрифты и размеры были предсказуемыми Используйте em, если хотите, чтобы элементы зависели от родителя Ставь 👍 и забирай 📚 Базу знаний