Frontend | Вопросы собесов
19.1K subscribers
33 photos
1 video
1.06K links
Download Telegram
🤔 TDD или Code First?

- TDD (Test-Driven Development) — надёжнее, но требует культуры.
- Code First — быстрее, но не всегда безопасно. Комбинируем: бизнес-критичный код — через TDD, остальное — гибко.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5
🤔 Какие особенности слежения за "глубокими" объектами?

Когда мы отслеживаем изменения в объектах (например, в React, Vue или MobX), важно понимать, что JavaScript не умеет автоматически следить за вложенными свойствами. Это называется глубокое слежение (deep watching).

Проблема: поверхностное слежение (`shallow watching`)

JavaScript сравнивает только ссылки на объекты, а не их содержимое.
const obj = { user: { name: "Иван" } };
const copy = obj;

copy.user.name = "Петр";
console.log(obj.user.name); // "Петр" (оба объекта ссылаются на одно и то же)


🚩Глубокое копирование vs поверхностное

Обычный Object.assign() или spread-оператор ({ ...obj }) делают поверхностное копирование:
const obj = { user: { name: "Иван" } };
const shallowCopy = { ...obj };

shallowCopy.user.name = "Петр";
console.log(obj.user.name); // "Петр" 😱 (изменился оригинал!)


Для глубокого копирования можно использовать structuredClone() или JSON.parse(JSON.stringify(obj)):
const deepCopy = structuredClone(obj);
deepCopy.user.name = "Петр";

console.log(obj.user.name); // "Иван" (оригинал не изменился)


🚩Как следить за глубокими объектами?

🟠React: следим через `useState` и `useEffect`
В React состояние обновляется только при изменении ссылки (shallow compare).
const [user, setUser] = useState({ name: "Иван" });

useEffect(() => {
console.log("Имя изменилось:", user.name);
}, [user]); // Работает только если user — новый объект!

// НЕ сработает:
user.name = "Петр"; // user остался тем же объектом


Решение – создавать новый объект при изменении:
setUser(prev => ({ ...prev, name: "Петр" }));


🟠Vue: `watch` vs `watchEffect` (глубокое слежение)

Обычный watch следит только за первой вложенностью
watch(user, (newValue) => {
console.log("Изменено:", newValue);
});


Глубокое слежение (deep: true)
watch(user, (newValue) => {
console.log("Изменено:", newValue);
}, { deep: true });


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥3
🤔 Что делает и для чего нужна функция Function.prototype.bind?

Метод bind позволяет создать новую функцию с жёстко привязанным контекстом (this) и при необходимости — предустановленными аргументами. Полезен при передаче методов в колбэки, где может потеряться контекст.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥2
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔 Что такое семантические коммиты?

Семантические коммиты – это соглашение о формате сообщений коммитов в системе контроля версий (обычно Git), которое помогает делать историю изменений более понятной и удобной для автоматического анализа.

Обычно используется стандарт Conventional Commits, который вводит строгую структуру сообщений коммитов.

🚩Формат семантического коммита

Коммит должен начинаться с типа изменения, а затем кратко описывать суть правки.

Основной шаблон
<тип>(<область>): <краткое описание>


🚩Основные типы коммитов

🟠feat
добавление новой функциональности
🟠fix
исправление ошибки
🟠docs
изменение документации
🟠style
исправления, не влияющие на логику (например, форматирование)
🟠refactor
переработка кода без изменения функциональности
🟠test
добавление или обновление тестов
🟠chore
изменения, не влияющие на код (например, обновление зависимостей)

🚩Примеры

1⃣Добавление новой функции
feat(auth): добавлена аутентификация через Google


2⃣Исправление ошибки
fix(login): исправлен баг с неверным редиректом


3⃣Улучшение кода без изменения
refactor(api): оптимизирован алгоритм фильтрации данных


4⃣Обновление документации
docs(readme): добавлены инструкции по развертыванию


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6