⚡ Задача дня

❓ Что выведет этот код?

console.log(typeof null);
console.log(null == undefined);
console.log(null === undefined);
console.log(null > 0);
console.log(null >= 0);

✅ Ответ:
"object"
true
false
false
true

Если возникли трудности, почитайте про null, undefined и сравнения в JavaScript:
https://learn.javanoscript.ru/comparison

#javanoscript #собеседования

⚡ Задача дня

❓ Что выведет этот код?

setTimeout(() => console.log("Timeout"), 0);

Promise.resolve().then(() => console.log("Promise"));

console.log("Sync");

✅ Ответ:
"Sync"
"Promise"
"Timeout"

Если возникли трудности, почитайте про очередь микрозадач и макрозадач в JavaScript:
https://learn.javanoscript.ru/event-loop

#javanoscript #собеседования

⚡ Задача дня

❓ Что произойдет, если в HTML будет такой код?

<div>
  <p>Параграф 1</p>
  <p>Параграф 2</p>
  <p>Параграф 3</p>
</div>
<noscript>
  const div = document.querySelector('div');
  console.log(div.innerHTML);
</noscript>

✅ Ответ:
<p>Параграф 1</p><p>Параграф 2</p><p>Параграф 3</p>

Если возникли трудности, почитай про свойство innerHTML:
https://learn.javanoscript.ru/dom-nodes

Ты на верном пути, продолжай! 💡✨

#javanoscript #собеседования

⚡ Задача дня

❓ Какой цвет будет у текста, если есть такие стили?

p {
  color: blue !important;
}

.container p {
  color: red;
}

p.special {
  color: green;
}

<div class="container">
  <p class="special">Привет!</p>
</div>

✅ Ответ:
Синий

Если возникли трудности, почитай про !important и приоритеты в CSS:
https://developer.mozilla.org/ru/docs/Web/CSS/Specificity

Ты молодец, продолжай развиваться! 🌟💻

#javanoscript #собеседования

⚡ Задача дня

❓ Что выведет этот код?

const promise = new Promise((resolve, reject) => {
  console.log("Промис создан");
  resolve("Успех!");
});

promise.then((result) => console.log(result));
console.log("Код завершён");

✅ Ответ
Промис создан
Код завершён
Успех!

Если возникли трудности, читай про эту тему здесь:
https://learn.javanoscript.ru/promise-basics

Промисы — мощная вещь, главное понять, как они работают. Ты справишься! 🚀

#javanoscript #собеседования

⚡ Задача дня

❓ Что выведет этот код?

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);

console.log(sum);

✅ Ответ
15

Если возникли трудности, читай про эту тему здесь:
https://learn.javanoscript.ru/array-methods#reduce-reduceright

#javanoscript #собеседования

⚡ Задача дня

❓ Что выведет этот код?

try {
  const num = 10 / 0;
  if (!isFinite(num)) {
    throw new Error("Деление на ноль!");
  }
} catch (error) {
  console.log(error.message);
} finally {
  console.log("Операция завершена");
}

✅ Ответ
Деление на ноль!
Операция завершена

Если возникли трудности, читай про эту тему здесь:
https://learn.javanoscript.ru/try-catch

Ошибки — это не страшно, если знаешь, как с ними справляться! 💪✨

#javanoscript #собеседования

Самые полезные операторы TypeScript: typeof и keyof

TypeScript даёт нам два классных оператора, которые делают работу с типами удобнее:

🔹 typeof — позволяет взять тип у уже существующей переменной:

const age = 30;
type AgeType = typeof age; // number

Теперь AgeType будет всегда таким же, как тип переменной age. Это полезно, когда нужно создать новый тип на основе уже объявленных данных.

Другой пример:

onst user = {
  name: "Alice",
  age: 25,
};

type UserType = typeof user;

Теперь UserType — это { name: string; age: number }, и если user изменится, тип автоматически обновится.

🔹 keyof — даёт список ключей объекта в виде строкового типа:

type UserKeys = keyof UserType; // "name" | "age"

Теперь UserKeys — это "name" | "age", и мы можем использовать это, например, в функции:

function printUserInfo(key: UserKeys) {
  console.log(key);
}

printUserInfo("name"); // ✅ Работает
// printUserInfo("email"); // ❌ Ошибка, такого ключа нет

Это помогает избежать ошибок, если случайно передать неправильное имя ключа.

Итог:

typeof помогает взять существующий тип.

keyof позволяет получить список ключей объекта.

Простые, но мощные штуки, которые делают код более надёжным! 🚀

⚡ Задача дня

Вот код:

const user = {
  id: 1,
  name: "Alice",
  isAdmin: true,
};

type UserKeys = keyof typeof user;

let key: UserKeys;

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

✅ Ответ
"id" | "name" | "isAdmin"

Если возникли трудности, можно почитать тут:
🔗 https://www.typenoscriptlang.org/docs/handbook/2/keyof-types.html
🔗 https://www.typenoscriptlang.org/docs/handbook/2/typeof-types.html

Кто сказал, что фастфуд только вредит?!

А если так?)

⚡ Задача дня

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

const promise = new Promise((resolve, reject) => {
  console.log("Начало");
  resolve("Успех");
});

promise
  .then((result) => {
    console.log(result);
    return "Следующий then";
  })
  .finally(() => {
    console.log("Финально");
  })
  .then((data) => {
    console.log(data);
  });

console.log("Конец");

✅ Ответ
Начало
Конец
Успех
Финально
Следующий then

💡 Запутался? Почитай подробнее про finally:
👉 https://learn.javanoscript.ru/promise-chaining

⚡ Задача дня

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

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

