Javascript Harikaları-2 : Spread Syntax.

By Tahir Kardak On Jun 24, 2019

Merhaba bu yazıda bahsedeceğim güzellik “Spread Syntax”. ES6’nin bize hediye etmiş olduğu bir lütuftur kendisi. Önceki yazılarımda vermiş olduğum örneklerde “Spread Syntax” kullanmıştım ama bu güzellik için ayrı bir yazı yazıp güzelliklerinden detaylı bir şekilde bahsetmek istiyorum.

Tereyağlı Ballı Ekmek

Benzetme size garip gelebilir. “Spread Syntax” aslında buna benzer bir işlem yapmaktadır. Spread Syntax ile gelen ifadeyi; yağı ekmeğe sürer gibi yayıyor. Örneklerle ne demek istediğimi daha iyi anlayacaksınız.

“Spread Syntax”; rest parameters gibi “…” tanımlansa da, rest parameters’in yapmış olduğu işlemin tersi durumlar için kullanılabilir. “Rest Parameters” hakkında detaylı bilgi almak için burayı tıklayınız. İki Operatör arasındaki fark “Rest Parameters” sadece fonksiyon parametresi olarak kullanırken, Spread Syntax’in ise çok daha geniş kullanımı vardır.

Spread Syntax; sıfır yada daha fazla parametre alan fonksiyonların kullanımında, string veya array(dizi) gibi ifadelerin fonksiyon parametrelerinde yinelenebilir şekilde kullanılmasına, string veya arraylerin genişletilmesine olanak sağlar.

Spread Syntax’in 7 harikası:

Örnek -1: Verilen dizinin elamanlarını “Rest Syntax” ile toplayalım.



const topla = (x,y,z) => {
  return x+y+z;
}

let sayilar = [1,2,3];

console.log(topla(...sayilar));

sayilar = [1,2];
console.log(topla(...sayilar));

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

const topla = (x,y,z) => {

return x+y+z;

}

let sayilar = [1,2,3];

console.log(topla(...sayilar));

sayilar = [1,2];

console.log(topla(...sayilar));

sayilar = [1,2,3,4,5];

console.log(topla(...sayilar));

topla() fonksiyonu 3 parametre almaktadır. Fonksiyona tüm parametreleri tek tek geçmek yerine sayılar dizisini Spread Syntax (“…”) ile fonksiyona geçebiliriz. Yukarıdaki örnekte fonksiyona bir sanki dizi değil de, fonksiyonun ihtiyaç duyduğu parametreleri tek tek atamış gibi olduk. Eğer sayılardizisinin eleman sayısı üç ve üçten büyük ise fonksiyon, dizinin ilk üç elemanını toplayıp sonucu döndürür (7 ve 15. satır). Eğer dizinin boyutu üçten küçük ise sonuç NaN şeklinde dönecektir(11. satır).

Spreat Syntax’in 3 farklı kullanım şekli vardır.

1. fonksiyon(…nesne); // fonksiyona parametre olarak
2. […nesne, ‘1’, ‘3’, 64] // dizi ve string ifadeler için
3. let nesneKopyası= { …nesne }; // ES2018 ile kullanılıyor.

Örnek-2: Diziler, Spread Syntax olarak, fonksiyon parametrelerinde birden fazla kullanılabilir.



const topla = (a,b,c,d,e,f,g) => a+b+c+d+e+f+g;
const sayi1= [3,4];
const sayi2 =[7]

console.log(topla(1,2,...sayi1,5,6,...sayi2));  // sonuç= 28

const topla = (a,b,c,d,e,f,g) => a+b+c+d+e+f+g;

const sayi1= [3,4];

const sayi2 =[7]

console.log(topla(1,2,...sayi1,5,6,...sayi2)); // sonuç= 28

Yukarıdaki örnekte 7. satırdaki sayi2 dizisinin son 3 değeri toplama işlemine dahil edilmedi. Çünkü topla() fonksiyonun aldığı parametre sayısı 7’dir. Fonksiyona toplamda 10 parametre geçildiği için son 3 parametre işleme dahil edilmedi

