Fonksiyon ifadeleri

JavaScript’te fonksiyonlar, “büyülü dil yapısı” değil yalnızca özel bir değer tipidir.

Daha önceden fonksiyon tanımlama için aşağıdaki form kullanılmıştı.

function selamVer() {
  alert("Merhaba");
}

Diğer bir şekilde de fonksiyon tanımlanabilir. Bu da fonksiyon ifadesi olarak adlandırılır.

Aşağıdaki gibi görünür:

let selamVer = function() {
  alert("Merhaba");
};

Burada fonksiyon yaratıldı ve doÄŸrudan deÄŸiÅŸkene atandı, tıpkı diÄŸer dillerde olduÄŸu gibi. Fonksiyonun nasıl tanımlandığına bakmaksızın, bu fonksiyon sadece selamVer içinde saklanan bir deÄŸerdir.

Yukarıdaki kod örneklerinin anlamları aynıdır: “bir fonksiyon yarat ve bunu selamVer deÄŸiÅŸkenine ata”

Hatta yazdığımız fonksiyonu alert ile ekrana basmak da mümkündür.

function selamVer() {
  alert("Merhaba");
}

alert( selamVer ); // fonksiyonun kodunu gösterir.

Dikkat ederseniz son kodda () bulunmamaktadır. Bundan dolayı selamVer fonksiyonu çalışmayacaktır. Bazı dillerde ne zaman fonksiyonun ismini verseniz çalışır fakat JavaScript’te çalışabilmesi için () kullanmanız gerekmektedir.

JavaScript’te fonksiyonlar değer olduğundan dolayı bunlarla uğraşılabilir. Yukarıdaki kod ekrana kaynak kodunu basar.

Tabiki selamVer() diye çağırılabildiÄŸinden dolayı özel bir deÄŸerdir.

Fakat yine de değerdir. Bundan dolayı diğer değerlerle uğraşıldığı gibi bununla da aynı şekilde çalışılabilir.

Örneğin bir fonksiyon başka bir değişkene kopyalanabilir.

function selamVer() {   // (1) oluÅŸtur
  alert("Merhaba");
}

let func = selamVer;    // (2) kopyala

func(); // Merhaba     // (3) kopyası!
selamVer(); // Merhaba    //    kendisi.

Detayına bakılacak olursa:

1.(1) fonksiyon tanımlanır ve selamVer deÄŸiÅŸkenine atanır. 2. (2) bunu func deÄŸiÅŸkenine kopyalar.

Tekrardan hatırlatmak gerekirse: selamVer etrafında parantez bulunmamaktadır. EÄŸer func = selamVer() ÅŸeklinde parantez ile yazılacak olsaydı, func deÄŸiÅŸkenine atanan deÄŸer selamVer fonksiyonunun kendisi deÄŸil, bu fonksiyonun çıktısı olurdu.

3. Fonksiyon bundan sonra selamVer() ve func() ÅŸeklinde çağırılabilir.

Ayrıca ilk satır için fonksiyon ifadesi de kullanılabilirdi:

let selamVer = function() { ... };

let func = selamVer;
// ...

Her şey aynı olduğu gibi çalışırdı. Hatta neyin ne olduğu daha açık değil mi?

function selamVer() {
  // ...
}

let selamVer = function() {
  // ...
};

Geriçağrım Fonksiyonları ( Callback functions )

Fonksiyonların değer olarak paslanması ve fonksiyon ifadelerini biraz daha incelenmesi yerinde olur.

sor(soru,evet,hayir) adında 3 parametre alan bir fonksiyon yazılacak olursa:

soru

Soru cümlesi

evet

Eğer doğru ise çalışacak fonksiyon

hayir

Eğer cevap yanlış ise yapılacak fonksiyon

Fonksiyon soru sormalı, bu sorunun cevabına göre evet() veya hayir() fonksiyonları çağırılacaktır.

function sor(soru, evet, hayir) {
  if (confirm(soru)) evet()
  else hayir();
}

function tamamGoster() {
  alert("Kabul ettiniz");
}

function iptalGoster() {
  alert("Çalışmasını durdurdunuz");
}
// kullanım: tamamGoster, iptalGoster fonksiyona parametre olarak gönderilmiştir.
sor("Kabul ediyor musunuz?", tamamGoster, iptalGoster);

Daha kısa yolunu yazmadan önce söylemek gerekir ki bu tür fonksiyonlar oldukça sıkça kullanılmaktadır. Gerçek hayattaki örnekleri ile yukarıdaki arasında fark ise gerçek hayatta basit bir confirm yerine daha karmaşık olaylar için kullanılıyor olmalarıdır.

**sor fonksiyonunun argümanları callbacks veya geri çaÄŸrım fonksiyonları olarak adlandırılırlar.

