# Zamonaviy JavaScript: destructuring va spread

> ES6+ sintaksis: destructuring bilan qiymat ajratish, spread va rest operatorlari, qisqa xossalar va standart qiymatlar. Kodni qisqartirishni o'rganing.

Manba: https://learncode.uz/javascript/es6-sintaksis/
Sana: 2026-05-31

2015-yildan beri JavaScript'ga ko'p qulay yozuvlar qo'shildi. Ular kodni
qisqartiradi va zamonaviy loyihalarda hamma joyda uchraydi.

## Destructuring — massivdan ajratish

```js
const colors = ["qizil", "yashil", "ko'k"];

const [first, second] = colors;
console.log(first, second);

const [, , third] = colors;
console.log(third);
```

Eski usul uzunroq edi:

```js
const first = colors[0];
const second = colors[1];
```

## Obyektdan ajratish

```js
const student = { name: "Aziz", age: 20, group: "IT-21" };

const { name, age } = student;
console.log(name, age);

const { group: sinf } = student;
console.log(sinf);

const { phone = "yo'q" } = student;
console.log(phone);
```

Bu yerda uch narsa: xossani ajratish, boshqa nom berish (`guruh: sinf`) va
mavjud bo'lmasa standart qiymat.

> **Atama**
>
> **Destructuring** — massiv yoki obyektdan qiymatlarni bir yo'la ajratib olish.
> Nomi "tuzilmani qismlarga ajratish" degani. Massiv uchun **tartib**, obyekt
> uchun **kalit nomi** muhim.

## Funksiya parametrida

```js
function introduce({ name, age }) {
  return `${name}, ${age} yoshda`;
}

const student = { name: "Dilnoza", age: 22, group: "IT-20" };
console.log(introduce(student));
```

Funksiya obyektning faqat kerakli qismini oladi — nima ishlatilishi darhol
ko'rinadi.

## Spread — yoyish

Spread [massiv](https://learncode.uz/javascript/massivlar) yoki [obyekt](https://learncode.uz/javascript/obyektlar)
ichidagini yoyib yuboradi — nusxa olish va birlashtirish uchun eng qisqa yo'l:

```js
const a = [1, 2, 3];
const b = [4, 5];

const merged = [...a, ...b];
console.log(merged);

const copy = [...a];
copy.push(99);
console.log(a);
console.log(copy);
```

`...` massiv elementlarini "yoyadi". Bu **nusxa olishning** eng qulay usuli —
`copy` o'zgarganda asl massiv tegilmadi.

Obyektlar uchun ham ishlaydi:

```js
const base = { name: "Aziz", age: 20 };

const fullName = { ...base, city: "Toshkent" };
console.log(fullName);

const updated = { ...base, age: 21 };
console.log(updated);
console.log(base);
```

Keyin kelgan xossa oldingisini almashtiradi — shuning uchun `yosh: 21` ustun
chiqdi.

<Callout type="warning" title="Sayoz nusxa">
Spread **bir qavat** nusxa oladi. Ichma-ich obyekt bo'lsa, ichkarisi baribir
umumiy qoladi:

```js
const a = { address: { city: "Toshkent" } };
const b = { ...a };
b.address.city = "Buxoro";
console.log(a.address.city); // "Buxoro" — o'zgardi!
```

Chuqur nusxa uchun `structuredClone(a)` ishlatiladi.
</Callout>

## Rest — yig'ish

Xuddi shu `...` teskari vazifani ham bajaradi:

```js
const [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first);
console.log(rest);

function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}

console.log(sum(1, 2, 3));
console.log(sum(10, 20, 30, 40));
```

Chap tomonda (o'zlashtirishda) — **yig'adi**; o'ng tomonda (chaqiruvda) —
**yoyadi**.

## Qisqa xossa nomi

```js
const name = "Aziz";
const age = 20;

const student = { name, age };
console.log(student);
```

O'zgaruvchi nomi bilan xossa nomi bir xil bo'lsa, bir marta yozish kifoya.

## Nullish operatorlari

```js
const a = null;
const b = 0;

console.log(a ?? "standart");
console.log(b ?? "standart");
console.log(b || "standart");
```

- `??` faqat `null` va `undefined` da standart qiymatga o'tadi;
- `||` esa har qanday **falsy** qiymatda (`0`, `""` ham).

Shuning uchun son yoki bo'sh matn haqiqiy qiymat bo'lishi mumkin bo'lgan
joyda `??` xavfsizroq.

## Amaliy mashq

Zamonaviy sintaksisni qo'llang:

1. Massivdan birinchi ikki elementni destructuring bilan ajrating;
2. obyektdan ikki xossani ajrating va bittasiga yangi nom bering;
3. spread bilan ikkita massivni birlashtiring;
4. obyekt nusxasini olib, bitta xossasini o'zgartiring — asli tegilmadimi?
5. rest bilan istalgancha argument oladigan funksiya yozing;
6. `??` va `||` ni `0` qiymatda solishtiring.

6-qadam ikkalasining farqini aniq ko'rsatadi.

## Qisqacha xulosa

- **Destructuring** massiv (tartib bo'yicha) va obyektdan (kalit bo'yicha) qiymat ajratadi.
- **Spread** `...` yoyadi — birlashtirish va nusxa olish uchun.
- **Rest** `...` yig'adi — qolgan elementlar yoki argumentlar.
- Xossa nomi o'zgaruvchi bilan bir xil bo'lsa qisqartiriladi: `{ ism }`.
- `??` faqat `null`/`undefined` da ishlaydi, `||` barcha falsy qiymatda.

Keyingi darsda [modullar](https://learncode.uz/javascript/modullar) — kodni fayllarga bo'lishni
ko'ramiz.