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

🤔 В чём разница между js и python? JavaScript (JS) и Python — два популярных языка программирования, но они предназначены для разных задач и имеют разные принципы работы. 🚩Где используется? JavaScript — в основном для веб-разработки (работает в браузере, создаёт динамичные сайты). Python — универсальный язык, применяется в бэкенде, Data Science, автоматизации, искусственном интеллекте. 🚩Как исполняется код? JS — интерпретируется браузером, выполняется в одном потоке (использует асинхронность). Python — интерпретируемый язык, выполняется синхронно, но можно использовать многопоточное и асинхронное программирование. JavaScript (динамическая веб-страница)

document.querySelector("button").addEventListener("click", () => {
  alert("Привет, мир!");
});

Python (консольная программа)

name = input("Введите ваше имя: ")
print(f"Привет, {name}!")

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

Хочешь стать фронтенд-разработчиком, но не знаешь, с чего начать? Pulpy и SuperJob запустили проект “Карьера шаг за шагом”. Он поможет разобраться в мире ИТ и получить первую стажировку. Внутри — видео-интервью от практиков индустрии и пошаговый гайд о построении карьеры для начинающих. Кроме того, можешь отправить резюме и получить шанс: • Выиграть индивидуальную карьерную консультацию. • Попасть на стажировку в компанию-партнера. Если успеешь попасть в число первых 200 участников проекта, еще и получишь бесплатный разбор резюме. Спеши! Переходи на сайт, изучай материалы и делай первый шаг в IT: ссылка на проект Реклама АО “Мултон”, ИНН 7810249327, erid: 2W5zFJkMoYL

Получи грант на обучение в Центральном университете Прояви себя, получи грант до 2,8 млн на обучение ИТ и бизнесу в вузе. Для школьников 10-х и 11-х классов, СПО. Подать заявку #реклама apply.centraluniversity.ru О рекламодателе

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

⚡ Новые каналы с вакансиями и стажировками для джунов В этих каналах публикуются все свежие вакансии и стажировки 🔺 ВАКАНСИИ

Горячие вакансии с привлекательными офферами для джуниор разработчиков, аналитиков, дизайнеров и QA-специалистов.

👉 ПОДПИСАТЬСЯ 🔺СТАЖИРОВКИ

Стажировки для начинающих специалистов в IT независимо от возраста!

👉 ПОДПИСАТЬСЯ 🔺IT interns

Свежие стажировки для junior специалистов в топовых компании России и мира

👉 ПОДПИСАТЬСЯ 🔺Junojobs

Вакансии и стажировки для junior-разработчиков на удалёнке.

👉 ПОДПИСАТЬСЯ 🔺БИГТЕХ

Junior вакансии и стажировки в крупнейших IT-компаниях мира: NVidia, Apple, T-банк, Яндекс, Google и т. д.

👉 ПОДПИСАТЬСЯ 🔺Ква инженер - QA junior

Отборные джун вакансии и стажировки для QA, тестировщиков.

👉 ПОДПИСАТЬСЯ

Искусственный интеллект помогает больше продавать Битрикс24 CRM + Ai упрощает работу менеджера. Расшифровывает записи звонков клиентам и сам заполняет карточку сделки. Менеджер в это время уже звонит следующему клиенту. Попробуйте умную CRM Попробовать #реклама 16+ bitrix24.ru О рекламодателе

🤔 Когда использовать uselayuouteffect, а когда useeffect? Оба этих хука выполняют побочные эффекты в React, но разница в том, когда именно они выполняются useEffect выполняется после рендера и отрисовки в браузере. useLayoutEffect выполняется сразу после рендера, но перед отрисовкой в браузере. То есть useLayoutEffect блокирует рендер, а useEffect — нет. 🚩Когда использовать `useEffect`? useEffect выполняется асинхронно, после того как браузер отрисовал страницу. Используется для: - Запросов к API. - Подключения WebSocket'ов или таймеров. - Логирования данных. - Изменения заголовка страницы (document.title).

