Если вы еще не сокращаете, тогда мы идем к вам! Обсудить

Многие из нас пишут на JavaScript уже очень давно. Мы привыкли к своему стилю, выработали набор типичных решений для разных задач и редко проводим его ревизию. Но время не стоит на месте и появляются новые, более удобные/надежные/красивые/короткие приемы.

Взгляните на нашу подборку ТОП-10 актуальных сниппетов сокращений, которые сделают ваш 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";     

*** Мы подобрали 10 must-have сокращений JavaScript. Если вы еще не используете их в своем коде, самое время начать.

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