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

🤔 Как понимают изменение состояния mobxvue? MobX в Vue работает с реактивностью (как и Vue), но использует свою систему отслеживания изменений. Он понимает, что состояние изменилось, с помощью прокс (Proxy) и геттеров/сеттеров (get/set). 🚩Как MobX делает состояние реактивным? В MobX основная функция для создания реактивного состояния — observable(). Она превращает объект в реактивный Proxy, который отслеживает чтение (get) и изменение (set) свойств.

import { observable } from "mobx";

const store = observable({
  count: 0,
  increment() {
    this.count++;
  },
});

console.log(store.count); // MobX "запоминает", что это свойство использовалось
store.increment(); // MobX "замечает", что свойство изменилось

🚩Как MobX понимает, что нужно обновить компонент Vue? Vue-компоненты подписываются на реактивные свойства, когда они рендерятся внутри observer().

import { defineComponent } from "vue";
import { observer } from "mobx-vue-lite";

export default observer(defineComponent({
  setup() {
    return {
      store,
    };
  },
  template: `<div>{{ store.count }}</div>`,
}));

🚩Как MobX понимает зависимости? (Track & Re-run) MobX автоматически отслеживает зависимости во время рендера. Когда компонент использует store.count, MobX **"запоминает", что он зависит от count. Когда count изменяется, MobX перерисовывает только этот компонент.

import { computed } from "mobx";

const store = observable({
  count: 1,
  get doubleCount() {
    return this.count * 2;
  },
});

console.log(store.doubleCount); // 2
store.count = 2;
console.log(store.doubleCount); // 4 (MobX понимает, что зависимость изменилась)

🚩Как MobX оптимизирует обновления? (Reactions) MobX не просто перерисовывает всё — он оптимизирует рендеринг. 🟠autorun запускается сразу и при изменении любого используемого свойства. 🟠reaction запускается только когда меняется конкретное наблюдаемое свойство. 🟠when выполняется один раз, когда условие становится true.

import { autorun } from "mobx";

const store = observable({ count: 0 });

autorun(() => {
  console.log("Count изменился:", store.count);
});

store.count = 1; // "Count изменился: 1"
store.count = 2; // "Count изменился: 2"

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

Почему твое резюме не замечают?😭 Ты отправил десятки откликов, но в ответ — тишина? Ты проходишь собеседования, но офферов всё нет? Работаешь за 3 копейки, хотя опыта уже достаточно? Боль многих айтишников, согласитесь? Причина не в рынке и даже не в опыте! Просто ты не знаешь, что хотят видеть и слышать рекрутеры и техлиды. ✅Как сделать так, чтобы HR сами звали тебя на интервью? ✅Как проходить собесы и получать достойные офферы от 200к? ✅Какие ошибки мешают тебе пробить потолок? Тихон - действующий frontend разработчик, разбирает всё это в своем канале: https://t.me/+4RyIIM1mUOY3Mzdi. 👉 Подписывайте, там в закрепе уже собрано 3 гайда для подготовки к собесам.

Бесплатный курс по UX/UI-дизайну с нуля C нуля сделаете портфолио из 4+ работ и узнаете всё о профессии UX/UI дизайнера на практике: - дизайн сайтов и интерфейсов приложений - графический дизайн - веб-дизайн С личным наставником и разбором работ 🎓 Подать заявку #реклама 16+ yudaevschool24.online О рекламодателе

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

Новый сервис Яндекса для вашего бизнеса 7 марта в 12:00 мск приглашаем на бесплатный вебинар по Яндекс Ритмуβ — платформе, где можно продвигать товары с помощью фото и видео. Кому будет полезно: ✅ Владельцам интернет-магазинов ✅ Специалистам по контентному продвижению и рекламе ✅ Представителям брендов На вебинаре разберём: ⚡ Что такое Яндекс Ритмβ и как он поможет вашему бизнесу ⚡ Как получить дополнительный трафик на вашу площадку продаж Спикер: Анна Свиязова — руководитель группы развития бизнеса Яндекс Ритмаβ. Поделится опытом и ответит на ваши вопросы в прямом эфире. Зарегистрируйтесь прямо сейчас — это бесплатно Узнать больше #реклама 16+ yandex.ru О рекламодателе

🤔 Какие проблемы решает eventloop? Event Loop (Цикл событий) – это механизм, который позволяет JavaScript работать асинхронно, обрабатывать события и не блокировать основной поток выполнения. Он решает несколько важных проблем, которые были бы сложны без него. 🚩JavaScript однопоточный, но нужно выполнять асинхронные задачи JavaScript работает в одном потоке, то есть выполняет код последовательно. Если одна операция занимает много времени (например, загрузка данных с сервера), выполнение всего кода остановилось бы, пока задача не завершится. Это привело бы к зависанию страницы. Event Loop позволяет выполнять тяжёлые операции (например, запросы на сервер, таймеры) асинхронно, не блокируя основной поток.

