18 способов сократить JS код: советы и примеры

JavaScript предлагает множество способов написания одного и того же кода. Приведенные ниже примеры демонстрируют 18 способов сокращения кода JavaScript, повышая его читаемость и производительность. Примеры выполняются в Node.js, но легко адаптируются для браузерной среды.

Базовые примеры

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

Проверка условия: если число больше 27, присвоить переменной rez значение «больше 27», иначе – «меньше 27».

let chislo = 42;
let rez;

if (chislo > 27) {
  rez = "больше 27";
} else {
  rez = "меньше 27";
}
console.log(rez); // Вывод: больше 27

Упрощенная запись с использованием тернарного оператора:

let chislo = 42;
let rez = chislo > 27 ? "больше 27" : "меньше 27";
console.log(rez); // Вывод: больше 27

Проверка существования переменной

Проверка на null, undefined и пустую строку:

let rainbow;
let vrayBudva;

if (rainbow != null && rainbow != undefined && rainbow != "") {
  vrayBudva = rainbow;
} else {
  vrayBudva = "сам вылью";
}
console.log(vrayBudva); // Вывод: сам вылью

Сокращенная запись:

let rainbow;
let vrayBudva = rainbow ? rainbow : "сам вылью";
console.log(vrayBudva); // Вывод: сам вылью

Более компактный вариант:

let rainbow;
let vrayBudva = rainbow || "сам вылью";
console.log(vrayBudva); // Вывод: сам вылью

Объявление нескольких переменных

Объявление нескольких переменных в одной строке:

let x, y, z = 42;

Проверка на true и false

Проверка на true:

let isSeven = true;
if (isSeven === true) {
  // ...
}

Сокращенная запись:

let isSeven = true;
if (isSeven) {
  // ...
}

Проверка на false:

let isSeven = false;
if (isSeven !== true) {
  // ...
}

Сокращенная запись:

let isSeven = false;
if (!isSeven) {
  // ...
}

Работа с массивами

Обход массива

Использование цикла for:

let names = ["Игорь", "Елена", "Ольга"];
for (let i = 0; i < names.length; i++) {
  console.log(names[i]);
}

Использование цикла for…of:

let names = ["Игорь", "Елена", "Ольга"];
for (let name of names) {
  console.log(name);
}

Использование метода forEach:

let names = ["Игорь", "Елена", "Ольга"];
names.forEach((name, index) => console.log(`${names[index]}: ${index}`));

Использование отдельной функции с forEach:

let names = ["Игорь", "Елена", "Ольга"];
function logName(name, index, array) {
  console.log(`${array[index]}: ${index}`);
}
names.forEach(logName);

Инициализация переменных с условным значением по умолчанию

let port = process.env.PORT || 4200;

Циклы с большим количеством итераций

for (let i = 0; i < 1000000; i++) {
  // ...
}

Сокращенная запись:

for (let i = 0; i < 10**6; i++) {
  // ...
}

Работа с объектами

Создание объекта с совпадающими ключами и значениями

let a = 1, b = 2;
let myObj = { a: a, b: b };

Сокращенная запись:

let a = 1, b = 2;
let myObj = { a, b };

Стрелочные функции

setTimeout(function() {
  console.log("setTimeout");
}, 2000);

Сокращенная запись:

setTimeout(() => console.log("setTimeout"), 2000);

function triple(num) {
  return num * 3;
}

Сокращенная запись:

const triple = num => num * 3;

Параметры по умолчанию в функциях

function rgb(r, g, b) {
  if (r === undefined) r = 0;
  if (g === undefined) g = 255;
  return `rgb(${r}, ${g}, ${b})`;
}

Сокращенная запись:

const rgb = (r = 0, g = 255, b) => `rgb(${r}, ${g}, ${b})`;

Шаблонные литералы для строк

function createUrl(base, domain) {
  return "https://" + base + "." + domain;
}

Сокращенная запись:

const createUrl = (base, domain) => `https://${base}.${domain}`;

Деструктуризация объектов

let alert = window.alert;
let prompt = window.prompt;
let confirm = window.confirm;

Сокращенная запись:

const { alert, prompt, confirm } = window;

Работа с массивами (продолжение)

Конкатенация массивов

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let newArr = arr1.concat(arr2);

Сокращенная запись с оператором spread:

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let newArr = [...arr1, ...arr2];

Клонирование массива:

let cloneArr = arr1.concat();

Сокращенная запись с оператором spread:

let cloneArr = [...arr1];

Округление вниз

Math.floor(9.7); // 9

Сокращенная запись с оператором |:

9.7 | 0; // 9

Возведение в степень

Math.pow(2, 3); // 8

Сокращенная запись с оператором **:

2 ** 3; // 8

Преобразование строки в число

parseInt("42");
parseFloat("42.42");

Сокращенная запись с унарным плюсом:

+"42";
+"42.42";

Дополнительные приемы

Проверка наличия элемента в массиве

let arr = [1, 2, 3];
if (arr.indexOf(3) > -1) {
  // Элемент найден
}

Сокращенная запись с побитовым оператором (не рекомендуется из-за потенциальной неясности):

let arr = [1, 2, 3];
if (~(arr.indexOf(3))) {
  // Элемент найден
}

Использование метода includes:

let arr = [1, 2, 3];
if (arr.includes(3)) {
  // Элемент найден
}

Преобразование объекта в массив

let myObj = { mod: "A", port: 8080, year: 2019, color: "red" };
Object.entries(myObj);
Object.keys(myObj);
Object.values(myObj);

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