10 полезных приёмов для JavaScript-программистов

Как всем известно, JavaScript — это язык, который очень быстро развивается. В стандарте ES2020 имеется немало новых возможностей, с которыми вам, вероятно, захочется познакомиться поближе. Честно говоря, писать JS-код можно по-разному. Различные варианты кода, направленные на решение одной и той же задачи, способны дать один и тот же результат, но некоторые из этих вариантов кода могут оказаться значительно короче и чище других. Для того чтобы сделать код качественнее и понятнее, можно пользоваться всяческими полезными приёмами. О некоторых из таких приёмов речь пойдёт в материале, перевод которого мы сегодня публикуем. Надеемся, то, о чём вы сегодня узнаете, когда-нибудь вам пригодится.

1. Проверка наличия обязательных параметров функций

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

const isRequired = () => { throw new Error('param is required'); };
const print = (num = isRequired()) => { console.log(`printing ${num}`) };
print(2);//printing 2
print()// error
print(null)//printing null

Хорошо сделано, правда?

2. Форматирование JSON-кода

Вы, вполне вероятно, хорошо знакомы с методом JSON.stringify(). А знаете о том, что с помощью этого метода можно форматировать JSON-код? Это, на самом деле, очень просто.

Метод stringify() принимает три параметра. Это — параметры value, replace и space. Два последних параметра в этом списке являются необязательными. Именно поэтому их вы, возможно, раньше не использовали. Для настройки выравнивания JSON-кода необходимо использовать параметр space.

console.log(JSON.stringify({name:"John",Age:23},null,'\t'));
>>> 
{
 "name": "John",
 "Age": 23
}

Вот, кстати, созданный мной React-компонент, в котором использован вышеописанный подход к форматированию JSON-кода. Можете с ним поэкспериментировать.

3. Извлечение из массива уникальных значений

Для того чтобы извлечь из массива уникальные значения, раньше надо было применять метод filter(), с помощью которого отфильтровывались повторяющиеся значения. Теперь же для решения этой задачи мы можем воспользоваться новым стандартным JavaScript-объектом типа Set. Это значительно проще и удобнее, чем фильтрация массива.

let uniqueArray = [...new Set([1, 2, 3, 3,3,"school","school",'ball',false,false,true,true])];
>>> [1, 2, 3, "school", "ball", false, true]

4. Удаление из массива ложных значений

Бывает так, что из массива нужно удалить ложные значения. Это — такие значения, которые в JavaScript приводятся к значению false. В языке существует лишь 6 таких значений (включая само значение false):

• undefined
• null
• NaN
• 0
• «» (пустая строка)
• false

Подобные значения легче всего отфильтровать из массива, воспользовавшись следующей конструкцией:

myArray
    .filter(Boolean);

Если нужно как-то модифицировать исходный массив, а после этого подвергнуть фильтрации новый массив, можно попробовать нечто, напоминающее следующий код:

myArray
    .map(item => {
        // Выполнить изменения и вернуть новый элемент
    })
    .filter(Boolean);

Пользуясь подобной конструкцией, учитывайте то, что исходный массив, myArray, остаётся неизменным.

5. Объединение нескольких объектов в один

У меня было несколько случаев, когда требовалось объединить два или большее количество объектов. В подобных случаях я обычно пользуюсь следующей методикой:

const user = { 
 name: 'John Ludwig', 
 gender: 'Male' 
 };
const college = { 
 primary: 'Mani Primary School', 
 secondary: 'Lass Secondary School' 
 };
const skills = { 
 programming: 'Extreme', 
 swimming: 'Average', 
 sleeping: 'Pro' 
 };
const summary = {...user, ...college, ...skills};

Три точки, использованные в последней строке этого примера, это оператор spread. Подробнее о нём можно почитать здесь.

6. Сортировка числовых массивов

У JavaScript-массивов имеется стандартный метод sort(). Он, по умолчанию, преобразует элементы массива в строки и выполняет лексикографическую сортировку. Это может приводить к проблемам при попытке сортировки числовых массивов. Подобные проблемы, правда, очень просто предотвратить:

[0,10,4,9,123,54,1].sort((a,b) => a-b);
>>> [0, 1, 4, 9, 10, 54, 123]

Методу sort() передаётся функция, выполняющая сравнение двух элементов числового массива. Благодаря этой функции числовой массив можно отсортировать так, как нужно.

7. Отключение действия, выполняемого по щелчку правой кнопки мыши

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

<body oncontextmenu="return false">
    <div></div>
</body>

Этот простой приём позволяет отключить на странице функционал правой кнопки мыши.

8. Деструктурирующее присваивание с переименованием переменных

Синтаксис деструктурирующего присваивания применяется в JavaScript-выражениях, нацеленных на распаковку элементов массивов или свойств объектов в отдельные переменные. При этом, вместо того, чтобы пользоваться существующими именами свойств объектов, соответствующие переменные можно переименовать:

const object = { number: 10 };
// Извлечение значения свойства number в константу с таким же именем
const { number } = object;
// Извлечение значения свойства number и назначение переменной имени otherNumber
const { number: otherNumber } = object;
console.log(otherNumber); //10

9. Получение элементов из конца массива

Если вам нужно получить элементы, находящиеся в конце массива, можно воспользоваться методом массива slice(), которому передано отрицательное число:

let array = [0, 1, 2, 3, 4, 5, 6, 7] 
console.log(array.slice(-1));
>>>[7]
console.log(array.slice(-2));
>>>[6, 7]
console.log(array.slice(-3));
>>>[5, 6, 7]

10. Ожидание завершения работы всех промисов

Может случиться так, что возникнет нужда в ожидании завершения нескольких промисов. Для того чтобы дождаться выполнения нескольких промисов, можно воспользоваться методом Promise.all(). Главная задача этого метода заключается в ожидании разрешения всех промисов, которые ему передали.

const PromiseArray = [
    Promise.resolve(100),
    Promise.reject(null),
    Promise.resolve("Data release"),
    Promise.reject(new Error('Something went wrong'))];
Promise.all(PromiseArray)
  .then(data => console.log('all resolved! here are the resolve values:', data))
  .catch(err => console.log('got rejected! reason:', err))

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

Если же вам нужно дождаться завершения работы всех промисов, независимо от того, будут ли они успешно разрешены или отклонены, это значит, что вам стоит прибегнуть к методу Promise.allSettled(). Этот метод имеется в окончательно согласованной версии стандарта ES2020.

const PromiseArray = [
    Promise.resolve(100),
    Promise.reject(null),
    Promise.resolve("Data release"),
    Promise.reject(new Error('Something went wrong'))];
Promise.allSettled(PromiseArray).then(res =>{
console.log(res);
}).catch(err => console.log(err));
//[
//{status: "fulfilled", value: 100},
//{status: "rejected", reason: null},
//{status: "fulfilled", value: "Data release"},
//{status: "rejected", reason: Error: Something went wrong ...}
//]

Теперь, несмотря на то, что некоторые промисы отклонены, Promise.allSettled() возвращает результаты работы всех промисов.

Знаете какие-нибудь полезные JavaScript-приёмы, которые вы могли бы посоветовать другим программистам?