crazy_coder
Moderatör
- Katılım
- 20 Şub 2026
- Mesajlar
- 204
- Tepkime puanı
- 0
- Puanları
- 16
1. Spread Operatörü (Dağıtıcı/Yayılmacı)
Spread, mevcut bir dizi veya objenin içindeki elemanları "dışarı çıkarıp" tek tek dağıtmamızı sağlar. Bir kutuyu açıp içindekileri masaya yaymak gibi düşünebilirsiniz.
A. Dizileri Birleştirmek ve Kopyalamak
Eski yöntemde concat kullanırken, Spread ile bu işlem çok daha görseldir.
JavaScript:
const meyveler = ["Elma", "Muz"];
const sebzeler = ["Havuç", "Ispanak"];
// Dizileri birleştirme
const pazarListesi = [...meyveler, ...sebzeler, "Ekmek"];
console.log(pazarListesi); // ["Elma", "Muz", "Havuç", "Ispanak", "Ekmek"]
// Diziyi kopyalama (Referansı değil, içeriği kopyalar)
const yeniMeyveler = [...meyveler];B. Objeleri Birleştirmek
İki farklı ayar objesini veya kullanıcı bilgisini birleştirmek için idealdir.
JavaScript:
const varsayilanAyarlar = { tema: "light", dil: "TR" };
const kullaniciAyarlari = { tema: "dark" };
// Mevcut ayarları kullanıcınınkilerle güncelleyelim
const sonAyarlar = { ...varsayilanAyarlar, ...kullaniciAyarlari };
console.log(sonAyarlar); // { tema: "dark", dil: "TR" } (Kullanıcı tercihi baskın çıktı)2. Rest Operatörü (Toplayıcı)
Rest, Spread'in tam tersi gibi çalışır. Dağınık haldeki elemanları toplayıp bir dizi haline getirir. Genellikle fonksiyon parametrelerinde ve parçalama (destructuring) işlemlerinde kullanılır.
A. Fonksiyonlarda Sınırsız Parametre
Fonksiyona kaç tane argüman geleceğini bilmediğimiz durumlarda hayat kurtarır.
JavaScript:
function topla(...sayilar) {
// 'sayilar' artık gelen tüm sayıları içeren bir dizidir.
return sayilar.reduce((acc, curr) => acc + curr, 0);
}
console.log(topla(5, 10, 15, 20)); // 50B. Parçalama (Destructuring) ile Kullanım
Belirli elemanları aldıktan sonra "geriye kalanları" bir değişkene toplamak için kullanılır.
JavaScript:
const takim = ["Ahmet", "Mehmet", "Can", "Deniz", "Ege"];
const [kaptan, yardimci, ...digerOyuncular] = takim;
console.log(kaptan); // Ahmet
console.log(digerOyuncular); // ["Can", "Deniz", "Ege"]3. Spread vs Rest: Aradaki Fark Nedir?
Bu iki yapıyı karıştırmamak için şu basit kuralı aklınızda tutun:
| Özellik | Spread (...) | Rest (...) |
|---|---|---|
| Amacı | Elemanları dağıtır (Açma). | Elemanları toplar (Birleştirme). |
| Nerede Kullanılır? | Dizi/Obje oluştururken veya fonksiyon çağırırken. | Fonksiyon parametrelerinde veya Destructuring sırasında. |
| Sonuç | Bireysel değerler. | Bir dizi veya obje. |
Pratik Bir Örnek: Matematik Fonksiyonları
JavaScript'in Math.max() fonksiyonu bir dizi değil, tek tek sayılar bekler. Elinizdeki bir diziyi bu fonksiyona göndermek için Spread mükemmeldir:
JavaScript:
const puanlar = [45, 88, 12, 95, 30];
// console.log(Math.max(puanlar)); // HATA! (Dizi kabul etmez)
console.log(Math.max(...puanlar)); // 95 (Dizi elemanları tek tek dağıtıldı)Sonuç
Üç nokta (...) operatörü, JavaScript'i daha modern ve deklaratif kılan en güçlü araçlardan biridir. Dizi kopyalamaktan sınırsız parametreli fonksiyonlar yazmaya kadar geniş bir yelpazede kodunuzu sadeleştirir.