Многие из нас пишут на JavaScript уже очень давно. Мы привыкли к своему стилю, выработали набор типичных решений для разных задач и редко проводим его ревизию. Но время не стоит на месте и появляются новые, более удобные/надежные/красивые/короткие приемы. Сайт proglib.io опубликовал подборку приемов, которые сделают ваш JavaScript-код более чистым и оптимизированным. Возможно, вы найдете что-то новое для себя.
1. Избегаем множественных ИЛИ (||) условий
Оператор логического сложения (||) возвращает true, если хотя бы одно из условий истинно. Это очень полезная штука, но когда условий много, код выглядит неаккуратно:
if (fruit === 'apple' || fruit === 'orange' || fruit === 'banana' || fruit ==='grapes') {
// код
}
Вместо использования дизъюнкции мы можем собрать все проверяемые значения в массив и воспользоваться встроенным методом Array.prototype.includes.
if (['apple', 'orange', 'banana', 'grapes'].includes(fruit)) {
// код
}
Он вернет true, если аргумент совпадает хотя бы с одним элементом массива – именно то, что нам нужно. Это решение более наглядно и намного проще масштабируется при увеличении количества условий.
2. Облегчаем доступ к глубоким свойствам объекта
Так как обращение к свойству несуществующего объекта в JavaScript вызывает ошибку, мы вынуждены проверять на наличие каждый уровень вложенности.
if(obj && obj.address && obj.address.postalCode) {
console.log(obj.address.postalCode)
}
Укоротим эту кучу кода с помощью оператора опциональной последовательности ?. (optional chaining).
console.log(obj?.address?.postalCode);
Он делает то же самое, но гораздо элегантнее.
3. Убираем проверки на null, undefined и пустую строку
JavaScript имеет мощную систему преобразования типов, фактически он может преобразовать любой тип в любой другой. Если речь идет о логических проверках, то все значения можно разделить на falsy (лживые), которые преобразуются в false, и truthy (правдивые), которые преобразуются в true.
if (first !== null || first !== undefined || first !== '') {
let second = first;
}
Благодаря этому механизму нет нужды проверять на null, undefined и пустую строку отдельно – каждое из этих значений falsy, то есть преобразуется в false.
const second = first || '';
Вместо этого можно просто воспользоваться оператором логического сложения ||. Он вернет левое значение, если оно истинно, или правое в ином случае. Другими словами, правая часть выражения является значением по умолчанию.
4. Упрощаем конструкцию switch
Оператор switch очень напоминает пример №1, с большим количеством условий.
switch (number) {
case 1:
return 'one';
case 2:
return 'two';
default:
return;
}
Однако здесь недостаточно проверки на равенство, нужно еще вернуть определенное значение. Поэтому вместо массива мы можем использовать объект (map).
const data = {
1: 'one',
2: 'two'
};
data[num]
Каждый ключ объекта однозначно соответствует определенному значению, но выглядит код компактнее, и его проще читать.
5. Сокращаем однострочные функции
Некоторые функции содержат очень мало кода, но тем не менее из-за особенностей синтаксиса JavaScript занимают не меньше трех строчек.
function doubleOf(value) {
return 2 * value;
}
Стрелочные функции позволяют ужать их до одной строки:
const doubleOf = (value) => 2 * value
Важно: не злоупотребляйте стрелочными функциями, ясность кода не должна приноситься в жертву его краткости.
6. Выбираем функцию для выполнения
Иногда в зависимости от некоторого условия вам нужно вызвать ту или иную функцию.
function area() {
console.log('area');
}
function volume() {
console.log('volume');
}
if(type === 'square') {
area();
} else {
volume();
}
Вместо конструкции if вы можете смело использовать тернарный оператор:
(type === 'square' ? area : volume)()
Важно: этот трюк не сработает, если вы вызываете методы объекта, которые работают с ключевым словом this. После выполнения выражения внутри круглых скобок (выбор нужного метода) контекст вызова будет потерян и this перестанет ссылаться на нужный объект.
7. Устанавливаем дефолтное значение переменной
Иногда мы принципиально не хотим, чтобы переменная оставалось неинициализированной или содержала значение null.
if(amount === null) {
amount = 0;
}
if(value === undefined) {
value = 0;
}
console.log(amount); //0
console.log(value); //0
Для такой проверки так же отлично подойдет оператор логического сложения (||).
console.log(amount || 0); //0 console.log(value || 0); //0
Если левая часть выражения является falsy-значением и приводится к false, оператор ИЛИ вернет правую (дефолтную) часть.
8. Избавляемся от конструкции if-else
Конструкция if-else привычна и всем знакома.
let value;
if (num > 0) {
value = 'positive';
} else {
value = 'negative';
}
Если логика, которую она реализует, не является очень сложной, мы можем без проблем заменить if-else на более краткий и читабельный тернарный оператор.
const value = num > 0 ? 'positive' : 'negative';
9. Меняем взгляд на перебор элементов массива
Императивный цикл for появился на заре программирования и долгое время адекватной замены ему не было.
const arr = [11, 22, 33];
for(let i=0; i<arr.length; i++) {
console.log(arr[i]);
}
Но сейчас мы можем перебирать массивы в более дружественном декларативном стиле, используя встроенный методы Array.prototype.forEach.
const arr = [11, 22, 33]; arr.forEach((val) => console.log(val));
Важно: метод forEach не дает возможности прервать цикл перебора, не дожидаясь его окончания. Но для этого вы можете воспользоваться методом Array.prototype.some.
10. Преобразуем строку в число
Распространенная задача разработки – преобразование строковых значений в числовые.
const num1 = parseInt("100");
const num2 = parseFloat("11.11");
Чтобы не выбирать между parseInt и parseFloat и не писать много букв, мы можем использовать унарный оператор +. Он вызывает неявное преобразование значения, стоящего справа от него, в число.
const num1 = +"100"; const num2 = +"11.11";
Если вы еще не используете в своем коде приемы из этой подборки, самое время начать. Это позволит сократить код и сделать его компактнее.
Однако помните, что сокращение ради сокращения – это большая ошибка. Между ясностью и краткостью всегда выбирайте ясность!
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
