Простейшие задачки по JS#2 Массивы
https://www.youtube.com/watch?v=lm1Tm62R-bg

Хоть тут и нет JS, но будет полезно для начинающих веб разработчиков
https://www.youtube.com/watch?v=C1o_S73uhU0

Топ 5 javascript библиотек

#гайды #javascript #frontend | Javascript в картинках

Часто используемые API при разработке собственных проектов

#javascript #гайды #сайты | Javascript в картинках

Деструктуризация в JS: const {name, age} = user и const [first, , third] = arr экономят строки и сразу вытаскивают нужные поля из объектов или элементов из массивов. Используйте, когда нужно быстро «распаковать» данные без дополнительных переменных.
#гайды #javascript

Быстро отбираем нужные элементы: users.filter(u => u.isActive) создаёт новый массив, не трогая исходный — удобно для иммутабельных сторов и реактивных UI.
#javascript #гайды #frontend

Безопасная проверка вложенных свойств: user?.address?.city вернёт undefined без падения скрипта, если какого-то уровня нет. То же с функциями: callback?.() вызовется только при наличии callback. #javascript #гайды

map(), filter(), reduce() — три кита работы с массивами: map создаёт новый массив, преобразуя каждый элемент, filter отбирает нужные, reduce сворачивает всё к одному значению (сумма, объект, строка). Запомните порядок аргументов колбэка (item, index, array) и убирайте лишние, если не используете.
#гайды #javascript #массивы

​​localStorage переживает перезагрузку страницы: localStorage.setItem('theme', JSON.stringify({mode: 'dark'})).
При чтении используйте const {mode} = JSON.parse(localStorage.getItem('theme') || '{}'); — быстрый способ запомнить настройки пользователя без сервера.
#гайды #javascript #frontend

Деструктуризация объекта:
const { name, age } = user;
Избавляемся от user.name и user.age, код становится короче и чище, особенно в React-props и ответах API.
#javascript #гайды #frontend

useRef — способ хранить «что-угодно», не вызывая лишних рендеров: сохраняем id таймера setInterval в id.current, а при размонтировании чистим его; стейт не трогаем — компонент молчит, но таймер живёт.

#гайды #react #hooks #javascript #frontend

Сократите стартовый бандл, перенеся тяжёлые зависимости в динамический

import(): await import('./chart.js') - вызывается только при открытии нужного блока.

Webpack/Vite автоматически вынесет код в отдельный чанκ, ускорив First Paint и снизив initial payload.

#javascript #фишки #performance #frontend

Ускоряем массовые вставки в DOM

собирайте элементы в DocumentFragment и заполняйте его циклом и одним append вставляйте в нужный контейнер — браузер выполнит перерисовку лишь раз, без лишних reflow/paint.

#фишки #javascript #frontend #оптимизация

Если список рендерится медленно, проверьте, не пересоздаются ли функции-колбэки на каждый рендер.

Оберните дочерний компонент в React.memo, а обработчики в родителе — в useCallback(fn, [deps]);

так React отследит неизменённые ссылки и перерисует только обновившиеся элементы.

#react #hooks #гайды #javascript

Zod — библиотека для валидации данных в JS/TS: описываете схему, получаете типы из неё и безопасно парсите входные данные с понятными ошибками. Удобно проверять формы и ответы API, уменьшая количество багов в рантайме.

#javascript #гайды #frontend #сайты

Разница между var, let и const — в области видимости и возможности переназначения.

var имеет функциональную область, поднимается с инициализацией undefined и допускает повторное объявление;

let/const — блочная область, поднимаются без инициализации (TDZ) и не позволяют повторно объявлять в том же блоке.

const запрещает переназначать переменную, но свойства объектов и элементы массивов менять можно;

по умолчанию используйте const, let — когда реально нужно переназначение, var — избегайте.

#гайды #javascript #frontend

useEffect в React: кладите в массив зависимостей всё, что используется внутри эффекта (пропсы, стейт, функции), иначе получите устаревшие значения;

чтобы стабилизировать функции и объекты и не триггерить эффект лишний раз — оборачивайте их в useCallback/useMemo. Для подписок и таймеров возвращайте очистку (unsubscribe/clearInterval) из эффекта — она сработает при размонтировании и при изменении зависимостей.

Не выключайте правило react-hooks/exhaustive-deps — оно помогает не пропускать зависимости.

#react #javascript #гайды #frontend

Fuse.js — библиотека для «нечёткого» поиска по массивам прямо в браузере: находит результаты с опечатками и частичными совпадениями, поддерживает веса полей и работает без сервера.

Быстрый старт:

const fuse = new Fuse(items, { keys: ['title', 'tags'], threshold: 0.3 });
const results = fuse.search('react hooks');

— получите отсортированный по релевантности список.


#javascript #гайды #frontend #сайтыподключ