Javascript’te Rest ve Spread Operatörleri kullanımı ve farkları

23 Ocak 2021

JavaScript ES6 ile birlikte gelen üç nokta ... hem Rest hem de Spread Operatörü olarak geçiyor, aslında bu ifadenin genel adı Spread Operatör fakat kullanıldığı bazı durumlara göre Rest Parametresi olarak da adlandırılıyor.

 

Rest Parametresi?
Rest Parametresi, fonksiyonlara sınır sayısı olmadan parametre geçmemize olanak verir ve bizim isteğimiz harici kalan tüm öğeleri bir dizide toplar.
 
Örneğin, birden fazla argüman alan bir fonksiyonumuz olduğunu düşünelim ve sadece geçirilen ilk argümanla ilgilendiğimizi ancak geri kalanını sonrası için saklamak istediğinizi varsayalım:

Yukarıdaki örnekte, üç noktayı ... Rest Parametresi olarak kullanıyoruz ve fonksiyona gönderilen parametre içerisinden a ve b olarak 1. ve 2. parametreyi aldıktan sonra kalanları bir dizide topluyoruz, iletilen diğer tüm argümanlar artık remaining adlı dizide saklanmaktadır. Bu teknik özellikle iletilecek argümanların sayısını bilmediğinizde kullanışlı olmaktadır.
 
Rest Parametresi kullanırken dikkat etmemiz gereken bazı durumlar:
 
1. Rest Parametresi, geriye kalan tüm değişkenleri toplar bu yüzden fonksiyonun son parametresi olmalı, aşağıdaki gibi bir yazım hataya neden olur.

 
2. Bir fonksiyonda sadece bir Rest Parametresi olabilir, aynı şekilde aşağıdaki gibi bir yazım hataya neden olacaktır.

 
Spread Operatör
Spread Operatörü; String, Array veya Object değişmezlerini genişletmemize yardımcı olur.
 
String ifadelerde kullanımı

Bir string ifadeyi parçalara bölüp dizi haline getirmek istersek aşağıdaki gibi kullanabiliriz:

 
Dizileri Birleştirme

Aşağıdaki kodda, spread operatörünü kullanarak group1 ve group2 değişkenlerini tek bir dizide birleştirdik.

 
Fonksiyon çağrılarında Spread Operatör kullanımı

 
Dizilerde Spread kullanımı
Bir fonksiyona tek argüman olarak aktarılan bir diziye sahip başka bir örneğe bakalım, tüm öğeleri almak ve konsola yazdırmak için Spread Operatörünü kullanacağız.

numbers dizisindeki öğeleri single_array değişkenimize kopyalamak için Spread Operatörünü kullanıyoruz. Spread kullanarak bir dizi veya nesnenin bir kopyasını bir diğeriyle birleştirebiliriz.
 
Rest ve Spread birlikte kullanımı

 
Aşağıda Array içerisindeki aynı olan değerleri bir kez almak için Set Nesnesi ve Spread Operatör kullanılarak yapılmış güzel bir örnek bulunmakta:

 

Nesnelerde Rest ve Spread Operatörlerinin kullanımı

Nesnelerde Rest ve Spread Operatörlerinin kullanımı, dizilerdekinden farklı değildir.
 
Rest Operatör

 
Spread Operatör

 
Nesneleri Birleştirme

 
Nesnelerde Rest Operatör kullanımı

Bir API yanıtından bize verilen büyük bir nesnemiz olduğunu hayal edin. Nesneden yalnızca users özelliği istersek ve geri kalanını başka bir değişkene kaydetmek için destructuring kullanabiliriz.

 
Nesnelerde Spread Operatör kullanımı

Spread Operatörünü başka bir nesneyi diğeriyle birleştirmek için kullanabiliriz.
 
Önceki kod parçacığını kullanarak:

 

Ayrımlarını daha kolay yapabilmek için bazı ipuçları;
 

  • Eğer ... fonksiyonun sonunda yer alıyorsa bu Rest parametresidir ve geriye kalanlar bir diziye alınırlar.
  • Eğer ... fonksiyon çağrımında veya benzeri bir olayda kullanılıyorsa buna Spread Operatörü denir ve diziyi listeye çevirir.
  • Rest parametresi isteğe göre argüman girilmesine yardımcı olur.
  • Spread Operatörü diziyi normalde argüman listesi bekleyen fonksiyona atmaya yarar.

 
 
Kaynaklar:

https://reactgo.com/rest-vs-spread-javascript/

https://theninja.blog/using-rest-and-spread-operators-in-java-script/

https://javascript.info/rest-parameters-spread