Fikir fonksiyonu bizim baÅŸtan paslayıp ana fonksiyon içerisinde daha sonra duruma göre çağırılmasından kaynaklanmaktadır. ÖrneÄŸe bakarsanız tamamGoster “evet” cevabı için geri çaÄŸrım fonksiyonu’dur.

Fonksiyon İfadesi kullanarak aynı fonksiyonu daha kısa bir şekilde yazmak mümkün:

function sor(soru, evet, hayir) {
  if (confirm(soru)) evet()
  else hayir();
}

sor(
  "Kabul Ediyor musun?",
  function() { alert("Kabul ettin"); },
  function() { alert("Çalışmayı durdurdun."); }
);

Gördüğünüz gibi yukarıda fonksiyonlar doÄŸrudan sor(...) içerisinde tanımlandı. hiçbir isim kullanılmadığından dolayı. Böyle fonksiyonlara anonim veya anonymous fonksiyonlar denir. Bu fonksiyonlar sor fonksiyonu dışında ulaşılabilir deÄŸillerdir(çünkü hiçbir deÄŸiÅŸkene atanmazlar).

Bu şekilde isimsiz kullanım JavaScript içerisinde çok doğaldır. Bu JavaScript’in ruhunda var diyebiliriz.

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

Eğer Fonksiyon ifadesi ile fonksiyon tanımı arasındaki önemli farkları açıklamak gerekirse;

Yazım: Kodda neyin ne olduğunu görme.

• Fonksiyon Tanımlama: bir fonksiyon ana kod yapısında farklı bir cümle olarak tanımlanır.

  // Fonksiyon Tanımlama
  function toplam(a, b) {
    return a + b;
  }

• Fonksiyon ifadesi: bir fonksiyon ifadenin içinde veya diÄŸer bir yazım yapısı ile ifade edilir.

  Burada fonksiyon “atama ifadesinin =” sağ tarafında tanımlanmıştır.

  // Fonksiyon tanımı
  let toplam = function(a, b) {
    return a + b;
  };

Daha ince bir değişiklik ise fonksiyonun JavaScript motorunda ne zaman yaratılacağıdır.

Fonksiyon ifadesi kod çalışırken fonksiyona geldikten sonra kullanılır

Çalışma atamanın saÄŸ tarafına geçince let sum = function..., bu noktadan sonra fonksiyon artık yaratıldı. Bundan böyle ç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. Bunu bir "başlatma evresi* olarak görmek mümkündür.

Tüm Fonksiyon tanımlamaları tamamlandıktan sonra çalışmaya devam eder.

Sonuç olarak, fonksiyon tanımı ile bu tanımdan önce çağırılabilir.

Örnek verecek olursak:

selamVer("Ahmet"); // Merhaba Ahmet

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

Fonksiyon Tanımı olan selamVer JavaScript’in hazırlanma evresinde tanımlanır. Kod çalıştığında kodun her yerinden bu koda eriÅŸmek mümkündür.

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

selamVer("Ahmet"); // 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("Ahmet") çalışabilsin.

Fonksiyon tanımı eğer kod bloğunun içerisinde tanımlanırsa o bloğun içerisinde her yerde kullanılabilir. Fakat dışarıda kullanılamaz.

Bazen sadece blok içinde o blokta kullanılacak yerel bir fonksiyon yaratmak daha kolay gelebilir. 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.

Aşağıdaki kod çalışmayacaktır:

let yas = prompt("Kaç yaşındasın?", 18);

// Şarta göre fonksiyon tanımlama
if (yas < 18) {

  function merhaba() {
    alert("Merhaba!");
  }

} else {

  function merhaba() {
    alert("Merhabalar!");
  }

}

// ...sonra kullan...
merhaba(); // Hata: merhaba() tanımlı değil.

Burada hata alınmasının nedeni Fonksiyon Tanımının if..else bloÄŸu içerisinde tanımlandığından dolayı dışarıdan çağırılamamasından dolayıdır.

Diğer bir örnek:

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.

Özet

• Fonksiyonlar deÄŸerdir. Atanabilir, kopyalanabilir ve kodun herhangi bir yerinde tanımlanabilirler.
• EÄŸer tanımı ana kod içerisinde ayrı bir cümle ise buna “Fonksiyon Tanımı” denir.
• Fonksiyon tanımları kod çalıştırmadan önce iÅŸlenir. Böylece kodun her yerinden ulaşılabilir olurlar.
• Fonksiyon tanımları ise kod çalışırken bu tanıma eriÅŸirse çalışır.

Çoğu zaman Fonksiyon Tanımı metodu tercih edilmelidir. Çünkü bu şekilde fonksiyon tanımlanmadan önce fonksiyon çağrısı yapmak mümkündür. Bu kodun daha düzenli tutulmasında yardımcı olur. Ayrıca daha okunabilirdir.

Fonksiyon ifadesi sadece Fonksiyon Tanımı yetersiz kalırsa kullanılmalıdır. Bu örnek daha önce yukarıda yapılmıştı.