JavaScript’te Spread Operatörü

eminbasbayan

7 dk okuma

JavaScript spread operatörü (`...`) sembolü ve fonksiyonlara eleman yayma işlemini gösteren görsel

🔍 Büyütmek için tıklayın

JavaScript'in modern özelliklerinden biri olan spread operatörü (...), birçok farklı senaryoda kodumuzu daha sade ve okunabilir hale getirir. Bu makalede, spread operatörünün fonksiyonlara eleman yaymak, dizi işlemlerinde ve obje (nesne) işlemlerinde nasıl kullanıldığını detaylı bir şekilde inceleyeceğiz.

Spread Operatörü Nedir?

Spread kelimesi, İngilizce'de "yaymak" anlamına gelir. JavaScript'te ... üç nokta ile gösterilen bu operatör, bir dizi ya da string gibi üzerinde döngü yapılabilen (iterable) yapıları, tek tek elemanlarına ayırmak için kullanılır. Yani elimizde bir liste varsa, bu listeyi olduğu gibi değil, içindekileri ayrı ayrı kullanmak istiyorsak spread devreye girer.

1. Fonksiyonlara Eleman Yaymak

Math.max ve Math.min ile Kullanım

Bazı JavaScript fonksiyonları, tek bir dizi yerine, elemanların tek tek verilmesini bekler. Bu durumu daha iyi anlayabilmek için Math.max fonksiyonunu ele alalım.

Math.max(12, 5, 27); // 27 döner

Burada Math.max fonksiyonu, her sayıyı ayrı birer argüman olarak alır. Şimdi elimizde bu sayıların bulunduğu bir dizi olduğunu düşünelim:

const notlar = [12, 5, 27];

Bu diziyi doğrudan Math.max içerisine koyarsak:

Math.max(notlar); // NaN

Bu kod çalışmaz çünkü Math.max, bir dizi değil, sayıları tek tek ister. İşte tam bu noktada ... yani spread operatörü devreye girer:

Math.max(...notlar); // 27

Burada ...notlar, diziyi açarak Math.max(12, 5, 27) haline getirir. Aynı şekilde, Math.min(...notlar) ifadesi de minimum değeri döndürür.

console.log ile Kullanım

JavaScript'in console.log fonksiyonu da birden fazla argüman alabilir. Bu yüzden spread burada da anlamlı sonuçlar verir.

const isimler = ["Ayşe", "Mehmet", "Zeynep"];
console.log(isimler); // ["Ayşe", "Mehmet", "Zeynep"]

Ancak bu diziyi yayarsak:

console.log(...isimler); // Ayşe Mehmet Zeynep

Yani her eleman ayrı ayrı yazılır. console.log, araya boşluk koyarak her birini ayrı olarak bastığı için görünüm farklı olur.

String Üzerinde Spread Kullanmak

Diziler gibi, string'ler de JavaScript'te birer iterable'dır. Yani karakter karakter dolaşılabilir. Dolayısıyla string'ler üzerinde de spread kullanılabilir.

const kelime = "masa";
console.log(kelime); // masa
console.log(...kelime); // m a s a

Burada string yayılmış ve her karakter ayrı argüman olarak console.log'a gönderilmiştir. Bu, her bir karakterin ayrı ayrı ele alınmasını sağlar.

2. Dizi İşlemlerinde Spread Kullanımı

Dizi Kopyalama

Elimizde bir meyve listesi olduğunu düşünelim:

const meyveler = ['elma', 'armut', 'muz'];

Bu diziyi tamamen aynı elemanlara sahip olacak şekilde kopyalamak istiyorsak:

const yeniMeyveler = [...meyveler];

Burada ...meyveler ifadesi, dizinin her bir elemanını teker teker alır ve yeniMeyveler dizisine ekler. Önemli bir detay: Bu sadece yüzeysel (shallow) bir kopyadır, ama çoğu durumda işimizi fazlasıyla görür. Artık yeniMeyveler üzerinde yapılan değişiklikler meyveler dizisini etkilemez.

Örnek:

const sayilar = [10, 20, 30];
const kopyaSayilar = [...sayilar];

kopyaSayilar.push(40);
console.log(sayilar);       // [10, 20, 30]
console.log(kopyaSayilar);  // [10, 20, 30, 40]

Görüldüğü gibi orijinal dizi bozulmadan kullanılmış oldu.

Dizileri Birleştirme

