JavaScript-də Spread və Rest operatorunun gücü

[codex]

JavaScript-də üç nöqtə (...) operatorunu tez-tez görürük: bəzən massivləri kopyalayır, bəzən funksiyaya verilən arqumentləri toplayır, bəzən isə obyektlərdə “sehrli çubuq” kimi istifadə edirik.

Bu operatorun iki əsas istifadəsi var: spread və rest. Hər ikisi eyni sintaksisə malik olsa da, fərqli kontekstlərdə fərqli davranırlar.

Spread və Rest: fərqləri nədir?

Sintaksis	Adı	Məqsəd	Nümunə
...	Spread	İterable elementləri genişləndirir	const copy = [...arr]
...	Rest	Bir neçə elementi bir araya toplayır	function(...args) {}

Massivləri kopyalamaq (Shallow Copy)

const numbers = [1, 2, 3];
const copy = [...numbers];

Bu, numbers massivinin səthi kopyasını yaradır, yəni yeni bir massivdir və orijinala referans deyil.

Massivləri birləşdirmək

const more = [4, 5];
const all = [...numbers, ...more]; // [1, 2, 3, 4, 5]

Artıq .concat() istifadə etməyə ehtiyac yoxdur!

Funksiya arqumentlərinə yaymaq

const coords = [10, 20];
function move(x, y) {
  console.log(`Moving to (${x}, ${y})`);
}

move(...coords); // move(10, 20)

Obyektləri kopyalamaq və yeniləmək (React üçün faydalı)

const user = { name: "Sam", age: 30 };
const updatedUser = { ...user, age: 31 };

Bu, user obyektinin yeni bir nüsxəsini yaradır və age sahəsini yeniləyir.

Sətirləri iterable kimi genişləndirmək

const chars = [..."hello"]; // ['h', 'e', 'l', 'l', 'o']

Funksiya parametrlərində

function logAll(...messages) {
  messages.forEach(msg => console.log(msg));
}

logAll("Hello", "World", "Again");
// "Hello"
// "World"
// "Again"

Massiv destrukturlaşdırması ilə

const [first, ...others] = [1, 2, 3, 4];
console.log(first);  // 1
console.log(others); // [2, 3, 4]

Obyekt destrukturlaşdırması ilə

const { id, ...info } = { id: 1, name: "Sam", age: 30 };
console.log(id);   // 1
console.log(info); // { name: "Sam", age: 30 }

---

Real dünyadan istifadə halları

React: State-i immutable yeniləmək

setUser(prev => ({ ...prev, age: prev.age + 1 }));

Form əməliyyatları: sahələri birləşdirmək

const handleChange = (e) => {
  setForm(prev => ({ ...prev, [e.target.name]: e.target.value }));
};

Utility funksiyaları

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

---

Diqqət ediləcək nöqtələr

Səthi kopyalar

const nested = { a: { b: 2 } };
const copy = { ...nested };
copy.a.b = 99;
console.log(nested.a.b); // 99

Obyekt Spread-də sıra əhəmiyyətlidir

const user = { name: "Sam" };
const updated = { ...user, name: "Alex" }; // name: "Alex"

Nəticə

Spread və rest sintaksisi JavaScript-də kodunuzu daha təmiz, ifadəli və səhvsiz yazmağa kömək edir. Bu operatorlar React, utility kitabxanaları və vanilla JS-də geniş istifadə olunur. Onları düzgün başa düşmək və istifadə etmək hər bir JavaScript proqramçısı üçün vacibdir.