import { useState, useEffect } from "react";

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Вы кликнули ${count} раз`;
  }, [count]); // Запускается после рендера

  return <button onClick={() => setCount(count + 1)}>Клик: {count}</button>;
}

🚩Когда использовать `useLayoutEffect`? useLayoutEffect выполняется сразу после рендера, но перед тем, как браузер отобразит изменения. Используется для - Синхронных манипуляций с DOM. - Измерения размеров элементов (getBoundingClientRect). - Анимаций (например, при расчёте позиций).

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

function Example() {
  const [width, setWidth] = useState(0);

  useLayoutEffect(() => {
    const box = document.getElementById("box");
    setWidth(box.offsetWidth);
  }, []);

  return (
    <div>
      <div id="box" style={{ width: "100px", height: "50px", background: "red" }}></div>
      <p>Ширина: {width}px</p>
    </div>
  );
}

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

Большая онлайн-конференция UserGate OpenConf ⚡ ИТ-конференция про защиту в открытую. Диалог между заказчиками, партнерами, экспертами и специалистами в сфере продуктов, технологий и услуг информационной безопасности. Зарегистрироваться #реклама 16+ openconf.usergate.com О рекламодателе

🤔 Разница между margin и padding? Margin (внешний отступ) определяет пространство вокруг элемента, не влияя на его внутренний размер. Padding (внутренний отступ) увеличивает пространство внутри границ элемента, увеличивая его видимый размер. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Когда используются теги div и span? <div> и <span> — это самые универсальные HTML-теги, но у них разные роли: <div> — блочный контейнер (для структуры). <span> — строчный контейнер (для оформления текста). 🚩Примеры использования `<div>` Разметка секций страницы

<div class="header">Навигация</div>
<div class="content">Основной контент</div>
<div class="footer">Подвал</div>

Группировка элементов

<div class="card">
  <h2>Заголовок</h2>
  <p>Текст внутри карточки</p>
</div>

🚩Когда использовать `<span>`? <span> используется для выделения части текста или небольших элементов. Это строчный элемент, который не переносится на новую строку. 🚩Примеры использования `<span>` Выделение части текста

<p>Сегодня <span class="highlight">солнечная погода</span>.</p>

Иконки, кнопки и маленькие элементы

<button>
  <span class="icon">🔍</span> Поиск
</button>

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

Ищешь высокооплачиваемые проекты? Попробуй SkillStaff SkillStaff — это платформа для ИТ-специалистов, менеджеров и креаторов, которым мало одного оклада. Здесь можно найти клиентов, выполнять их проекты и увеличивать свой доход. - Проекты с гибким графиком: part time, full time, удаленка и гибрид - Ставка за час работы — та, что ты сам выбрал - Клиенты — ведущие бренды, проверенные с юридической точки зрения при регистрации на платформе - Оплата поступает ежемесячно на расчетный счет исполнителя - Удобный личный кабинет и функционал, автоматизирующий документооборот Все, что нужно для работы — иметь статус самозанятого или ИП, а платформа поможет со всеми нюансами. Регистрируйся прямо сейчас Зарегистрироваться #реклама 16+ skillstaff.ru О рекламодателе

🤔 В чем философия Redux? Redux основан на принципах однонаправленного потока данных, централизованного хранилища состояния и неизменяемости данных. Все изменения состояния происходят через чистые функции-редюсеры, что делает поведение приложения предсказуемым. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Я поставил целью сбора скромные 300 тыс. рублей, но ребята, вы накидали больше млн. всего за 1 день. Это просто невероятно! Благодаря вашей поддержке, я смогу привлечь еще больше людей для разработки сайта и обработки собеседований. Ваш вклад сделает проект качественнее и ускорит его выход! Огромное вам спасибо! Краудфандинг будет продолжаться еще 31 день и все кто поддержать проект сейчас, до его выхода, смогут получить: 🚀 PRO-тариф на 1 год, по цене месячной подписки на релизе. ➕ Доступ к закрытому бета-тесту easyoffer 2.0 (середина–конец мая) Поддержать проект можно здесь: https://planeta.ru/campaigns/easyoffer Огромное спасибо за вашу поддержку! 🤝

Битрикс24 💻Один онлайн-сервис для совместной работы. 📱10+ инструментов. ✅0 денег. Счастливые сотрудники. Прибыльный бизнес. Регистрируйтесь и забирайте себе Зарегистрироваться #реклама 16+ office-online.bitrix24.ru О рекламодателе

🎉 Краудфандинг easyoffer 2.0 стартовал! Друзья, с этого момента вы можете поддержать проект и получить существенный бонус: 🚀 PRO-тариф на 1 год, по цене месячной подписки на релизе. ➕ Доступ к закрытому бета-тесту easyoffer 2.0 (середина–конец мая) Поддержать проект можно здесь: https://planeta.ru/campaigns/easyoffer 📌 Если не получается оплатить через карту РФ — напишите мне @kivaiko, и мы найдём удобный способ

🤔 Как бы добавлял статический метод в prototype? На самом деле, статические методы не добавляются в prototype, потому что они принадлежат самому классу, а не его экземплярам. Но если ты хочешь имитировать статический метод в prototype, можно использовать функцию-конструктор и добавить метод вручную. 🚩Как работают статические методы? (`static`) В классе статические методы объявляются с помощью static. Они не находятся в prototype, а принадлежат самому классу.

class User {
  static sayHello() {
    return "Привет!";
  }
}

console.log(User.sayHello()); // ✅ "Привет!"
console.log(User.prototype.sayHello); // ❌ undefined (нет в prototype)

🚩Добавление "статического" метода в `prototype` (не совсем статический) Если нужно, чтобы каждый объект имел доступ к "статическому" методу через prototype, можно сделать так

function User(name) {
  this.name = name;
}

// Добавляем метод в prototype
User.prototype.sayHello = function () {
  return "Привет!";
};

const user1 = new User("Иван");
console.log(user1.sayHello()); // ✅ "Привет!"

🚩Добавление метода напрямую в сам класс (имитация `static`) Если хочется добавить метод на сам класс, а не в prototype, можно сделать так

function User(name) {
  this.name = name;
}

// Добавляем метод прямо в функцию-конструктор
User.sayHello = function () {
  return "Привет!";
};

console.log(User.sayHello()); // ✅ "Привет!"

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

26–27 апреля проводим Weekend Offer Frontend Устроиться в Яндекс за выходные — реально. Ищем крутых фронтендеров с опытом работы от 4 лет, готовых работать в офисном или гибридном режиме в России. Подавайте заявку до 23 апреля — и всего за два дня пройдите все технические собеседования. После сможете пообщаться с нанимающими менеджерами и выбрать из 10 команд ту, которая покажется самой интересной. Если всё сложится хорошо, сразу же пришлём вам офер. Зарегистрироваться #реклама yandex.ru О рекламодателе

🤔 Как пользоваться линтером JS? Линтер – инструмент для анализа кода. Самый популярный – ESLint. 1. Установить: 2. npm install eslint --save-dev 3. Инициализировать: 4. npx eslint --init 5. Проверить код: 6. npx eslint script.js Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Когда стоит использовать тип any? Тип any в TypeScript позволяет отключить проверку типов и использовать любую структуру данных, как в обычном JavaScript. Но any убирает всю защиту TypeScript, поэтому его нужно использовать только в крайних случаях. 🚩Если тип данных неизвестен заранее (например, ответ от API) Иногда сервер может вернуть разные структуры данных, и невозможно заранее определить точный тип.

async function fetchData(url: string): Promise<any> {
  const response = await fetch(url);
  return response.json();
}

Лучший вариант — использовать интерфейсы вместо any:

interface User {
  id: number;
  name: string;
}

async function fetchUser(url: string): Promise<User> {
  const response = await fetch(url);
  return response.json() as User;
}

🚩При миграции JavaScript в TypeScript Если проект на чистом JavaScript, добавление TypeScript может сломать код. any помогает постепенно вводить строгую типизацию.

function log(value: any) {
  console.log(value);
}

🚩Когда работаем с динамическими структурами (например, `localStorage`) В localStorage можно сохранить что угодно, поэтому при чтении данных тип неизвестен.

const data: any = localStorage.getItem("user");

Лучше сразу привести any к нужному типу

const user = JSON.parse(localStorage.getItem("user") || "{}") as { id: number; name: string };

🚩Когда пишем универсальную библиотеку Если функция должна работать с разными типами, any может быть временным решением.

function mergeObjects(obj1: any, obj2: any): any {
  return { ...obj1, ...obj2 };
}

Лучший вариант с generic (T вместо any)

function mergeObjects<T, U>(obj1: T, obj2: U): T & U {
  return { ...obj1, ...obj2 };
}

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

Бесплатное льготное обучение: 3 месяца Ищем людей, которые хотят обучиться и работать в IT-сфере из дома В конце обучения вы пройдете стажировку и устроитесь на работу с зп от 150.000 рублей Образование, место жительства, трудовой стаж — не важны! Для старта нужно: — пройти короткий тест — заполнить анкету На что можно рассчитывать, после обучения: ✅ удаленная работа ✅ зп от 150.000 рублей (потолка нет) ✅ стабильная подработка, если не хотите уходить с основной работы ⚡ Осталось всего 47 бесплатных мест. Успейте пройти тест и оставить заявку: Узнать больше #реклама 16+ technolium.ru О рекламодателе