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

🤔 Что такое dispatch? В контексте Frontend-разработки, dispatch — это метод, который отправляет (диспатчит) событие или действие. В зависимости от технологии dispatch может использоваться в Redux, EventTarget или React. 🟠`dispatch` в Redux В Redux dispatch(action) используется для отправки (диспатча) действий (actions) в хранилище (store).

import { useDispatch } from 'react-redux';

const Counter = () => {
  const dispatch = useDispatch();

  return (
    <button onClick={() => dispatch({ type: 'INCREMENT' })}>
      Увеличить
    </button>
  );
};

🟠`dispatchEvent` в JavaScript (EventTarget API) В нативном JavaScript метод dispatchEvent() используется для генерации пользовательских событий на DOM-элементах.

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

// Создаём событие
const event = new Event("myCustomEvent");

// Добавляем слушатель событий
button.addEventListener("myCustomEvent", () => {
  console.log("Событие вызвано!");
});

// Диспатчим событие
button.dispatchEvent(event); // Выведет: "Событие вызвано!"

🟠`dispatch` в React (useReducer) В React-хуке useReducer dispatch используется для изменения состояния компонента.

import { useReducer } from 'react';

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      return state;
  }
};

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <button onClick={() => dispatch({ type: 'increment' })}>
      {state.count}
    </button>
  );
};

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

Готовые апартаменты от 4,8 млн. ₽ в СПб! М. Московская ⚡Мах гарантированный доход 3 200 000 ₽ за 2 года! ⚡Скидка 100 000 ₽ за экскурсию по отелю ⚡Скидка для IT специалистов - 5%! ⚡Рассрочки на 3 года. Первоначальный взнос 500 000 ₽! ⚡Фитнес-зал, бар, коворкинг, лобби, прачечная. 20 минут пешком от метро Московская или Звездная Торопитесь, осталось всего 2 апарта по этой цене! Перейти на сайт #реклама vertical-invest.ru О рекламодателе

🤔 В чём отличие null от undefined? null в JavaScript — это явное указание на отсутствие значения или объекта, тогда как undefined означает, что переменная или свойство были объявлены, но не инициализированы. null назначается вручную разработчиком, а undefined — результат автоматического присваивания переменным, которые ещё не получили значения. В логическом контексте оба значения считаются ложными, но их использование отличается в зависимости от смысла кода. null чаще используется для инициализации переменных, ожидающих объект. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как защитить Cookie от JavaScript? Если cookie содержит чувствительную информацию (например, auth_token), важно защитить его от доступа через JavaScript. Иначе злоумышленник может украсть его через XSS-атаку (Cross-Site Scripting). 🟠Используем флаг `HttpOnly` (основная защита) HttpOnly делает cookie недоступным для JavaScript (document.cookie).

Set-Cookie: auth_token=abc123; HttpOnly; Secure; SameSite=Strict

🟠Используем `Secure`, чтобы cookie передавались только по HTTPS Флаг Secure запрещает передачу cookie через HTTP, только HTTPS.

Set-Cookie: auth_token=abc123; Secure

🟠Используем `SameSite`, чтобы защититься от CSRF-атак SameSite=Strict или SameSite=Lax защищает от подделки запросов (CSRF).

Set-Cookie: auth_token=abc123; SameSite=Strict

🟠Не храним токены в cookie (если можно) Если возможно, используйте Authorization: Bearer заголовки вместо cookie.

Authorization: Bearer abc123

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

Соберитесь в Коллабе Коллабы в Битрикс24 — это мессенджер с задачником для работы с подрядчиками. Еще тут есть видеозвонки и календарь, а файлы хранятся на общем диске. Просто пригласите гостей в ваш Битрикс24. Они увидят только сообщения и задачи внутри Коллабы. ✨Вам не нужно переключаться на сторонние приложения. Вся работа в одном сервисе. Работайте вместе — прозрачно, удобно, без бардака. Зарегистрироваться #реклама 16+ collabs.bitrix24.ru О рекламодателе

🤔 Как работает hot reload (на примере Vue CLI)? 1. Webpack/Vite следит за файлами. 2. При изменении модуля: - обновляется только этот модуль в браузере. - состояние приложения сохраняется. 3. Vue CLI использует Webpack HMR API, чтобы перерендерить компоненты без перезагрузки страницы. Это ускоряет разработку и упрощает отладку. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что делает и для чего нужна функци function.Prototype.Bind? bind() – это метод, который создает новую функцию с привязанным контекстом (this) и (опционально) фиксированными аргументами. 🚩Основные возможности `bind()` Привязывает this, чтобы не потерять контекст Позволяет создавать частично примененные функции Используется в обработчиках событий и таймерах Пример: потеря this без bind()

