JavaScript Spread Operator Kullanımı

spread (yayılma) operatörü ECMA6'da çıktı ve JavaScript diziler için büyük bir işlevselliğe sahiptir. ES9'daki büyük bir güncellemeyle, spread operatörü artık dizilere ek olarak nesnelere genişletildi. Bu yazıda, spread operatörü, nasıl kullanılacağı ve nerede kullanılacağı hakkında konuşacağız.

spread operatörü yayma işleci (...) gibi bir şeye benziyor ve yinelenebilir bir dosyadaki öğeleri, for döngüsü kullanmadan ekrana yazmaya izin veriyor. Yinelenebilir, üzerine diziler, dizeler, nesneler vb. Gibi geçiş yapmak için döngüler ekleyebileceğimiz herhangi bir şey olarak görselleştirilebilir.

ECMA6'da çıkan bu harika yeni özellikler Javascript işlevlerinden biridir. İki farklı şekilde kullanılabilir; bir spread operator veya rest parameter olarak.

Rest parametresi: Tüm öğeleri bir dizide toplar.

Rest parametresi (...), bir fonksiyonun sınırsız sayıda argümanı bir dizi olarak işlemesine izin verir.

Rest sözdizimi tam olarak spread sözdizimi gibi görünür. Bir bakıma rest sözdizimi, spread sözdiziminin tersidir. spread(Yayılma) sözdizimi bir diziyi elemanlarına "genişletir", rest sözdizimi birden çok elemanı toplar ve onları tek bir eleman halinde "yoğunlaştırır".

Spread operatörü: yinelemelerin (diziler / nesneler / dizeler) tek bağımsız değişkenlere - öğelere genişletilmesine izin verir.

Spread operatörü, JavaScript'te karşılaşabileceğiniz birden çok sorunu çözmek için kullanılabilir. Bu yazıda, aşağıdaki işlemlerin spread operatörünü kullanarak nasıl yapılacağını öğreneceksiniz.

Temel formda, yayılma operatörü üç nokta gibi görünür.


[...arr];

Sözdizimi:


var variablename1 = [... değer]; 

Yukarıdaki sözdiziminde, yayma işlecini(…) belirli bir değişkendeki tüm değerleri hedefleyen yayılma operatörüdür. (…) İşlev çağrısında veya benzeri olduğunda, buna spread operatörü denir. Yayılma operatörü, yayma işlecini matematik nesnesiyle genişletmek, kopyalamak, birleştirmek istediğimizde olduğu gibi birçok durumda kullanılabilir . Her birine tek tek bakalım:

Bir diziyi kopyala


Spread operatörünü bir diziyi kopyalamak için kullanabiliriz, ancak bu yine de bir Sığ Kopya (iç içe diziler kopyalanmaz).

Diyelim ki arr1 adında bir dizimiz var ve çağrılan bu dizinin arr2 adında bir kopyasını yapmak istiyoruz.


const arr1 = [1, 2, 3];
const arr2 = [...arr1];

console.log(arr2);
// [ 1, 2, 3 ]

Bu şekilde temel bir diziyi kopyalayabiliriz, bunun çok seviyeli diziler veya tarihler veya fonksiyonlar içeren diziler için çalışmadığını unutmayın.

Dizileri Birleştirin


Diyelim ki birleştirmek istediğiniz iki diziniz var, bu Methodu oldukça sık kullanırız, bunun için concat Methodu kullanabiliriz. Spread operatörü, aşağıda görebileceğiniz gibi dizileri birleştirmeyi kolaylaştırır.


const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];

console.log(arr3);
// [ 1, 2, 3, 4, 5, 6 ]

iki dizi (arr1, arr2) şeklinde arr3 dizisinde birleştirildi.

Hangi Dizinin önce gelmesi gerektiğini, farklı düzenleme yaparak belirtebilirsiniz.


const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr2, ...arr1];

console.log(arr3);
[4, 5, 6, 1, 2, 3];

Bu, dizileri birleştirmenin iyi bir yoludur, ekleyebileceğiniz miktar sonsuzdur, böylece spread operatörleri eklemeye devam edebilirsiniz.


const output = [...arr1, ...arr2, ...arr3, ...arr4];

Not : Büyük bir veri kümesi için çalışırken spread operatörü önerilmez yerel concat() methoduna kıyasla daha yavaş çalışacaktır.

Bir Diziye Öğe Ekleme


Diyelim ki bir diziniz var ama ona bir veya birden fazla öğe eklemeniz gerekiyor. Array.push() Methodun'dan yararlanabilirsiniz, ancak spread operatörü de gayet iyi çalışacaktır.


