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

Приглашаем на Yandex Neuro Scale В этом году главная конференция Yandex Cloud объединит разработчиков, архитекторов, инженеров и IT-руководителей, чтобы обменяться опытом и увидеть, как работают технологии, которые меняют индустрии. 7 тематических треков, 50+ докладов, реальные бизнес-кейсы и нетворкинг! ✨Участие бесплатное, нужно только зарегистрироваться!✨ Зарегистрироваться #реклама 16+ scale.yandex.cloud О рекламодателе Реклама на Яндексе

🤔 Как обратиться к DOM-дереву в React? В React доступ к DOM-дереву осуществляется через рефы (Refs). Используется useRef для функциональных компонентов или React.createRef для классовых. Также можно использовать document.querySelector() внутри useEffect, но это не рекомендуется. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как методы будут у api? В API (Application Programming Interface) обычно используются HTTP-методы, которые определяют, какое действие нужно выполнить с ресурсом (данными). 🚩Примеры использования 🟠`GET` – Получение данных Запрашиваем список пользователей:

GET /users HTTP/1.1
Host: api.example.com

Ответ (JSON)

[
  { "id": 1, "name": "Alice" },
  { "id": 2, "name": "Bob" }
]

🟠`POST` – Создание нового ресурса Отправляем данные нового пользователя:

POST /users HTTP/1.1
Host: api.example.com
Content-Type: application/json

{
  "name": "Charlie",
  "email": "charlie@example.com"
}

Ответ (201 Created)

{
  "id": 3,
  "name": "Charlie",
  "email": "charlie@example.com"
}

🟠`PUT` – Полное обновление ресурса Заменяем пользователя с ID 1:

PUT /users/1 HTTP/1.1
Host: api.example.com
Content-Type: application/json

{
  "name": "Alice Smith",
  "email": "alice.smith@example.com"
}

🟠`PATCH` – Частичное обновление ресурса Меняем только имя пользователя 1, не трогая email:

PATCH /users/1 HTTP/1.1
Host: api.example.com
Content-Type: application/json

{
  "name": "Alice Johnson"
}

🟠`DELETE` – Удаление ресурса Удаляем пользователя с ID 2:

DELETE /users/2 HTTP/1.1
Host: api.example.com

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

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

🤔 Что такое falsy значения? Это значения, которые при приведении к булевому типу становятся false. 1. Примеры: 0, '' (пустая строка), null, undefined, NaN, false. 2. Они полезны для проверки в логических операциях и условиях. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Какие модификаторы есть у событий? В JavaScript у событий есть специальные модификаторы, которые позволяют изменять поведение события, управлять его распространением, обработкой и связанной с ним логикой. 🚩`stopPropagation` Этот метод предотвращает всплытие события вверх по дереву DOM. По умолчанию, события в DOM распространяются по фазам: погружение (capturing) → цель (target) → всплытие (bubbling). Если вы хотите остановить обработку события на текущем элементе и не позволить ему "подняться" выше по дереву DOM, используйте stopPropagation.

<div id="parent" style="padding: 20px; background: lightblue;">
  Родительский элемент
  <button id="child">Дочерний элемент</button>
</div>

<script>
  document.getElementById("parent").addEventListener("click", () => {
    alert("Событие всплыло до родителя");
  });

  document.getElementById("child").addEventListener("click", (event) => {
    alert("Событие на кнопке");
    event.stopPropagation(); // Остановим всплытие
  });
</script>

🚩`stopImmediatePropagation` Этот метод, помимо остановки всплытия (как stopPropagation), предотвращает выполнение других обработчиков на том же элементе. Если у одного и того же элемента есть несколько обработчиков для одного события, stopImmediatePropagation гарантирует, что после его вызова остальные обработчики не будут выполнены.

<button id="myButton">Нажми меня</button>

<script>
  const button = document.getElementById("myButton");

  button.addEventListener("click", () => {
    alert("Обработчик 1");
  });

  button.addEventListener("click", (event) => {
    alert("Обработчик 2");
    event.stopImmediatePropagation(); // Остановим все остальные обработчики
  });

  button.addEventListener("click", () => {
    alert("Обработчик 3"); // Этот обработчик не выполнится
  });
