JavaScript Fonksiyonları Nasıl Yazılır Adım Adım Rehber

31 Ocak 2026 9 dk okuma Deniz Karay

JavaScript programlama dilinde fonksiyonlar, belirli bir işi gerçekleştirmek üzere tasarlanmış ve ihtiyaç duyulduğunda tekrar tekrar çağrılabilen kod bloklarıdır. JavaScript Fonksiyonları Nasıl Yazılır Adım Adım Rehber başlığı altında inceleyeceğimiz bu konu, kod yazma sürecini daha düzenli, okunabilir ve yönetilebilir hale getiren en temel yapı taşıdır. Bir web sayfasındaki butona tıklandığında ne olacağını belirlemekten, karmaşık matematiksel hesaplamalar yapmaya kadar her alanda fonksiyonların gücünden yararlanırız.

🎯 Bu Derste Öğrenecekleriniz

Fonksiyonların temel çalışma mantığını ve neden kullanıldığını kavrayacaksınız.
Standart bir fonksiyonun nasıl tanımlanacağını ve nasıl çağrılacağını öğreneceksiniz.
Parametreler ve argümanlar arasındaki farkı anlayarak dinamik kodlar yazabileceksiniz.
Return ifadesinin önemini ve fonksiyonlardan nasıl değer döndürüleceğini keşfedeceksiniz.
Modern JavaScript (ES6) ile gelen Arrow Function yapısını uygulayabileceksiniz.

📌 Fonksiyon Yazımına Dair Temel Bilgiler

Tanımlama: Fonksiyonlar function anahtar kelimesi ile başlar.
İsimlendirme: İşlevine uygun, anlamlı ve camelCase yapısında isimler verilmelidir.
Kapsam: Fonksiyon içinde tanımlanan değişkenler genellikle sadece o fonksiyon içinde geçerlidir.
Tekrar Kullanılabilirlik: Bir kez yazılan fonksiyon, programın farklı yerlerinde sınırsızca kullanılabilir.

İçerik göster

JavaScript Fonksiyonu Nedir ve Neden Kullanılır?

Fonksiyonlar, programlama dünyasının fabrikaları gibidir. Bir fabrikaya ham madde girer, içeride bir işlemden geçer ve dışarıya bir ürün çıkar. Fonksiyonlarda da benzer bir mantık vardır: Giriş verilerini (parametreleri) alırlar, belirli bir algoritmayı çalıştırırlar ve sonuçta bir çıktı (return) üretirler. JavaScript dünyasında her şey bir nesne olabildiği gibi, fonksiyonlar da birinci sınıf vatandaş (first-class citizens) olarak kabul edilir. Bu, fonksiyonların değişkenlere atanabileceği, başka fonksiyonlara parametre olarak gönderilebileceği anlamına gelir.

Fonksiyon kullanmanın en büyük avantajı DRY (Don’t Repeat Yourself) yani “Kendini Tekrar Etme” prensibine uymaktır. Eğer aynı kod satırlarını projenizin beş farklı yerinde kullanıyorsanız, orada bir hata yapma payınız yüksektir. Ancak bu kodları bir fonksiyon içine alırsanız, bir değişiklik yapmanız gerektiğinde sadece fonksiyonun içini güncellemeniz yeterli olacaktır. Bu durum kodun bakımını kolaylaştırır ve hata ayıklama sürecini hızlandırır.

ℹ️ Bilgi: JavaScript’te fonksiyonlar sadece kod bloklarını saklamakla kalmaz, aynı zamanda programın akışını kontrol eden mantıksal ünitelerdir.

Adım Adım Fonksiyon Tanımlama ve Çağırma

JavaScript’te bir fonksiyon oluşturmak için belirli bir sözdizimi (syntax) takip edilmelidir. En yaygın yöntem “Function Declaration” yani fonksiyon beyanıdır. Bu yöntemde önce function anahtar kelimesi yazılır, ardından fonksiyona bir isim verilir, parantez açılıp kapatılır ve son olarak süslü parantezler {} içerisine yapılacak işlemler yazılır.

📖 Örnek: Basit Bir Selamlama Fonksiyonu

Aşağıdaki örnekte, ekrana mesaj yazdıran temel bir fonksiyon yapısı görülmektedir:

function selamVer() {
console.log(“Ders Merkezi’ne Hoş Geldiniz!”);
}

selamVer(); // Fonksiyonu bu şekilde çağırıyoruz.

Yukarıdaki örnekte görüldüğü üzere, fonksiyonu sadece tanımlamak yetmez. Fonksiyonun içindeki kodların çalışması için o fonksiyonun bir noktada “çağrılması” (invoke) gerekir. Fonksiyon isminin yanına parantez ekleyerek bu işlemi gerçekleştirebiliriz. Eğer parantezleri unutursanız, fonksiyon çalışmaz; sadece fonksiyonun kendisini bir referans olarak görürsünüz.