Diyelim ki elimizde iki farklı dizi var:

const erkekIsimler = ['Ahmet', 'Mehmet'];
const kizIsimler = ['Ayşe', 'Fatma'];

Bu iki diziyi birleştirip tek bir liste yapmak istiyoruz. Bunun için spread operatörünü şöyle kullanabiliriz:

const tumIsimler = [...erkekIsimler, ...kizIsimler];
// Sonuç: ['Ahmet', 'Mehmet', 'Ayşe', 'Fatma']

Bu şekilde hem erkek hem kız isimlerini tek bir dizide topladık. Sıralama, operatörde yazdığımız sıraya göre belirlenir. Eğer önce kızları yazsaydık, isimler o şekilde sıralanırdı:

const karisik = [...kizIsimler, ...erkekIsimler];
// Sonuç: ['Ayşe', 'Fatma', 'Ahmet', 'Mehmet']

Eleman Ekleyerek Birleştirme

Spread operatörü sayesinde, sadece dizileri birleştirmekle kalmaz, araya veya başa yeni elemanlar da kolayca ekleyebiliriz:

const tumIsimler = ['Zeynep', ...erkekIsimler, ...kizIsimler, 'Kemal'];
// Sonuç: ['Zeynep', 'Ahmet', 'Mehmet', 'Ayşe', 'Fatma', 'Kemal']

Bu örnekte başta 'Zeynep', ortada erkekIsimler ve kizIsimler dizileri, sonda ise 'Kemal' yer alır. Bu yöntem sayesinde listelere istediğimiz elemanları kolayca ekleyebiliriz.

String'i Diziye Çevirme

Spread operatörü string'ler üzerinde de kullanılabilir. Çünkü string'ler de aslında birer iterable yapıdır.

const harfler = [...'kitap'];
// Sonuç: ['k', 'i', 't', 'a', 'p']

Bu işlem, kelimeyi harf harf ayırıp yeni bir diziye yerleştirir. Bu özellik, karakter karakter işlem yapmak istediğimizde çok işe yarar.

3. Obje İşlemlerinde Spread Kullanımı

Spread operatörü sadece dizilerde değil, objelerde (nesnelerde) de oldukça güçlü bir araçtır. Bir objenin tüm özelliklerini başka bir objeye yaymak yani kopyalamak için kullanılır. Bu, kod yazarken tekrarları azaltır, objeler üzerinde daha temiz ve kontrol edilebilir işlemler yapmayı sağlar.

Bir Objeyi Kopyalamak

Diyelim ki elimizde bir kullanıcı bilgisi var:

const ogrenci = {
  ad: "Zeynep",
  sinif: 11
};

const yeniOgrenci = { ...ogrenci };

Burada ...ogrenci ifadesi, ogrenci objesinin içindeki tüm bilgileri yeniOgrenci objesine aynen kopyalar. Artık elimizde aynı içeriğe sahip ama bağımsız bir obje daha var. Yani birinde değişiklik yapsan diğerini etkilemez.

Kopyalarken Yeni Özellik Eklemek

Kopyalama işlemine ek olarak objeye yeni özellikler de ekleyebiliriz. Örneğin:

const kitap = {
  ad: "Simyacı",
  yazar: "Paulo Coelho"
};

const yeniKitap = { ...kitap, sayfaSayisi: 208 };
// Sonuç: { ad: "Simyacı", yazar: "Paulo Coelho", sayfaSayisi: 208 }

Burada kitap objesinin üzerine sayfaSayisi adında yeni bir özellik ekledik.

İki Objeyi Birleştirmek

İki ayrı objedeki bilgileri tek bir objede toplamak istiyorsak, ikisini de ... ile yazabiliriz:

const urunBilgisi = {
  isim: "Laptop",
  marka: "Dell"
};

const fiyatBilgisi = {
  fiyat: 18500,
  paraBirimi: "TL"
};

const tamUrun = { ...urunBilgisi, ...fiyatBilgisi };
// Sonuç: { isim: "Laptop", marka: "Dell", fiyat: 18500, paraBirimi: "TL" }

Çakışan Özelliklerde Son Değer Geçerlidir

Eğer birden fazla objede aynı isimde özellikler varsa, son yazılan değer geçerli olur:

const birinci = { marka: "HP", renk: "siyah" };
const ikinci = { marka: "Lenovo", ekran: 15.6 };

