Один из лучших способов уменьшить вероятность появления ошибок, а также повысить читабельность кода — написать меньше кода. Это также может сделать тестирование менее сложной задачей по сравнению с более длинными (спагетти) кодами.

К счастью, в javascript есть более разумные способы выполнения задач, но мы обсудим четыре ниже.

1. Используйте Array.includes для нескольких условий

Давайте посмотрим на пример ниже

//condition
function check(animal){
  if(animal=='tiger'|| animal== 'lion') {
    console.log('animal');
  }
}

На первый взгляд пример выше выглядит хорошо. Однако что, если мы включим больше животных семейства кошачьих, скажем, гепарда и леопарда? Собираемся ли мы расширить оператор еще || ?

Мы можем перефразировать условие, указанное выше, используя Array.includes

function check(animal){
//extract conditions to array
const catFamily = [ 'tiger', 'cheetah', 'lion', 'leopard']
if(catFamily.includes(animal)){
console.log('animal');}
}

Мы можем извлечь catFamily(условия) в массив. Сделав это, код выглядит проще.

2. Использование операторов вместо условных операторов if.

Условный тернарный оператор в Javascript присваивает значение переменной в зависимости от некоторого условия и является единственным оператором Javascript, который может принимать три операнда.

Например

let dog = ""
if(true == false){
dog = "Not Bark"
} else {
dog = "Bark"}
console.log(dog) //Bark

Сокращенный/переработанный код

let dog = true == false? "Dont Bark": "Bark" //Bark

3. Замена цикла помощниками массива (map(), filter(), reduce(), find(), some()).

Циклы имеют первостепенное значение, если вы хотите многократно запускать один и тот же код каждый раз с другим значением.

Чаще всего это происходит при работе с массивами. Ниже приведен пример цикла for, используемого для перебора чисел 1–5 с использованием блока кода цикла for.

const numbers = [1,2,3,4,5]
let sum = 0
for(let i=0;i<numbers.length;i++){
   sum += numbers[i]
}
console.log(sum)

Сумма напечатает 15. Но мы можем сделать это с помощью одного из помощников массива, называемого reduce(), всего в одной строке кода.

numbers.reduce((sum, numbers) => sum + numbers, 0)

reduce принимает два аргумента, начальный — это функция итератора, которая в приведенном выше случае sum — это аккумулятор, а numbers — массив, второй аргумент — это первое значение, для нашего примера мы установим его равным нулю.

Другие помощники массива также могут выполнять различные функции в наших массивах через цикл, но я не буду вдаваться в остальные по отдельности. Однако я оставлю ссылку для дальнейшего подробного использования помощников массива, которые на самом деле могут сделать ваш код Javascript короче, чем обычный цикл.

4. Использование литералов шаблона для замены строк из нескольких строк

Литералы шаблонов заключаются в символы обратной кавычки (` `) вместо двойных или одинарных кавычек.

Литералы шаблонов также могут включать заполнители. Они обозначаются знаком доллара и фигурными скобками (${expression}). Выражения в заполнителях и текст между обратными кавычками (` `) передаются функции.

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

// The Previous Way
 var multiStrings = 'Make this expression\nOn two lines!';

Теперь со строкой Template Literal мы можем сделать это таким образом.

var multiStrings= `Make this expression  is on two lines!`;

В новом синтаксисе шаблонного литерала ${expression}

let name = `Benjamin`;  
console.log(`Hi my name is ${name}`);

Это также создаст тот же результат

console.log(`Hi my name is ${'Benjamin'}`);

Это также может быть применено к более сложному объекту.

let student= {
    firstName: `Denzel`,
    lastName: `Benjamin`,
    sayName() {
        return `Hi my name is ${this.firstName} ${this.lastName}`;
    }
};

Вы можете видеть, что у нас все еще есть объект student с методом sayName(). Мы можем обращаться к свойствам объекта внутри синтаксиса ${}.

Вывод

Из советов, упомянутых выше, ваш код javascript будет иметь меньше строк, и в вашем коде будет меньше строк и шансов на ошибки.