💡 İpucu: Fonksiyon isimlerini verirken bir eylem belirtmesine dikkat edin. Örneğin; veriyiGetir(), hesapla() veya kullaniciyiKaydet() gibi isimler kodun ne yaptığını anlatır.

Parametreler ve Argümanlar: Fonksiyona Veri Gönderme

Fonksiyonların gerçek gücü, dışarıdan veri alıp bu verilere göre farklı sonuçlar üretebilmelerinden gelir. Fonksiyon tanımı sırasında parantez içine yazılan değişkenlere parametre denir. Fonksiyonu çağırırken bu parametrelere gönderdiğimiz gerçek değerlere ise argüman adı verilir.

Bir fonksiyon birden fazla parametre alabilir. Bu durumda parametreler arasına virgül konulur. Parametreler, fonksiyonun içinde yerel birer değişken gibi davranır ve sadece o fonksiyonun süslü parantezleri arasında erişilebilir durumdadır.

⚠️ Dikkat: Fonksiyonu çağırırken gönderdiğiniz argümanların sırası, fonksiyon tanımındaki parametre sırasıyla aynı olmalıdır. Aksi takdirde yanlış verilerle işlem yapabilirsiniz.

📖 Örnek: İki Sayıyı Toplayan Fonksiyon

function topla(sayi1, sayi2) {
console.log(sayi1 + sayi2);
}

topla(15, 25); // Çıktı: 40
topla(100, 200); // Çıktı: 300

Bu örnekte sayi1 ve sayi2 birer parametredir. Fonksiyonu 15 ve 25 değerleriyle çağırdığımızda, bu değerler argüman olur ve fonksiyon içerisinde işlenir. Bu sayede aynı fonksiyonu farklı sayılarla defalarca kullanabiliriz.

Geri Dönüş Değeri: ‘return’ İfadesi

Birçok durumda, bir fonksiyonun sonucunu sadece ekrana yazdırmak yetmez. Bu sonucu alıp başka bir hesaplamada kullanmak veya bir değişkene atamak isteyebiliriz. İşte bu noktada return anahtar kelimesi devreye girer. Bir fonksiyon return satırına ulaştığında çalışmayı durdurur ve belirtilen değeri fonksiyonun çağrıldığı yere geri gönderir.

Eğer bir fonksiyonda return kullanılmazsa, o fonksiyon varsayılan olarak undefined değerini döndürür. Bu, JavaScript’in en sık karşılaşılan davranışlarından biridir. Kodunuzda bir fonksiyonun sonucunu alamıyorsanız, muhtemelen return ifadesini eklemeyi unutmuşsunuzdur.

📖 Örnek: Alan Hesaplama ve Sonucu Kullanma

function alanHesapla(kenar1, kenar2) {
return kenar1 * kenar2;
}

let mutfakAlani = alanHesapla(4, 5);
console.log(“Mutfak alanı: ” + mutfakAlani + ” metrekaredir.”);

Burada alanHesapla fonksiyonu sonucu bize geri verir ve biz de bu sonucu mutfakAlani isimli değişkende saklayarak daha sonra kullanabiliriz. return ifadesinden sonra yazılan hiçbir kod satırı çalıştırılmaz, çünkü return fonksiyonun sonlandırıcı komutudur.

Özellik	Parametre	Return
Tanım	Fonksiyona giren veridir.	Fonksiyondan çıkan veridir.
Zorunluluk	İsteğe bağlıdır.	İsteğe bağlıdır (Değer lazımsa şart).
Konum	Parantez içi `()`	Süslü parantez içi `{}`

Modern JavaScript: Arrow Functions (Ok Fonksiyonları)

ES6 (2015) sürümüyle birlikte JavaScript’e daha kısa ve modern bir fonksiyon yazım şekli eklendi: Arrow Functions. Bu yapı, özellikle tek satırlık işlemler için kodu inanılmaz derecede sadeleştirir. function kelimesini kullanmak yerine bir ok işareti => kullanılır.

Arrow function’lar genellikle bir değişkene atanarak kullanılır. Eğer fonksiyon tek bir parametre alıyorsa parantezlere, tek bir satır kod içeriyorsa süslü parantezlere ve return kelimesine gerek kalmaz (çünkü tek satırda otomatik return özelliği vardır).

📖 Örnek: Arrow Function Yazımı

// Geleneksel yöntem:
const karesi = function(x) { return x * x; };

// Arrow Function yöntemi:
const karesiArrow = x => x * x;

console.log(karesiArrow(5)); // Çıktı: 25

Ok fonksiyonları sadece yazım kısalığı sağlamaz, aynı zamanda this bağlamı (context) konusunda da geleneksel fonksiyonlardan farklı davranır. İleri düzey JavaScript projelerinde ve React gibi modern kütüphanelerde arrow function kullanımı standart haline gelmiştir.

