JavaScript'da sintaktik shakar (syntactic sugar) nima?

Savol

Sintaktik shakar nima va JavaScript'da uning qanday misollari bor?

Qisqa javob

Sintaktik shakar — bu kodni yozishning qisqaroq va qulayroq usuli bo'lib, u yangi funksionallik qo'shmaydi, faqat tilning allaqachon mavjud imkoniyatini o'qish va yozish uchun soddaroq qiladi.

Batafsil javob

Bu atama shu sababli paydo bo'lganki, bunday kod dasturchi uchun "shirinroq": u batafsilroq ekvivalent bilan bir xil ishni bajaradi, lekin ixchamroq. Kompilyator/dvigatel oxir-oqibat uni bir xil bazaviy konstruksiyaga keltiradi. Zamonaviy JS'da sintaktik shakarning eng ko'p uchraydigan misollari:

• Strelka funksiyalar (arrow functions) — oddiy function-ifodalardan qisqaroq, ustiga o'z thisini yaratmaydi.
• Shablon satrlar (template strings) — + orqali konkatenatsiya o'rniga.
• Destrukturizatsiya — obyekt/massivlardan qiymatlarni har safar xususiyat nomi orqali murojaat qilmasdan olish.
• Spread/rest (...) — massiv/obyekt elementlarini yoyish va yig'ish.
• Obyekt xususiyatlarining qisqartirilgan yozuvi (object shorthand).
• class — prototipli meros ustidan sintaktik shakar.
• async/await — promise zanjirlari ustidan sintaktik shakar.

Misol

// Function-ifoda o'rniga arrow function
const add = (a, b) => a + b

// Konkatenatsiya o'rniga shablon satrlar
const greeting = `Hello, ${firstName}!`

// person.firstName / person.age o'rniga destrukturizatsiya
const { firstName, age } = person

// Nusxalash/birlashtirish uchun spread
const merged = { ...defaults, ...overrides }

// Rest — "qolgan" argumentlarni yig'ish
function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0)
}

// Object shorthand: { firstName: firstName, age: age } o'rniga { firstName, age }
const user = { firstName, age }

// class — function + prototype ustidan shakar
class Person {
  constructor(name) { this.name = name }
  sayHello() { console.log(`Hello, ${this.name}`) }
}

// async/await — .then() ustidan shakar
async function fetchData() {
  const response = await fetch('/api/data')
  return response.json()
}

Qo'shimcha savollar

• Nega class xatti-harakati ES5-emulyatsiyasidan biroz farq qilsa-da (masalan, newsiz chaqirib bo'lmaydi), "sintaktik shakar" deb ataladi?
• async/await xatolarni qayta ishlash darajasida .then() zanjiridan nimasi bilan farq qiladi?
• Eski brauzerlar uchun Babel qaysi sintaktik shakarni transpilyatsiya qiladi?