🔖 6 лайфхаков для улучшения JavaScript-кода

Современный JavaScript развивается стремительно. Разбираем 6 фич, которые делают код короче и чище.


1. Опциональные цепочки (?.)

Безопасная навигация по объектам без множественных проверок:

const someObject = {
  profile: {
    firstName: 'Nicky',
    lastName: 'Christensen'
  }
}

// ✅ С optional chaining
if (someObject?.profile?.firstName) {
  console.log(someObject.profile.firstName)
}

// ❌ Старый способ
if (someObject && someObject.profile && someObject.profile.firstName) {
  console.log(someObject.profile.firstName)
}

// Не выполнится, если свойства нет
if (someObject?.profile?.name) {
  console.log('Not executed')
}

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

Возвращает правый операнд только если левый null или undefined:

const falsy = false;
const emptyString = '';
const nullish = null;

console.log(falsy ?? 'Default');        // false
console.log(emptyString ?? 'Default');  // "" (не заменяется!)
console.log(nullish ?? 'Default');      // "Default"

// VS оператор ||
console.log(falsy || 'Default');        // "Default"
console.log(emptyString || 'Default');  // "Default"
console.log(nullish || 'Default');      // "Default"

Преимущество `??`: не заменяет false, 0 или "" — только null/undefined.

3. Динамический импорт

Асинхронная загрузка модулей (code splitting):

let someAsyncModule = await import('/modules/my-module.ts');

4. Promise.allSettled()

Узнать результат всех промисов, даже отклонённых:

const promise1 = Promise.resolve("OK");
const promise2 = Promise.reject("Error");
const promise3 = Promise.resolve("Done");

Promise.allSettled([promise1, promise2, promise3])
  .then((results) => console.log(results));

// Результат:
// [
//   { status: 'fulfilled', value: 'OK' },
//   { status: 'rejected', reason: 'Error' },
//   { status: 'fulfilled', value: 'Done' }
// ]

Отличие от `Promise.all()`: не падает при reject, показывает статус каждого промиса.

5. Spread-оператор (...)

Для массивов:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];  // [1,2,3,4,5,6]

Для объектов:

const basePerson = {
  name: 'Nicky C',
  country: 'DK'
}

const footballer = {
  ...basePerson,
  team: 'Man UTD',
  shirtNumber: '11'
}
// { name: 'Nicky C', country: 'DK', team: 'Man UTD', shirtNumber: '11' }

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

Распаковка значений из объекта в переменные:

const footballer = {
  name: 'Nicky C',
  team: 'Man UTD',
  shirtNumber: '11'
}

const { team, shirtNumber } = footballer;
console.log(team, shirtNumber);  // "Man UTD" "11"

🔸Итог

- Сокращают код
- Улучшают читаемость
- Снижают количество багов
- Стандарт в современном JavaScript

Используйте уже сегодня!


📎 Статья

🎙 Новости

📝 База вопросов