Tüm blog yazıları

JavaScript’te Rest Operatörü

JavaScript'te ... (rest operatörü) ile tanışın! Destructuring işlemi sırasında dizilerden ve objelerden geriye kalan tüm değerleri nasıl tek bir değişkende toplayacağınızı öğrenerek kodunuzu daha etkili hale getirin.

eminbasbayan4 dk okuma
JavaScript rest operatörü kullanımı, üç nokta sembolü ve array/object destructuring örneği

Bir önceki yazımızda, destructuring özelliğini kullanarak dizilerden ve objelerden nasıl kolayca veri alabildiğimizi öğrenmiştik. Bu yazıda ise destructuring işlemini bir adım öteye taşıyıp, geri kalan değerleri yakalamamıza olanak tanıyan rest operatörü (...) özelliğini inceleyeceğiz.

Rest Operatörü Nedir?

JavaScript’te ... (üç nokta) sembolü iki farklı şekilde kullanılabilir:

  1. Rest operatörü olarak: Geriye kalan değerleri toplar.
  2. Spread operatörü olarak: Değerleri bir yapının içine “açar”.

Bu yazıda sadece rest kısmına odaklanacağız.

Rest operatörü, destructuring işlemi sırasında geri kalan tüm elemanları bir araya toplayarak tek bir dizi veya obje içinde tutmamızı sağlar.

Bunu özellikle, bir diziden veya objeden yalnızca belirli kısımları almak istediğimizde kullanırız.

Dizi Destructuring ile Rest Operatörü

Diyelim ki bir dizimiz var ve bu dizi öğrencilerin sınav notlarını içeriyor:

jsx
const sinavSonuclari = [85, 90, 78, 92, 88];

Bu diziden sadece ilk üç sonucu almak, kalanları ise başka bir değişkende toplamak istiyorsak rest operatörünü şöyle kullanabiliriz:

jsx
const [birinci, ikinci, ucuncu, ...geriKalan] = sinavSonuclari;

console.log(birinci); // 85
console.log(ikinci); // 90
console.log(ucuncu); // 78
console.log(geriKalan); // [92, 88]

Burada:

  • İlk üç eleman ayrı değişkenlere atandı,
  • ...geriKalan ifadesi, dizinin geri kalan elemanlarını yeni bir dizi içinde topladı.

🧠 Not: Rest operatörü daima en sonda kullanılmalıdır.

Aksi halde JavaScript hata verir çünkü hangi elemanların “geri kalan” olduğunu anlayamaz.

Rest Operatörünü Kullanarak Dizi Elemanlarını Ayırma

Rest operatörü, özellikle uzun dizilerde bazı kısımları ayırıp kalanlarla işlem yapmak için çok kullanışlıdır.

Örneğin:

jsx
const isimler = ["Ali", "Ayşe", "Mehmet", "Zeynep", "Hasan"];

const [ilk, ikinci, ...digerleri] = isimler;

console.log(ilk); // Ali
console.log(ikinci); // Ayşe
console.log(digerleri); // ["Mehmet", "Zeynep", "Hasan"]

Bu sayede, dizinin ilk iki elemanını ayrı olarak alırken, geri kalan tüm elemanları tek bir dizide tutabiliyoruz.

Obje Destructuring ile Rest Operatörü

Rest operatörü sadece dizilerde değil, objelerde (object) de kullanılabilir.

Bu durumda, objeden bazı alanları çıkarır, kalan tüm property’leri yeni bir obje içinde toplar.

Örneğin:

jsx
const kullanici = {
  ad: "Selin",
  yas: 24,
  sehir: "İstanbul",
  universite: "Uludağ Üniversitesi"
};

const { ad, ...kalanBilgiler } = kullanici;

console.log(ad); // "Selin"
console.log(kalanBilgiler);
// { yas: 24, sehir: "İstanbul", universite: "Uludağ Üniversitesi" }

Burada ad property'sini ayrı aldık, geri kalan tüm property’leri kalanBilgiler adlı yeni bir obje içinde topladık.

Bu, özellikle büyük JSON verileriyle çalışırken çok işe yarar.