Örnek-3: new kelimesi ile constructor çağrılırken; constructor’un ihtiyaç duyduğu parametreler Spread Syntax ile verilebilir



var dateFields = [2019, 06, 19];  // 1 Jan 1970
var d = new Date(...dateFields);

var dateFields = [2019, 06, 19]; // 1 Jan 1970

var d = new Date(...dateFields);

Kendi oluşturduğumuz classlarda kullanımı şu şekildedir:



class Kisi {
  constructor(adi, soyAdi, yas, meslek) {
    this.adi = adi;
    this.soyAdi = soyAdi;
    this.yas = yas;
    this.meslek = meslek;
  }
  yaz(){
  console.log(`adı: ${this.adi}- soyadı: ${this.soyAdi}- yaşı: ${this.yas}- mesleği: ${this.meslek}`)
  }
}

var ali = new Kisi('ali','demirsever',14,'öğrenci');
ali.yaz();


var kisiBilgisi=['ömer','pazarcı', 50];  // meslek bilgisi belirtilmiyor
var omer = new Kisi(...kisiBilgisi);
omer.yaz()


var kisiBilgisi=['ahmet','tosuncuklu', 50, 'emekli']; // dizi olduğuna dikkat edin. eğer nesne verilirse hata alacaktır
var ahmet = new Kisi(...kisiBilgisi);
ahmet.yaz()

var kisiBilgisi=['ömer','pazarcı', 50];  // meslek bilgisi belirtilmiyor
var omer = new Kisi(...kisiBilgisi);
omer.yaz()