console.log("1: Перед запросом");

setTimeout(() => {
  console.log("2: Данные загружены");
}, 2000);

console.log("3: После запроса");

Вывод в консоль

1: Перед запросом  
3: После запроса  
2: Данные загружены (спустя 2 секунды)

🚩Обработка пользовательских событий без зависаний Если бы JavaScript не мог обрабатывать события асинхронно, то нажатия кнопок, прокрутка страницы и другие действия зависали бы, пока выполняется тяжёлая операция. Event Loop ставит события (например, click, keydown) в очередь и обрабатывает их только когда основной поток свободен.

document.querySelector("button").addEventListener("click", () => {
  console.log("Кнопка нажата!");
});

🚩Загрузка данных без блокировки страницы Когда мы загружаем данные с сервера (fetch, setTimeout, setInterval), они не приходят мгновенно. Без Event Loop браузер бы зависал в ожидании ответа. Асинхронные запросы (fetch, XMLHttpRequest) выполняются в фоновом режиме. Когда ответ готов, он помещается в очередь задач и обрабатывается, когда основной поток освободится.

console.log("Запрос данных...");

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json())
  .then(data => console.log("Данные получены:", data));

console.log("Код выполняется дальше!");

Вывод

Запрос данных...  
Код выполняется дальше!  
(Спустя время) Данные получены: {id: 1, title: "..."}

🚩Обход блокировки в тяжёлых вычислениях Если в коде идёт сложная операция (например, сложные вычисления или рендеринг огромного списка), интерфейс зависнет. Можно разбить задачу на части и выполнять её постепенно с помощью setTimeout или requestAnimationFrame.

let count = 0;

function heavyTask() {
  for (let i = 0; i < 1e6; i++) {
    count++;
  }
  console.log("Часть работы выполнена!");

  if (count < 5e6) {
    setTimeout(heavyTask, 0); // Даем Event Loop обработать другие задачи
  }
}

heavyTask();

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

Научим создавать карточки для WB и Ozon с нуля! Дизайнер карточек для маркетплейсов — востребованная и доходная профессия 💰 Научись ей бесплатно! - Бесплатный доступ к курсу - Разбор ДЗ от наставника - Мощные кейсы в портфолио Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

🤔 Для чего нужен CORS? Это механизм безопасности, позволяющий или запрещающий браузерам делать запросы к API с другого домена. Без CORS браузер блокирует такие запросы из-за политики одного источника (SOP, Same-Origin Policy). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Как навести порядок в бизнесе? — Работать в Битрикс24. Это бесплатный онлайн-сервис для совместной работы всей компании. В порядке будут не только задачи в таск-трекере, но и продажи в CRM, коммуникация в собственном мессенджере, планирование в календаре, обмен файлами и ИИ-помощник — всё для эффективной работы и порядка в процессах. Заберите бесплатно 10+ инструментов для работы и бизнеса. Зарегистрироваться #реклама 16+ office-online.bitrix24.ru О рекламодателе

🤔 Как происходит tostring? Метод .toString() используется для преобразования значения в строку. Он есть у всех объектов в JavaScript, потому что наследуется от Object.prototype. Однако, его поведение зависит от типа данных. 🟠toString() у примитивов Числа, строки, булевы значения, null, undefined Для примитивных типов toString() работает просто — возвращает строковое представление значения:

console.log((123).toString());     // "123"
console.log(true.toString());      // "true"
console.log(false.toString());     // "false"
console.log((3.14).toString());    // "3.14"

Но null и undefined не имеют метода toString() и вызов приведёт к ошибке

console.log(null.toString());   // ❌ Ошибка: Cannot read properties of null
console.log(undefined.toString()); // ❌ Ошибка

Поэтому для них лучше использовать String()

console.log(String(null));       // "null"
console.log(String(undefined));  // "undefined"

🟠toString() у массивов Для массивов toString() преобразует их в строку, разделяя элементы запятой

console.log([1, 2, 3].toString()); // "1,2,3"
console.log(["яблоко", "банан"].toString()); // "яблоко,банан"
console.log([].toString()); // "" (пустая строка)

🟠`toString()` у объектов По умолчанию метод toString() у объекта возвращает строку вида [object Object]

const obj = { a: 1, b: 2 };
console.log(obj.toString()); // "[object Object]"

