10 приемов для написания лучшего JavaScript-кода

0
330
views
javascript logo

Хочешь проверить свои знания по JS?

Подпишись на наш канал с тестами по JS в Telegram!

×

Многие из нас пишут на 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;
}

Благодаря этому механизму нет нужды проверять на nullundefined и пустую строку отдельно – каждое из этих значений 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";

Если вы еще не используете в своем коде приемы из этой подборки, самое время начать. Это позволит сократить код и сделать его компактнее.

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

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here