🔗 Разбор: временная мёртвая зона

Раннее мы выкладывали задачу 📎

Правильный ответ: переменная `a` находится во временной мёртвой зоне (TDZ)

🔛 Что происходит:

JS делит выполнение на две фазы:

1. Инициализация (создание окружения) — компилятор видит let a = 2 внутри функции и создаёт для неё локальную переменную a.

2. Выполнение — когда доходит до console.log(a), движок уже знает о локальной a, но она ещё не инициализирована.

⚠️ Поэтому обращение к ней до строки let a = 2 вызывает ReferenceError, даже если код в if не выполнится.

❗️ Это и есть Temporal Dead Zone (TDZ) — период между созданием переменной и её инициализацией, когда доступ к ней невозможен.

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

#code_challenge #js

🌪 Как очистить объект от мусора

Иногда после API-запроса или сборки данных в объекте куча undefined — их не видно, но они мешают при сериализации, сравнении и логах.

const clean = obj => Object.fromEntries(
  Object.entries(obj).filter(([_, v]) => v !== undefined)
);

🔤 Что делает:

— пробегается по всем парам [ключ, значение],
— выкидывает те, где значение undefined,
— возвращает новый “чистый” объект.

🔴 Пример:

clean({ name: 'Alex', age: undefined, city: 'Berlin' });
// => { name: 'Alex', city: 'Berlin' }

🔤 Полезно:

— перед отправкой данных на сервер,
— при сборке форм,
— при логировании чистых JSON.

🔤 Для более «умной» версии (чистит и вложенные объекты):

const clean = obj =>
  Object.fromEntries(
    Object.entries(obj)
      .filter(([_, v]) => v !== undefined)
      .map(([k, v]) => [k, v && typeof v === 'object' && !Array.isArray(v) ? clean(v) : v])
  );

🔴 Эта версия:

— рекурсивно чистит вложенные объекты,
— не трогает массивы,
— остаётся компактной и читаемой.

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

#readme #js

😱 Потерянный 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

😓 Роутинг в SPA — боль

Классика: слушаем click, ставим preventDefault(), делаем history.pushState(), потом ловим popstate и рендерим контент.
Работает, но это куча бойлерплейта и расхождений между состоянием, URL и историей.

❔ Почему так:

History API не создавался под SPA. Он не умеет централизованно управлять всеми типами навигации и не даёт понять, когда переход «завершён», чтобы безопасно менять UI и скролл.

🔤 Нормальное решение — Navigation API (эксперимент, Chrome 102+):

• navigate — единое событие для всех переходов
• event.intercept() — перехват и свой обработчик (загрузили данные, отрисовали, проверили доступ)
• event.scroll() — нативный скролл
• { committed, finished } — когда менять URL и когда переход реально завершён
• entries() и currentEntry — история как нормальные объекты со state

✅ Fallback:

Если window.navigation нет, остаёмся на старом pushState.

if ('navigation' in window) {
  navigation.addEventListener('navigate', (event) => {
    if (shouldNotIntercept(event)) return;
    const url = new URL(event.destination.url);

    event.intercept({
      async handler() {
        renderSkeleton();
        const html = await fetchPage(url.pathname);
        render(html);
        event.scroll();
      },
    });
  });

  const { committed, finished } = navigation.navigate('/profile');
  committed.then(() => showLoading());
  finished.finally(() => hideLoading());
}

📦 Поддержка:

Chromium 102+, Safari (новые версии), Firefox — пока нет.
API экспериментальный, используйте feature-detect.

📎 Официальная спецификация

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

#hotfix #js