Если нужно другое поведение, можно переопределить toString() в объекте

const user = {
  name: "Иван",
  age: 30,
  toString() {
    return `Имя: ${this.name}, Возраст: ${this.age}`;
  }
};

console.log(user.toString()); // "Имя: Иван, Возраст: 30"

🟠`toString()` у классов Можно переопределять метод toString() в классах

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  toString() {
    return `${this.name} (${this.age} лет)`;
  }
}

const person = new Person("Анна", 25);
console.log(person.toString()); // "Анна (25 лет)"

🟠`toString()` у функций Функции тоже имеют метод toString(), но он возвращает их исходный код

function hello() {
  return "Привет!";
}

console.log(hello.toString());
// "function hello() { return 'Привет!'; }"

Для стрелочных функций

const sum = (a, b) => a + b;
console.log(sum.toString());
// "(a, b) => a + b"

🟠Использование `String()` вместо `.toString()` Лучше использовать String(значение), потому что toString() не работает на null и undefined

console.log(String(null));      // "null"
console.log(String(undefined)); // "undefined"
console.log(String(42));        // "42"
console.log(String({ a: 1 }));  // "[object Object]"

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

Партнёрская программа рекрутинга в Яндекс Еду Станьте партнёром Яндекс Еды по привлечению курьеров и получите кучу преимуществ: 💰Платим до 47 000 ₽ за успешного кандидата 📞Поддержка на всех этапах 📅Свободное расписание 📊Удобные инструменты для работы Приводите новых курьеров и получайте в среднем 250 000 ₽ в месяц! Зарегистрироваться #реклама eda.yandex.ru О рекламодателе Реклама на Яндексе

🤔 Какую проблему решает асинхронность в JavaScript? Асинхронность позволяет выполнять долгие операции (запросы к серверу, чтение файлов, таймеры) без блокировки основного потока. Без нее весь интерфейс зависал бы при ожидании ответа от сервера или выполнения сложных вычислений. Решается через callback, Promises и async/await. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Где писать запросы к серверу? Запросы к серверу в React можно выполнять в нескольких местах в зависимости от архитектуры вашего приложения и используемого подхода. 🚩Использование хуков useEffect позволяет выполнять побочные эффекты, такие как запросы к серверу, в функциональных компонентах.

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

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []); // Пустой массив означает, что эффект выполнится только при монтировании компонента

  return (
    <div>
      {data ? (
        <pre>{JSON.stringify(data, null, 2)}</pre>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
}

export default DataFetchingComponent;

🚩Методы жизненного цикла в классовых компонентах Метод componentDidMount используется для выполнения запросов к серверу в классовых компонентах после монтирования компонента.

import React, { Component } from 'react';

class DataFetchingComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
    };
  }

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.setState({ data });
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }

  render() {
    const { data } = this.state;
    return (
      <div>
        {data ? (
          <pre>{JSON.stringify(data, null, 2)}</pre>
        ) : (
          <p>Loading data...</p>
        )}
      </div>
    );
  }
}

export default DataFetchingComponent;

🟠Сервисы или утилиты Запросы к серверу можно изолировать в отдельные файлы сервисов или утилит, что помогает сделать код более модульным и переиспользуемым. service.js

export async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
}

DataFetchingComponent.js

