Javascript Harikaları-1 : Rest Parameters.

By Tahir Kardak On Feb 20, 2019

Javascript’in güzelliklerinden bahsedeceğim yazı dizisine “Rest Parameters” ile başlıyorum. Yazı dizisinin kaç bölümden olacağını bilmiyorum. Belirli aralıklarda yazı dizisine yeni yazılar ekleyeceğim.

Daha önceki yazılarımda vermiş olduğum örneklerde Rest Parametersözelliğini kullanmıştım. Şimdi bu güzelliğin kendisini tanıyıp, yeteneklerine bir bakalım. Hazırsanız başlıyorum.

“Kalan Tüm Parametreler”

Türkçe çevirisi biraz “Alexsander Confused(Karşık İskender)” gibi oldu ama yakın bir çeviri olduğunu düşünüyorum. Rest Rapameters için Javascript dokümanı ise şu şekilde bir tanım yapıyor.

Rest Parameters: Fonksiyonlara sınır sayısı olmadan parametre geçmeye olanak verir.

ES6’dan önce bu iş, her bir fonksiyon için sağlanan argumentdeğişkenine bir kaç faklı işlem (arguments’idiziye çevirme işlemleri) uygulandıktan sonra benzer işlemi yapabiliyor. ES6 ile birlikte bu işlem daha kolay bir şekilde yapabiliyoruz. Fonksiyona parametre olarak verilen “Rest Parameters” fonksiyonun içinde standart javascript dizisine dönüştürülür. Dizilerde kullanılan; map, reduce, filter vb fonksiyonlar Rest Paramters’a uygulanabilir. Fonksiyonda “Rest Parameters” “…”(üç nokta) ile gösterilir.

Konun daha iyi anlaşılması için örneklere geçelim isterseniz.

Örnek-1: Çarpma işlemi yapan bir fonksiyonu “Rest Parameters” olmadan tanımlayalım ve ortaya çıkan durumlara bakalım. Denemek için tıklayınız .



function carpmaISlemi(sayi1, sayi2, sayi3){
  return sayi1*sayi2*sayi3;
}

console.log(carpmaISlemi(1,2,3));
console.log(carpmaISlemi(1,2));
console.log(carpmaISlemi(1));
console.log(carpmaISlemi(1,2,3,5));

function carpmaISlemi(sayi1, sayi2, sayi3){

return sayi1*sayi2*sayi3;

}

console.log(carpmaISlemi(1,2,3));

console.log(carpmaISlemi(1,2));

console.log(carpmaISlemi(1));

console.log(carpmaISlemi(1,2,3,5));

“ carpmaIslemi” işlemi fonksiyonu 3 parametre almaktadır. Fonksiyona 3 parametre eksiksiz bir şekilde verilirse fonksiyon çalışmaktadır. Eğer 3 den az parametre verilirse sonuc “ NaN”, 3 den çok parametre verilirse 3. parametreden sonraki parametreler hesaplama dışında kalır (Destructuring). “carpmaIslemi” fonksiyonunu daha esnek kullanabilmek için “Rest Parameters” ile işlem yapabiliriz. Denemek için tıklayınız.



function carpmaIslemi(...sayilar){
  return sayilar.reduce ((x,y) => x*y);
}

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

function carpmaIslemi(...sayilar){

return sayilar.reduce ((x,y) => x*y);

}

console.log(carpmaIslemi(1,2,3));

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

console.log(carpmaIslemi(1,2));

Dikkat:

Rest paramters kullanırken dikkat edilmesi gereken önemli hususlardan bahsetmenin tam zamanı.

Rest paramters fonskiyonun son parametresi olmalı. Hatalı kullanımı denemek için tıklayınız. Eğer aşağıdaki gibi bir kod yazarsanız, “SyntaxError: Rest parameter must be last formal parameter” şeklinde hata mesajı alınır.



//Örnek:1
function toplamaIslemi1(baslangicDegeri= 5, ...sayilar, sonDeger){
  return  baslangicDegeri + sayilar.reduce((x,y)=> x+y) +sonDeger;
}

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

//Örnek:1

function toplamaIslemi1(baslangicDegeri= 5, ...sayilar, sonDeger){

return baslangicDegeri + sayilar.reduce((x,y)=> x+y) +sonDeger;

}

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

2. Bir fonksiyonda sadece bir tane Rest parameters kullanılabilir. Hatalı kullanımı denemek için tıklayınız. Eğer aşağıdaki gibi bir kod yazarsanız, “SyntaxError: Rest parameter must be last formal parameter” şeklinde hata mesajı alınır.



