#2 Spread Operator Kullanımı

Programlarımızı yazarken çoğu zaman çoklu parametrelerle uğraşmışızdır. Parametre sayılarımız kimi zaman bizim belirlediğimiz sayıda olurken kimi zaman da bir değişkene veya özel bir duruma bağlı olarak değişken sayıda ve belirsiz olabilir. Bu gibi durumlarda kullandığımız yazılım dilinin desteklediği standartlara göre en optimum ve kısa yolla istediğimiz kodu yazmaya çalışırız. Ecmascript 6 ile sunulan “Spread Operator” ve “Rest Parameters” kavramları, tam da bu durumlarda bizlere çok büyük kolaylıklar sağlıyor.

Örnek üzerinden anlatacak olursak; bir sınıftaki 5 öğrencinin notlarını tutan dizideki elemanları, not ortalamasını hesaplayan ortalamaHesapla adlı fonksiyona parametre olarak gönderelim ve sonucumuzu alalım.

Öncelikle spread operator kavramını daha iyi anlamak açısından bunu daha önce ES5 standartları ile nasıl yapıyorduk ona bakalım:

function notHesapla(ogr1,ogr2,ogr3,ogr4,ogr5,ogr6) {
    return (ogr1+ogr2+ogr3+ogr4+ogr5)/arguments.length;
}

let notlar = [50,50,50,60,60];
// Fonksiyona parametre olarak bir dizi göndermemiz için apply() metodunu kullanmamız gerekir.
let ortalama = notHesapla.apply(null,notlar); 
console.log(ortalama);

Spread operator kullanımı değişkenin başına “…” şeklindedir. Şimdi aynı örneği bir de spread operator kullanarak yapalım.

function notHesapla(ogr1,ogr2,ogr3,ogr4,ogr5,ogr6) {
    return (ogr1+ogr2+ogr3+ogr4+ogr5)/arguments.length;
}

let notlar = [50,50,50,60,60];
// Göndermek istediğimiz dizinin başına "..." koyarak bu işlemi daha da basitleştirdik.
let ortalama = notHesapla(...notlar); 
console.log(ortalama);

Spread operatorlerin kullanım alanı tabi ki de bu kadar kısıtlı değil. Şimdi daha farklı hangi alanlarlada kullanabiliriz onları inceleyelim:

Bir dizinin elemanlarına tek seferde ulaşımı

let arr1 = [1,10,100,1000,10000];
let arr2 = ["Güner","Bilgili","Şahin"];
console.log(...arr1);
console.log(...arr2);

// Console: 1 10 100 1000 10000
//          Güner Bilgili Şahin

Bu bir karakter dizisi de olabilir;

let arr3 = "Güner";
console.log(...arr3);
// Console: G ü n e r

Dizileri birleştirme

let kisiler1 = ['Mehmet', 'Sahin'];
let kisiler2 = ['Suzan','Sahin'];
let arr3 = [...kisiler1, ...kisiler2];
console.log(arr3);
//Console: [ 'Mehmet', 'Sahin', 'Suzan', 'Sahin' ]

Aynı işlem dizilerdeki push() metodu aracılığı ile dizilerin üzerine eklenerek de yapılabilir.

let kisiler1 = ['Mehmet', 'Sahin'];
let kisiler2 = ['Suzan','Sahin'];
kisiler1.push(...kisiler2)
console.log(kisiler1);
//Console: [ 'Mehmet', 'Sahin', 'Suzan', 'Sahin' ]

Objelerin kopyalanması ve birleştirilmesi

let obj1 = {name: "Kubra", surname: "Sahin", age: 25}
let obj2 = {...obj1}
console.log(obj2)
// Console: { name: 'Kubra', surname: 'Sahin', age: 25 }

let obj1 = {name: "Kubra", surname: "Sahin", age: 25}
let obj2 = {name_:"Dogukan", surname_:"Sahin", age_:23, ...obj1}
console.log(obj2)
// Console: { name_: 'Dogukan', surname_: 'Sahin', age_: 23, name: 'Kubra', surname: 'Sahin', age: 25 }

Yukarıdaki örnekte dikkat ederseniz birleştime işlemi yaparken farklı objelerin aslında aynı olan özellik isimlerine ufak bir değişiklik yaparak aynı olmamasını sağladık. Bunun sebebi, eğer iki objede aynı özellikler çakışırsa, son nesnenin özelliği diğerini ezer ve o geçerli olur.

let obj1 = {name: "Kubra", surname: "Sahin", age: 25}
let obj2 = {...obj1, name:"Dogukan", surname:"Sahin", age_:23}
console.log(obj2)
// Console: { name: 'Dogukan', surname: 'Sahin', age: 25, age_: 23 }

Matematik fonksiyonlarınında kullanımı

let sayilar = [8, 233, 43, -565, 92, -12, 96, 22, 75, 700, 254, -1633];
let min = Math.min(...sayilar);
console.log(min);

Daha fazlası için: - Spread syntax - JavaScript | MDN - Mozilla