const result = numbers.map(num => {
  if (num % 2 === 0) {
    return num * 2;
  }
});

console.log(result);

✅ Ответ
[undefined, 4, undefined, 8, undefined]

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

Принципы программирования

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

DRY (Don't Repeat Yourself — Не повторяйся)
Не дублируй код, где можно вынести в общую функцию, модуль или переменную. Чем меньше повторов, тем проще вносить изменения и понимать, что вообще происходит.

KISS (Keep It Simple, Stupid — Не усложняй)
Чем проще код, тем лучше. Если можно сделать что-то понятнее и короче — делай. Не надо усложнять без причины.

Разделяй обязанности (Separation of Concerns, SoC)
Код должен быть разбит на логические куски, каждый из которых отвечает за свою задачу.

Принцип единственной ответственности (SRP)
Каждый модуль, класс или функция должны заниматься чем-то одним. Чем меньше у них причин меняться, тем проще их тестировать и обновлять.

Открыто для расширения, закрыто для модификации (OCP)
Не трогай старый код, если можно добавить что-то новое без его изменения. Для этого есть наследование, интерфейсы и прочие штуки.

Закон Деметры (LoD) — принцип "меньше знаешь, крепче спишь"
Модули (или объекты) не должны лезть внутрь друг друга. Пусть взаимодействуют только по предоставленному API.

Не оптимизируй раньше времени
Пиши понятный код, а потом уже думай о скорости. Оптимизация ради оптимизации только запутает всех, включая тебя самого через месяц.

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

Разработка через тестирование (TDD)
Сначала пиши тесты, потом код. Так ты точно будешь знать, что все работает как надо, и рефакторить код будет проще.

YAGNI (You Aren’t Gonna Need It — Тебе это не понадобится)
Не пиши функционал, который может пригодиться в будущем. Скорее всего, он не пригодится, а вот код засорит.

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

⚡ Задача дня

❓ Что выведет в консоль следующий код?

console.log(null || 2 || undefined);  
console.log(1 && null && 3);  
console.log(!1 || 2 && 3);  
console.log(0 ?? 5);  
console.log(null ?? 'Привет');  

✅ Ответ

2
null
3
0
"Привет"

Если возникли трудности, можно почитать про логические операторы и оператор нулевого слияния тут:
🔗 https://learn.javanoscript.ru/logical-operators
🔗 https://learn.javanoscript.ru/nullish-operators

⚡ Задача дня

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

async function foo() {
  try {
    return await Promise.reject("Ошибка!");
  } catch (error) {
    console.log("Ошибка поймана:", error);
  }
}

foo().then((res) => console.log("Результат:", res));

💡 Запутался? Почитай подробнее про async/await и обработку ошибок:
👉 https://learn.javanoscript.ru/async-await

⚡ Задача дня

❓ Что выведет в консоль следующий код?

let a = 1;  
let b = 2;  

a ??= 10;  
b ??= 20;  

console.log(a, b);  

let c = null;  
let d = undefined;  

c ??= 15;  
d ??= 25;  

console.log(c, d);

✅ Ответ

1 2
15 25

Если возникли трудности, можно почитать про оператор нулевого слияния и присваивание через ??= тут:
🔗 https://learn.javanoscript.ru/nullish-operators#operator-nulevogo-prisvaivaniya

⚡ Задача дня

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

const arr = [10, 20, 30, 40];

const result = arr.reduce((acc, num) => {
  if (num > 20) {
    acc.push(num / 2);
  }
  return acc;
}, []);

console.log(result);

✅ Ответ
[15, 20]

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

⚡ Задача дня

Привет! Давай немного прокачаем мозги перед работой. Сегодня у нас задачка на проверку класса через instanceof.

❓ Что выведет консоль и почему?

class Animal {}
class Dog extends Animal {}

const dog = new Dog();

console.log(dog instanceof Dog);
console.log(dog instanceof Animal);
console.log(dog instanceof Object);
console.log(dog instanceof Array);

✅ Ответ
true
true
true
false

Если что-то неясно, вот статья, которая поможет разобраться:
🔗 https://learn.javanoscript.ru/instanceof

Делись своим ответом в комментариях! 🚀

⚡ Задача дня

Привет, друг! Сегодня разберём наследование классов. Готов?

❓ Что выведет консоль и почему?

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

  speak() {
    return `${this.name} издаёт звук.`;
  }
}

class Dog extends Animal {
  speak() {
    return "Гав-гав!";
  }
}

const dog = new Dog("Шарик");

console.log(dog.speak());
console.log(dog.name);

✅ Ответ
"Гав-гав!"
"Шарик"

Если хочешь разобраться глубже, вот полезная статья:
🔗 https://learn.javanoscript.ru/class-inheritance

Жду твои мысли в комментариях! 🚀

Как я впиливала стейт-менеджер и почему это спасло проект

Это, наверное, мой самый большой Pull Request за всё время работы, и он стал идеальным подтверждением того, что стейт-менеджер может очень сильно упростить жизнь и сократить количество кода.

До этого состояние в проекте хранилось через хуки. Сначала это не вызывало проблем – всё было относительно чисто и понятно. Но со временем непредвиденные изменения в бизнес-логике, помноженные на классическое "Это нужно на проде вчера", превратили код в хаос.

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

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

Итог:
✅ Чистая и предсказуемая структура хранения данных
✅ Упрощённые связи между компонентами
✅ Минимум лишнего кода
✅ Гораздо меньше боли при внесении изменений

Вывод: если проект начинает разрастаться, стейт-менеджер – не просто удобство, а необходимость. Лучше внедрить его заранее, чем потом раскапывать горы запутанного кода.