Jun 24 at 15:01

10 JavaScript-утилит, которые я использую в большинстве проектов

Medium

Invite pending

Эти 10 простых JavaScript-утилит покрывают большинство типичных задач в JavaScript-разработке: от оптимизации производительности до обработки данных и работы с UI. Они просты, универсальны и легко интегрируются в любой проект.

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

1. debounce

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

Скрытый текст

function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

// Пример использования
const logResize = debounce(() => console.log('Окно изменилось!'), 200);
window.addEventListener('resize', logResize);

Эта утилита полезна для оптимизации производительности, особенно при работе с интенсивными событиями.

2. throttle

В отличие от debounce, утилита throttle ограничивает вызов функции, позволяя ей выполняться не чаще, чем раз в заданный интервал времени. Это идеально для событий, которые нужно обрабатывать регулярно, но не слишком часто

Скрытый текст

function throttle(func, limit) {
  let inThrottle;
  return function (...args) {
    if (!inThrottle) {
      func(...args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}

// Пример использования
const logScroll = throttle(() => console.log('Прокрутка!'), 100);
window.addEventListener('scroll', logScroll);

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

3. deepClone

Глубокое копирование объектов — частая задача, особенно если нужно избежать изменения исходного объекта. Эта утилита создает полную копию объекта, включая вложенные структуры.

Скрытый текст

function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') return obj;
  const copy = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepClone(obj[key]);
    }
  }
  return copy;
}

// Пример использования
const original = { a: 1, b: { c: 2 } };
const copy = deepClone(original);
copy.b.c = 3;
console.log(original.b.c); // 2

Эта функция особенно полезна при работе с состоянием в Redux или React.

4. isEmpty

Проверка, пустой ли объект, массив или строка, — типичная задача. Утилита isEmpty помогает быстро это сделать.

Скрытый текст

function isEmpty(value) {
  if (value == null) return true;
  if (Array.isArray(value) || typeof value === 'string') return value.length === 0;
  if (typeof value === 'object') return Object.keys(value).length === 0;
  return false;
}

// Пример использования
console.log(isEmpty([])); // true
console.log(isEmpty({})); // true
console.log(isEmpty('')); // true
console.log(isEmpty({ a: 1 })); // false

Эта утилита упрощает проверки и делает код более читаемым.

5. formatDate

Форматирование дат — еще одна частая задача. Эта утилита преобразует объект Date в строку в заданном формате.

Скрытый текст

function formatDate(date, format = 'YYYY-MM-DD') {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return format
    .replace('YYYY', year)
    .replace('MM', month)
    .replace('DD', day);
}

// Пример использования
const today = new Date();
console.log(formatDate(today)); // 2025-06-20
console.log(formatDate(today, 'DD/MM/YYYY')); // 20/06/2025

Эта функция гибкая и легко адаптируется под любой формат.

6. getQueryParams

Извлечение параметров из URL — частая задача при работе с веб-приложениями. Эта утилита парсит строку запроса и возвращает объект с параметрами.

Скрытый текст

function getQueryParams(url = window.location.search) {
  const params = {};
  const query = url.split('?')[1];
  if (query) {
    query.split('&').forEach(param => {
      const [key, value] = param.split('=');
      params[key] = decodeURIComponent(value);
    });
  }
  return params;
}

// Пример использования
// URL: http://example.com?name=John&age=30
console.log(getQueryParams()); // { name: "John", age: "30" }

Утилита удобна для работы с клиентскими маршрутами и API.

7. truncate

Обрезка длинных строк с добавлением многоточия — полезная функция для отображения текста в UI.

Скрытый текст

function truncate(text, maxLength) {
  if (text.length <= maxLength) return text;
  return text.slice(0, maxLength - 3) + '...';
}

// Пример использования
console.log(truncate('Длинный текст для примера', 10)); // Длинный...

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

8. uniqueArray

Удаление дубликатов из массива — частая задача. Эта утилита делает это быстро и просто.

Скрытый текст

function uniqueArray(arr) {
  return [...new Set(arr)];
}

// Пример использования
console.log(uniqueArray([1, 2, 2, 3, 3, 4])); // [1, 2, 3, 4]

Благодаря Set, эта функция эффективна и лаконична.

9. storage

Работа с localStorage или sessionStorage требует обработки ошибок и сериализации. Эта утилита упрощает задачу.

Скрытый текст

const storage = {
  set(key, value) {
    try {
      localStorage.setItem(key, JSON.stringify(value));
    } catch (e) {
      console.error('Ошибка записи в localStorage:', e);
    }
  },
  get(key) {
    try {
      const value = localStorage.getItem(key);
      return value ? JSON.parse(value) : null;
    } catch (e) {
      console.error('Ошибка чтения из localStorage:', e);
      return null;
    }
  },
  remove(key) {
    localStorage.removeItem(key);
  }
};

// Пример использования
storage.set('user', { name: 'John' });
console.log(storage.get('user')); // { name: "John" }
storage.remove('user');

Эта утилита делает работу с хранилищем безопасной и удобной.

10. fetchWithTimeout

Иногда API-запросы могут зависать. Эта утилита добавляет тайм-аут к fetch, чтобы запросы не длились вечно.

Скрытый текст

async function fetchWithTimeout(url, options = {}, timeout = 5000) {
  const controller = new AbortController();
  const id = setTimeout(() => controller.abort(), timeout);
  try {
    const response = await fetch(url, { ...options, signal: controller.signal });
    clearTimeout(id);
    return response;
  } catch (error) {
    clearTimeout(id);
    throw error;
  }
}

// Пример использования
fetchWithTimeout('https://api.example.com/data', {}, 3000)
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error('Ошибка:', err));

Эта утилита повышает надежность сетевых запросов.

Буду рад, если благодаря этим «фичам» кому‑то удалось высвободить пару лишних минут.

Hubs:

JavaScript