React … Operatörü Nedir?

React … operatörü nesne ve dizili elemanlarını ayrıştırmak için kullanılan bir Javascript operatörüdür. ES6 ile hayatımıza girmiştir. Bir çok işlemin oldukça kolay bir şekilde halledilmesi için kullanılır. Spread operatörü olarak isimlendirilir.

Yazılım Şekli

Spread operatörü aşağıdaki gibi kullanılır.

birFonksiyon(a, ...iterableObj, b)
[1, ...iterableObj, '4', 'bes', 6]
{ ...obj, key: 'deger' }

Şimdi bu işlemleri tek tek inceleyelim.

Javascript Spread Operatörü İle Fonksiyona Parametre Verme

Elimizde bir fonksiyon olduğunu düşünelim ve bu fonksiyona üç ayrı parametre girmemiz gerekiyor. Mesela bir toplama fonksiyonu olsun. Fakat bu parametreler bize bir dizi içerisinde geliyor. [3, 5, 7] gibi. Şimdi bu üç parametreyi bir birinden nasıl ayırarak üç farklı değişken olarak bir fonksiyona verebileceğimizi görelim.

function topla(x, y, z) {
    const toplam = x + y + z;
    return toplam;
}

const sayilar = [3, 5, 7];
const sonuc = topla(...sayilar);

console.log(sonuc);
// Konsola
// 15 
// yazdırır.

Bu kullanımda … operatörü sayilar dizisini üç farklı değişkene çevirerek fonksiyona parametre olarak geçti. Bu sayede topla(...sayilar) ifadesi topla(3, 5, 7) şeklinde davranmış oldu.

Spread ifadesi bu kullanımda fonksiyona aldığı dizinin tüm elemanlarını farklı parametreler olarak girer.

İki Diziyi … İfadesi İle Yeni Diziye Eleman Atama

Bir dizi oluştururken elimizdeki farklı bir dizinin elemanlarını da bu diziye dahil edeceksek, … ifadesi bu iş için biçilmiş kaftandır.

Mesela elimizde

const sayilar = [1, 3, 5];

şeklinde bir dizimiz olsun. Bu dizinin başına 0 ve sonuna 7 ve 9 ekleyerek yeni dizi oluşturmak isteyelim. Yazacağımız kod

const yeniDizi = [0, ...sayilar, 7, 9];

console.log(yeniDizi);
// Konsola
// [0, 1, 3, 5, 7, 9]
// yazdırılır.

yazarız ve bu işlemin sonucunda [0, 1, 3, 5, 7, 9] şeklinde yeni bir dizimiz olur.

Bir Nesnenin Tüm Özelliklerini Kullanarak Yeni Bir Javascript Nesnesi Oluşturma

Şimdi elimizde olan bir nesnenin özelliklerine yeni özellikler de katarak farklı bir nesne nasıl oluştururlur bunu görelim. Bu işlem için yine Javascript spread operatörünü kullanacağız. Elimizde

const kitap = {
    id: "122991",
    baslik: "Bir Kitap",
    aciklama: "Bir kitap açıklaması",
}

şeklinde bir kitap nesnesi olduğunu düşünelim. Şimdi bu kitap nesnesine yayinlandi ve sayfaSayisi şeklinde iki farklı parametre de ekleyerek yeni bir nesne oluşturmaya çalışalım.

const yeniKitap = {
    ...kitap,
    yaninlandi: true,
    sayfaSayisi: 335
}

console.log(yeniKitap);
// Konsola
/*
{
  id: '122991',
  baslik: 'Bir Kitap',
  aciklama: 'Bir kitap açıklaması',
  yaninlandi: true,
  sayfaSayisi: 335
}
*/
// yazdırır.

İşlem sonucunda yeni nesnemiz

{
  id: '122991',
  baslik: 'Bir Kitap',
  aciklama: 'Bir kitap açıklaması',
  yaninlandi: true,
  sayfaSayisi: 335
}

şeklinde olacaktır.

Sonuç

Spread (…) operatörü ES6 ile kullanılmaya başlayan ve yinelenebilir ( iterable ) değişkenleri elemanlarını ayırarak farklı şekilde kullanılmasını sağlar. Array ve objeler üzerinde çalışır.

Javascript hakkıda sormak istediklerinizi yorumlardan bize iletebilirsiniz.