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];

• Bir diziyi kopyala
• Dizileri birleştirin
• Bir diziye öğe ekleme
• Bir nesneye bir özellik ekleme
• Math() fonksiyonlarını kullanın
• Diziyi fonksiyondan bağımsız değişkenleri olarak yay
• Bir fonksiyona sınırsız argüman iletin
• Bir nodeList'i bir diziye dönüştürme
• Bir nesneyi Kopyalayın
• Nesneleri Birleştirme
• Bir nesne de öğe silme
• Bir Dizeyi Harflerine ayırma

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];

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:

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:

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:

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' ]

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