20 приемов JavaScript, которые должен знать каждый разработчик От Редакция techrocks.ru / 14.03.2025 JavaScript — мощный, гибкий язык, а знание нескольких интересных приемов работы с ним может сделать ваш код чище, быстрее и эффективнее. Ниже приведены 20 практических советов по работе с JavaScript, которые вы можете использовать в реальных приложениях для улучшения процесса разработки. 1. Деструктуризация и переименование за один шаг Вы можете переименовывать переменные во время деструктуризации объекта, что полезно при конфликтах имен. const user = { name: 'Alice', age: 25 };
const { name: userName, age: userAge } = user;
console.log(userName); // Alice
console.log(userAge);  // 25 2. Опциональная последовательность с вызовами функций Опциональная последовательность (опциональная цепочка, англ. optional chaining) может использоваться с функциями, проверяя существование функции до ее вызова. const user = {
  getName: () => 'Alice',
};
console.log(user.getName?.());   // Alice
console.log(user.getAge?.());    // undefined 3. Использование оператора ||= для присваивания по умолчанию Логическое присваивание OR (||=) присваивает значение только в том случае, если значение переменной null или undefined или если значение переменной ложно (например 0). let count;
count ||= 10;
console.log(count); // 10 4. Преобразование NodeList в массив с помощью оператора spread Оператор spread предоставляет быстрый способ преобразования NodeList в массив. const divs = document.querySelectorAll('div');
const divArray = [...divs];
console.log(Array.isArray(divArray)); // true 5. Деструктуризация массива/объекта со значениями по умолчанию Присваивайте значения по умолчанию при деструктуризации, чтобы избежать undefined при отсутствии ключей. const user = { name: 'Alice' };
const { name, age = 25 } = user;
console.log(age); // 25 6. Удаление ложных значений из массива Используйте filter() для удаления из массива ложных значений (таких как 0, null, undefined, false). const arr = [0, 'hello', null, 42, false, 'world'];
const filtered = arr.filter(Boolean);
console.log(filtered); // ["hello", 42, "world"] 7. Сортировка массивов объектов по свойствам Вот пример того, как можно легко отсортировать массив объектов по определенному свойству: const users = [{ name: 'Alice', age: 25 }, { name: 'Bob', age: 20 }];
users.sort((a, b) => a.age - b.age);
console.log(users); // [{ name: 'Bob', age: 20 }, { name: 'Alice', age: 25 }] 8. Динамический импорт для ленивой загрузки Динамический импорт позволяет загружать модули только по мере необходимости, сокращая время первоначальной загрузки. const loadModule = async () => {
  const module = await import('./myModule.js');
  module.default(); // Calls the default export function
};
loadModule(); 9. Параметры по умолчанию с деструктуризацией объектов При использовании параметров по умолчанию вы также можете деструктурировать и устанавливать значения по умолчанию для определенных свойств. function createUser({ name = 'Guest', age = 18 } = {}) {
  console.log(name, age);
}
createUser();               // Guest 18
createUser({ name: 'Alice' }); // Alice 18 10. Использование Object.assign() для поверхностного копирования Object.assign() удобен для поверхностного копирования объектов без изменения оригинала. const original = { a: 1, b: 2 };
const copy = Object.assign({}, original);
copy.a = 3;
console.log(original.a); // 1 (unchanged) 11. Мемоизация функций для повышения производительности Мемоизация кэширует результаты вызовов дорогих функций на основе аргументов, что полезно для функций, требующих сложных вычислений. const memoize = (fn) => {
  const cache = {};
  return (...args) => {
    const key = JSON.stringify(args);
    if (!cache[key]) {
      cache[key] = fn(...args);
    }
    return cache[key];
  };
};
const slowSquare = (n) => n * n;
const memoizedSquare = memoize(slowSquare);
console.log(memoizedSquare(4)); // 16 (cached on second call) 12. Использование reduce для группировки элементов массива Функция reduce() позволяет группировать элементы массива на основе какого-либо свойства. Это часто требуется при обработке данных. const people = [
  { name: 'Alice', role: 'admin' },
  { name: 'Bob', role: 'user' },
  { name: 'Charlie', role: 'admin' },
];
const grouped = people.reduce((acc, person) => {
  (acc[person.role] = acc[person.role] || []).push(person);
  return acc;
}, {});
console.log(grouped);
// { admin: [{ name: 'Alice' }, { name: 'Charlie' }], user: [{ name: 'Bob' }] } 13. Уплощение вложенных массивов с помощью Array.flat(Infinity) Уплощение многоуровневых вложенных массивов становится простым благодаря Array.flat(Infinity). const nested = [1, [2, [3, [4]]]];
console.log(nested.flat(Infinity)); // [1, 2, 3, 4] 14. Переключение булевых значений с помощью ! Переключить булево значение так же просто, как дважды применить оператор NOT. let isVisible = false;
isVisible = !isVisible;
console.log(isVisible); // true 15. Объединение нескольких массивов с помощью concat() Оператор 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] 16. Асинхронный перебор массива с помощью for…of и await При итерации по массиву промисов for...of и await гарантируют, что каждый промис разрешится до выполнения следующего. const fetchData = async () => {
  const urls = ['url1', 'url2'];
  for (const url of urls) {
    const response = await fetch(url);
    console.log(await response.json());
  }
}; 17. Быстрое получение последнего элемента в массиве Получение последнего элемента в массиве без необходимости знать его длину. const arr = [1, 2, 3, 4];
console.log(arr.at(-1)); // 4 18. Использование Intl для форматирования даты Intl.DateTimeFormat предлагает мощный способ форматирования дат в разных локалях. const date = new Date();
const formatted = new Intl.DateTimeFormat('en-GB', {
  dateStyle: 'full',
}).format(date);
console.log(formatted); // e.g., "Monday, 25 October 2021" 19. Округление чисел с помощью Math.round() и шаблонных литералов Шаблонные литералы могут напрямую форматировать округленные числа. const num = 3.14159;
console.log(`${Math.round(num * 100) / 100}`); // 3.14 20. Преобразование объектов, подобных массивам, в массивы с помощью Array.from() Используйте Array.from() для преобразования массивоподобных объектов (например, аргументов) в настоящие массивы. function example() {
  const argsArray = Array.from(arguments);
  console.log(argsArray);
}
example(1, 2, 3); // [1, 2, 3] Все эти приемы упрощают распространенные шаблоны написания кода на JavaScript. Внедрите их в свой рабочий процесс, чтобы писать эффективный и выразительный код. Успешного кодинга! Перевод статьи “20 JavaScript Tricks Every Developer Must Know”. 7 уроков дизайна для разработчиков 1 комментарий / Новости, Обучение / От andrey_av Не документируйте код. Кодируйте документацию 1 комментарий / Новости, Обучение / От andrey_av
==============
