JavaScript Fonksiyonlar

Fonksiyon tanımlamak için function tanım kullanılır.

JavaScript'te fonksiyon tanımlamak için birkaç farklı yol bulunmaktadır. İşte bunlardan bazıları:

Fonksiyon ifadesi:

function kelimesi önce yazılır, ardından fonksiyonun adı ve sonra parametrelerin yazılacağı parantez açılır ve ihtiyaç duyulan parametreler yazılır, sonrasında ise kapatılıp süslü parantez ile fonksiyon gövdesine başlanır.

function mesajGoster() { alert( 'Merhaba millet' ); } mesajGoster(); mesajGoster();

Fonksiyon, kendi dışında oluşturulmuş değişkenlere erişebilir. Örneğin:

var fonksiyonAdi = function(parametre1, parametre2) { // Fonksiyonun içeriği burada // ... return sonuc; // İsteğe bağlı olarak bir değer döndürebilir }; var topla = function(a, b) { return a + b; }; var sonuc = topla(5, 3); console.log(sonuc); // 8

Fonksiyon deklarasyonu:

function fonksiyonAdi(parametre1, parametre2) { // Fonksiyonun içeriği burada // ... return sonuc; // İsteğe bağlı olarak bir değer döndürebilir } function topla(a, b) { return a + b; } var sonuc = topla(5, 3); console.log(sonuc); // 8

Arrow (ok) fonksiyonları (ECMAScript 6 ve sonrası):

var fonksiyonAdi = (parametre1, parametre2) => { // Fonksiyonun içeriği burada // ... return sonuc; // İsteğe bağlı olarak bir değer döndürebilir }; var topla = (a, b) => a + b; var sonuc = topla(5, 3); console.log(sonuc); // 8

Bu yöntemler arasında farklar bulunsa da, genel olarak kullanım amacına ve tercihlere bağlı olarak seçilebilirler. Arrow fonksiyonları daha kısa bir sözdizimine sahiptir ve genellikle daha modern JavaScript kodlarında tercih edilir.

Callback Function

JavaScript'te bir fonksiyonun başka bir fonksiyona parametre olarak geçirilmesi ve bu fonksiyonun daha sonra çağrılmasıyla gerçekleştirilen işlem "callback fonksiyon" olarak adlandırılır. Callback fonksiyonları, özellikle asenkron işlemleri yönetmek ve kodunuzun daha okunabilir ve modüler olmasını sağlamak için yaygın olarak kullanılır.

İşte bir örnek:

// Basit bir callback fonksiyon örneği function islemYap(x, y, callback) { var sonuc = x + y; callback(sonuc); } // Callback fonksiyonu function sonucuGoster(sonuc) { console.log("İşlem sonucu: " + sonuc); } // islemYap fonksiyonunu çağırırken sonucuGoster fonksiyonunu callback olarak geçiriyoruz islemYap(3, 5, sonucuGoster); // Çıktı: İşlem sonucu: 8

Bu örnekte, islemYap fonksiyonu üç parametre alır: x, y ve callback. islemYap fonksiyonu, x ve y'yi toplar ve sonucu callback fonksiyonuna geçirir. Ardından, sonucuGoster fonksiyonunu islemYap fonksiyonuna callback olarak geçirerek kullanıcı belirli bir işlem yapıldığında ne yapılacağını belirleyebilir.

Callback fonksiyonları genellikle asenkron işlemlerde kullanılır, örneğin bir dosya okuma işlemi tamamlandığında veya bir HTTP isteği sonuçlandığında çalıştırılacak bir fonksiyon belirtmek için kullanılırlar. Bu, JavaScript'in tek bir iş parçacığı (thread) üzerinde çalıştığı bir dil olması nedeniyle, asenkron işlemleri etkili bir şekilde yönetmek için önemlidir.

Fonksiyon ifadesi ile Fonksiyon tanımının karşılaştırılması

JavaScript'te fonksiyon ifadesi ve fonksiyon deklarasyonu arasında bazı önemli farklar bulunmaktadır. İşte bu iki yaklaşımın karşılaştırması:

function topla(a, b) { return a + b; }

Fonksiyon deklarasyonları, tanımlandıkları kapsam içinde "hoisted" (kaldırılmış) olarak kabul edilir. Bu, kodun çalıştırılmasından önce tanımlanan fonksiyonların yukarı taşındığı anlamına gelir. Yani, fonksiyonu tanımlamadan önce çağırabilirsiniz.

console.log(topla(2, 3)); // Çıktı: 5 function topla(a, b) { return a + b; }

Fonksiyon İfadesi:

var topla = function(a, b) { return a + b; };

Fonksiyon ifadeleri, kodun çalıştırılmasından önce hoisted (kaldırılmış) olmaz. Yani, tanımlandığı noktadan önce çağrılamaz.

// Hata! Fonksiyon ifadesi henüz tanımlanmadı. console.log(topla(2, 3)); var topla = function(a, b) { return a + b; };

Ancak, bir değişkenin değerine atanan fonksiyon ifadesini, değişkeni tanımladıktan sonra çağırabilirsiniz.

var topla = function(a, b) { return a + b; }; console.log(topla(2, 3)); // Çıktı: 5

Kullanım Durumları:

• Fonksiyon deklarasyonları genellikle daha okunabilir ve daha erişilebilir bir kod yazmanıza olanak tanır.

• Fonksiyon ifadeleri, bir fonksiyonu bir değişken aracılığıyla başka bir fonksiyona parametre olarak geçmek veya bir nesneye özellik olarak eklemek gibi durumlar için daha uygundur.

Her iki yöntem de JavaScript'te kullanılabilir, ancak tercihler genellikle kodun bağlamına, tasarım tercihlerine ve ihtiyaca bağlı olarak değişir.

Fonksiyon ifadesi, kod yürütülürken sağ taraftaki atama işlemine geldiğinde oluşturulur. let sum = function... ifadesinden itibaren fonksiyon yaratılmış olur. Bu noktadan sonra, fonksiyon çağrılabilir veya başka bir değişkene atanabilir.

Fonksiyon tanımlama ise farklıdır.

Fonksiyon tanımlama tüm kod bloğu içerisinde kullanılabilir.

Diğer bir deyişle, JavaScript kod bloğunu çalıştırmaya hazırlandığında, önce fonksiyon tanımlamalarına bakar ve fonksiyonları yaratır. Fonksiyon tanımlamaları başlatma evresi içinde tamamlandıktan sonra, kodun geri kalan kısmı çalışmaya devam eder. Bu nedenle, bir fonksiyonun tanımı, tanımdan önce çağrılabilir.

selamVer("Adam"); // Merhaba Adam function selamVer(isim) { alert( `Merhaba, ${isim}` ); }

Fonksiyon Tanımı olan selamVer JavaScript’in hazırlanma evresinde tanımlanır. Çalıştığı zaman, bu kodun herhangi bir yerinden bu koda erişmek mümkündür.

Eğer bu bir Fonksiyon tanımı olsaydı, çalışmazdı.

selamVer("Adam"); // hata! let selamVer = function(adi) { // (*) büyü ortadan kalktı alert( `Merhaba, ${adi}` ); };

Fonksiyon tanımı kendisine ulaştığında çalışır. Yani (*)'gelmeden tanımlanmış olmalıydı ki selamVer("Adam") çalışabilsin.

Eğer bir fonksiyon tanımı kod bloğu içinde gerçekleşirse, bu fonksiyon sadece o blok içinde kullanılabilir. Blok dışında erişilemez. Bu durumda, sadece belirli bir blok içinde kullanılacak yerel bir fonksiyon oluşturmak bazen daha pratik olabilir.

Fakat bu özellik problem yaratabilir.

Örneğin, hosgeldin() fonksiyonunu yas değişkenine göre tanımlayalım. Böylece sonradan kullanılacak hale getirmiş oluruz.

let yas = 16; // yaş 16 diyelim. if (yas < 18) { merhaba(); // \ (çalışır) // | function merhaba() { // | alert("Merhaba!"); // | Fonksiyon tanımı bu blok içirisinde her yerden çağırılabilir. } // | // | merhaba(); // / (çalışır) } else { function merhaba() { // Yaş 16 olduğundan burası hiçbir zaman çalışmaz. alert("Merhabalar!"); } } // Artık if bloğunun dışında olduğumuzdan dolayı burada fonksiyon tanımlarına ulaşamayız. merhaba(); // Error: merhaba tanımlı değil.

merhaba fonksiyonunu ifin dışında da kullanılabilir kılmak için ne yapılmalıdır?

Doğru yaklaşım Fonksiyon İfadesini kullanarak if in dışına bir merhaba değişkeni yaratıp ifin içinde bunun tanımını yapmak olabilir.

Artık beklenildiği gibi çalışır:

let yas = prompt("Kaç yaşındasın?", 18); let merhaba; if (yas < 18) { merhaba = function() { alert("Merhaba!"); }; } else { merhaba = function() { alert("Merhabalar!"); }; } merhaba(); // artık çalışır.

Veya ? ile de bu fonksiyon şu şekilde yazılabilir:

let yas = prompt("Kaç yaşındasın?", 18); let merhaba = (yas < 18) ? function() { alert("Merhaba!"); } : function() { alert("Merhabalar!"); }; merhaba(); // artık çalışır.