Fonksiyon Kapsamı (Scope) ve Değişkenler

JavaScript’te fonksiyon yazarken dikkat edilmesi gereken bir diğer kritik konu ise kapsamdır. Bir fonksiyonun içinde tanımlanan bir değişkene, fonksiyonun dışından erişemezsiniz. Buna “Local Scope” (Yerel Kapsam) denir. Ancak fonksiyonun dışında tanımlanan bir değişkene fonksiyonun içinden erişebilirsiniz (Global Scope).

Bu durum, değişken isimlerinin birbirine karışmasını engeller ve belleğin daha verimli kullanılmasını sağlar. Fonksiyon her çalıştığında yerel değişkenler oluşturulur ve fonksiyonun işi bittiğinde bu değişkenler bellekten silinir.

⚠️ Dikkat: Fonksiyon içinde let veya const kullanmadan bir değişken tanımlarsanız (örneğin: x = 5;), JavaScript bunu otomatik olarak global bir değişken yapar. Bu durum beklenmedik hatalara yol açabilir, her zaman değişkenlerinizi tanımlayarak kullanın.

Pratik Uygulama: Fonksiyonları Bir Arada Kullanma

Şimdiye kadar öğrendiklerimizi birleştiren bir senaryo düşünelim. Bir alışveriş sitesinde sepet toplamını hesaplayan ve vergi ekleyen bir sistem kurmak istiyoruz. Bu işlemi parçalara ayırarak fonksiyonlarla yönetebiliriz.

İlk olarak ürünlerin fiyatlarını toplayan bir fonksiyon, ardından bu toplama KDV ekleyen ikinci bir fonksiyon yazabiliriz. Bu yaklaşım kodun her parçasının tek bir sorumluluğu olmasını sağlar (Single Responsibility Principle).

📖 Örnek: KDV Hesaplama Sistemi

function toplamFiyat(fiyat, adet) {
return fiyat * adet;
}

function kdvEkle(tutar) {
return tutar * 1.20; // %20 KDV
}

let urunTutari = toplamFiyat(100, 3);
let sonFiyat = kdvEkle(urunTutari);
console.log(“Ödenecek Toplam: ” + sonFiyat); // Çıktı: 360

Bu yapıda her fonksiyon kendi işini yapar. Eğer KDV oranı değişirse sadece kdvEkle fonksiyonunu güncellememiz yeterli olacaktır. Kodun geri kalanı bu değişiklikten etkilenmez.

✏️ Kendinizi Test Edin

İsim ve soyisim parametrelerini alıp bunları birleştirerek “Merhaba İsim Soyisim” şeklinde döndüren bir fonksiyon yazın.
Bir sayının tek mi yoksa çift mi olduğunu kontrol eden ve sonucu ‘true’ veya ‘false’ olarak döndüren bir fonksiyon nasıl yazılır?
Arrow function kullanarak bir sayının küpünü alan kodu tek satırda nasıl ifade edersiniz?
Fonksiyonlarda return kullanılmadığında dönen varsayılan değer nedir?
Bir fonksiyonun içindeki değişkene fonksiyon dışından neden erişilemez?

Öğrendiklerinizi Pekiştirin

JavaScript fonksiyonlarını öğrenmek, bir dilin gramer kurallarını öğrenmek gibidir. Başlarda karmaşık gelse de pratik yaptıkça bu yapıların ne kadar mantıklı ve yardımcı olduğunu göreceksiniz. Kendi fonksiyonlarınızı yazmaya çalışırken hata yapmaktan korkmayın; konsol hataları (console errors) size en iyi öğretmenliği yapacaktır.

Bir sonraki adımda, JavaScript’teki dizi (array) metotlarını ve bu metotların içinde kullanılan “callback” fonksiyonlarını inceleyebilirsiniz. Fonksiyonlar, JavaScript’in kalbidir ve bu kalbi ne kadar iyi anlarsanız, web geliştirme yolculuğunuzda o kadar hızlı ilerlersiniz. Bol bol kod yazmayı ve farklı parametrelerle denemeler yapmayı unutmayın!

📝 Konu Özeti

Fonksiyonlar: Tekrar kullanılabilir, belirli bir görevi olan kod bloklarıdır.
Yazım: function isim(parametreler) { ... } yapısı en temel formdur.
Return: Fonksiyonun sonucunu dışarıya aktarmak ve işlemi bitirmek için kullanılır.
Parametreler: Fonksiyona dış dünyadan veri girişi yapmamızı sağlar.
Arrow Functions: Daha kısa ve modern bir fonksiyon yazım alternatifidir.
Kapsam (Scope): Değişkenlerin nerede geçerli olduğunu belirleyen sınırları ifade eder.