Rest Operatörü ile Fonksiyon Parametreleri

Rest operatörünün sıkça kullanıldığı bir diğer alan ise fonksiyon parametreleridir.

Bir fonksiyona kaç tane argüman geleceğini bilmiyorsak, rest operatörüyle hepsini tek bir diziye toplayabiliriz:

jsx
function toplam(...sayilar) {
  return sayilar.reduce((a, b) => a + b, 0);
}

console.log(toplam(10, 20, 30)); // 60
console.log(toplam(5, 15, 25, 35)); // 80

Burada ...sayilar, fonksiyona gelen tüm argümanları bir dizi haline getiriyor.

Bu sayede ister 3 ister 10 parametre gönderelim, fonksiyon sorunsuz çalışıyor.

Rest Operatörünün Özellikleri ve Dikkat Edilmesi Gerekenler

  1. Her zaman en sonda olmalıdır:

    Destructuring sırasında ... ifadesi yalnızca son sırada kullanılabilir.

    jsx
    const [ilk, ...kalan, son] = [1, 2, 3, 4]; // ❌ Hata verir
  2. Yeni bir kopya oluşturur:

    Rest operatörü, dizinin veya objenin orijinal halini değiştirmez; yeni bir kopya oluşturur.

  3. Sınırsız sayıda elemanı kapsayabilir:

    Rest operatörüyle kaç eleman kalırsa kalsın hepsi tek bir değişkende toplanabilir.

Özetle

Rest operatörü (...), destructuring işlemlerinde geri kalan verileri bir araya toplamak için kullanılır.

Hem dizilerde hem objelerde çok güçlü bir araçtır.

  • Dizilerde: Geriye kalan elemanları yeni bir dizi olarak toplar.
  • Objelerde: Geriye kalan property’leri yeni bir obje olarak toplar.
  • Fonksiyonlarda: Parametre sayısı belirsiz olduğunda tüm argümanları tek bir diziye dönüştürür.
  • Orijinal veri değişmez: Rest işlemi, orijinal dizi veya objeyi etkilemez.

Bu özellik, hem pratik hem de modern JavaScript yazımında oldukça yaygındır.

Karmaşık verilerle çalışırken kodunuzu daha sade, okunabilir ve güçlü hale getirir.

JavaScript Classes ile pratik uygulamalar, metotlar arası iletişim ve gerçek dünya kod örnekleri
JavaScript Dersleri9 dk okuma

JavaScript Classes - Pratik Uygulamalar

JavaScript class'ları ile pratik uygulamalara geçin! Metotlar arası iletişimden constructor'da metot çağırmaya, kod tekrarını azaltmaktan gerçek dünya senaryolarına kadar class kullanımının inceliklerini keşfedin. Kendi alışveriş sepeti örneğinizle bilginizi pekiştirin.

Yazıyı oku
JavaScript class yapısını gösteren bir kod örneği, ES6 ile modern nesne oluşturma
JavaScript Dersleri9 dk okuma

JavaScript Classes

ES6 ile JavaScript'e gelen class yapısı sayesinde nesne oluşturmak artık çok daha kolay ve düzenli! Constructor function karmaşasından kurtulup, okunabilir ve yönetilebilir kodlar yazmak isteyenler için modern JavaScript'in temel taşı olan class'ları tüm detaylarıyla keşfedin. Bu rehberle nesne şabl

Yazıyı oku
JavaScript kodunda Constructor Function ve new keyword'ü ile nesne oluşturma örnekleri
JavaScript Dersleri8 dk okuma

Constructor Functions ve new Keyword

Factory Function'ların hafıza israfı sorununa Constructor Function'lar ve new keyword'ü ile son verin! Metotları paylaştırarak JavaScript objelerini daha verimli nasıl oluşturacağınızı, new'in perde arkasında neler yaptığını ve prototype sisteminin gücünü bu rehberde keşfedin.

Yazıyı oku

Çerez tercihlerin

Platformun çalışması için zorunlu çerezler kullanıyoruz. İzin verirsen anonim kullanım verilerini ölçüyoruz. Ayrıntıları incele