const user = {
  name: "Иван",
  sayHello() {
    console.log(`Привет, ${this.name}!`);
  },
};

setTimeout(user.sayHello, 1000); // ❌ this = undefined

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

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

🤔 Как реализовывается CRUD? - Через REST API с методами POST, GET, PUT, DELETE; - На уровне базы — с SQL-операциями: INSERT, SELECT, UPDATE, DELETE; - На UI — с формами создания, таблицами, редактированием и удалением записей. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Какие есть альтернативы у redux? Redux – мощный инструмент, но не всегда он необходим. Существует множество альтернатив, каждая из которых подходит для разных сценариев. 🚩React Context API + useReducer Подходит для небольших и средних приложений Встроено в React (не требует установки дополнительных библиотек) useContext` позволяет передавать данные по дереву компонентов без "прокидывания" через props useReducer работает как Redux, но проще

const AuthContext = createContext();

function authReducer(state, action) {
  switch (action.type) {
    case "LOGIN":
      return { ...state, isAuthenticated: true, user: action.payload };
    case "LOGOUT":
      return { ...state, isAuthenticated: false, user: null };
    default:
      return state;
  }
}

function AuthProvider({ children }) {
  const [state, dispatch] = useReducer(authReducer, {
    isAuthenticated: false,
    user: null,
  });

  return (
    <AuthContext.Provider value={{ state, dispatch }}>
      {children}
    </AuthContext.Provider>
  );
}

function LoginButton() {
  const { dispatch } = useContext(AuthContext);
  return (
    <button onClick={() => dispatch({ type: "LOGIN", payload: "Иван" })}>
      Войти
    </button>
  );
}

🚩Zustand Проще Redux, но с теми же возможностями Нет лишних actions и reducers, только функции

import { create } from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const { count, increment } = useStore();
  return <button onClick={increment}>Счетчик: {count}</button>;
}

🚩Recoil Идеален для React-приложений Гибче, чем Redux, с концепцией "атомов" (раздельные состояния)

import { atom, useRecoilState } from "recoil";

const countState = atom({
  key: "count",
  default: 0,
});

function Counter() {
  const [count, setCount] = useRecoilState(countState);
  return <button onClick={() => setCount(count + 1)}>Счетчик: {count}</button>;
}

🚩Jotai Напоминает Recoil, но без сложных концепций Поддерживает React Suspense и асинхронные состояния

import { atom, useAtom } from "jotai";

const countAtom = atom(0);

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  return <button onClick={() => setCount(count + 1)}>Счетчик: {count}</button>;
}

🚩MobX Автоматически отслеживает изменения состояния Удобен для сложных приложений

import { makeAutoObservable } from "mobx";
import { observer } from "mobx-react-lite";

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment() {
    this.count++;
  }
}

const store = new CounterStore();

const Counter = observer(() => (
  <button onClick={() => store.increment()}>Счетчик: {store.count}</button>
));

🚩XState Подходит для сложных логик (например, UI-анимаций, состояний формы) Удобно описывать последовательности действий

import { createMachine, interpret } from "xstate";

const toggleMachine = createMachine({
  id: "toggle",
  initial: "inactive",
  states: {
    inactive: { on: { TOGGLE: "active" } },
    active: { on: { TOGGLE: "inactive" } },
  },
});

const service = interpret(toggleMachine).start();
service.send("TOGGLE"); // Меняет состояние

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

🤔 Какие бывают CSS units (единицы измерения)? - Абсолютные: px, pt, cm, mm, in; - Относительные: em, rem, %, vw, vh, vmin, vmax; - Функциональные: calc(), clamp() и др. Относительные единицы зависят от размера родителя, корня или окна браузера. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

📺 Уникальная база IT собеседований 456+ реальных собеседований на программиста, тестировщика, аналитика и прочие IT профы. Есть собесы от ведущих компаний: Сбер, Яндекс, ВТБ, Тинькофф, Озон, Wildberries и т.д. 🎯 Переходи по ссылке и присоединяйся к базе, чтобы прокачать свои шансы на успешное трудоустройство!

🤔 Как мы можем замерить скорость работы участка кода с date.Now? В JavaScript можно замерить скорость выполнения кода с помощью Date.now(), но есть более точные способы. Давайте разберём разные варианты. 🚩Использование `Date.now()` Метод Date.now() возвращает количество миллисекунд с 1 января 1970 года (Unix-время). Можно запомнить время до и после выполнения кода, а затем вычислить разницу.

const start = Date.now(); // Фиксируем время начала

// Код, время выполнения которого нужно измерить
for (let i = 0; i < 1e6; i++) { Math.sqrt(i); }

const end = Date.now(); // Фиксируем время окончания
console.log(`Время выполнения: ${end - start} мс`);

🚩Использование `performance.now()` (Более точный способ) Метод performance.now() возвращает время с микросекундной точностью (до тысячных долей миллисекунды). Он точнее, чем Date.now(), так как измеряет время с высокой детализацией.

const start = performance.now();

for (let i = 0; i < 1e6; i++) { Math.sqrt(i); }

const end = performance.now();
console.log(`Время выполнения: ${(end - start).toFixed(3)} мс`);

🚩Использование `console.time()` Если нужно просто измерить время выполнения блока кода, можно воспользоваться console.time() и console.timeEnd().

console.time("Мой код");

for (let i = 0; i < 1e6; i++) { Math.sqrt(i); }

console.timeEnd("Мой код"); // Выведет время выполнения

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

🤔 Что такое и чем опасен XSS? XSS (Cross-Site Scripting) — это атака, при которой злоумышленник внедряет вредоносный JavaScript-код в страницу. Опасен тем, что может украсть cookies, данные с формы, сделать редирект или отправить вредоносный запрос от имени пользователя. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Станьте разработчиком нейро-сотрудников на Python и зарабатывайте от 150.000р в месяц 🔥🔥🔥 Мы научим вас создавать топовых нейро-сотрудников на базе GPT-4 Omni, и вы сможете: 1️⃣ Устроиться разработчиком в крупную компанию и зарабатывать от 150 тысяч ₽ в месяц 2️⃣ Разрабатывать такие проекты на заказ и зарабатывать от 500 тысяч ₽ за проект 3️⃣ Создать нейро-сотрудника в вашей компании и вырасти на +30-100% в зарплате Что будет на интенсиве? 🧬 Теория: как создаются нейро-сотрудники с GPT-4o на Python 🧬 Практика: мы создадим нейро-консультанта, нейро-HR, нейро-маркетолога и др. Ведущий интенсива - Senior AI разработчик нейросетей и основатель Университета искусственного интеллекта 🔥 Регистрируйтесь на бесплатный интенсив! Встречаемся в ближайший четверг!

🤔 Какая есть важная особенность у pipe? Это популярная концепция в программировании, особенно в функциональных языках и библиотеках вроде RxJS (в контексте реактивного программирования). Она используется для последовательного применения функций к данным. 🚩Почему это важно? 🟠Чистота pipe работает с чистыми функциями, которые не изменяют исходные данные и возвращают новый результат. Это повышает предсказуемость кода. 🟠Композиция Вместо вложенных вызовов функций (когда результат одной функции передается в другую) pipe упрощает цепочку, делая её линейной. 🟠Читаемость Код становится проще для понимания, особенно если функций много. 🟠Легкость модификации Можно легко добавлять или удалять шаги в цепочке, не меняя структуру кода. 🚩Как работает `pipe`? pipe принимает несколько функций в качестве аргументов и применяет их слева направо к переданным данным. То есть результат одной функции передается как вход в следующую. 🚩Пример реализации простого `pipe`

const pipe = (...functions) => (input) => 
  functions.reduce((acc, fn) => fn(acc), input);

// Пример функций
const multiplyByTwo = (num) => num * 2;
const addThree = (num) => num + 3;
const square = (num) => num ** 2;

// Использование pipe
const processNumber = pipe(multiplyByTwo, addThree, square);

console.log(processNumber(5)); // ((5 * 2) + 3) ** 2 = 121

🚩Использование в RxJS В контексте RxJS pipe используется для работы с потоками данных, где через него можно передавать операторы, такие как map, filter, mergeMap и другие.

import { of } from 'rxjs';
import { map, filter } from 'rxjs/operators';

// Создаем поток данных
const numbers$ = of(1, 2, 3, 4, 5);

// Используем pipe для применения операторов
numbers$
  .pipe(
    filter((num) => num % 2 === 0), // Оставляем только четные
    map((num) => num * 10)          // Умножаем их на 10
  )
  .subscribe((result) => console.log(result)); 
// Вывод: 20, 40

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

🤔 Почему не используем REST? REST не всегда удобен, потому что: - требует жёсткой структуры (ресурсно-ориентированной); - может не покрывать событийные сценарии (например, подписки, стриминг); - не эффективен при мелкозернистком взаимодействии — тогда лучше GraphQL или WebSocket. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 С какими нововведениями es6 знаком? ECMAScript 6 (или ES6), также известный как ECMAScript 2015, представил множество новых возможностей для JavaScript, которые сделали язык более удобным, мощным и современным. Я знаком с большинством нововведений, и ниже я подробно расскажу о самых популярных из них. 🟠`let` и `const` До ES6 переменные создавались с помощью var. Однако у него были проблемы, такие как отсутствие блочной области видимости и возможность повторного объявления. С введением let и const эти проблемы решены. let — для переменных, которые могут изменяться. const — для переменных, которые нельзя переназначить (но можно изменять содержимое, если это объект или массив).

let a = 10;
a = 20; // Работает

const b = 30;
// b = 40; // Ошибка: Нельзя переназначить

🟠Стрелочные функции (Arrow Functions) Стрелочные функции дают более лаконичный синтаксис для объявления функций. Они также не создают собственный this, а используют this из окружающего контекста.

// Обычная функция
function add(a, b) {
  return a + b;
}

// Стрелочная функция
const add = (a, b) => a + b;

console.log(add(2, 3)); // 5

🟠Шаблонные строки (Template Literals) Раньше строки приходилось склеивать с помощью конкатенации (+). Шаблонные строки (обозначаются обратными кавычками ``) позволяют вставлять переменные и выражения прямо в текст.

const name = "Alice";
const message = `Привет, ${name}! Добро пожаловать.`;
console.log(message); // Привет, Alice! Добро пожаловать.

🟠Деструктуризация (Destructuring) Деструктуризация позволяет извлекать значения из массивов или объектов и присваивать их переменным.

// Деструктуризация массива
const arr = [1, 2, 3];
const [first, second] = arr;
console.log(first, second); // 1, 2

// Деструктуризация объекта
const user = { name: "Alice", age: 25 };
const { name, age } = user;
console.log(name, age); // Alice 25

🟠Модули (Modules) ES6 добавил встроенную поддержку модулей через import и export. Теперь код можно организовывать и повторно использовать более эффективно.

// В модуле user.js
export const greet = (name) => `Привет, ${name}`;

// В другом файле
import { greet } from './user.js';
console.log(greet("Alice")); // Привет, Alice

🟠Операторы "..." (Spread и Rest) Оператор ... используется для работы с массивами, объектами и функциями. Spread — для разворачивания массивов и объектов. Rest — для сбора оставшихся элементов в массив или объект.

// Spread
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];
console.log(arr2); // [1, 2, 3, 4]

// Rest
const [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 1
console.log(rest);  // [2, 3, 4]

🟠Классы (Classes) Классы добавляют объектно-ориентированный стиль программирования. Это синтаксический сахар над прототипами.

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} говорит.`);
  }
}

const dog = new Animal("Собака");
dog.speak(); // Собака говорит.

🟠Обещания (Promises) Обещания (Promises) упрощают работу с асинхронным кодом, заменяя вложенные колбэки (callback hell).

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve("Данные получены"), 1000);
  });
};

fetchData().then((data) => console.log(data)); // Данные получены

🟠Итераторы и генераторы Итераторы дают возможность обходить коллекции (например, массивы) шаг за шагом. Генераторы — функции, которые можно приостанавливать и возобновлять.

function* numbers() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = numbers();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3

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

🤔 В чём разница между div и span? - div — это блочный элемент, начинается с новой строки и занимает всю ширину. - span — строчный элемент, используется внутри текста, не разрывая поток. Оба используются для группировки, но в разных контекстах. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Запустите рекламу в телеграм-каналах с Яндекс Директом Перфоманс-реклама теперь в телеграм-каналах ⚡ Яндекс Директ знает, как привлечь целевую аудиторию 💰👌 Попробовать #реклама yandex.ru О рекламодателе