import React, { useState, useEffect } from 'react';
import { fetchData } from './service';

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

  useEffect(() => {
    fetchData()
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    <div>
      {data ? (
        <pre>{JSON.stringify(data, null, 2)}</pre>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
}

export default DataFetchingComponent;

🟠Управление состоянием Для крупных приложений, где важно централизованное управление состоянием, запросы к серверу можно выполнять в рамках таких библиотек, как Redux или MobX. Ставь 👍 и забирай 📚 Базу знаний

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

🤔 Какие библиотеки популярны в React? В экосистеме React популярны Redux для управления состоянием, React Router для маршрутизации, Axios для работы с HTTP-запросами, MUI и Tailwind для стилизации, а также Formik и React Hook Form для управления формами. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Автоматизированное SEO-продвижение для бизнеса! Бесплатный тест 5 дней. Моментальный и понятный результат. Снимаем и прозрачно показываем все метрики. Попробовать #реклама умныйсервис.рф О рекламодателе

🤔 Расскажи про memo в react React.memo — это функция в React, которая используется для оптимизации производительности функциональных компонентов. Она предотвращает ненужные повторные рендеры, если пропсы компонента не изменились. 🚩Зачем нужен `React.memo`? В React каждый раз, когда родительский компонент обновляется, все его дочерние компоненты тоже ререндерятся, даже если их пропсы остались неизменными. Это может негативно сказаться на производительности, особенно если дочерний компонент выполняет сложные вычисления или рендерит большое количество данных. React.memo решает эту проблему, запоминая (мемоизируя) предыдущий результат рендера и сравнивая его с новыми пропсами. Если пропсы не изменились, компонент просто использует закэшированное представление, а не ререндерится. 🚩Как использовать `React.memo`? React.memo — это функция высшего порядка (HOC), которая оборачивает функциональный компонент

import React from "react";

const MyComponent = ({ value }) => {
  console.log("Рендер компонента!");
  return <div>Значение: {value}</div>;
};

// Оборачиваем компонент в React.memo
const MemoizedComponent = React.memo(MyComponent);

export default MemoizedComponent;

🚩Пример без React.memo vs. с React.memo Допустим, у нас есть родительский компонент, который изменяет состояние при каждом клике

import React, { useState } from "react";
import MemoizedComponent from "./MyComponent";

const Parent = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
      <MemoizedComponent value="Привет, мир!" />
    </div>
  );
};

export default Parent;

🚩Когда НЕ стоит использовать `React.memo`? Если компонент всегда ререндерится из-за изменения пропсов – смысла в memo нет. Если компонент рендерится быстро – оптимизация может быть ненужной, а проверка пропсов даже замедлит работу. Если пропсы часто изменяются – кэширование теряет смысл, так как все равно ререндерится. Ставь 👍 и забирай 📚 Базу знаний

Онлайн-интенсив для ИТ-специалистов в Открытых школах Т1 Уже есть опыт работы в ИТ, но хочешь прокачать скилы и продвинуться в карьере? Тогда скорее залетай на бесплатный ИТ-интенсив в Открытых школах Т1. Открытые школы — это возможность усилить свои навыки и получить оффер в ИТ-холдинг Т1. И все это за месяц, онлайн и в удобное вечернее время. Что ты получишь? ✅ бесплатное обучение в гибком формате: по вечерам, онлайн, из любого города РФ и РБ. ✅ материалы от HR для прокачки резюме и подготовки к интервью в Т1. ✅ много практики и уникальный рыночный опыт. ✅ поддержку опытных преподавателей и карьерный фаст-трек до мидла в Т1 для лучших выпускников. ✅ реальный шанс получить оффер в Т1. Более 1000 специалистов уже прошли этот путь — теперь твоя очередь! Регистрация до 14 марта! Подать заявку #реклама 16+ t1.ru О рекламодателе

🤔 Что есть во фронтенде, кроме JS? Помимо JavaScript, во фронтенде используются HTML для структуры страниц, CSS для их оформления, инструменты для сборки (Webpack, Vite), фреймворки (React, Angular, Vue) и различные библиотеки для работы с анимацией, данными и API. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как работает settimeout? Функция setTimeout используется для выполнения кода или функции спустя заданный интервал времени, однократно. Она является частью Web API в браузерах и глобального объекта global в Node.js, что делает её доступной для использования в любом окружении.

let timeoutID = setTimeout(function[, delay, arg1, arg2, ...]);
let timeoutID = setTimeout(functionCode[, delay]);

function: Будет вызвана после задержки. functionCode: Строка кода для выполнения (использование этой формы не рекомендуется по соображениям безопасности). delay: Задержка в миллисекундах, после которой будет выполнена функция. Если не указать, по умолчанию будет использовано значение 0. arg1, arg2, ...: Аргументы, которые будут переданы в функцию при её вызове.

function sayHello() {
  console.log('Привет!');
}

// Вызывает функцию sayHello после задержки в 2000 миллисекунд (2 секунды)
setTimeout(sayHello, 2000);

🚩Отмена выполнения setTimeout Вызов ее возвращает идентификатор таймера, который можно использовать для отмены выполнения с помощью функции clearTimeout.

let timerId = setTimeout(sayHello, 2000);

// Отменяет выполнение
clearTimeout(timerId);

🚩Особенности поведения 🟠Минимальная задержка В HTML5 спецификация предусматривает минимальную задержку в 4ms для вложенных таймеров и в некоторых других случаях, что может повлиять на ожидаемое время выполнения. 🟠Задержка в неактивных вкладках Браузеры могут изменять поведение таймеров для неактивных вкладок для оптимизации производительности и энергопотребления. Это может привести к значительно большей задержке, чем указано. 🟠Асинхронность setTimeout не блокирует выполнение кода, который следует за ним. Он лишь запланирует выполнение функции на будущее, позволяя остальному коду продолжать выполняться без ожидания. Ставь 👍 и забирай 📚 Базу знаний