JavaScript'te Fonksiyon Kullanımı

function tanımlamadan, parametre kullanımına, return ifadesinden çağırmaya kadar tüm temel detaylara değiniyoruz.

Bu derse başlamak veya ilerlemenizi kaydetmek için lütfen giriş yapın veya kayıt olun.

Ders İçeriği

Giriş

Programlama yaparken, belirli bir görevi yerine getiren kod bloklarını sık sık tekrar kullanma ihtiyacı duyarız. Örneğin, iki sayıyı toplamak, bir mesajı ekrana yazdırmak veya bir kullanıcının adını formatlamak gibi. Bu tür tekrarlanan görevleri her seferinde yeniden yazmak yerine, fonksiyonlar kullanarak kodumuzu daha organize, okunabilir ve yeniden kullanılabilir hale getirebiliriz.

Fonksiyonlar, belirli bir görevi yerine getirmek üzere tasarlanmış, yeniden kullanılabilir kod bloklarıdır. Fonksiyonlar, programlarımızı daha küçük, yönetilebilir parçalara ayırmamıza yardımcı olur. Bu, kodun anlaşılmasını, test edilmesini ve bakımını kolaylaştırır.

Bu derste, JavaScript'te fonksiyonların nasıl tanımlandığını, nasıl çağrıldığını, parametrelerin ve argümanların ne olduğunu, fonksiyonların nasıl değer döndürdüğünü ve farklı fonksiyon türlerini öğreneceğiz.

Fonksiyon Tanımlama

JavaScript'te fonksiyon tanımlamanın birkaç yolu vardır. En yaygın yöntem, function anahtar kelimesini kullanmaktır.

Fonksiyon Bildirimi (Function Declaration)

Fonksiyon bildirimi, function anahtar kelimesi, ardından fonksiyonun adı, parantez içinde parametre listesi ve süslü parantezler içinde fonksiyonun gövdesi (kod bloğu) ile yapılır.

Temel sözdizimi şu şekildedir:

fonksiyon_bildirimi.js
function fonksiyonAdi(parametre1, parametre2) {
    // Fonksiyonun gövdesi: Çalıştırılacak kodlar
    // ...
    // return ifadesi (isteğe bağlı)
}
  • fonksiyonAdi: Fonksiyonu çağırmak için kullanılacak isim.
  • parametre1, parametre2: Fonksiyona dışarıdan değer aktarmak için kullanılan değişkenler (isteğe bağlı).
  • Fonksiyon Gövdesi: Fonksiyon çağrıldığında çalıştırılacak JavaScript kodları.
  • return: Fonksiyonun bir değer döndürmesini sağlar (isteğe bağlı).
fonksiyon_bildirimi_ornegi.js
// Basit bir selamlama fonksiyonu
function selamVer() {
    console.log("Merhaba Dünya!");
}

// İki sayıyı toplayan bir fonksiyon
function topla(sayi1, sayi2) {
    let sonuc = sayi1 + sayi2;
    console.log("Toplam:", sonuc);
}

Not: Fonksiyon bildirimleri, kodun herhangi bir yerinde tanımlanabilir ve tanımlandıkları yerden önce bile çağrılabilirler. Buna "hoisting" (yukarı taşıma) denir.

Fonksiyon Çağırma

Bir fonksiyonu tanımladıktan sonra, onu çalıştırmak için çağırmanız gerekir. Fonksiyon çağırma işlemi, fonksiyonun adını ve ardından parantez () kullanarak yapılır. Eğer fonksiyon parametre alıyorsa, parantez içine argümanlar (fonksiyona gönderilecek değerler) yazılır.

fonksiyon_cagirma.js
// Daha önce tanımlanan fonksiyonları çağırma

selamVer(); // "Merhaba Dünya!" çıktısını verir

topla(5, 3); // "Toplam: 8" çıktısını verir
topla(10, -2); // "Toplam: 8" çıktısını verir

Parametreler ve Argümanlar

