Web-разработка

18 полезных приемов написания JavaScript-кода

14.05.2025

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

1. Используйте оператор ||= для присваивания по умолчанию

Присвоить значение переменной только в том случае, если она равна null, undefined или имеет ложное значение (например, 0), позволяет логический оператор присваивания OR (||=).

let count;
count ||= 10;
console.log(count); // 10

count = 0;
count || = 20;
console.log(count); // 20 (присвоено)

2. Используйте оператор ??= для присваивания по умолчанию

Проверить, является ли переменная null или undefined, чтобы присвоить ей значение, позволяет логический оператор нулевого слияния (??=).

let count;
count ??= 10;
console.log(count); // 10

count = 0;
count ??= 20;
console.log(count); // 0 (не присвоено)

3. Быстро удаляйте ложные значения из массива

Для быстрого удаления ложных значений из массива используется метод filter() с передачей Boolean в качестве обратного вызова, что удалит такие значения, как 0, null, undefined и false.

const arr = [0, 'Hello', null, 18, false, 'Zehuiya'];
const filtered = arr.filter(Boolean);
console.log(filtered)  // ['Hello', 18, 'Zehuiya']

4. Используйте Array.flat(Infinity) для сглаживания всех вложенных массивов

Если массив содержит несколько уровней вложенных массивов, можно легко сгладить его с помощью Array.flat(Infinity).

const nested = [1, [2, [3, [4]]]];
console.log(nested.flat(Infinity));  // [1, 2, 3, 4]

5. Получайте быстрый доступ к последнему элементу массива с помощью метода at()

В JavaScript для получения последнего элемента, помимо вычитания единицы из длины массива (array.length-1), также можно использовать метод at().

const arr = [1, 2, 3, 4];
console.log(arr.at(-1));  // 4

6. Используйте Array.from() для преобразования массивоподобных объектов в массивы

Применение Array.from() в JavaScript позволяет преобразовывать массивоподобные объекты (такие как arguments) в реальные массивы.

function example() {
  const argsArray = Array.from(arguments);
  console.log(argsArray);
}
example(1, 2, 3); // [1, 2, 3]

7. Выполняйте последовательную итерацию массива с помощью for…of и await

При итерации по серии промисов использование for…of в сочетании с await гарантирует, что каждый промис будет разрешен до того, как начнет выполняться следующий.

const fetchData = async () => {
 const urls = ['https://medium.com/@zehuiya', 'https://stackoverflow.com/']
 for (const url of urls) {
  const response = await fetch(url);
  console.log(await response.text());
 }
}

8. Используйте Object.assign() для поверхностного клонирования

Object.assign() отлично подходит для выполнения поверхностной копии объекта и не изменяет исходный объект.

const original = { name: 'Zehuiya', age: 25 };
const copy = Object.assign({}, original);

copy.name = 'Tom';
console.log(original.name);  // 'Zehuiya' (без изменений)

9. Выполняйте в один этап деструктуризацию и переименование свойств

В JavaScript можно переименовывать определенные переменные при деструктуризации объекта, чтобы избежать конфликтов имен.

const user = {name: "Zehuiya", age: 25}
const { name: userName, age: userAge } = user
console.log(userName); // Zehuiya
console.log(userAge); // 25

Можно даже присвоить значения по умолчанию отсутствующим ключам во время деструктуризации, чтобы избежать undefined.

const user = {name: 'Zehuiya'};
const { name, age = 25 } = user;
console.log(age);  // 25

10. Объединяйте массивы с помощью concat() или spread (…)

В JavaScript существует множество способов объединения массивов. Использование метода concat() является одним из них.

const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5, 6];
const merged = arr1.concat(arr2, arr3);
console.log(merged);  // [1, 2, 3, 4, 5, 6]

Можно также использовать оператор spread (...) для быстрого объединения массивов после деструктуризации.

const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5, 6];
const merged = [...arr1, ...arr2, ...arr3];
console.log(merged);  // [1, 2, 3, 4, 5, 6]

11. Выполняйте опциональную цепочку вызовов функций

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

const user = {
 getName: () => 'Zehuiya',
}

console.log(user.getName?.());  // 'Zehuiya'
console.log(user.getAge?.());  // undefined

12. Сортируйте массив объектов по свойству

В JavaScript можно легко отсортировать массив объектов по свойству, используя метод sort().

const users = [{ name: 'Zehuiya', age: 25 }, { name: 'Br', age: 20 }];
users.sort((a, b) => a.age - b.age);
console.log(users);  // [{ name: 'Br', age: 20 }, { name: 'Zehuiya', age: 25 }]

13. Форматируйте данные о валюте

В JavaScript можно быстро отформатировать данные о валюте с помощью регулярных выражений.

const formatMoney = (money) => {
  return money.replace(new RegExp(`(?!^)(?=(\\d{3})+${money.includes('.') ? '\\.' : '$'})`, 'g'), ',')  
}

formatMoney('123456789') // '123,456,789'
formatMoney('123456789.123') // '123,456,789.123'
formatMoney('123') // '123'

Кроме того, можно быстро отформатировать данные о валюте в зависимости от региона.

const formatMoney = (money) => {
  return money.toLocaleString()
}

formatMoney(123456789)  // '123,456,789'
formatMoney(123456789.123)  // '123,456,789.123'
formatMoney(123)  // '123'

14. Помещайте контент в буфер обмена

JavaScript позволяет быстро записать контент в буфер обмена с помощью объекта navigator.

const copyToClipboard = async (content) => {
 try {
  await navigator.clipboard.writeText(content);
 } catch (err) {
  console.log(err);
 }
}

В качестве альтернативы можно использовать элемент <textarea> для реализации копирования текстового контента.

const copyToClipboard = (content) => {
  const textarea = document.createElement("textarea")
  
  textarea.value = content
  document.body.appendChild(textarea)
  textarea.select()
  document.execCommand("Copy")
  textarea.remove()
}

15. Повышайте производительность с помощью мемоизации

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

const memoize = (fn) => {
 const cache = {};
 
 return (...args) => {
  const key = JSON.stringify(args);
  if (!cache[key]) {
   cache[key] = fn(...args);
  }
  return cache[key];
 }
}

const showSquare = (n) => n * n;
const memoizedSquare = memoize(showSquare);
console.log(memoizedSquare(4));  // 16 (Кэшированный результат будет использован во втором вызове)

16. Используйте динамический импорт для ленивой загрузки

Динамический импорт — очень полезный метод, который позволяет загружать модули только тогда, когда они необходимы, что помогает сократить время инициализации.

const loadModule = async () => {
 const module = await import('./myModule.js');
 module.default();  // 调用默认导出的函数。
};

loadModule();

17. Выполняйте плавный переход к началу страницы

На HTML-странице можно использовать следующую функцию для плавного перехода к началу:

const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop
  
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop)
    window.scrollTo(0, c - c / 8)
  }
}

Концепция проста: динамически регулируйте расстояние между прокрутками и постепенно уменьшайте его.

18. Быстро определяйте операционную систему мобильного устройства

При разработке на JavaScript иногда требуется определить, управляется ли текущее устройство ОС Android или iOS. Можно быстро решить эту задачу, используя userAgent и регулярные выражения.

function getOSType() {
  let u = navigator.userAgent,
    app = navigator.appVersion
  let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1
  let isIOS = !!u.match(/\(i[^]+( U)? CPU.+Mac OS X/)
  
  if (isIOS) {
    return 'ios'
  } else if (isAndroid) {
    return 'android'
  } else {
    return 'other'
  }
}

getOSType();  // 'ios'