⚡ Задача дня

❓ Какой тип будет у переменной result?

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

const result = merge({ name: "Анна" }, { age: 25 });

console.log(result);

✅ Ответ
{ name: string; age: number; }

Если возникли трудности, читай про эту тему здесь:
https://www.typenoscriptlang.org/docs/handbook/2/generics.html

Дженерики + объединение типов = мощь! 🚀 Используй и пиши гибкий код! 🔥

⚡ Задача дня

❓ Что выведет консоль?

const words = ["apple", "banana", "cherry"];

const result = words.filter(word => word.length > 5).map(word => word.toUpperCase());

console.log(result);

✅ Ответ
["BANANA", "CHERRY"]

📚 Почитать про filter и map можно здесь:
https://learn.javanoscript.ru/array-methods#filter
https://learn.javanoscript.ru/array-methods#map

Жизненный цикл компонента в React (в классновых и функциональных компонентах)

В современном фронтенде функциональные компоненты уже стали стандартом. Но классовые все еще встречаются, особенно в проектах, начатых несколько лет назад, когда React активно продвигал этот подход. На собеседованиях их часто спрашивают, а также просят объяснить, как аналогичные механизмы реализуются в функциональных компонентах. Давай разберемся в этом вопросе!

Фазы жизненного цикла в классовых компонентах

⚡️Монтирование (Mounting) — когда компонент появляется в DOM

constructor(props)

— вызывается при создании компонента. Здесь можно инициализировать state.

static getDerivedStateFromProps(props, state)

— вызывается перед рендерингом. Позволяет обновлять state на основе props.

render()

— отрисовывает JSX.

componentDidMount()

— вызывается после рендеринга компонента в DOM. Здесь обычно делают запросы к API или подписки.


⚡️Обновление (Updating) — когда компонент обновляется

static getDerivedStateFromProps(props, state)

— вызывается снова при обновлении props.

shouldComponentUpdate(nextProps, nextState)

— позволяет предотвратить ненужный ререндер, возвращая true или false.

render()

— отрисовывает компонент заново.

getSnapshotBeforeUpdate(prevProps, prevState)

— вызывается перед обновлением DOM, позволяет сохранить предыдущее состояние.

componentDidUpdate(prevProps, prevState, snapshot)

— вызывается после обновления компонента, удобно для запросов к API при изменении props.

⚡️ Размонтирование (Unmounting) — когда компонент удаляется из DOM

componentWillUnmount()

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


🚀Жизненный цикл в функциональных компонентах (хуки)

Вместо методов жизненного цикла в функциональных компонентах используют useEffect:

import { useState, useEffect } from "react";

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

  useEffect(() => {
    console.log("Компонент смонтировался 🚀");

    return () => {
      console.log("Компонент размонтировался 💀");
    };
  }, []); // Пустой массив означает, что useEffect сработает только один раз

  return (
    <div>
      <p>Счетчик: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

useEffect(() => {...}, []) — аналог componentDidMount
useEffect(() => {...}, [deps]) — аналог componentDidUpdate
return () => {...} внутри useEffect — аналог componentWillUnmount

👉Итог
В классовых компонентах используются методы жизненного цикла (componentDidMount, componentDidUpdate, componentWillUnmount).
В функциональных компонентах используют useEffect, который заменяет эти методы.
В новых проектах лучше использовать функциональные компоненты и хуки, так как они проще и удобнее.

Попалась мне интересная статья, и я просто не могу не поделиться ей с тобой.

Сразу скажу, что уважаю эту компанию и её сотрудников за действительно сильные технические скиллы. Вместе с этим, как бывший сотрудник, могу сказать, что выводы в статье кажутся мне весьма занятными.

Расскажи, что думаешь)

https://habr.com/ru/articles/882724/

Советы по прохождению технического интервью в крупнейшие IT-компании (Big Tech):

📍 Подготовься к решению задач на доске: практикуйся в написании кода от руки, чтобы уверенно решать задачи на доске во время интервью.

📍 Демонстрируй процесс мышления: объясняй свои мысли и подходы к решению задач, чтобы интервьюеры могли оценить твой аналитический процесс.

📍 Задавай вопросы: если условия задачи неясны, не стесняйся уточнять детали, показывая своё стремление к точности и пониманию.

📍 Учитывай крайние случаи: обращай внимание на возможные исключения и нестандартные ситуации, чтобы продемонстрировать глубокое понимание проблемы.

📍 Тестируй свой код: после написания решения проверь его на наличие ошибок и убедись в правильности работы.

📍 Будь готов к вопросам по резюме: ожидай обсуждения проектов и опыта, указанных в твоём резюме, и будь готов подробно о них рассказать.