Fonksiyonlar, dışarıdan bilgi almak için parametreleri kullanır. Parametreler, fonksiyon tanımında parantez içinde belirtilen değişkenlerdir. Fonksiyon çağrıldığında, bu parametrelere karşılık gelen değerlere argüman denir.

parametre_arguman.js
// 'isim' adında bir parametre alan fonksiyon
function kisiyeSelamVer(isim) {
    console.log("Merhaba, " + isim + "!");
}

// Fonksiyonu farklı argümanlarla çağırma
kisiyeSelamVer("Ayşe"); // isim parametresine "Ayşe" argümanı gönderilir. Çıktı: "Merhaba, Ayşe!"
kisiyeSelamVer("Mehmet"); // isim parametresine "Mehmet" argümanı gönderilir. Çıktı: "Merhaba, Mehmet!"

// 'a' ve 'b' adında iki parametre alan fonksiyon
function carp(a, b) {
    let sonuc = a * b;
    console.log(`${a} x ${b} = ${sonuc}`);
}

carp(4, 6); // a=4, b=6. Çıktı: "4 x 6 = 24"
carp(7, 2); // a=7, b=2. Çıktı: "7 x 2 = 14"

Varsayılan Parametreler (Default Parameters)

ES6 ile birlikte, bir fonksiyona argüman gönderilmediğinde parametrelerin alacağı varsayılan değerleri belirleyebilirsiniz.

varsayilan_parametre.js
// 'mesaj' parametresi için varsayılan değer belirleme
function mesajGoster(mesaj = "Varsayılan mesaj") {
    console.log(mesaj);
}

mesajGoster("Merhaba!"); // Çıktı: "Merhaba!"
mesajGoster(); // Argüman gönderilmediği için varsayılan değer kullanılır. Çıktı: "Varsayılan mesaj"

// İki parametre için varsayılan değerler
function usAl(taban, us = 2) {
    return taban ** us;
}

console.log(usAl(5)); // us parametresi gönderilmedi, varsayılan 2 kullanılır. Çıktı: 25
console.log(usAl(3, 4)); // İki argüman da gönderildi. Çıktı: 81

Rest Parametresi (...)

ES6 ile gelen rest parametresi (...), bir fonksiyona belirsiz sayıda argüman göndermenizi sağlar. Bu argümanlar bir dizi içinde toplanır.

rest_parametre.js
// Gönderilen tüm sayıları toplayan fonksiyon
function tumunuTopla(...sayilar) {
    let toplam = 0;
    for (let sayi of sayilar) {
        toplam += sayi;
    }
    return toplam;
}

console.log(tumunuTopla(1, 2, 3)); // Çıktı: 6
console.log(tumunuTopla(10, 20, 30, 40)); // Çıktı: 100
console.log(tumunuTopla(5)); // Çıktı: 5
console.log(tumunuTopla()); // Çıktı: 0

Not: Rest parametresi, fonksiyon tanımındaki son parametre olmalıdır.

return İfadesi

Fonksiyonlar sadece işlem yapmakla kalmaz, aynı zamanda bir sonuç değeri de üretebilirler. return ifadesi, bir fonksiyonun çalışmasını sonlandırır ve belirtilen değeri fonksiyonun çağrıldığı yere geri döndürür.

return_ifadesi.js
// İki sayıyı toplayıp sonucu döndüren fonksiyon
function toplaVeDondur(sayi1, sayi2) {
    let toplam = sayi1 + sayi2;
    return toplam;
    // return ifadesinden sonraki kodlar çalıştırılmaz
    console.log("Bu satır çalışmaz.");
}

// Fonksiyondan dönen değeri bir değişkene atama
let sonuc1 = toplaVeDondur(10, 5);
console.log("Sonuç 1:", sonuc1); // Çıktı: "Sonuç 1: 15"

let sonuc2 = toplaVeDondur(-3, 8);
console.log("Sonuç 2:", sonuc2); // Çıktı: "Sonuç 2: 5"

// Bir koşula göre farklı değerler döndüren fonksiyon
function yasiKontrolEt(yas) {
    if (yas >= 18) {
        return "Yetişkin";
    } else {
        return "Çocuk";
    }
}

