Javascript Harikaları-2 : Spread Syntax.

0 206

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.

 

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.

 

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

 

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

 

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.

 

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ız15. 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.

 

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:

 

Dizilerde destruction işlemi:

 

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ı:

 

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:

 

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

Yorum yaz

Email adresiniz yayınlanmayacaktır.