Когда вы программируете на JavaScript, условия важны для разработки функционального приложения.

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

Но наличие в программе большого количества длинных и беспорядочных операторов if может вызвать путаницу у разработчиков и сильно ухудшить читабельность. Вот почему разработчикам важно реализовать более эффективные условия.

Пример условного оператора

Представьте, что вы создаете приложение для голосования. Каждый пользователь должен выбрать свой любимый цвет, но единственные варианты — красный, зеленый и синий.

Очевидно, что у пользователей не так много вариантов, но давайте пока остановимся на простом решении.

Функция для голосования может выглядеть примерно так:

const vote = (color) => {
  // code goes here
}

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

Попробуйте представить, если бы пользователь проголосовал за оранжевый цвет. Вам нужно будет использовать некоторую логику JavaScript, чтобы предотвратить это.

Как бы вы это сделали? Вы можете создать простое условие, при котором пользователь может выбрать только красный цвет:

const vote = (color) => {
  if (color !== "red") {
    return "invalid color";
  }
  return "valid color";
}

Отлично! Теперь первое условие, которое проверяет функция: «Цвет НЕ красный? Ну, это запрещено», и соответственно возвращается.

vote("orange"); // "invalid color"

Теперь, как вы можете сделать так, чтобы синий цвет также принимался? Все, что вам нужно сделать, это добавить еще одно условие:

const vote = (color) => {
  if (color !== "red" && color !== "blue") {
    return "invalid color";
  }
  return "valid color";
}

Это тоже работает. Но что, если вы хотите убедиться, что это красный, оранжевый, желтый, зеленый, синий или фиолетовый цвет? Тогда код будет выглядеть так:

const vote = (color) => {
  if (color !== "red" && color !== "orange"  && color !== "yellow"  && color !== "green"  && color !== "blue"  && color !== "purple") {
    return "invalid color";
  }
  return "valid color";
}
vote("cyan"); // "invalid color"

Как видите, это определенно работает. Но код длинный, беспорядочный и менее читаемый. Чтобы реализовать это эффективно, вам нужно использовать массив.

Как это сделать с помощью массива

Сначала определите массив. Хорошее имя переменной — validColors:

const validColors = ["red", "orange", "yellow", "green", "blue", "purple"];

Вы можете использовать метод array.includes() здесь. Синтаксис для этого:

array.includes(item) // returns a boolean

Чтобы реализовать это в коде, синтаксис выглядит так:

!validColors.includes(color)

Восклицательный знак (!) в начале присутствует, потому что вы хотите знать, НЕ находится ли цвет в массиве validColors.

Полный код для этого:

const validColors = ["red", "orange", "yellow", "green", "blue", "purple"];
const vote = (color) => {
  if (!validColors.includes(color)) {
    return "invalid color";
  }
  return "valid color";
}

Этот код гораздо легче читать и редактировать. И будет намного проще добавлять новые цвета в массив validColors.

И вы можете протестировать код, чтобы убедиться, что он работает:

const validColors = ["red", "orange", "yellow", "green", "blue", "purple"];
const vote = (color) => {
  if (!validColors.includes(color)) {
    return "invalid color" ;
  }
  return "valid color";
}
console.log(vote("red")); // "valid color"
console.log(vote("orange")); // "valid color"
console.log(vote("yellow")); // "valid color"
console.log(vote("green")); // "valid color"
console.log(vote("blue")); // "valid color"
console.log(vote("purple")); // "valid color"
console.log(vote("cyan")); // "invalid color"
console.log(vote("black")); // "invalid color"

Теперь эта реализация использует гораздо меньше кода и более удобочитаема.

Почему массивы более эффективны, чем случаи переключения

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

const validColors = ["red", "orange", "yellow", "green", "blue", "purple"];
const vote = (color) => {
  switch (color) {
    case "red":
        console.log("you voted red");
        break;
    case "orange":
        console.log("you voted orange");
        break;
    case "yellow":
        console.log("you voted yellow");
        break;
    case "green":
        console.log("you voted green");
        break;
    case "blue":
        console.log("you voted blue");
        break;
    case "purple":
        console.log("you voted purple");
        break;
    default:
        console.log("invalid color");
    }
}

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

Проблема с вложенными условными операторами

В качестве другого примера попробуем добавить имя пользователя при голосовании. Имя должно быть меньше или равно 15 символам.

const validColors = ["red", "orange", "yellow", "green", "blue", "purple"];
const vote = (name, color) => {
  if (!validColors.includes(color)) {
    return "invalid color" ;
  } else {
    if (name.length > 15) {
      return "name is too long";
    }
  }
  return "valid name and color";
}
console.log(vote("bob", "red")); // "valid name and color"

Код работает правильно, но его трудно читать, и при добавлении дополнительного кода может возникнуть путаница. Вы можете очистить это, не вложив условия.

const validColors = ["red", "orange", "yellow", "green", "blue", "purple"];
const vote = (name, color) => {
  if (!validColors.includes(color)) {
    return "invalid color" ;
  }
    
  if (name.length > 15) {
    return "name is too long";
  }
  return "valid name and color";
}
console.log(vote("bob", "red")); // "valid name and color"

Это хорошо работает, так как код сначала проверяет допустимость цвета, а затем проверяет корректность имени. Код теперь намного легче читать.

Выглядит хорошо! Я надеюсь, что это помогло вам понять, как писать более эффективные условия в JavaScript.