Share This
Связаться со мной
Крути в низ
Categories
//☕ ТОП-10 сокращений JavaScript

☕ ТОП-10 сокращений JavaScript

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

top 10 sokrashhenij javascript bd52896 - ☕ ТОП-10 сокращений JavaScript

Многие из нас пишут на 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. Если вы еще не используете их в своем коде, самое время начать.

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

  • 9 views
  • 0 Comment

Leave a Reply

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Свежие комментарии

    Рубрики

    About Author 01.

    blank
    Roman Spiridonov

    Моя специальность - Back-end Developer, Software Engineer Python. Мне 39 лет, я работаю в области информационных технологий более 5 лет. Опыт программирования на Python более 3 лет. На Django более 2 лет.

    Categories 05.

    © Speccy 2022 / All rights reserved

    Связаться со мной
    Close