JavaScript’te “Spread” Operatörü Kullanımı (…)
JavaScript’te “spread operatörü“, ECMAScript 2015 (ES6) sürümünde tanıtılan özelliklerden biri olup üç nokta işareti (...) ile temsil edilir.
JavaScript’te “Spread” Operatörü
“Spread operatörü” her ne kadar ES6 (ECMAScript 2015) sürümünde tanıtılmış olsa da, ilk versiyon sadece “dizilerde” (array) uygulanabiliyordu. Nesneler üzerinde spread operatörünün kullanılabilmesi ise ES2018 (ECMAScript 2018) sürümüyle mümkün hale gelmiştir.
“Peki, bu spread operatörü ne işe yarar?” Aslında, genel olarak mevcut bir dizinin veya nesnenin tamamını veya bir kısmını başka bir diziye veya nesneye hızlı bir şekilde yaymamıza yani kopyalamamıza olanak tanır.
Zaten “spread” kelimesi İngilizcede “yaymak”, “genişletmek” gibi anlamlara gelmektedir ve bu da operatörümüzün işlevini oldukça iyi bir şekilde açıklar. “Spread operatörü”, bir iterable’ın (örneğin bir dizi veya nesne) elemanlarını “genişleterek” (yayarak), bu elemanlarla ayrı ayrı işlem yapılabilir hale getirir.
Özellikle fonksiyon çağrıları, dizi elemanları ve nesne özellikleri arasında değerlerin kolayca transfer edilmesini sağlar. Bu da haliyle, kodun daha okunabilir ve kısa olmasına katkıda bulunarak programlama deneyimini ve konforunu daha verimli bir seviyeye çıkar.
ES6 öncesinde JavaScript’te, iterable’ları genişletmek ve manipüle etmek için genellikle “concat()“, “apply()” ve “slice()” gibi metotlar kullanılırdı. Ancak, “spread operatorü” daha okunaklı bir sözdizimi sağladığından modern JavaScript projelerinde sıkça kullanılan bir özellik haline gelmiştir.
Dizilerde (Array) “Spread Operator”
JavaScript’te spread operatörü ile diziler üzerinde çeşitli işlevleri yerine getirebiliriz.
- Dizi Kopyalamak İçin: Diyelim ki,
const arr1 = [1, 2, 3];şeklinde bir dizi (array) örneğimiz olsun. Biz bu dizimizin arr2 adında bir kopyasının olmasını istiyoruz. İşte bunu “spread operatörü” kullanarak yapabiliriz. Bakınız:
|
1 2 3 4 5 6 |
// Spread Operator const arr1 = [1, 2, 3]; const arr2 = [...arr1]; console.log(arr2); // [1,2,3] |
- Dizileri Birleştirmek İçin: Diyelim ki,
const arr1 = [1, 2, 3];veconst arr2 = [4, 5, 6];adında iki tane dizimiz olsun. Bu iki dizedeki elemanları “spread operatörü” ile yeni bir dizede birleştirebiliriz.
|
1 2 3 4 5 6 7 8 |
// Spread Operator const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const newArr = [...arr1, ...arr2]; console.log(newArr); // [1, 2, 3, 4, 5, 6] |
Yukarıdaki örnekte iki dizimizi newArr adında değişkene birleştirdik. Bunu yapmak için ilk olarak ...arr1 ifadesi 1, 2 ve 3 şeklinde öğelerini ayrıştırır. Benzer şekilde ...arr2 ifadesi de 4, 5 ve 6 şeklinde öğelerini ayrıştırır. Son olarak ayrıştırılan öğeler newArr dizisinde [1, 2, 3, 4, 5, 6] olarak birleştirilir.
- Diziye Yeni Bir Öğe Eklemek İçin:
let sebze = ["soğan", "sarımsak"];şeklindeki dizimize bir veya birden fazla öğe eklemek için “push()” metoduna alternatif olarak “spread” operatörünü kullanabiliriz:
|
1 2 3 4 5 6 |
// Spread Operator let sebze = ['soğan', 'sarımsak']; sebze = [...sebze, 'havuç', 'patates', 'patlıcan']; console.log(sebze); // ["soğan","sarımsak","havuç","patates","patlıcan"] |
Nesnelerde (Object) “Spread Operator”
JavaScript’te “spread” operatörü ile benzer şekilde nesneler üzerinde de çeşitli işlevleri yerine getirebiliriz. Örneğin:
- Nesneyi Kopyalamak İçin: Spread operatörünü kullanarak nesneleri kopyalayabiliriz:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// Spread Operator const ferrari = { speed: 200, color: 'red' } const myCar = {...ferrari}; console.log(myCar); /* { speed: 200, color: 'red' } */ |
- Nesneye Özellik Eklemek İçin: Nesnelerimize yeni bir özellik (property) eklemek için “spread” operatörünü kullanabiliriz:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// Spread Operator const ferrari = { speed: 200, color: 'red' } const myCar = {...ferrari, model: 2020}; console.log(myCar); /* { speed: 200, color: 'red', model: 2020 } */ |
- Nesneleri Birleştirmek İçin: Spread operatörünü kullanarak nesneleri birleştirebiliriz:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// Spread Operator const ferrari = { speed: 200, color: 'red' } const car = { model: 2020, color: 'yellow' } const myCar = {...ferrari, ...car}; console.log(myCar); /* { speed: 200, color: 'yellow', model: 2020 } */ |
Yukarıdaki örnekte, iki obje olan ferrari ve car kullanılarak bir üçüncü obje myCar oluşturuluyor. “Spread” operatörü ile bu iki objenin özellikleri myCar objesine aktarılmıştır.
“Spread” operatörü, özellikleri belirtilen sırayla ekler. Önce ferrari objesinin özellikleri eklenir, ardından car objesinin özellikleri eklenir. Eğer her iki objede de aynı isimde bir özellik (bu örnekte “color”) bulunuyorsa, son eklenen objenin özelliği, önceki objenin aynı isimdeki özelliğine baskın gelir ve üzerine yazar.
Dizelerde (String) “Spread Operator”
Bir karakter dizesini (string) harf harf ayırmak için spread operatörünü pekala kullanabiliriz. Aşağıdaki örneği inceleyiniz:
|
1 2 3 4 5 6 |
// Spread Operator const selamla = "Merhaba"; const harfHarf = [...selamla]; console.log(harfHarf); // ['M', 'e', 'r', 'h', 'a', 'b', 'a'] |
“Rest” Parametresi ve “Spread” Operatörü
JavaScript’te rest parametresi, tıpkı spread operatorü gibi üç nokta (...) ile gösterilse de farklı amaçlar için kullanılmaktadır. Zira üç nokta “rest” operatorü olarak ancak bir fonksiyon tanımında, fonksiyondaki geri kalan parametreleri bir diziye toplamak için kullanılır. Aşağıdaki örneği inceleyiniz:
|
1 2 3 4 5 6 7 8 9 10 11 |
// Rest Operator function sum(...numbers) { let total = 0; for (let number of numbers) { total += number; } return total; } console.log(sum(1, 2, 3, 4)); // 10 console.log(sum(5, 6, 7)); // 18 |
Yukarıdaki örnekte üç nokta, yani rest operatorü ile sum() fonksiyonuna geçilen tüm parametreler toplamak için kullanılmıştır. ...numbers ifadesi, fonksiyona geçilen tüm parametreleri bir dizi olarak toplar ve for döngüsü aracılığıyla toplamlarını hesaplar.