</script>

🚩`preventDefault` Этот метод отменяет поведение элемента по умолчанию. Некоторые элементы (например, ссылки или формы) имеют стандартное поведение. Например: - Клик по ссылке ведет на новый URL. - Отправка формы перезагружает страницу. С помощью preventDefault можно предотвратить это поведение.

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

<script>
  const link = document.getElementById("link");

  link.addEventListener("click", (event) => {
    event.preventDefault(); // Останавливаем переход по ссылке
    alert("Поведение ссылки отменено");
  });
</script>

🚩`passive` Это модификатор, который не является методом, а используется в настройках обработчика событий. Он указывает, что обработчик не вызывает preventDefault. Этот модификатор помогает оптимизировать обработку событий, таких как прокрутка (scroll), делая их более производительными. Некоторые браузеры при обработке событий (например, touchstart или wheel) предполагают, что вы можете использовать preventDefault. Это замедляет прокрутку, так как браузеру нужно ждать завершения вашего обработчика. Указав passive: true, вы говорите браузеру, что не собираетесь отменять поведение.

window.addEventListener("scroll", () => {
  console.log("Скролл работает");
}, { passive: true });

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

Договорное право – Повышение квалификации ⚡Станьте экспертом в договорном праве, обучаясь на реальных кейсах от практикущих юристов из Ozon, Denuo, BGP Litigation, Verba Legal и НИУ ВШЭ ✨ На курсе вы: » Подробно изучите все основные виды договоров » Научитесь составлять договоры, которые нравятся клиентам » Упор на практику: анализ условий договора на примере кейсов » Неограниченный доступ к материалам курса и контакт с экспертами 🎓Программа: » Основы договорного права » Отдельные виды договоров » Эффективная организации договорной работы Скидка до конца недели! Оставьте заявку сейчас и станьте ближе к успешной карьере юриста! ❤️ Узнать больше #реклама 16+ mosdigitals.ru О рекламодателе

🤔 Какая основная причина для использования SSR? SSR (Server-Side Rendering): - Улучшает скорость загрузки первого экрана (первая отрисовка приходит сразу с сервера). - Обеспечивает SEO-оптимизацию, поскольку поисковики получают готовый HTML. - Полезен для динамического контента, где важна предзагрузка. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое нотация о-большое? 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;
}

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

Получи грант до 1,2 млн руб. на обучение в магистратуре Хочешь развиваться в сфере ИТ и получить фундаментальные знания с практикой? Поступай в магистратуру Центрального университета! - 4 офлайн программы по востребованным направлениям ИТ - Онлайн-программа по машинному обучению - 300 мест с грантами до 1,2 млн руб. - Вечерние занятия и учеба по выходным — удобно совмещать с работой - Обучение по модели STEM-образования: на стыке науки, технологий и бизнеса - Возможность стажировок и трудоустройства в ведущих компаниях - Государственный диплом за 2 года Магистратура в Центральном университете — это современный подход к образованию, сильный преподавательский состав и актуальные кейсы от индустрии. Оставляй заявку на грант уже сейчас! Подать заявку #реклама 16+ apply.centraluniversity.ru О рекламодателе

🤔 Как из React осуществить доступ к данным? Через: - fetch/Axios для HTTP-запросов; - hooks (useEffect, useState) для загрузки и хранения данных; - контексты (useContext) для передачи данных по дереву компонентов; - глобальные хранилища (Redux, Zustand, Recoil и т.д.); - GraphQL-клиенты (Apollo, Relay). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Чем spa отличается от классического сайта? SPA (Single Page Application) и классический сайт (MPA – Multi Page Application) — это два разных подхода к созданию веб-приложений. Они отличаются по способу загрузки данных, навигации и производительности. 🚩Классический сайт (MPA – Multi Page Application) Каждый раз при переходе на новую страницу браузер запрашивает HTML с сервера. Сервер формирует страницу и отправляет готовый HTML.

