Сокращения JavaScript экономящие время

Оператор нулевого слияния ??

В JavaScript работа со значениями null или undefined — распространённая задача. Оператор нулевого слияния (??) обеспечивает сокращение для задания значений по умолчанию.

До:

const name = user.name !== null && user.name !== undefined ? user.name : 'Anonymous';

После:

const name = user.name ?? 'Anonymous';

Этот оператор проверяет наличие null или undefined, что делает его более простой альтернативой логическому OR (||), способному давать нежелательные результаты, когда задействованы ложные значения вроде 0 или "".

• Оператор нулевого слияния (??)

Опциональная последовательность (?.)

Доступ к глубоко вложенным свойствам объектов может привести к длинному и подверженному ошибкам коду, если постоянно проверять существование каждого уровня. Оператор опциональной последовательности (?.) упрощает безопасный доступ к свойствам.

До:

const street = user && user.address && user.address.street;

После:

const street = user?.address?.street;

Это сокращает синтаксис и позволяет избежать ошибок во время выполнения при попытке доступа к свойствам со значениями null или undefined.

• Оператор опциональной последовательности

Деструктурирующее присваивание

Деструктуризация — это отличный способ извлечения значений из массивов или объектов в сокращённой форме.

До:

const name = user.name;
const age = user.age;
const country = user.country;

После:

const { name, age, country } = user;

Можно также деструктурировать массивы:

const [first, second] = [10, 20];

• Деструктурирующее присваивание

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

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

До:

function greet(name) {
  const userName = name || 'Anonymous';
  return `Hello, ${userName}`;
}

После:

function greet(name = 'Anonymous') {
  return `Hello, ${name}`;
}

• Параметры по умолчанию

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

Стрелочные функции обеспечивают более короткий синтаксис для написания функций и автоматически привязывают this, что делает их идеальными для обратных вызовов.

До:

const numbers = [1, 2, 3];
const squared = numbers.map(function (n) {
  return n * n;
});

После:

const squared = numbers.map(n => n * n);

Это не только более лаконично, но и позволяет избежать путаницы с this в функциях обратного вызова.

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

Оператор spread (...)

Оператор spread (...) помогает упростить копирование и объединение массивов или объектов.

До:

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

После:

const combined = […arr1, …arr2];

Объекты:

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combinedObj = { …obj1, …obj2 };

Оператор spread сокращает использование таких громоздких методов, как concat или Object.assign.

• Синтаксис Spread

Шаблонные литералы

Шаблонные литералы позволяют с лёгкостью встраивать выражения в строки, что улучшает читаемость по сравнению с конкатенацией строк.

До:

const name = 'John';
const age = 30;
const greeting = 'Hello, my name is ' + name + ' and I am ' + age + ' years old.';

После:

const greeting = `Hello, my name is ${name} and I am ${age} years old.`;

Это избавляет от необходимости использовать оператор + и делает код более читабельным.

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

Сокращение вычисление (&& и `||``)

Сокращённое вычисление может быть мощным способом упростить условную логику в JavaScript. Вы можете использовать && и || для присвоения значений или запуска блоков кода на основе истинных или ложных значений.

До:

if (user) {
  showProfile(user);
}

После:

user && showProfile(user);

Сокращённые вычисления удобно использовать в логике рендеринга в таких фреймворках, как React.

• Логическое И (&&)
• Логическое ИЛИ (||)

Короткая нотация свойств объекта

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

До:

const name = 'John';
const age = 30;
const user = { name: name, age: age };

После:

const name = 'John';
const age = 30;
const user = { name, age };

• Инициализация объектов

Цикл for…of

Цикл for...of обеспечивает элегантный способ итерации по итерируемым объектам, таким как массивы, заменяя устаревший цикл for и метод forEach.

До:

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

После:

const numbers = [1, 2, 3];
for (const num of numbers) {
 console.log(num);
}

Этот цикл делает код чище, легче читаемым и избавляет от необходимости ручного отслеживания индексов.

Заключение

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

Комментарии