6 лайфхаков для улучшения кода JavaScript

Успеть за последними трендами в сообществе фронтенд-разработчиков непросто. Все развивается стремительно. Постоянно появляются новые фреймворки, библиотеки и возможности.

Представляем краткий обзор 6 подходов к JavaScript для фронтенд-разработчиков.

Опциональные цепочки

Опциональные цепочки  —  это небольшое, но очень полезное дополнение к языку, делающее код короче и чище. Опциональные цепочки указывают на то, существуют ли значения в объекте:

const someObject = {
  profile: {
   firstName: 'Nicky',
    lastName: 'Christensen',
    country: 'Denmark'
  }
}
//  с опциональными цепочками:
if (someObject?.profile?.firstName){ 
 console.log('Name is 1: ', someObject.profile.firstName)
}// безопасная навигация по графу объектов

// старый способ без использования опциональных цепочек:
if (someObject && someObject.profile && someObject.profile.firstName){ 
 console.log('Name is 2: ', someObject.profile.firstName)
}

// опциональные цепочки не работают, так как name не существует:
if (someObject?.profile?.name){ 
 console.log('Name is 3: ', someObject.profile.firstName)
}// безопасная навигация по графу объектов

Как видите, выводятся только два console.logs()  —  Name is 1 и Name is 2. Третий не выводится, так как name не существует в profile.

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

Оператор нулевого слияния

В последнем релизе ECMAscript появился новый логический оператор, который возвращает операнд правой части, если операнд левой равен null или undefined. Вы можете использовать оператор нулевого слияния ??, когда необходимо установить значения по умолчанию.

Часто для этого используется оператор ||, который, конечно, можно применить и в этом случае. Но у оператора ?? есть преимущества, которые помогут избежать нежелательных эффектов.

const falsy = false;
const emptyString = '';
const nullish = null;
const uDefined = undefined;

console.log('1', falsy ?? 'Some string');
console.log('2', emptyString ?? 'Default string') //"" (так как пустая строка не равна null или undefined)
console.log('3', nullish ?? 'Default string')
console.log('4', uDefined ?? 'Default string')

console.log('-------');

console.log('1.1', falsy || 'Some string');
console.log('2.2', emptyString || 'Default string')
console.log('3.3', nullish || 'Default string')
console.log('4.4', uDefined || 'Default string')

Динамический импорт

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

let someAsyncModule = await import('/modules/my-module.ts');

Promise.allSettled()

В течение многих лет Promise.all() использовался для ожидания исполнения всех промисов. Проблема заключалась в том, что было неизвестно, какие промисы действительно исполнены, а какие нет.

Метод promise.allSettled() позволяет наблюдать за результатами набора промисов.

const promise1 = Promise.resolve("OK, I resolved");
const promise2 = Promise.reject("OH no, I was rejected");
const promise3 = Promise.resolve("After I was rejected");
Promise.allSettled([promise1, promise2, promise3])
    .then((results) => console.log(results))
    .catch((err) => console.log("error: " + err));

Операторы spread

Операторы spread помогают объединять массивы и объекты. До их появления для объединения массивов можно было использовать array.concat. Теперь это делается еще проще:

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const arr3 = [...arr1, ...arr2] //arr3 ==> [1,2,3,4,5,6]

Для объектов используется следующая процедура:

const basePerson = {
 name: 'Nicky C',
  country: 'DK'
}

const footballerPerson = {
 ...basePerson,
  team: 'Man UTD',
  shirtNumber: '11'
}

console.log(footballerPerson) //выведет объединение двух объектов

Деструктуризация объектов

С помощью деструктуризации объектов можно легко распаковать значения из объекта:

const basePerson = {
 name: 'Nicky C',
  country: 'DK'
}
const footballerPerson = {
 ...basePerson,
  team: 'Man UTD',
  shirtNumber: '11'
}

const {team, shirtNumber} = footballerPerson;

console.log(team, shirtNumber); //ManUtd, 11

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

• ТОП-5 проблем с доступностью, которые чаще всего игнорируют
• Сравнение методов require() и import() в JavaScript
• 27 важных однострочных функций JavaScript, используемых разработчиками ежедневно

Читайте нас в Telegram, VK и Яндекс.Дзен

---

Перевод статьи Nicky Christensen: Improve Your Code: Try Out These JavaScript Features Today