Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
21.9K subscribers
2.68K photos
181 videos
40 files
5.05K links
Все самое полезное для фронтенда в одном канале.

По рекламе: @proglib_adv

Учиться у нас: https://proglib.io/w/77178ed4

Для обратной связи: @proglibrary_feeedback_bot

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
Download Telegram
👀 Проверяем, является ли строка палиндромом

Палиндром — это слово или фраза, которые читаются одинаково в обе стороны:
level, madam, А роза упала на лапу Азора.


const isPalindrome = str =>
(s = str.toLowerCase().replace(/[^a-zа-яё0-9]/gi, '')) === [...s].reverse().join('');


🦾 Как это работает:

• toLowerCase() — приводит строку к одному регистру.

• replace(/[^a-zа-яё0-9]/gi, '') — убирает все символы, кроме букв и цифр.

• [...s].reverse().join('') — переворачивает строку.

• Сравниваем оригинал и перевёрнутую версию.

💡 Если важна производительность и память, используем цикл без создания копий строки:


function isPalindrome(str) {
const s = str.toLowerCase().replace(/[^a-zа-яё0-9]/gi, '');
for (let i = 0, j = s.length - 1; i < j; i++, j--) {
if (s[i] !== s[j]) return false;
}
return true;
}


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

#readme #js
Please open Telegram to view this post
VIEW IN TELEGRAM
4🥱2👍1🔥1
🧩 Задача на область видимости

При запуске кода в консоли — ReferenceError.

Почему, если ветка `if (false)` даже не выполняется:

❤️ — Переменная a находится во временной мёртвой зоне (TDZ)

🔥let внутри блока не создаёт TDZ

⚡️ — Ошибка синтаксиса при объявлении

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

#code_challenge #js
Please open Telegram to view this post
VIEW IN TELEGRAM
134🔥2
🔥 Суммирование с reduce

🏮 В примере на каждый шаг reduce создаётся новый объект (...acc)

🏮 Это значит — новая аллокация памяти и дополнительная нагрузка на GC, особенно при больших массивах

🏮 Оптимальнее использовать императивный цикл for...of, который изменяет объект напрямую — быстрее и проще читается

🎈 Рекомендации:

— Не злоупотребляйте reduce, если нужно просто накопить значения

— Для больших данных используйте явный цикл — он понятнее и быстрее

— Чистый код — это не в одну строку, а читаемый и оптимальный

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

#hotfix #js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍52
🖕 Утечки памяти в JS: тихий саботаж твоего фронта

Страница вроде простая, но со временем начинает тормозить, а Chrome показывает +1 ГБ к потреблению памяти.
Знакомо? 😏

🔤 Мы собрали 3 карточки, чтобы напомнить, где чаще всего течёт память и как это поймать в DevTools, пока вкладка не превратилась в обогреватель.

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

#under_hood #js
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🥰3🔥2
🔗 Разбор: временная мёртвая зона

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

Правильный ответ: переменная `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
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥65👍1
🌪 Как очистить объект от мусора

Иногда после 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
Please open Telegram to view this post
VIEW IN TELEGRAM
6🔥2
😨 Как работает замыкание

Переменная «живет» после выхода из функции, а память не освобождается.

🔤 Магия? Нет — просто JavaScript хранит не только значения, но и контексты.

Мы собрали 4 карточки, чтобы разобраться, как именно это устроено под капотом 💡

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

#under_hood #js
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
51🔥1
🦾 Инструмент для работы с шаблонами URL

API URLPattern — это простой и мощный инструмент для сопоставления и валидации URL.

🆖 В карточках ниже мы покажем, как эффективно использовать этот API в разработке.

🔗 Оригинал статьи

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

#stack #js
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4👍2🥰2