<?php
  echo "<h1>Добро пожаловать!</h1>";
?>
<a href="/about">О нас</a>

🚩SPA (Single Page Application) При первом заходе загружается одна HTML-страница и весь JavaScript. Дальше контент подгружается динамически через AJAX или Fetch API.

import React, { useState, useEffect } from "react";

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("/api/products")
      .then(res => res.json())
      .then(data => setData(data));
  }, []);

  return <div>{data ? JSON.stringify(data) : "Загрузка..."}</div>;
}

export default App;

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

Продажа премиальных апартаментов в Крыму с выгодой! Премиальный комплекс в 30 метрах от собственного пляжа ✅ Комплекс — 4-х кратный победитель премии в сфере недвижимости URBAN AWORDS как самый привлекательный инвестиционный проект ЮФО 🏠 Комплекс можно: - Сдавать посуточно через отельера международного класса и получать пассивный ежемесячный доход (при этом отдыхая в отпуске в собственном номере) - Выгодно перепродать ⚡ О проекте: - Первая береговая линия – всего в 30 метрах расположен собственный пляж - На территории открытый и 2 круглогодичных бассейна - Более 14,5 га впечатляющей территории: 4-этажный SPA-комплекс, амфитеатр, панорамный ресторан, медцентр, игровое пространство для детей, магазины и бутик ⚡Роскошные панорамные виды на потухший вулкан, море и виноградники ✅Получите цены и презентацию первыми: Перейти на сайт Проектная декларация на сайте https://наш.дом.рф/. #реклама mrqz.me О рекламодателе

🤔 Что такое promise и какие состояния у него есть? Promise в JavaScript — это объект, который представляет результат асинхронной операции. Он может находиться в одном из трёх состояний: pending (ожидание), fulfilled (выполнено) и rejected (отклонено). Fulfilled означает, что операция завершилась успешно, а rejected — что произошла ошибка. Это удобный способ работы с асинхронным кодом и упрощает обработку результатов таких операций. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Какие значения будут являться falsy значениями? В JavaScript значения, которые при приведении к логическому типу (boolean) становятся false, называются "falsy" значениями. Существует всего семь таких значений: 🟠`false` Логическое значение false.

console.log(Boolean(false)); // false    

🟠`0` Число ноль.

console.log(Boolean(0)); // false    

🟠`-0` Отрицательное число ноль (хотя это редко встречается на практике).

console.log(Boolean(-0)); // false    

🟠`0n` Число BigInt с значением ноль.

console.log(Boolean(0n)); // false    

🟠`""` (пустая строка) Строка без символов.

console.log(Boolean("")); // false    

🟠`null` Специальное значение, обозначающее отсутствие какого-либо значения.

console.log(Boolean(null)); // false    

🟠`undefined` Специальное значение, обозначающее необъявленное или неприсвоенное значение.

console.log(Boolean(undefined)); // false    

🟠`NaN` Специальное значение, обозначающее не число (Not-a-Number).

console.log(Boolean(NaN)); // false    

🚩Примеры использования 🟠Проверка значений на falsy В условиях (if statements) все falsy значения интерпретируются как false.

const values = [false, 0, -0, 0n, "", null, undefined, NaN];

values.forEach(value => {
    if (!value) {
        console.log(`${value} is falsy`);
    }
});

Примеры в условиях

if (!false) {
    console.log('false is falsy'); // выводится
}

if (!0) {
    console.log('0 is falsy'); // выводится
}

if (!"") {
    console.log('"" is falsy'); // выводится
}

if (!null) {
    console.log('null is falsy'); // выводится
}

if (!undefined) {
    console.log('undefined is falsy'); // выводится
}

if (!NaN) {
    console.log('NaN is falsy'); // выводится
}

🟠Использование в логических операторах Falsy значения также учитываются в логических операциях.

const value = null;

const result = value || 'default value';
console.log(result); // 'default value', потому что value является falsy

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

