📦 Почему [] == ![] возвращает true

Кажется нелогичным: пустой массив и его отрицание — но результат true. Разберём по шагам (по спецификации ECMAScript 262):

1️⃣ Оператор ![]

- [] приводится к true, потому что любой объект в JS — truthy.
- !true даёт false.

Итак, ![] → false.

2️⃣ Сравнение [] == false

- По правилам нестрогого сравнения (==), если один операнд — объект, он приводится к примитиву (ToPrimitive).
- [] → "" (пустая строка).

Теперь выражение выглядит так: "" == false.

3️⃣ Сравнение "" == false

- false → 0, "" → 0.
- 0 == 0 → true.

✅ Итог: [] == ![] возвращает true из-за цепочки приведений типов.

🐸 Библиотека фронтендера

#career_merge

Каким будет результат ❓

Опрос ниже 🔜

🐸 Библиотека фронтендера

#code_challenge

🐸 Библиотека фронтендера

#pixel_pause

😱 Потерянный this в обработчике

Когда метод объекта передаётся как колбэк, он теряет контекст (см. фото). После клика в консоли будет undefined.

⏯ Почему так:

this зависит от способа вызова функции, а не от места, где она объявлена.

При передаче метода как ссылки (btn.handleClick) контекст теряется — this больше не указывает на объект.

✅ Как исправить:

1. Явно привязать контекст

button.addEventListener('click', btn.handleClick.bind(btn));

2. Использовать стрелочную функцию

button.addEventListener('click', () => btn.handleClick());

💡 Стрелочные функции не имеют собственного this, они берут его из внешнего контекста — поэтому работают как ожидается.

#hotfix #js

🔗 Что почитать

⏺ Rust вместо React: как я написал Telegram WebApp SDK

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

⏺ Frontend Security: The Most Ignored Skill Every Developer Needs in 2025

Medium-разбор, почему XSS, CSP и supply-chain атаки всё ещё ломают SPA, и как встроить безопасность в CI/CD.

⏺ Почему Google Переводчик «ломает» React (и другие веб-приложения)

Автор показывает реальные кейсы, обходные пути и поднимает важный вопрос: имеет ли фреймворк право на полный контроль над DOM?

🐸 Библиотека фронтендера

#read_watch #react #js #ts

🏓 Table tenniCSS

Мини-анимация, созданная только с помощью HTML и SCSS, без единой строки JS.

Отличный пример того, насколько мощными могут быть CSS-анимации.

🔗 Попробуйте запустить демо на CodePen

🐸 Библиотека фронтендера

#readme #css

💛 Hooks как слой бизнес-логики

В React кастомные хуки (useAuth, useCart, useFetch) — это не просто удобство, а полноценный слой бизнес-логики.

ℹ️ Они инкапсулируют сложные процессы (аутентификация, запросы, кеширование) и позволяют компонентам оставаться декларативными и чистыми.

📖 По документации React:

“Custom Hooks let you extract component logic into reusable functions.”
“By convention, a custom Hook’s name starts with ‘use’.”

✅ Что это даёт:

— изолированная логика вне UI;
— переиспользуемые мини-сервисы;
— лаконичные компоненты.

Пример:

function useAuth() {
  const [user, setUser] = useState(null);

  const login = async (creds) => { /* запрос к API */ };
  const logout = () => setUser(null);

  return { user, login, logout };
}

🔥 Еще больше полезного на курсе «Архитектуры и шаблоны проектирования» (−40%)

🐸 Библиотека фронтендера

#blueprint