Что такое синтаксический сахар в JavaScript?

Вопрос

Что такое синтаксический сахар и какие его примеры есть в JavaScript?

Короткий ответ

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

Подробный ответ

Термин появился потому, что такой код "слаще" для разработчика: он делает то же самое, что и более многословный эквивалент, но компактнее. Компилятор/движок в итоге приводит его к той же базовой конструкции. Самые частые примеры синтаксического сахара в современном JS:

• Стрелочные функции — короче обычных function-выражений, плюс не создают собственный this.
• Шаблонные строки — вместо конкатенации через +.
• Деструктуризация — извлечение значений из объектов/массивов без обращения по имени свойства каждый раз.
• Spread/rest (...) — разворачивание и сбор элементов массивов/объектов.
• Сокращённая запись свойств объекта (object shorthand).
• class — синтаксический сахар над прототипным наследованием.
• async/await — синтаксический сахар над цепочками промисов.

Пример

// Arrow function вместо function-выражения
const add = (a, b) => a + b

// Шаблонные строки вместо конкатенации
const greeting = `Hello, ${firstName}!`

// Деструктуризация вместо person.firstName / person.age
const { firstName, age } = person

// Spread для копирования/слияния
const merged = { ...defaults, ...overrides }

// Rest — сбор "остальных" аргументов
function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0)
}

// Object shorthand: { firstName, age } вместо { firstName: firstName, age: age }
const user = { firstName, age }

// class — сахар над function + prototype
class Person {
  constructor(name) { this.name = name }
  sayHello() { console.log(`Hello, ${this.name}`) }
}

// async/await — сахар над .then()
async function fetchData() {
  const response = await fetch('/api/data')
  return response.json()
}

Дополнительные вопросы

• Почему class называют "синтаксическим сахаром", если поведение немного отличается от ES5-эмуляции (например, нельзя вызвать без new)?
• Чем async/await отличается от цепочки .then() на уровне обработки ошибок?
• Какой синтаксический сахар транспилируется Babel для старых браузеров?