Javascript ES6 Spread Operatörü
Spread türkçe karşılık olarak yaymak, yayılmış demek. Bu operatörde tam anlamıyla bunu yapıyor aslında.
Spread operatörü ile iterable nesneleri tek tek öğelerine bölebiliyoruz. iterable nesneden kastım ise Array
Map
Set
DOM
NodeList
vb.
Hızlıdan bir spread operatörü örneği görelim.
Yani operatörü kullanmak için ...
üç noktayı nesne başına koyuyoruz. Yukarıdaki örnektede dizi değerlerini göstermek için bu operatörü kullandık.
Kullanım Alanları
Array Kopyalama
Normalde bir array'i kopyaladığınızda bunu referanslı olarak kopyalıyorsunuz. Ve referans aldığınız arrayde değişiklik olduğunda sizin kopya nesnenizde değişiyor. Yani örneğin;
Örnekte meyveler
dizisini meyveler_copy
adıyla kopyaladık ve console'a yazdırdık. Ancak daha sonra referans aldığımız diziye yeni bir değer eklediğimizde kopyaladığımız dizide de aynı elemanın olduğunu görüyoruz. Bunu spread operatörü ile yapsaydık ise sonuç şöyle olacaktı;
Bu operatör sayesinde Shallow copy
dediğimiz sığ kopyalama yani referanssız kopyalama işlemini gerçekleştiriyoruz.
Obje Kopyalama
Yukarıdaki işlemin aynısını objeler içinde yapabiliriz. Örneğin;
Dizileri Birleştirmek
İki ve ya daha fazla diziyi birleştirmek, dizinin başına ya da sonuna yeni değer ekleyerek bir dizi oluşturmak içinde bu operatör kullanılır. Örneğin;
Objeleri Birleştirmek
Yukarıdaki işlemin aynısını objeler içinde yapabiliriz. Örneğin;
String ifadelerde kullanımı
Bir string ifadeyi parçalara ayırmak istersekte şöyle kullanabiliriz;
Fonksiyon Parametresinde Gönderme ve Alma
Fonksiyona parametre gönderirken ya da fonksiyonda parametre alırkende bu operatörü kullanmak işimizi çok kolaylaştırıyor.
Destructuring ile Kullanımı
ES6 ile gelen yeniliklerden biriside Destructuring, ve spread operatörü ile kullanımı ise şöyle;
NodeList'den Array'e Çevirmek
Javascript'te birden fazla etiket seçmek için querySelectorAll()
kullanılmakta. Ancak bu bize bir NodeList döndürüyor, dolayısı ile map()
forEach()
filter()
gibi high-order fonksiyonları kullanamıyoruz.
Bu yüzden NodeList'i array'e çevirmek için spread operatörünü kullanıyoruz.