ES6 Default + rest + spread nedir? Nasıl kullanılır?

Default,rest ve spread fonksiyonlara parametre gönderiminde ve destructuring gibi işlemler kolaylıklar sağlayan ecmascript 6 nın getirdiği araçlardan.

default

Birçok dilde olan fonksiyon parametrelerinde default değer tanımlama es6 ile javascriptte kullanılabiliyor.

const log = (log = "log") => 
                   console.log(log);

log();
log("merhaba");

çıktı:
log
merhaba

Yukarıdaki kod blogunda log parametresi belirtilmediği durumlarda "log" olarak tanımlanır.

*Parametre kısmında tanımlanan değişkenleri birbirleri içinde kullanabiliriz.

const topla = (a = 5, b = a) => 
                   console.log(a + b);

topla();

çıktı:
10

*Parametre olarak belirlenen değişkeni fonksiyonun çalışma anında kullanabiliriz.

const ekle = (deger,dizi = []) => {
    dizi.push(deger);
    return dizi;
}

console.log(ekle(1));

çıktı:
[1]

rest

https://babeljs.io/repl sitesi es6 formatında yazılan javascript kodlarının es5 e dönüştürülmüş hallerinin anlık olarak görülebileceği bir babel aracı.

Yukarıda görselde ilk kısımda es6 console.log fonksiyonuna bir parametre gönderdik. Gönderilen parametre bir array olduğu ancak başındaki 3 nokta fonksiyonun parametreyi sağ tarafta gösterildiği şekilde .apply fonksiyonunu çağırarak işlemesini sağlıyor. rest fonksiyonlara parametre belirlenmesi aşamasında kullanılır.

const topla = (...sayilar) => {
    let toplam = 0;
    sayilar.forEach( sayi => toplam += sayi );
    return toplam;
}

console.log(topla(1));

console.log(topla(1,2,3));
console.log(topla(1,2,3,4,5));

çıktı:
1
6
15

Yukarıdaki örnekte görüldüğü gibi ... adı ile rest fonksiyonlara istediğimiz sayıda parametre göndermeyi ve işlemeyi sağlayan bir özellik.

topla fonksiyonunu birde 2 parametre göndererek deneyelim.

const topla = (kat, ...sayilar) => {
    let toplam = 0;
    sayilar.forEach( sayi => toplam += sayi * kat );
    return toplam;
}

console.log(topla(2));

console.log(topla(2,3));
console.log(topla(2,3,4,5));

çıktı:
0
6
24

Bu sefer ilk parametre kat sonraki parametreler ise sayilar parametresine atandı.

*topla fonksiyonunda parametrelerin yerlerini değiştirirsek kod blogu çalışmaz. rest parametresi her fonksiyonda son parametre olmalıdır.

*topla fonksiyonunda ikinci bir rest parametresi eklersek kod blogu yine çalışmaz. Çünkü her fonksiyon yalnızca bir adet rest parametresi alabilir.

spread

rest fonksiyonlara parametre belirlerken kullanılır. spread ise fonksiyonlara paremetre gönderilerek çalıştırılması aşamasında kolaylık sağlar.

const topla = (...sayilar) => {
    let toplam = 0;
    sayilar.forEach( sayi => toplam += sayi );
    return toplam;
}

console.log(topla(...[1,2,3,4],5));

çıktı:
15

Yukarıdaki örnekte 1,2,3 ve 4 elemanlarından oluşan arrayın başına 3 nokta ekleyerek topla fonksiyonunda kullanılabilmesini sağladık.

const topla = (...sayilar) => {
    let toplam = 0;
    sayilar.forEach( sayi => toplam += sayi );
    return toplam;
}

const dizi = [2,3,4];


console.log(topla(1,...dizi, 5));

çıktı:
15

Bu yazımızda basit örnekler ile default,rest ve spread in ne olduğundan ve nasıl kullanıldığından bahsettik. Sonraki yazıda görüşmek üzere.