let arr1 = ['this', 'is', 'an'];
arr1 = [...arr1, 'array'];

console.log(arr1);
// [ 'this', 'is', 'an', 'array' ]

Gördüğünüz gibi bu, yeni elemanı mevcut dizimizin sonuna ekleyecektir. Hatta birden çok eleman girebilirsiniz.


let arr1 = ['this', 'is', 'an'];
arr1 = [...arr1, 'array', 'yeni eleman'];

console.log(arr1);
// [ 'this', 'is', 'an', 'array', 'yeni eleman' ]

Bir Nesneye Bir Özellik Ekleme


Diyelim ki bir Araba nesnesi var, ancak bunun bir renk özelliği eksik.


const  Araba = {
  marka: 'Tofaş',
  model: 2021
};

Rengi, bu Araba nesnesine eklemek için, spread operatöründen yeniden yararlanabiliriz.


const output = {...Araba, renk: 'beyaz'};

Yukarıda olan durum, Araba nesnesini yaymamız ve renk değeriyle çağrılan yeni bir özellik "beyaz" eklememizdir.

Tüm Kodlar böyle görünecek.


const  Araba = {
  marka: 'Tofaş',
  model: 2021
};
const output = {...Araba, renk: 'beyaz'};

console.log(output);
// { marka: 'Tofaş', model: 2021, renk: 'beyaz' }

Math() Methodlarını Kullanın


Belirli bir sayıya sahip olduğunuzu ve bu sayıların en düşük veya en yüksek değeri elde etmek istediğinizi varsayalım.

Spread operatörünün başka bir harika özelliğini öğreneceğiz..

Giriş dizimiz şöyle görünecek.


const arr1 = [1, -1, 0, 5, 3];

En düşük sayıyı elde etmek için spread operatörünü ve Matematik methodu Math.min kullanalım.


const arr1 = [1, -1, 0, 5, 3];
const min = Math.min(...arr1);

console.log(min);
// -1

Bir çıktı verecektir "-1" çünkü bu en düşük sayıdır, deneyin ve diziden -1'i kaldırıp en düşük olanın "0" olacağını göreceksiniz.

En yüksek sayıyı elde etmek için Math.max methodu kullanabiliriz .


const arr1 = [1, -1, 0, 5, 3];
const max = Math.max(...arr1);

console.log(max);
// 5

Gördüğünüz gibi max methodunda geri dönecek değer "5", beş sayısını kaldırırsak "3" sayısı değeri geri dönecektir.

Spread oparatör kullanmasak ne olacağını merak ediyorsanız:


const arr1 = [1, -1, 0, 5, 3];
const max = Math.max(arr1);

console.log(max);
// NaN

JavaScript bir dizide neyi maksimum değerini bulacağını bilmediği için geri NaN değeri dönecektir.

Diziyi Fonksiyondan Bağımsız Değişkenleri Olarak Yay


Diyelim ki üç argüman alan bir fonksiyonumuz var.


const myFunc(x1, x2, x3) => {

	console.log(x1);
	console.log(x2);
	console.log(x3);
}
  

Bu fonksiyonu şu şekilde adlandırabiliriz:


myFunc(1, 2, 3);

Ama fonksiyona değer geçmek istediğimiz bir dizimiz varsa ne olur?


myFunc(...arr1);
// 1
// 2
// 3

Gördüğünüz gibi diziyi fonksiyona aktardığımız üç ayrı argümana yayıyoruz.

Tam çağrı şöyle görünecektir:


const myFunc = (x1, x2, x3) => {
  console.log(x1);
  console.log(x2);
  console.log(x3);
};

const arr1 = [1, 2, 3];
myFunc(...arr1);
// 1
// 2
// 3

Bir Fonksiyona Sınırsız Argüman İletin


Diyelim ki sınırsız sayıda argüman alan bir fonksiyonunuz var, bunlar dinamik olarak döngü yapmak isteyeceğiniz özellikler olabilir.


const myFunc = (...args) => {
  console.log(args);
};

Şimdi bu fonksiyona birden çok argümanla çağırırsak, aşağıdakilerin gerçekleştiğini görürüz.


myFunc(1, 'a', new Date());

Aşağıdakileri döndürecektir:

[
  1,
  'a',
  Date {
    __proto__: Date {}
  }
]

Yukarıda görüldüğü gibi argümanlar üzerinde dinamik olarak döngü yapabiliriz.

