Javascriptte fonksiyonlar first-class objectlerdir. Yani diğer bir deyişle fonksiyonlar object tipindedir ve tipi object olanlar gibi (String, Array, Number) kullanılabilirler. Bu yüzden fonksiyonlar değişkende saklanabilir, başka bir fonksiyona argüman olarak verilebilirler, başka bir fonksiyonun içinde oluşturulabilir yada o fonksiyonun geri dönüş değeri olabilirler.

Javascriptteki callback fonksiyonlarının çalışma mantığının altında da yukarıda bahsettiğim fonksiyonlara geri dönüş değeri olarak bu fonksiyonları verebiliyor olmamız yatar.

Callback fonksiyonları, fonksiyonel programlama olarak bilinen bir programlama paradigmasından ortaya çıkmıştır. Temel düzeyde fonksiyonel programlama da, fonksiyonların diğer fonksiyonlara argüman olarak verilmesi prensibini benimser.

Fonksiyonel programlama, -ve yine de günümüzde daha az ölçüde olsa da- eski zamanlarda; özel olarak eğitilmiş usta programcıların gizli bir tekniği olarak görülüyordu.

Neyse ki fonksiyonel programlama teknikleri açıklandı da bütün insanlık işin büyüsünü artık kolaylıkla anlayabilir hale geldi.

Fonksiyonel programlamanın temel tekniklerinden biri callback işlevidir. Aşağıda anlatacağım callback fonksiyonlarının tekniği bu kadar basit olmasına rağmen neden hala ileri seviye javascript konularında anlatılmaya devam ediyor anlamıyorum.

Callback yada High-Order Function Nedir?

Genelde high-order function olarak bilinen callback fonksiyonları başka bir fonksiyona (ki buna otherFunction diyelim) parametre olarak iletilen bir fonksiyondur. Ve callback fonksiyonu otherFunctionun içinden çağrılır. Callback fonksiyonları aslında (ortak bir sorunu çözmek için ortaya çıkan) bir patterndir ve bu nedenle callback fonksiyonları callback pattern olarak da bilinir.

Basit bir callback fonksiyonu javascript click eventine verdiğimiz bir fonksiyondan ibarettir. Örnekle açıklayalım. (Bu örneği daha basit bir mantıkla çalıştığı için jqueryde gösteriyorum)

$("#btn-1").click(function() {
  alert("Btn-1 Clicked");
});

Yukarıdaki örnekte gördüğümüz gibi click fonksiyonuna argüman olarak bir fonksiyon veririz. Ve click fonksiyonu ona gönderilen fonksiyonu çağırır(yada yürütür). Bu örnek JQueryde sıklıkla kullanılır ve insanların çoğu bunun callback fonksiyonu olduğunu bilmeden kullanmaya devam ederler.

Başka bir örnek ile gösterecek olursak;

var coders = [ "Ömer", "Mehmet Ali", "Abdullah"]

coders.forEach( function(eachName, index){
  console.log(index + "." + "eachName") // 1. Ömer 2. Mehmet Ali 3. Abdullah
})

Yukarıda yine ayni şekilde forEach fonksiyonuna nasıl fonksiyon verdiğimize dikkat edin. Şu ana kadar fonksiyonların içine verdiğimiz fonksiyonlar hep anonymous functionlardı yani isimsiz fonksiyonlar. Kendi callback fonksiyonlarımızı yazmaya başlamadan önce callbackleri iyice anladığımızdan emin olalım.

Callback fonksiyonları nasıl çalışır?

Fonksiyonları değişkenler gibi diğer fonksiyonlara aktarabilir ve bu aktardığınız fonksiyonları da bir başka fonksiyona aktarıp kullanabilirsiniz. Bir callback fonksiyonunu bir fonksiyona argüman olarak verdiğimizde yalnızca fonksiyon aktarılır. Fonksiyonlar parametrede çalıştırılmaz. Ve callback gönderdiğimiz fonksiyon callback fonksiyonuna sahip olduğu için callback işlemini istediği zaman yapabilir.

Callback fonksiyonlarının uygulanması sırasındaki temel ilkeler

Çok komplike olmayan callback fonksiyonlarını kullanırken aşina olmamız gereken bazı dikkat çekici ilkeler bulunuyor.

İsimli yada İsimsiz Fonksiyonları Callback olarak kullanın

Callbackler ilk örneğimizde (JQuery ile yazılmış olan) olduğu gibi fonksiyonun parametresinde isimsiz fonksiyon olarak tanımlanabiliyordu. Bu, callback fonksiyonlarını kullanmanın en yaygın modelidir. Diğer popüler olan yöntem isimlendirilmiş bir fonksiyon tanımlayıp bu fonksiyonun adını parametreye vermektir. Aşağıda bir örnek ile açıklayalım.

var allCoderData = [];

function logging(coderData) {
  if( typeof coderData === "string" ) {
    console.log(coderData)
  } else if (typeof coderData === "object") {
    for(var coder in coderData) {
      console.log(coder + ":" + coderData[coder])
    }
  }
}

function signCoder(backend, cb) {
  allCoderData.push(backend);
  cb(backend);
} 

signCoder({"name": "Abdullah", "speciality": "Scala"}, logging)

Callback fonksiyonlarına bulunduğu fonksiyonun parametrelerini geçirme

Callback fonksiyonu çalıştırıldığı zaman normal fonksiyon gibi davrandığından ona bulunduğu fonksiyondaki parametreleri yada fonksiyondaki değişkenleri gönderebiliriz. Üstteki örnekte de signCoder fonksiyonunda bulunan parametreyi callback fonksiyonuna gönderiyoruz. Şimdi bu örnekte hem parametre hemde global bir değişkeni callback fonksiyonumuzla iletelim.

val seniorCoder = "Mehmet Ali"

function getSeniorCoder(backend, cb) {
  allCoderData.push(backend)
  // seniorCoder isimli global değişkenimizi aşağıda `callback` fonksiyonuna veriyoruz.
  cb(seniorCoder, backend)
}

Gönderilen fonksiyonun callback fonksiyonu olduğunu kontrol etme

Parametre ile gönderilen fonksiyonları aldığımızda bunların fonksiyon tipinde olduğunu kontrol etmemiz bizim yararımıza olacaktır.

Ayrıca callback fonksiyonlarını option yapmak ilerde karşılaşacağımız bazı problemlerin önüne geçecektir. Bunun için basit bir örnek yapalım.

function getSenior(backend, callback) {
    allCoderData.push(backend);
​
    // callback parametremiz fonksiyon mu?
    if (typeof callback === "function") {
    // Emin olduğumuza göre callback fonksiyonumuzu çağırabiliriz.
        callback(options);
    }
}

Eğer callback bir fonksiyon değilse javascriptte RunTimeException hatası alırsınız.

Callbackleri anlatmaya devam edeceğim fakat konumuz anlamaya çalışmak olduğu için buraya kadar callbackleri anladığınızı düşünüyorum.

Eğer anlamadığınız bir yer var ise alt kısımdaki disqus’a yorum yapabilirsiniz.

İçerikte herhangi bir eksiklik veyahut yanlış olduğunu düşündüğünüz bir kısım var ise mail atmaktan çekinmeyin.