class Kisi {

constructor(adi, soyAdi, yas, meslek) {

this.adi = adi;

this.soyAdi = soyAdi;

this.yas = yas;

this.meslek = meslek;

}

yaz(){

console.log(`adı: ${this.adi}- soyadı: ${this.soyAdi}- yaşı: ${this.yas}- mesleği: ${this.meslek}`)

}

var ali = new Kisi('ali','demirsever',14,'öğrenci');

ali.yaz();

var kisiBilgisi=['ömer','pazarcı', 50]; // meslek bilgisi belirtilmiyor

var omer = new Kisi(...kisiBilgisi);

omer.yaz()

var kisiBilgisi=['ahmet','tosuncuklu', 50, 'emekli']; // dizi olduğuna dikkat edin. eğer nesne verilirse hata alacaktır

var ahmet = new Kisi(...kisiBilgisi);

ahmet.yaz()

var kisiBilgisi=['ömer','pazarcı', 50]; // meslek bilgisi belirtilmiyor

var omer = new Kisi(...kisiBilgisi);

omer.yaz()

Burada dikkat edilecek husus; constructor’a array verilmeli. Aksi durum’da kod hata alacaktır.

Örnek-4: Dizi işlemleri (push, slice, concat ve dizi kopyalama vb. işlemler) Spread Syntax ile kolayca yapılabilir.



// var olan diziyi kullanarak yeni bir dizi yapar
var ikiUc = ['iki', 'üç']; 
var sayilar = ['bir', ...ikiUc, 'dört', 'beş']; 

// dizi kopyalama
var dizi1 = [1, 2, 3];
var dizi2 = [...dizi1]; //  dizi1.slice() ile yapılan işlem gibi
dizi2.push(4);   // bu işlemde dizi1 etkilenmeyecek.
console.log("dizi2: "+dizi2)
console.log("dizi1: "+dizi1)

// dizi Birleştirme 
var dizi1 = [0, 1, 2];
var dizi2 = [3, 4, 5];
dizi1 = [...dizi1, ...dizi2]; //  dizi1.concat(dizi2); ile yapılan işlem.
console.log(dizi1);

// var olan diziyi kullanarak yeni bir dizi yapar

var ikiUc = ['iki', 'üç'];

var sayilar = ['bir', ...ikiUc, 'dört', 'beş'];

// dizi kopyalama

var dizi1 = [1, 2, 3];

var dizi2 = [...dizi1]; // dizi1.slice() ile yapılan işlem gibi

dizi2.push(4); // bu işlemde dizi1 etkilenmeyecek.

console.log("dizi2: "+dizi2)

console.log("dizi1: "+dizi1)

// dizi Birleştirme

var dizi1 = [0, 1, 2];

var dizi2 = [3, 4, 5];

dizi1 = [...dizi1, ...dizi2]; // dizi1.concat(dizi2); ile yapılan işlem.

console.log(dizi1);

Yukarıdaki örnekte 8. satırda dizi2‘ye yapılan push işleminden dizi1etkilenmiyor. Reference Type hakkında detaylı bilgi almak için burayı tıklayınız. 15. satırdaki atama yapılan işlemde dizilerin yerleri değiştirilirse yeni dizinin elamanları dizi2’nin elemanı ile başlayacaktır

Örnek-5: Nesne işlemleri( assign, merge), Spread Syntax ile kolayca yapılabilir.



// nesne kopyalama
var kisi = { adi: 'Ahmet', yas: 42 };
var kopyaKisi = {...kisi}
kopyaKisi.yas= 50;
console.log("kisi yaş:"+kisi.yas);
console.log("kopya kisi yas:"+kopyaKisi.yas);


// nesne birleştirme
var kisi = { adi: 'Ahmet', soyAdi: 'Dönerci' };
var yas={yas: 42}

var yeniKisi = {...kisi, ...yas}
console.log(yeniKisi)

// nesne kopyalama

var kisi = { adi: 'Ahmet', yas: 42 };

var kopyaKisi = {...kisi}

kopyaKisi.yas= 50;

console.log("kisi yaş:"+kisi.yas);

console.log("kopya kisi yas:"+kopyaKisi.yas);

// nesne birleştirme

var kisi = { adi: 'Ahmet', soyAdi: 'Dönerci' };

var yas={yas: 42}

var yeniKisi = {...kisi, ...yas}

console.log(yeniKisi)

Yukarıdaki örnekte 4. satırda kopyaKisi.yas‘de yapılan değişiklik işleminden dizi1 nesnesi etkilenmiyor. Reference Type hakkında detaylı bilgi almak için burayı tıklayınız.

Örnek-6: ES6 ile gelen Destructuring(Parçalama) işlemi nesne ve dizi’lerde, Spread Syntax ile kolayca yapılabilir. Denemek için burayı tıklayınız.

Nesnelerde destruction işlemi:



const a = { x: 1, y: 2, a: 3, b: 4 }

let { x,y,...z} = a;
console.log(z);

const a = { x: 1, y: 2, a: 3, b: 4 }

let { x,y,...z} = a;

console.log(z);

Dizilerde destruction işlemi:



let kisiler = ["Fatima", "Ayşe", "Hacer", "Zühre"];
let [kisi1, kisi2, ...digerKisiler] =kisiler;  // spread operatör ile parçalama
console.log(digerKisiler); // sonuç dizi
console.log(kisi2);       //  sonuç string
console.log(kisi1);      //   sonuç string

let kisiler = ["Fatima", "Ayşe", "Hacer", "Zühre"];

let [kisi1, kisi2, ...digerKisiler] =kisiler; // spread operatör ile parçalama

console.log(digerKisiler); // sonuç dizi

console.log(kisi2); // sonuç string

console.log(kisi1); // sonuç string

Destruction işlemi yapılırken Spread Syntax sonda olmalıdır. Yukarıdaki nesnelerde destruction örneğindeki 3. satırda, eğer …z başa veya ortaya alınırsa kod hata verecektir. Benzer şekilde yukarıdaki dizilerde destruction örneğindeki 2. satırdaki …digerKisiler başa veya ortaya alınırsa kod hata verecektir.

Örnek-7: Diğer Kullanım alanları:



// nesneye yeni bir özellik ekleme işlemi 
let  ahmet = { adi: 'Ahmet', soyadi: 'Kırıcı' };
kisi = {  ...ahmet, yas: 25 };
console.log(ahmet);

//Nesnedeki özelliklerin değerlerini, yeni değerle değiştirme
let mahmut = {adi:'Mahmut',Soyadi:'Koyuncu', yas:25, medeniDurum:'Bekar'}
const yeniYasVeMedeniDurum = {yas:30, medeniDurum:'Evli'}
mahmut = ({...mahmut, ...yeniYasVeMedeniDurum});
console.log(mahmut);
//Nesnedeki özelliklerin değerlerini, yeni değerle değiştirme (Değiştirilmesi istenmeyen özellikleirn dışarıda tutulması)
let hasan = {adi:'Hasan',Soyadi:'Yamukbasan', yas:50, medeniDurum:'Evli'}
const besYilSonra = {yas:55, medeniDurum:'Boşanmış'}
hasan = ({...hasan, ...besYilSonra, medeniDurum :'Evli'});
console.log(hasan);

// Dizilerde, nesne bilgisini değiştirme
const kisiler = [ 
{id:1, adi:'Kemal',Soyadi:'Kuyumcu', yas:40, medeniDurum:'Bekar'}, 
{id:2, adi:'Mehmet',Soyadi:'Temizel', yas:45, medeniDurum:'Eli'}];
const besyilSonraMehmet = {id:2, yas:55,medeniDurum:'Boşanmış'}
kisiler.map((kisi,k) => {
  if(kisi.id === besyilSonraMehmet.id)
    kisiler[k] = {...kisi, ...besyilSonraMehmet}
})
console.log(kisiler[0]);
console.log(kisiler[1]);

// nesneye yeni bir özellik ekleme işlemi

let ahmet = { adi: 'Ahmet', soyadi: 'Kırıcı' };

kisi = { ...ahmet, yas: 25 };

console.log(ahmet);

//Nesnedeki özelliklerin değerlerini, yeni değerle değiştirme

let mahmut = {adi:'Mahmut',Soyadi:'Koyuncu', yas:25, medeniDurum:'Bekar'}

const yeniYasVeMedeniDurum = {yas:30, medeniDurum:'Evli'}

mahmut = ({...mahmut, ...yeniYasVeMedeniDurum});

console.log(mahmut);

//Nesnedeki özelliklerin değerlerini, yeni değerle değiştirme (Değiştirilmesi istenmeyen özellikleirn dışarıda tutulması)

let hasan = {adi:'Hasan',Soyadi:'Yamukbasan', yas:50, medeniDurum:'Evli'}

const besYilSonra = {yas:55, medeniDurum:'Boşanmış'}

hasan = ({...hasan, ...besYilSonra, medeniDurum :'Evli'});

console.log(hasan);

// Dizilerde, nesne bilgisini değiştirme

const kisiler = [

{id:1, adi:'Kemal',Soyadi:'Kuyumcu', yas:40, medeniDurum:'Bekar'},

{id:2, adi:'Mehmet',Soyadi:'Temizel', yas:45, medeniDurum:'Eli'}];

const besyilSonraMehmet = {id:2, yas:55,medeniDurum:'Boşanmış'}

kisiler.map((kisi,k) => {

if(kisi.id === besyilSonraMehmet.id)

kisiler[k] = {...kisi, ...besyilSonraMehmet}

})

console.log(kisiler[0]);

console.log(kisiler[1]);

Yukarıdaki birinci örnekte(satır 1) var olan nesneye yeni bir özellik ekleniyor. İkinci örnekte(satır 6) nesnede var olan özelliklerin değerleri değiştiriliyor. yeniYasVeMedeniDurum nesnesinde bulunan iki özellik, mahmutnesnesindeki iki özellikle aynı isimde olduğundan 9. satır ’daki işlemin sonunda mahmut nesnesindeki bu iki alanın değerleri değişiyor. Üçüncü örnekte ( 11. satır)yapılan işlem ikinci örnekle aynı. Buradaki fark değiştirilmesi istenilen özelliğin dışarıda tutulması işlemi. 14. satır da atama işlemi yapılırken medeniDurum özelliği değişimden etkilenmesin diye dışarıda tutuluyor. Dördüncü örnekte(17.satır);ikinci ve üçüncü örnekte yapılan işlemlerin aynısı dizi içinde yapılıyor.

Kaynaklar:

Spread syntax-developer.mozilla.org

Bir sonraki Javascript harikasında görüşmek üzere.