Улучшаем код JavaScript: топ-6 лайфхаков

Мы собрали 6 относительно новых лайфхаков, которые улучшат ваш код в JavaScript.

Опциональные последовательности

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

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

Пример:

const someObject = {
	profile: {
		firstName: 'Nicky',
		lastName: 'Christensen',
		country: 'Denmark'
	}
}

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

// Пример 2 // старый способ без опциональных последовательностей:
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)
}// безопасная навигация по графу объектов

Вывод: В примере 1 выводятся только 2 console.log() в виде Name is 1 и Name is 2, а Name is 3 – нет, т.к. в profile он отсутствует.

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

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

В случаях, когда для установления стандартного значения переменной foo используется оператор ||, а ложноподобные объекты считаются уместными – существует риск неверного поведения. Для исключения таких ситуаций появился оператор нулевого слияния ??. Он относится к логическим операторам, который возвращает значение правого операнда при наличии в левом 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 представил более удобный динамический импорт. В отличие от статического, в нем модули загружаются асинхронно. Подобный принцип расщепления кода уже давно используется с инструментами сборки. При этом динамический импорт не требует специфических скриптов и работает без прописывания script type="module".

Пример:

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-операторы

Побратимом оператора rest является spread. Он имеет тот же синтаксис, но направлен на объединение объектов и массивов. Ранее его функцию выполнял array.concat, но spread более удобный и простой в применении. Он растягивает элементы, а не сворачивает их. Его также применяют для копирования массивов.

Пример для массивов:

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