let durum = yasiKontrolEt(25);
console.log("Durum:", durum); // Çıktı: "Durum: Yetişkin"

Eğer bir fonksiyonda return ifadesi kullanılmazsa veya return ifadesinden sonra bir değer belirtilmezse, fonksiyon varsayılan olarak undefined değerini döndürür.

return_undefined.js
function birSeyYap() {
    console.log("İşlem yapıldı.");
    // return ifadesi yok
}

let donenDeger = birSeyYap();
console.log("Dönen Değer:", donenDeger); // Çıktı: "Dönen Değer: undefined"

function bosDondur() {
    return;
}

let donenDeger2 = bosDondur();
console.log("Dönen Değer 2:", donenDeger2); // Çıktı: "Dönen Değer 2: undefined"

Fonksiyon İfadeleri (Function Expressions)

Fonksiyon tanımlamanın bir diğer yolu da fonksiyon ifadeleridir. Fonksiyon ifadesinde, bir fonksiyon oluşturulur ve bir değişkene atanır.

Temel sözdizimi şu şekildedir:

fonksiyon_ifadesi.js
let fonksiyonDegiskeni = function(parametre1, parametre2) {
    // Fonksiyonun gövdesi
    // ...
    // return ifadesi (isteğe bağlı)
};

Fonksiyon ifadeleri, fonksiyon bildirimlerinden farklı olarak "hoisting"e tabi değildir. Yani, fonksiyon ifadesini tanımlamadan önce çağıramazsınız.

fonksiyon_ifadesi_ornegi.js
// Fonksiyon ifadesi ile selamlama fonksiyonu
let selamla = function() {
    console.log("Merhaba!");
};

selamla(); // Çıktı: "Merhaba!"

// Fonksiyon ifadesi ile iki sayıyı çarpan fonksiyon
let carpma = function(a, b) {
    return a * b;
};

let carpimSonucu = carpma(6, 7);
console.log("Çarpım Sonucu:", carpimSonucu); // Çıktı: "Çarpım Sonucu: 42"

İpucu: Fonksiyon ifadeleri, özellikle bir fonksiyonu başka bir fonksiyona argüman olarak göndermek (callback fonksiyonları) veya bir nesnenin metodu olarak tanımlamak gibi durumlarda kullanışlıdır.

Ok Fonksiyonları (Arrow Functions)

ES6 ile tanıtılan ok fonksiyonları, fonksiyon ifadelerini daha kısa ve okunabilir bir şekilde yazmamızı sağlar. Özellikle basit fonksiyonlar ve callback fonksiyonları için yaygın olarak kullanılırlar.

Temel sözdizimi şu şekildedir:

ok_fonksiyonu.js
// Parametresiz ok fonksiyonu
let fonksiyon1 = () => {
    // Fonksiyon gövdesi
};

// Tek parametreli ok fonksiyonu (parantez isteğe bağlı)
let fonksiyon2 = parametre => {
    // Fonksiyon gövdesi
};

// Çok parametreli ok fonksiyonu
let fonksiyon3 = (parametre1, parametre2) => {
    // Fonksiyon gövdesi
};

// Tek satırlık ifade döndüren ok fonksiyonu (süslü parantez ve return olmadan)
let fonksiyon4 = (a, b) => a + b;
ok_fonksiyonu_ornegi.js
// Ok fonksiyonu ile selamlama
let selam = () => console.log("Merhaba Ok Fonksiyonu!");
selam(); // Çıktı: "Merhaba Ok Fonksiyonu!"

// Ok fonksiyonu ile iki sayıyı toplama
let toplaOk = (a, b) => a + b;
let toplamSonuc = toplaOk(15, 20);
console.log("Toplam Sonucu (Ok):", toplamSonuc); // Çıktı: "Toplam Sonucu (Ok): 35"

// Ok fonksiyonu ile bir sayının karesini alma
let kareAl = sayi => sayi * sayi;
let kareSonuc = kareAl(9);
console.log("Kare Sonucu:", kareSonuc); // Çıktı: "Kare Sonucu: 81"

