Tüm blog yazıları

JavaScript’te Varsayılan Parametreler (Default Parameters)

JavaScript fonksiyonlarınızda parametreleri unutulduğunda veya boş bırakıldığında hata mı alıyorsunuz? Varsayılan parametreler (default parameters) ile fonksiyonlarınızı daha sağlam ve kullanıcı dostu hale getirin. Bu yazıda, ES6 ile gelen bu güçlü özelliği örneklerle keşfedin.

eminbasbayan4 dk okuma
JavaScript varsayılan parametreler sözdizimini gösteren kod parçacığı veya bir ayar ikonu.

JavaScript ile programlama yaparken, fonksiyonlarımıza parametreler göndererek daha dinamik kodlar yazabiliriz. Ancak bazen kullanıcı bu parametreleri göndermeyi unutabilir ya da bilerek boş bırakabilir. İşte bu durumda fonksiyonun hata vermemesi ve mantıklı bir şekilde çalışmaya devam etmesi için varsayılan parametreler (default parameters) kullanılır.

Bu yazıda, JavaScript’te varsayılan parametrelerin nasıl çalıştığını, neden önemli olduğunu ve nasıl kullanılacağını örneklerle birlikte açıklayacağız.

Fonksiyonlara Parametre Gönderilmediğinde Ne Olur?

Bir fonksiyon yazdığımızda genelde dışarıdan bazı bilgiler alır. Bu bilgiler, fonksiyonun içinde kullanılmak üzere parametre olarak tanımlanır. Örneğin:

jsx
function yazdir(mesaj) {
  console.log("Gelen mesaj: " + mesaj);
}

Bu fonksiyon dışarıdan bir mesaj alır ve onu ekrana yazar. Şimdi bu fonksiyonu parametre vermeden çağıralım:

jsx
yazdir(); // Çıktı: Gelen mesaj: undefined

Eğer mesaj verilmemişse, JavaScript otomatik olarak undefined değerini kullanır. Bu da genellikle istemediğimiz bir sonuç verir.

Eski Yöntem: El İle Kontrol Ederek Varsayılan Değer Atamak

ES6'dan önce JavaScript'te varsayılan değer atamanın tek yolu, fonksiyonun içinde manuel bir kontrol yapmaktı. Şöyle bir yöntem kullanılırdı:

jsx
function yazdir(mesaj) {
  if (mesaj === undefined) {
    mesaj = "Varsayılan mesaj";
  }
  console.log("Gelen mesaj: " + mesaj);
}

Bu yöntemde, mesaj parametresi tanımsız (undefined) ise, biz manuel olarak bir değer atıyoruz. Fonksiyonu şöyle çağırdığımızda:

jsx
yazdir(); // Çıktı: Gelen mesaj: Varsayılan mesaj

Her ne kadar işe yarasa da, bu yöntem özellikle birden fazla parametre olduğunda karmaşık hale geliyordu.

Yeni ve Temiz Yöntem: Varsayılan Parametre Tanımlama (ES6)

ES6 ile birlikte gelen yeni sözdizimi sayesinde, parametreye varsayılan değer atamak artık çok daha kolay. Fonksiyon tanımında doğrudan değer verebiliyoruz:

jsx
function yazdir(mesaj = "Varsayılan mesaj") {
  console.log("Gelen mesaj: " + mesaj);
}

Bu fonksiyon, eğer çağrıldığında bir mesaj verilmemişse otomatik olarak "Varsayılan mesaj" değerini kullanır.

jsx
yazdir();             // Çıktı: Gelen mesaj: Varsayılan mesaj
yazdir("Selam");      // Çıktı: Gelen mesaj: Selam

Bu yöntem daha sade, daha okunabilir ve daha az hata riski barındırır.

Gerçek Hayat Örneği: Hava Durumu Raporu Fonksiyonu

Bir hava durumu uygulaması yazdığımızı düşünelim. Kullanıcı eğer şehir belirtmezse, varsayılan olarak "İstanbul" bilgisini kullanalım.

jsx
function havaDurumuGetir(sehir = "İstanbul") {
  console.log(sehir + " için hava durumu getiriliyor...");
}

Bu fonksiyon hem kullanıcı şehir belirtirse hem de belirtmezse çalışabilir:

jsx
havaDurumuGetir();          // İstanbul için hava durumu getiriliyor...
havaDurumuGetir("Ankara");  // Ankara için hava durumu getiriliyor...

Bu sayede kullanıcı hatalı ya da eksik bilgi verse bile programımız düzgün şekilde davranır.

Parametre Sıralaması Neden Önemlidir?

JavaScript, fonksiyona gönderilen değerleri sıralarına göre parametrelere yerleştirir. Bu yüzden varsayılan parametrelerin, parametre listesinin en sonunda olması tavsiye edilir.

Hatalı Örnek:

jsx
function selamla(mesaj = "Merhaba", isim) {
  console.log(mesaj + ", " + isim);
}

selamla("Ahmet"); // Çıktı: Ahmet, undefined

Burada JavaScript, "Ahmet" değerini ilk sıradaki mesaj parametresine atar. isim parametresine değer verilmediği için undefined olur.

Doğru Örnek:

jsx
function selamla(isim, mesaj = "Merhaba") {
  console.log(mesaj + ", " + isim);
}

selamla("Ahmet");                // Merhaba, Ahmet
selamla("Zeynep", "Selamlar");   // Selamlar, Zeynep

Bu kullanımda hem sıralama doğru hem de varsayılan değer düzgün şekilde devreye girer.

Birden Fazla Varsayılan Parametre Kullanmak

Fonksiyonlarda birden fazla parametreye varsayılan değer atayabiliriz. Örneğin:

jsx
function bildirimGonder(kime = "kullanıcı", mesaj = "Yeni bildiriminiz var", onemDerecesi = "!") {
  console.log(kime + ": " + mesaj + onemDerecesi);
}

Çağırma örnekleri:

jsx
bildirimGonder();                                      // kullanıcı: Yeni bildiriminiz var!
bildirimGonder("Mehmet");                              // Mehmet: Yeni bildiriminiz var!
bildirimGonder("Ayşe", "Dersin başladı");              // Ayşe: Dersin başladı!
bildirimGonder("Ali", "Mesajın var", "!!!");           // Ali: Mesajın var!!!

Bu şekilde kullanıcı isterse detaylı bilgi verebilir, istemezse de fonksiyon kendi içinde mantıklı değerlerle çalışmaya devam eder.

Sonuç

Varsayılan parametreler, JavaScript’te fonksiyonlarımızı daha güvenli, okunabilir ve kullanıcı dostu hale getirmemize yardımcı olur. ES6 ile gelen bu özellik sayesinde artık ekstra kontroller yazmaya gerek kalmadan, fonksiyonlarımızın içinde her parametre için hazır değerler belirleyebiliyoruz.

Özellikle:

  • Kullanıcıdan veri alırken,
  • Fonksiyonların esnekliğini artırmak isterken,
  • Kodun daha temiz görünmesini sağlamak için,

default parameters özelliği modern JavaScript yazımında çok önemli bir yer tutar.

Kod yazarken mutlaka bu özelliği kullanın, hem daha az hata yaparsınız hem de başkaları kodunuzu daha rahat okur.

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