Bir nodeList'i Bir Diziye Dönüştürme


Sayfanızdaki tüm div'leri almak için spread operatörünü kullandığınızı varsayalım. Bunlar bir nodeList. Daha sonra bunu nodeList bir diziye dönüştürmek için spread operatöründen yararlanabiliriz.


const el = [...document.querySelectorAll('div')];

console.log(el);
// (3) [div, div, div]

Burada Dom'dan(Doküman Nesne Modeli) üç div aldığımızı görebilirsiniz.

Artık bu elemanlar üzerinde kolayca döngü oluşturabiliriz çünkü bunlar bir dizi formatındadır.


const el = [...document.querySelectorAll('div')];
el.forEach(item => {
 
  console.log(item);
});

// <div></div>
// <div></div>
// <div></div>

ES6'nın spread operatörü, NodeList JavaScript'te bir diziye dönüştürmenin kısa ve havalı bir yoludur. Ancak, yalnızca modern tarayıcılarda çalışır.

Bir nesneyi Kopyalayın


Bir nesnenin kendi numaralandırılabilir özelliklerini kopyalamak için spread operatörünü kullanabilirsiniz:


const circle = {
    radius: 10
};

const clonedCircle = {...circle};

console.log(clonedCircle);

ÇIKTI:

{ radius: 10 }

Kopyalamanın her zaman sığ olduğunu unutmayın. Örneğin:


const circle = {
    radius: 10,
    style: {
        color: 'blue'
    }
};

const clonedCircle = {
    ...circle
};


clonedCircle.style = 'red';

console.log(clonedCircle);

ÇIKTI:

{ radius: 10, style: 'red' }

Nesneleri Birleştirme


Diziler gibi, iki nesneyi birleştirmek için yayma işlecini(...) kullanabilirsiniz:


const circle = {
    radius: 10
};

const style = {
    backgroundColor: 'red'
};

const solidCircle = {
    ...circle,
    ...style
};

console.log(solidCircle);

ÇIKTI:

{ radius: 10, backgroundColor: 'red' }

Bir Nesne Özelliğini Silme


Nesnelerin özelliğinin silinmesine aşinaysanız, spread oparatörü bunu yapmak için çok yararlı bulabilirsiniz.

Diyelim ki Araba adında bir nesnemiz var.


const  Araba = {
  marka: 'Tofaş',
  model: 2021,
  renk:'beyaz'
};

Artık bunu spread operatörünü kullanarak tek değişkenler olarak yok edebiliriz.


const {marka, ...rest} = Araba;

console.log(marka);
console.log(rest);
// 'Tofaş'
// { model: 2021, renk: 'beyaz' }

Gördüğünüz gibi, Araba nesnesini çözümledik ve marka adını marka değişkenine ve nesnenin geri kalanını rest değişkene dönüştürdük.

Bir Dizeyi Harflerine Ayırma


Spread operatörü için son kullanım durumu bir dizeyi Harflerine Ayırmadır.

Diyelim ki aşağıdaki dizeye sahibiz.


const str = 'Hello';

Daha sonra bu dizede spread operatörünü kullanırsak bir dizi harf elde ederiz.


const str = 'Hello';
const arr = [...str];

console.log(arr);
// [ 'H', 'e', 'l', 'l', 'o' ]

selcuk 26/11/2021

Ayrıntılı açıklama için çok teşekkürler. Süper bir makale olmuş. bu şekilde düzenli olması da ayrı olarak çok güzel. kod bölümü için online kod editorü ekleme şansınız olursa sitenize bence ekleyiniz. anlık olarak kodlarda düzenleme yapıp çalıştırabilir insanlar. emeğinize sağlık.

Mert 13/12/2022

Güzel anlatımınızı için çok teşekkür ederiz.Bir sorum olucaktı izninizle;

const arr1 = [1, 2, 3];
console.log(...arr1);

Bu şekilde bir diziyi console.log yada document.write ile yazdırdığımızda spread(...) operatoru çalışıyor. Fakat ben dom ile yani bir elemente erişip bunun içerisine yazdırmak istiyorum
document.querySelector("#id").innerHTML = ...arr1; şeklinde fakat bunu yaptığımda hata alıyorum bunu nasıl yazdırabilirim.

yönetici 16/12/2022

Bu şekide yaz [...arr1]
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

302

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
  • Git
  • React
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML FORM OLUŞTURMA
  • CSS YATAY MENÜ YAPIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML DİV ve SPAN NEDİR?
  • HTML ARKAPLANA MÜZİK EKLEME
  • KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.