// Dizi metodlarında ok fonksiyonu kullanımı
let sayilar = [1, 2, 3, 4, 5];
let ciftSayilar = sayilar.filter(sayi => sayi % 2 === 0);
console.log("Çift Sayılar (Ok):", ciftSayilar); // Çıktı: "Çift Sayılar (Ok): [2, 4]"

Uyarı: Ok fonksiyonlarının, geleneksel fonksiyonlardan farklı bir this bağlamı vardır. Bu konu, nesne yönelimli programlama ve this anahtar kelimesi derslerinde daha detaylı ele alınacaktır.

Hemen Çağrılan Fonksiyon İfadeleri (IIFE - Immediately Invoked Function Expressions)

IIFE, tanımlandığı anda hemen çalışan bir fonksiyon ifadesidir. Genellikle, global kapsamı kirletmemek ve değişkenleri yerel bir kapsamda tutmak için kullanılır.

Temel sözdizimi şu şekildedir:

iife.js
(function() {
    // Bu kod bloğu hemen çalıştırılır
    let yerelDegisken = "Bu değişken sadece IIFE içinde geçerli";
    console.log("IIFE çalıştı!");
    console.log(yerelDegisken);
})();

// console.log(yerelDegisken); // Hata verir, çünkü yerelDegisken dışarıdan erişilemez

// Parametreli IIFE
(function(isim) {
    console.log("Merhaba, " + isim + "! (IIFE)");
})("Ziyaretçi");

İpucu: IIFE'ler, özellikle kütüphane veya modül geliştirirken, kodunuzun diğer kodlarla çakışmasını önlemek için kullanışlıdır.

Alıştırmalar

  1. Bir sayının faktöriyelini hesaplayan bir fonksiyon yazın (örneğin, 5! = 5 * 4 * 3 * 2 * 1 = 120).
  2. Verilen bir dizideki en büyük sayıyı bulan ve döndüren bir fonksiyon yazın.
  3. Bir string'i tersine çeviren bir fonksiyon yazın (örneğin, "merhaba" -> "abahrem").
  4. Bir metindeki kelime sayısını hesaplayan bir fonksiyon yazın.
  5. İki parametre alan (bir sayı ve bir üs) ve sayının üssünü hesaplayıp döndüren bir ok fonksiyonu yazın. Üs parametresi için varsayılan değer olarak 2 belirleyin.

Bu derste JavaScript'teki fonksiyonları ve parametreleri öğrendik:

  • Fonksiyonlar: Belirli bir görevi yerine getiren, yeniden kullanılabilir kod bloklarıdır.
  • Fonksiyon Tanımlama: function anahtar kelimesi (bildirim) veya fonksiyon ifadeleri (değişkene atama) ile yapılır.
  • Fonksiyon Çağırma: Fonksiyon adı ve parantezler () ile yapılır.
  • Parametreler ve Argümanlar: Parametreler fonksiyon tanımındaki değişkenler, argümanlar ise fonksiyona gönderilen değerlerdir. Varsayılan parametreler ve rest parametresi kullanılabilir.
  • return İfadesi: Fonksiyondan bir değer döndürmek için kullanılır.
  • Fonksiyon İfadeleri: Fonksiyonların değişkenlere atanmasıdır.
  • Ok Fonksiyonları: Fonksiyon ifadelerini daha kısa yazmak için kullanılan modern bir sözdizimidir.
  • IIFE: Tanımlandığı anda hemen çalışan fonksiyon ifadeleridir.

Fonksiyonlar, JavaScript programlamanın temel yapı taşlarından biridir. Kodunuzu organize etmek, yeniden kullanılabilirliği artırmak ve daha karmaşık uygulamalar geliştirmek için fonksiyonları etkili bir şekilde kullanmak çok önemlidir.

Bir sonraki derste, fonksiyonların kapsam (scope) ve closure kavramlarını daha detaylı inceleyeceğiz.

✅ JavaScript Döngüler | En Basit ve Anlaşılır Şekilde Anlatım Kapsam (Scope) ve Closure