const sonuc = { ...birinci, ...ikinci };
// Sonuç: { marka: "Lenovo", renk: "siyah", ekran: 15.6 }

Çünkü marka özelliği hem birinci hem ikinci objede var. ikinci objesi daha sonra geldiği için onun değeri geçerli olur.

Gerçek Hayattan Bir Senaryo: Form Verilerini Birleştirmek

Bir web sitesinde kullanıcı formu doldurduğunda, bu bilgileri sistemdeki diğer bilgilerle birleştirmek isteyebiliriz:

const formVerisi = {
  kullaniciAdi: "mehmet123",
  email: "mehmet@example.com"
};

const sistemVerisi = {
  id: 1007,
  aktifMi: true
};

const yeniKullanici = { ...formVerisi, ...sistemVerisi };
// Sonuç: { kullaniciAdi: "mehmet123", email: "mehmet@example.com", id: 1007, aktifMi: true }

yeniKullanici objesi artık hem kullanıcıdan gelen verileri hem de sistemin atadığı bilgileri içerir.

Dizi Spread'i Objeye Yapılırsa Ne Olur?

Spread operatörünü bir dizi (array) üzerinde kullanıp objeye aktarırsak, indeksler (sıra numaraları) key olarak alınır:

const sayilar = [5, 10, 15];
const obj = { ...sayilar };
// Sonuç: { 0: 5, 1: 10, 2: 15 }

Yani dizideki her eleman, objede sırasıyla bir key: value çiftine dönüşür. Bu kullanım yaygın değildir ama mümkün olduğunu bilmek faydalıdır.

Orijinal Veri Yapısı Değişmez

Spread operatörünü kullanmak, elimizdeki diziyi ya da string'i bozmaz. Sadece o an için elemanları ayrı ayrı kullanmış oluruz. Örneğin:

const sayilar = [4, 9, 2];
Math.max(...sayilar); // 9
console.log(sayilar); // [4, 9, 2]

Görüldüğü gibi, sayilar dizisi aynen kalır.

Kısa Bir Özet Tablosu

Kullanım	Açıklama	Örnek
`Math.max(...dizi)`	Diziyi elemanlarına ayırarak kullanır	`Math.max(...[3, 8, 1])` → 8
`console.log(...dizi)`	Dizi elemanlarını ayrı ayrı yazdırır	`console.log(...["a","b"])` → a b
`console.log(...str)`	String'i harf harf yazdırır	`console.log(..."elma")` → e l m a
`[...dizi]`	Diziyi kopyalar	`[...[1,2,3]]` → [1,2,3]
`[...dizi1, ...dizi2]`	Dizileri birleştirir	`[...[1,2], ...[3,4]]` → [1,2,3,4]
`[...string]`	String'i diziye çevirir	`[..."abc"]` → ["a","b","c"]
`{...obje}`	Objeyi kopyalar	`{...{a:1, b:2}}` → {a , b }
`{...obje1, ...obje2}`	Objeleri birleştirir	`{...{a:1}, ...{b:2}}` → {a , b }
`{...obje, yeni: 3}`	Objeye özellik ekler	`{...{a:1}, b:2}` → {a , b }

Sonuç

Spread operatörü JavaScript'te kodu daha kısa, daha temiz ve daha anlaşılır yazmak için harika bir araçtır. Fonksiyonlara dizi elemanlarını tek tek geçirmek, dizileri kopyalamak, birleştirmek, araya eleman eklemek, string'leri karakterlerine ayırmak veya objeleri kopyalayıp birleştirmek gibi birçok pratik işlemde kullanılır.

Özellikle:

Math.max, Math.min gibi argümanları tek tek isteyen fonksiyonlarda
Dizilerle çalışırken kopyalama ve birleştirme işlemlerinde
Objeleri doğrudan değiştirmek yerine yeni objeler oluşturmak istediğimizde (özellikle React gibi kütüphanelerde çok önemlidir)

işimizi büyük ölçüde kolaylaştırır. Üstelik yazımı da oldukça basittir. Sadece ... sembolünü doğru yerde kullanmanız yeterlidir.

Yeni başlayan biri için bile anlaşılması kolay olan bu özellik, gerçek projelerde zaman kazandırır ve kodunuzu daha profesyonel hale getirir. Eğer JavaScript'te diziler, objeler veya fonksiyonlarla çalışıyorsanız, spread operatörünü mutlaka öğrenmeli ve sıkça kullanmalısınız.

Tüm Yazılara Dön