📍 Практикуй поведенческие вопросы: подготовь примеры из прошлого опыта, демонстрирующие твои навыки командной работы, преодоления трудностей и адаптивности.

📍 Проявляй энтузиазм и интерес: покажи искреннюю заинтересованность в позиции и компании, что подчеркнёт твою мотивацию. 🚀

Копаоник (Сербия)

.road {
opacity: 0.4
}

Мой мини-отпуск подошел к концу и я врываюсь в рабочие будни с новым видео про алгоритмы!

https://youtu.be/nWRl0gnx0gY?si=spYQ6u4L9FRaxZup

⚡ Задача дня

❓ Что выведет консоль?

const arr = [10, 20, 30];

const a = arr.push(40);
const b = arr.pop();
const c = arr.unshift(5);
const d = arr.shift();

console.log(a, b, c, d);

✅ Ответ
4 40 4 5

📚 Почитать про push, pop, shift, unshift можно здесь:
https://learn.javanoscript.ru/array-methods#push-pop-shift-unshift

#javanoscript #frontend #фронтендсобеседования

При решении алгоритмических задач нам часто нужно перебирать массив. Давай разберёмся, чем отличаются for, forEach и for...of, и в каких случаях каждый из них удобнее. 🔍


1️⃣ for
Классический способ перебора массива, подходит для случаев, когда нужен полный контроль над итерацией: досрочный выход (break, return) или переход к следующей итерации (continue).

const nums = [1, 2, 3, 4, 5];

for (let i = 0; i < nums.length; i++) {
  if (nums[i] === 3) continue; // Пропускаем число 3
  if (nums[i] === 4) break; // Останавливаем цикл
  console.log(nums[i]); 
}
// Выведет: 1, 2

✅ Позволяет управлять индексом.
✅ Можно использовать break, continue, return.
❌ Код получается более громоздким.


2️⃣ for...of
Современный способ перебора итерируемых объектов, включая массивы. Читается проще, чем for, позволяет break, continue и return.

const nums = [1, 2, 3, 4, 5];

for (let num of nums) {
  if (num === 3) continue; // Пропускаем 3
  if (num === 4) break; // Останавливаем цикл
  console.log(num);
}
// Выведет: 1, 2

✅ Простой и лаконичный синтаксис.
✅ Работает с break, continue, return.
✅ Подходит для работы с Set, Map, arguments и другими итерируемыми объектами.
❌ Нет доступа к индексу элемента (если нужен индекс, можно использовать .entries()).

for (let [index, num] of nums.entries()) {
  console.log(index, num);
}
// Выведет: 0 1, 1 2, 2 3, 3 4, 4 5

3️⃣ forEach
Метод массива, удобный для перебора элементов. Не прерывается с помощью break, continue или return.

const nums = [1, 2, 3, 4, 5];

nums.forEach((num, index, arr) => {
  if (num === 3) return; // НЕ ОСТАНОВИТ ВЕСЬ ЦИКЛ! Только текущую итерацию
  console.log(num);
});
// Выведет: 1, 2, 4, 5

✅ Упрощает работу с массивом, не надо следить за индексом.
✅ Лаконичный код.
❌ Нельзя выйти (break или return не остановят forEach).


📌 Вывод:
for – лучший выбор, если нужен индекс или возможность прервать цикл.
forEach – удобен для чистых переборов, но без возможности остановки.
for...of – читабельный вариант, если не нужен индекс.
👉 Что использовать – зависит от задачи! 🚀

Друзья, сняла для вас ролик про основные ошибки джуниор-разработчиков, которые мешают расти в профессии. Затронула противоречивые темы и постаралась рассмотреть некоторые пункты с разных сторон. Делитесь в комментариях: какие ошибки допускали вы, и как вам удалось с ними справиться?
https://youtu.be/-htWGDRyv1Y?si=mWVNWdx0nXdOseJI

#Frontend #ДжуниорРазработчик #ОшибкиРазработчиков #ITкарьера #Программирование

Что такое поведенческое интервью и зачем оно нужно? (Часть 1)

Недавно проходила собес в одну крупную IT компанию, и одной из секций было поведенческое интервью. Название звучит жутковато (у меня сразу ассоциации с лабораториями и экспериментами 🧪😅), но по факту это просто разговор, в котором хотят понять, как ты работаешь, взаимодействуешь с людьми и решаешь проблемы.

⚡ Что важно знать?

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

Это не тест на интеллект, а способ проверить твою адекватность, поведение в рабочих ситуациях и соответствие культуре компании.

Вместо общих вопросов («Какие у вас сильные стороны?») тебя попросят описать реальный опыт или смоделировать ситуацию.

🤔 Какие вопросы могут задать?

«Расскажите про самую сложную задачу, с которой вы сталкивались»

