7 способов сократить код JavaScript

1. Проверка нескольких условий для строки

Часто приходится проверять, равна ли строка (string) одному из нескольких значений, и это очень быстро надоедает. К счастью, в JavaScript есть встроенный метод, который поможет выполнить эту задачу.

// Запись без сокращения
const isVowel = (letter) => {
  if (
    letter === "a" ||
    letter === "e" ||
    letter === "i" ||
    letter === "o" ||
    letter === "u"
  ) {
    return true;
  }
  return false;
};

// Запись с сокращением 
const isVowel = (letter) =>
  ["a", "e", "i", "o", "u"].includes(letter);

2. Циклы For-of и For-in

Циклы For-of и For-in  —  это отличный способ итерации по массивам и объектам без необходимости вручную отслеживать индексы ключей объектов.

• For-of:

const arr = [1, 2, 3, 4, 5];

// Запись без сокращения
for (let i = 0; i < arr.length; i++) {
  const element = arr[i];
  // ...
}

// Запись с сокращением
for (const element of arr) {
  // ...
}

• For-in:

const obj = {
  a: 1,
  b: 2,
  c: 3,
};

// Запись без сокращения
const keys = Object.keys(obj);
for (let i = 0; i < keys.length; i++) {
  const key = keys[i];
  const value = obj[key];
  // ...
}

// Запись с сокращением
for (const key in obj) {
  const value = obj[key];
  // ...
}

3. Проверка достоверности данных

Чтобы проверить, является ли переменная null, undefined, 0, false, NaN или пустой строкой string, воспользуйтесь оператором логического отрицания (!). Он протестирует их все сразу, и вам не придется писать несколько условий. Этот способ позволяет легко и быстро узнать, содержит ли переменная допустимые данные.

// Запись без сокращения
const isFalsey = (value) => {
  if (
    value === null ||
    value === undefined ||
    value === 0 ||
    value === false ||
    value === NaN ||
    value === ""
  ) {
    return true;
  }
  return false;
};

// Запись с сокращением
const isFalsey = (value) => !value;

4. Тернарный оператор

Будучи разработчиком JavaScript, вы наверняка сталкивались с ternary operator. Это отличный способ написания кратких операторов if-else. Однако вы также можете использовать тернарный оператор для написания лаконичного кода и даже создавать цепочки для проверки нескольких условий.

// Запись без сокращения
let info;
if (value < minValue) {
  info = "Value is too small";
} else if (value > maxValue) {
  info = "Value is too large";
} else {
  info = "Value is in range";
}

// Запись с сокращением
const info =
  value < minValue
    ? "Value is too small"
    : value > maxValue ? "Value is too large" : "Value is in range";

5. Вызовы функций

С помощью ternary operator также можно определить, какую функцию следует вызвать, исходя из условий.

Примечание: call signature функций должна быть одинаковой, иначе вы рискуете столкнуться с ошибкой.

function f1() {
  // ...
}
function f2() {
  // ...
}

// Запись без сокращения
if (condition) {
  f1();
} else {
  f2();
}

// Запись с сокращением
(condition ? f1 : f2)();

6. Сокращение switch-конструкций

Длинные switch-конструкции зачастую можно оптимизировать, используя объект с ключами в качестве switch-операторов и значениями в качестве возвращаемых значений.

const dayNumber = new Date().getDay();

// Запись без сокращения
let day;
switch (dayNumber) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
}

// Запись с сокращением
const days = {
  0: "Sunday",
  1: "Monday",
  2: "Tuesday",
  3: "Wednesday",
  4: "Thursday",
  5: "Friday",
  6: "Saturday",
};
const day = days[dayNumber];

7. Резервные значения

Оператор || может установить резервное значение (fallback value) для переменной.

// Запись без сокращения
let name;
if (user?.name) {
  name = user.name;
} else {
  name = "Anonymous";
}

// Запись с сокращением
const name = user?.name || "Anonymous";

Читайте также:

• Схватка “рекурсия против циклов” на арене JavaScript
• Создаем первый «Astroвной» проект
• Хитрости объектно-ориентированного программирования. Часть 6 SLAP для функций

Читайте нас в Telegram, VK и Дзен

---

Перевод статьи Tapajyoti Bose, 7 Shorthand Optimization Tricks every JavaScript Developer Should Know 😎