Как повысить эффективность вебинаров? Организация продающего вебинара - не простая задача, ведь необходимо предусмотреть множество деталей: удобную дату, вовлекающий контент, методы продвижения и взаимодействия с участниками. Вебинары от МТС Линк помогают привлекать новых клиентов и увеличивать конверсию из участника в лид. В сервисе доступен анализ поведения пользователей во время вебинара, синхронный перевод, автовебинары и интерактивные инструменты для вовлечения участников. Делимся методичкой с кейсами, чек-листами и инструкциями для маркетологов, PR и event-менеджеров, чтобы сделать вебинары эффективным инструментом для лидогенерации. Получите методичку бесплатно на сайте. Скачать #реклама 16+ mts-link.ru О рекламодателе

🤔 Что известно как видится идеальный процесс работы в команде над задачей? - Чёткая постановка задачи и её декомпозиция; - Обсуждение реализации, согласование интерфейсов; - Деление ответственности; - Использование гита, code review, CI/CD; - Поддержка документации; - Честная и быстрая обратная связь; - Ретроспектива и доработка процессов. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 В чем отличие атрибутов от свойств в html тегах? Атрибуты — это то, что записано в HTML. Свойства — это то, что появляется в JavaScript-объекте element. Когда браузер загружает страницу, он парсит HTML и создает DOM-объекты, в которых атрибуты превращаются в свойства. Однако атрибуты и свойства не всегда совпадают! 🟠Атрибуты (`attributes`) Хранятся в HTML. Всегда являются строками. Их можно получить с помощью .getAttribute() и изменить через .setAttribute(). Они не меняются динамически при изменении свойства элемента в JS.

<input id="myInput" type="text" value="Hello">

const input = document.getElementById("myInput");
console.log(input.getAttribute("value")); // "Hello"

🟠Свойства (`properties`) Хранятся в объекте элемента (HTMLElement). Имеют разные типы данных (строки, числа, булевые и т. д.). Меняются динамически при взаимодействии с DOM.

console.log(input.value); // "Hello"
input.value = "New text"; // Меняем свойство
console.log(input.getAttribute("value")); // "Hello" (атрибут НЕ поменялся)
console.log(input.value); // "New text" (свойство изменилось)

Пример с checked у чекбокса

<input type="checkbox" id="myCheckbox" checked>

const checkbox = document.getElementById("myCheckbox");

console.log(checkbox.getAttribute("checked")); // "checked" (атрибут есть, значит включен)
console.log(checkbox.checked); // true (свойство JS - boolean)

checkbox.checked = false; // Меняем состояние чекбокса
console.log(checkbox.getAttribute("checked")); // "checked" (атрибут не поменялся!)
console.log(checkbox.checked); // false (свойство изменилось)

🟠Как правильно работать с атрибутами и свойствами? Если хотите работать с DOM → используйте свойства (element.value, element.checked и т. д.). Если хотите работать с атрибутами в HTML → используйте .getAttribute() и .setAttribute().

const img = document.querySelector("img");

// Меняем атрибут src
img.setAttribute("src", "new-image.jpg");

// Меняем свойство width
img.width = 300;

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

Бесплатный курс по PostgreSQL от практиков рынка Присоединяйтесь к бесплатному курсу по основам PostgreSQL от Selectel и Эльбрус Буткемп. Он будет полезен Junior- и Middle-специалистам: администраторам баз данных, разработчикам, DevOps-инженерам и аналитикам.   Вы научитесь: 🔹создавать и связывать таблицы, 🔹выполнять базовые операции с данными, 🔹работать с РСУБД. Бонусы: вы можете получить сертификат о прохождении курса, а также промокоды для практики на мощностях Selectel. Начните обучение уже сегодня. Реклама. АО «Селектел», ИНН 7810962785, ERID: 2VtzqvTS9v8

Такси для бизнеса. Яндекс Go Оптимизируйте свои расходы и повысьте эффективность бизнеса с Яндекс Go Узнать больше #реклама business.go.yandex О рекламодателе Реклама на Яндексе