«Как вы решали конфликт в команде?»

«Когда допустили ошибку? Как исправили и какие выводы сделали?»

«Как поступите, если не успеваете в сроки?»

«Что сделаете, если не согласны с комментарием коллеги к вашему PR?»

«Расскажите, когда вы проявили инициативу»

«Как изучаете что-то новое?»

🎯 Что хотят услышать?

Компании важно не просто узнать, какие у тебя есть навыки, а понять, как ты их применяешь в реальных ситуациях.

💡 Основные качества, которые оценивают:

✅ Командная работа – как взаимодействуешь с коллегами, решаешь конфликты.

✅ Адаптивность – как быстро переключаешься, осваиваешь новое.

✅ Организованность – умеешь ли планировать задачи и держать дедлайны.

✅ Проактивность – готов ли предлагать идеи и доводить задачи до конца.

✅ Способность принимать фидбэк – адекватно реагируешь на критику, делаешь выводы.

✅ Обучаемость – стремишься ли к развитию.

✅ Лидерские качества – если роль требует инициативности.

В следующем посте расскажу как подготовиться и не провалиться на собеседовании 😉👇

#собеседование #поведенческоеинтервью

Знакомо? 😜
#memes

Как подготовиться к поведенческому интервью (Часть 2)

Само по себе поведенческое интервью — не такое уж страшное мероприятие. Но без подготовки можно легко растеряться и создать неверное впечатление. Чтобы этого не произошло, давай разберём ключевые стратегии подготовки:


1️⃣ Проанализируй вакансию и ценности компании

📌 Ещё раз внимательно прочитай требования к кандидату.

Если компания ищет человека с «проактивной позицией», жди вопросов про инициативность. Если акцент на командную работу – готовь истории про успешное взаимодействие с коллегами.

🔹 Где искать ценности компании?

Часто их можно найти на сайте компании или в описании вакансии. Если там акцент на «адаптивность» и «обучаемость», подготовь примеры, где ты быстро осваивал новое или успешно справлялся с изменениями.

💡 Чем лучше ты понимаешь, кого ищет компания, тем легче подготовить релевантные ответы.


2️⃣ Подготовь примеры из своего опыта

🤔 Не рассчитывай, что вспомнишь всё на ходу. Подготовь 3-5 историй, которые можно адаптировать под разные вопросы:

✔️ Успешный проект, где ты проявил лидерство.
✔️ Конфликтная ситуация, которую ты смог разрулить.
✔️ Ошибка, из которой ты сделал важные выводы.
✔️ Сложная задача, где тебе пришлось проявить креативность.
✔️ Пример, когда ты взял инициативу и это дало результат.

📌 Если у тебя мало опыта, бери примеры из учёбы, стажировок, фриланса или даже личных проектов. Главное – конкретика.


3️⃣ Используй метод STAR

Чтобы твои ответы были чёткими и логичными, используй структуру STAR:
⭐ S (Situation) – опиши ситуацию (где и когда это было?).
⭐ T (Task) – какая перед тобой стояла задача/проблема?
⭐ A (Action) – какие шаги ты предпринял для решения?
⭐ R (Result) – какой был результат?

🔹 Пример плохого ответа: «Ну, был проект, и там было сложно, но я разобрался».

🔹 Пример хорошего ответа:
🎯 «На одном проекте мы столкнулись с проблемой медленной загрузки страницы (S). Мне нужно было найти способ ускорить её без переписывания всего кода (T). Я провёл анализ и предложил использовать кеширование с React Query (A). Это снизило время загрузки на 40% и упростило работу с данными (R).»


4️⃣ Практикуй свои истории

✅ Проговори ответы вслух, но не заучивай дословно – важно, чтобы ты звучал естественно.

✅ Укладывайся в 2-3 минуты, иначе интервьюер может потерять нить.

💡 Можно использовать голосового помощника для тренировки. Например, с таким промптом:

"Ты HR в IT-компании с 10-летним опытом. Проведи мне поведенческое интервью, задавай вопросы, оценивай мои ответы и подсказывай, что можно улучшить."

Такая тренировка особенно хорошо помогает «разогреть мозг», если собеседование проходит на иностранном языке.


5️⃣ Подготовь вопросы для интервьюера

В конце собеседования тебя, скорее всего, спросят: «У вас есть вопросы?»

✅ Лучше подготовь 1-2 осмысленных вопроса, которые покажут твою вовлечённость.

❓ Что можно спросить?

«Как в вашей команде принимаются решения?»
«Какие вызовы сейчас стоят перед командой?»
«Как у вас проходит адаптация новых сотрудников?»

💡 Хорошие вопросы = плюс к твоему впечатлению как кандидата.

#собеседования #поведенческоеинтервью