function toplamaIslemi2( ...pozitifsayilar, ...negatifSayilar){
  return  pozitifsayilar.reduce((x,y)=> x+y) - negatifSayilar.reduce((x,y)=> x+y);
}

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

function toplamaIslemi2( ...pozitifsayilar, ...negatifSayilar){

return pozitifsayilar.reduce((x,y)=> x+y) - negatifSayilar.reduce((x,y)=> x+y);

}

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

3. Nesne içerisinde kullanacağımız “setter” bölümünde rest parametresi kullanılamaz. Eğer aşağıdaki gibi bir kod yazarsanız, “SyntaxError: Setter function argument must not be a rest parameter” şeklinde hata mesajı alınır. Hatalı kullanımı denemek için tıklayınız.



let araba = {
  set markaModel (...markaModelBilgisi) {
    this.log.push(...markaModelBilgisi);
  }
}

let araba = {

set markaModel (...markaModelBilgisi) {

this.log.push(...markaModelBilgisi);

}

Örnek-2: Birden çok parametre alan fonksiyonda Rest Parameters kullanımı. Denemek için tıklayınız.



function logaYaz(parametre1, parametre2, ...restParamaters) {
  console.log("parametre1:" + parametre1); 
  console.log("parametre2:"+parametre2);
  console.log("restParamaters :" , restParamaters);
}

logaYaz("Rest", "Parameters", "Javascriptte", "çok", "kullanışlı", "fonksiyondur");


// restParamaters'a herhangi bir değer setlenmiyor.
console.log("############################################################")
logaYaz("Rest", "Parameters");

function logaYaz(parametre1, parametre2, ...restParamaters) {

console.log("parametre1:" + parametre1);

console.log("parametre2:"+parametre2);

console.log("restParamaters :" , restParamaters);

}

logaYaz("Rest", "Parameters", "Javascriptte", "çok", "kullanışlı", "fonksiyondur");

// restParamaters'a herhangi bir değer setlenmiyor.

console.log("############################################################")

logaYaz("Rest", "Parameters");

Fonksiyona verdiğimiz “restParamaters” fonksiyonun içinde Javascript dizisine dönüştürüldü. 4. satırın çıktısı [“Javascriptte”, “çok”, “kullanışlı”, “fonksiyondur”] javascript dizisi şeklinde olacaktır Eğer “ restParamaters” parametresi fonksiyona verilmezse boş bir diziye dönüştürülecek. 12. satırda “ restParamaters” set edilmiyor. Çıktı “[]” şeklinde olacaktır.

Aşağıdaki örneklerde dizilerde kullanılan fonksiyonların Rest Parameters ile kullanımı gösterilmiştir.

Örnek-3: Fonksiyona verilen Rest Parameters ‘in uzunluğunu bulan fonksiyon. Denemek için burayı tıklayınız.



function uzunlukHesapla(...parametreler) {
  console.log(parametreler.length);
}

uzunlukHesapla(); 
uzunlukHesapla("Rest Parameters")
uzunlukHesapla(1, 2, 3 ,"Javascript",5,6);

function uzunlukHesapla(...parametreler) {

console.log(parametreler.length);

}

uzunlukHesapla();

uzunlukHesapla("Rest Parameters")

uzunlukHesapla(1, 2, 3 ,"Javascript",5,6);

Örnek-4: Parametre olarak verilen Rest Parameters daki değeri bir katsayı değeri ile çarpan fonksiyon. Denemek için tıklayınız.



function degerArtır(katsayi, ...degerler) {
  return degerler.map((element) => katsayi * element);
}

var yeniDegerler = degerArtır(5, 1, 2, 3,4,5); 
console.log(yeniDegerler);

function degerArtır(katsayi, ...degerler) {

return degerler.map((element) => katsayi * element);

}

var yeniDegerler = degerArtır(5, 1, 2, 3,4,5);

console.log(yeniDegerler);

Fonksiyonda ilk parametre katsayı olarak kullanılacak. Diğer kalan parametreler sırası ile bu katsayı ile çarpılacak ve sonuç javascript dizisi olarak dönecektir.

Örnek-5: Parametre olarak verilen Rest Parameters daki değerleri sıralayan fonksiyon. Denemek için tıklayınız.



var sirala = (...parametre) => parametre.sort();

console.log(sirala(3,2,6,7,1));

console.log(sirala("c","v","t","k","u"));

var sirala = (...parametre) => parametre.sort();

console.log(sirala(3,2,6,7,1));

console.log(sirala("c","v","t","k","u"));

Javascript’in diğer güzelliklerinde görüşürüz.

Kaynak:

Rest parameters

Ecma Script JavaScript