За последнее время, благодаря поддержке сообщества, JavaScript стал в технологической индустрии языком, девиз которого “Напиши одни раз  —  выполняй где угодно”. С его помощью вы можете разрабатывать почти все, что пожелаете: мобильные, настольные и веб-приложения. На JavaScript также создаются нейронные сети и программируются дроны. Что и говорить  —  этот язык способен на многое. А у профессионального разработчика JavaScript всегда найдется в запасе несколько особо крутых приемов, накопленных за многие годы работы. 

Далее я поделюсь тремя своими любимыми и очень эффективными приемами JavaScript, которые сэкономят время разработки. 

1. Создание асинхронного контекста 

Обработка асинхронных событий в JavaScript  —  довольно сложный аспект программирования, особенно для новичков, поскольку он непосредственно связан с промисами. Проще говоря, сам разработчик управляет выполнением кода. До выхода ES6 (2015) приходилось использовать множество методов then и catch, объединенных в цепочки, и асинхронный код обрабатывался следующим образом:

promise
  .then(function () { ... })
  .catch(function () { ... })
  .then(function () { ... })
  .catch(function () { ... })

В ES6 было представлено новое и эффективное ключевое слово await. Оно позволяет просто подождать завершения любой асинхронной задачи, после чего продолжить выполнение. Все бы хорошо, но есть одно большое “но”: место await в функции async, и его нельзя задействовать в глобальной области видимости. Поэтому мы воспользуемся IIFE для имитации асинхронного контекста глобального уровня, что позволит применять await везде, где необходимо: 

let data

(async () => {
  // Это асинхронный контекст для await

  const res = await fetch("https ://google.com/mcdkncjs")
  data = await res.json()

})();

console.log(data)

Благодаря IIFE вы можете создавать асинхронный контекст для обработки различных асинхронных задач. 

2. Именованные параметры функции 

Как правило, при определении функции у вас есть параметры, которые поочередно передаются при вызове и разделяются запятой (,). Это прекрасно работает при наличии небольшого их числа, отличной IDE или текстового редактора с технологией IntelliSense. В противном случае усложняется процесс написания функции и приходится запоминать все параметры по порядку, что довольно утомительно.

createUser(name, surname, 1542, 21, true)

Однако с помощью ES6 можно создавать функции с именованными параметрами, облегчая процесс их чтения и написания. Вместо последовательной передачи параметров передается один объект аргументов, содержащий их все, что избавляет от необходимости запоминать порядок. Кроме того, в функции можно провести деструктуризацию объекта и получить параметры по отдельности. 

// Объявляем функцию, используя деструктурированные параметры. 
function createUser({
  name,
  surname,
  id,
  age,
  isForeigner
}) { ... }

// После этого передаем объект параметров 
createUser({
  name,
  surname,
  id: 1542,
  age: 21,
  isForeigner: true
})

С деструктурированными параметрами вызов функций становится более явным и простым. 

3. Функциональная обертка для блоков Try/Catch 

С ростом популярности async/await сократились случаи применения catch, вследствие чего разработчики стали задействовать блоки try/catch для обработки ошибок в асинхронных функциях. Однако новый блок означает новый уровень индентации (стиль отступов) и новый уровень сложности. 

try {
  var quote = await getQuote();
  console.log(quote);
catch (error) {
  console.error(error);
}

Блок try/catch для обработки ошибок в асинхронных функциях полностью нивелирует преимущество индентации await перед then.

Поэтому было бы лучше, имей мы функцию, которая возвращала бы ошибку или результат в случае успеха без индентации. Именно этой реализацией мы сейчас и займемся. Для этого оборачиваем блок try/catch функцией, а затем используем ее для перехвата ошибок без индентации. 

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

const handled = async (asyncFunc) => { 
  try { 
    const res = await asyncFunc(); 
    return [null, res]; 
  } catch (error) { 
    return [error, null] 
  }
}

Обертывание try/catch внутри функции позволяет работать с ней ее без индентации. 

С помощью функции handled можно обрабатывать ошибки на том же уровне индентации, что и await. Нужно лишь обернуть асинхронную функцию посредством handled и провести деструктуризацию и ответа, и ошибки.  

const [error, res] = await handled(asyncFunc)

handled возвращает и ошибку, и ответ, но в зависимости от успеха один из них  —  null. 

Отлично! Теперь вы знаете 3 замечательных приема JavaScript, которые являются неотъемлемой частью моей ежедневной работы. Рекомендую вам также взять их на заметку. Благодарю за внимание! 

Читайте также:

Читайте нас в Telegram, VK и Дзен

Перевод статьи Can Durmus: 3 Marvelous JavaScript Tips to Speed Up the Development Process

Предыдущая статьяДизайн системы Netflix
Следующая статьяЭпоха Больших данных