JavaScript öğrenme serüvenimizde değişkenler, operatörler, döngüler ve koşul ifadelerinden sonra en büyük sıçramayı fonksiyonlar (functions) ile yapıyoruz. Fonksiyonlar, yazılım geliştirme sürecinde kod miktarını azaltan, uygulamanızın farklı yerlerinde aynı işlemi tekrar tekrar kullanmanızı sağlayan ve kodunuzu şablonlar halinde yapılandıran harika yapı taşlarıdır.
Bu eğitim yeni başlayanlar için özel olarak hazırlanmış kapsamlı rehberimizde, fonksiyonların ne olduğunu, nasıl yazıldığını, parametre ve argüman kavramlarını, modern ok fonksiyonlarını (arrow functions) ve kapsam (scope) mantığını detaylı örneklerle pekiştirerek öğreneceğiz.
1. JavaScript’te Fonksiyon Nedir ve Nasıl Yazılır?
Programlama dünyasında temel bir kural vardır: “Kendini Tekrar Etme” (DRY – Don’t Repeat Yourself). Fonksiyonlar, belirli bir işi yapmak üzere bir araya getirilmiş ifadeler (statements), değişken bildirimleri ve döngüler grubudur. Bir fonksiyonu tanımladığınızda, onu çağırmadığınız (invoke) sürece JavaScript bu kodları çalıştırmaz.
JavaScript’te bir fonksiyon oluşturmak için function anahtar kelimesi kullanılır. İşte temel bir fonksiyonun sözdizimi (syntax):
function ismimiSoyle() {
console.log("Merhaba, JavaScript dünyasına hoş geldin!");
}
ismimiSoyle(); // Fonksiyonu bu şekilde çağırarak içindeki kodları çalıştırırız.
Yukarıdaki örnekte ismimiSoyle adında bir fonksiyon oluşturduk ve sonraki satırda parantezleri kullanarak onu çağırdık.
Fonksiyon İsimlendirme Kuralları
Kodunuzun okunabilirliğini artırmak için fonksiyonlarınıza isim verirken dikkat etmeniz gereken bazı en iyi uygulamalar (best practices) vardır:
- camelCase Kullanımı: Fonksiyon isimlerinin ilk kelimesi küçük harfle başlamalı, sonraki her yeni kelimenin ilk harfi büyük olmalıdır (örneğin:
kullaniciEkleveyasayilariTopla). - Fiil İçermesi: Fonksiyonlar eylemleri (aksiyonları) temsil ettiği için isimleri bir fiil ile başlamalıdır. Örneğin
merhabayerinemerhabaDe(sayHi) demek daha doğru bir yaklaşımdır. - Açıklayıcı Olması: İsim, fonksiyonun ne iş yaptığını net bir şekilde anlatmalıdır.
2. Parametreler ve Argümanlar (Parameters & Arguments)
Fonksiyonların en güçlü özelliklerinden biri, dışarıdan veri alabilmeleri ve bu veriye göre farklı sonuçlar üretebilmeleridir. Bu işlem parametreler (parameters) ve argümanlar (arguments) aracılığıyla sağlanır.
- Parametre: Fonksiyon tanımlanırken parantez içine yazılan değişkenlerdir ve fonksiyonun kendi içinde geçerli olan kapsamı (scope) tanımlar.
- Argüman: Fonksiyon çağrılırken parantez içine yazılıp fonksiyona gönderilen gerçek verilerdir (değerlerdir).
// x ve y burada "parametre" olarak adlandırılır
function sayilariTopla(x, y) {
console.log(x + y);
}
// 3 ve 4 burada "argüman" olarak adlandırılır
sayilariTopla(3, 4); // Çıktı: 7
sayilariTopla(12, -90); // Çıktı: -78
Gördüğünüz gibi, fonksiyonu farklı argümanlarla çağırdığımızda tamamen farklı sonuçlar elde ediyoruz, bu da fonksiyonları çok esnek ve güçlü bir yapı haline getiriyor.
Varsayılan (Default) Parametreler
Peki ya bir fonksiyona argüman göndermeyi unutursak ne olur? Çoğu programlama dilinin aksine JavaScript hata verip çökmez; bunun yerine eksik parametrelere otomatik olarak undefined değerini atar. undefined ile undefined değerini topladığınızda ise NaN (Not a Number) sonucunu alırsınız.
Modern JavaScript’te bu durumun önüne geçmek için Varsayılan Parametreler kullanabilirsiniz:
function sayilariTopla(x = 2, y = 3) {
console.log(x + y);
}
sayilariTopla(); // Çıktı: 5
sayilariTopla(10); // Çıktı: 13 (Sadece x'e 10 atandı, y varsayılan olarak 3 kaldı)
Eğer fonksiyonu hiçbir argüman olmadan çağırırsanız ( sayilariTopla() ), x değişkeni 2 ve y değişkeni 3 değerini alarak işlemi başarıyla tamamlar.
3. Değer Döndürmek (return Kullanımı)
Yeni başlayanlar genellikle fonksiyon sonuçlarını console.log() ile ekrana yazdırmanın yeterli olduğunu düşünür. Ancak gerçek bir web uygulamasında, bir fonksiyonun hesapladığı değeri alıp programın başka bir yerinde, örneğin bir veritabanı kaydında veya başka bir matematiksel işlemde kullanmanız gerekir.
Fonksiyonların asıl amacı hesapladıkları sonucu geriye göndermektir ve bu işlem return anahtar kelimesi ile yapılır. return komutu, fonksiyonun çalışmasını o noktada anında bitirir ve kendisinden sonra gelen değeri fonksiyonun çağrıldığı noktaya geri gönderir.
function carpmaIslemi(x, y) {
return x * y;
}
let sonuc = carpmaIslemi(4, 5); // Dönen değer 'sonuc' değişkenine kaydedilir
console.log(sonuc); // Çıktı: 20
4. Modern JavaScript: Ok Fonksiyonları (Arrow Functions)
ES6 (ECMAScript 2015) sürümüyle birlikte hayatımıza giren Ok Fonksiyonları (Arrow Functions), kod yazımını büyük ölçüde kısaltan ve daha okunabilir hale getiren modern bir sözdizimidir. function kelimesi yerine ok sembolü (=>) kullanılır.
Geleneksel olarak şöyle yazdığımız bir fonksiyonu:
function topla(x, y) {
return x + y;
}
Ok fonksiyonu ile tek bir satırda şu şekilde yazabiliriz:
let modernTopla = (x, y) => x + y;
Ok fonksiyonları, özellikle tek bir işlemden oluşuyorsa (tek satırsa), return kelimesini ve süslü parantezleri kullanmanızı bile gerektirmez; sonucu otomatik olarak döndürür.
5. Fonksiyonlarda Kapsam (Scope: Yerel ve Global Değişkenler)
Fonksiyonları öğrenirken ustalaşmanız gereken en kritik konulardan biri kapsam (scope) kavramıdır. Kapsam, bir değişkenin kodun hangi bölümlerinden erişilebilir olduğunu tanımlar.
- Yerel (Local) Değişkenler: Bir fonksiyonun içinde tanımlanan değişkenlerdir. Bu değişkenlere fonksiyonun dışından ulaşılamaz; fonksiyonun dışına çıkıldığında bu değişkenler bellekten silinir.
- Global Değişkenler: Fonksiyonların veya kod bloklarının tamamen dışında, dosyanın en üst seviyesinde tanımlanan değişkenlerdir. Global değişkenlere kodun her yerinden (fonksiyonların içinden bile) ulaşılabilir.
let globalDegisken = "Her yerden erişilir!"; // Global Kapsam
function kapsamTesti() {
let yerelDegisken = "Sadece fonksiyon içinden erişilir!"; // Yerel Kapsam
console.log(globalDegisken); // Başarılı şekilde çalışır
}
kapsamTesti();
console.log(yerelDegisken); // Hata fırlatır: ReferenceError: yerelDegisken is not defined
Değişkenlerinizi olabildiğince yerel kapsamda (fonksiyon içinde) tutmak, kodunuzun farklı yerlerindeki değişkenlerin birbirine karışmasını engeller ve çok daha güvenli bir yapı sunar.
6. İleri Düzey Fonksiyon Konseptleri (Anonim, IIFE ve Callback)
JavaScript fonksiyonları çok yeteneklidir ve çeşitli ileri düzey formlarda kullanılabilirler.
Anonim Fonksiyonlar (Anonymous Functions): Fonksiyonların her zaman bir isme sahip olması gerekmez. İsmi olmayan fonksiyonlara anonim fonksiyonlar denir ve genellikle bir değişkene atanarak kullanılırlar:
let gizliFonksiyon = function() {
console.log("Benim bir ismim yok, sadece bir değişkenin içindeyim.");
};
gizliFonksiyon();
Anında Çağrılan Fonksiyon İfadeleri (IIFE – Immediately Invoked Function Expression): Bazen bir fonksiyonu yazdıktan hemen sonra otomatik olarak çalışmasını isteyebilirsiniz. IIFE yapıları isimsizdir ve etrafına sarılan parantezler sayesinde tanımlandığı an kendi kendini çalıştırır.
(function () {
console.log("Tanımlandığım gibi otomatik olarak çalıştım!");
})();
Callback Fonksiyonları: JavaScript’te bir fonksiyon, tıpkı normal bir veriymiş gibi başka bir fonksiyona argüman (parametre) olarak gönderilebilir. Bu işlem bittiğinde veya belirli bir olayın ardından gönderdiğimiz bu fonksiyonun çalıştırılması işlemine “Callback” (Geri çağırma) adı verilir. Özellikle veritabanından veri çekerken veya kullanıcının bir butona tıklamasını beklerken bu yapı hayati bir önem taşır.
function anaGorev(callback) {
console.log("Ana işlem yapıldı.");
callback(); // Gönderilen fonksiyon burada çağrılıyor
}
anaGorev(function() {
console.log("Ana görevden sonra bu işlem çalıştı!");
});
Sonuç
Fonksiyonlar, karmaşık kodları tekrar kullanılabilir, test edilebilir ve temiz bloklar halinde organize etmenizi sağlayan en güçlü araçlardan biridir. İster klasik yollarla fonksiyon oluşturun, isterseniz de modern ok fonksiyonları (arrow functions) veya parametre argümanlarını ustaca kullanarak verilerinizi şekillendirin; fonksiyon mantığını iyi kavramak, profesyonel bir JavaScript geliştiricisi olma yolundaki en büyük kilometre taşıdır. Temelleri oturtmak için tarayıcınızın konsolunu açıp, parametreler alıp sonuçlar döndüren bol bol fonksiyon yazarak pratik yapmayı unutmayın!
