Javascript Callback Fonksiyon

Bu yazımızda bir çok programlama dilinde olduğu gibi javascriptte de var olan callback fonksiyonlara değineceğiz.

Fonksiyonların Çalışma Sırası

Javascript dilinde fonksiyonlar çağırıldıkları zaman çalışırlar. Yani bir fonksiyon tanımlayıp onu çağırmazsak ya da kullanmazsak o fonksiyon çalışmaz.

Aşağıdaki örneği inceleyelim.

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
function ekranaYaz(deger) {
  document.getElementById("demo").innerHTML = deger;
}
function ilk() {
  ekranaYaz("Merhaba");
}
function ikinci() {
  ekranaYaz("Güle Güle");
}
ilk();
ikinci();
</script>
</body>
</html>

Bu kodu kaydedip çalıştırdığımızda ekranda Güle güle yazacaktır. Ama nasıl olur biz ikisini de çalıştırdık. Şöyle oluyor ilk() fonksiyonumuzu çağırdık ve p etiketinin içerisine merhaba yazdık ama ardından ikinci() fonksiyonumuzu çalıştırdık ve p etiketinin içerisine Güle güle yazdık. Önceki değerin üzerine yazma işlemi yaptık bir nevi. Şimdi de fonksiyonların çağırılma sıralarını değiştirelim.

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
function ekranaYaz(deger) {
  document.getElementById("demo").innerHTML = deger;
}
function ilk() {
  ekranaYaz("Merhaba");
}
function ikinci() {
  ekranaYaz("Güle Güle");
}
ikinci();
ilk();
</script>
</body>
</html>

Burada ise kodu çalıştırırsak ekranda merhaba yazar. Umarım anlatabilmişimdir. :)

Fonksiyonların Çalışma Sırasını Kontrol Etmek

Bazı durumlarda fonksiyonların ne zaman çalışacağını belirlemek isteyebiliriz.

Bir hesaplama işlemi yapıp sonucu görüntüleyeceğimizi varsayalım.

Bir hesaplama fonksiyonu yazabilir ardından da o sonucu ekrana basmak için başka bir fonksiyon çalıştırabiliriz.

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
function ekranaYaz(deger) {
  document.getElementById("demo").innerHTML = deger;
}
function hesapla(num1, num2) {
  let toplam= num1 + num2;
  return toplam;
}
let result = hesapla(5, 5);
ekranaYaz(result);
</script>
</body>
</html>

Veya bir hesaplama fonksiyonu yazabilir ve içerisinde ekranaYaz fonksiyonunu dahil edebiliriz. Yan fonksiyonun içerisinde fonksiyon tanımlayabiliriz.

<!DOCTYPE html>
<html>
<body> 
<p id="demo"></p>
<script>
function ekranaYaz(deger) {
  document.getElementById("demo").innerHTML = deger;
}
function myCalculator(num1, num2) {
  let toplam= num1 + num2;
  ekranaYaz(toplam);
}
myCalculator(5, 5);
</script>
</body>
</html>


İlk örneğimizdeki sorun sonuca ulaşmak için 2 fonksiyon çağırmamızdır.

İkinci örnekteki sorun ise hesapla metodunun sonucunu gizleyemememizdir. İşte bu sorunu çözmek için callback fonksiyonları kullanıyoruz.

Callback Fonksiyon Nedir ?

Bir fonksiyon çalışmasını tamamladıktan sonra başka bir fonksiyonun çalışmasını sağlayan fonksiyonlara callback fonksiyon denir. Şöyle düşünün bir web sitesi yapıyorsunuz varsayın. Önce front end developerlar çalışmasını bitirir ardından back end developerlar çalışmaya başlar. Bu bir callback işlemidir.

Javascript Callback Fonksiyon Kullanımı

Callback fonksiyonlar bir fonksiyona parametre olarak gönderilirler. Ve bu parametre bir değişkendir. Bunu örnekle açıklamak daha mantıklı olacak.

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
function ekranaYaz(deger) {
  document.getElementById("demo").innerHTML = deger;
}
function hesapla(num1, num2, callback) {
  let toplam= num1 + num2;
  callback(toplam);
}
hesapla(5, 5, ekranaYaz);
</script>
</body>
</html>

Yukarıdaki örnekte hesapla metoduna 3. parametre olarak gönderdiğimiz callback metodunu ekranaYaz değişkenine göre uyarlayıp kullandık.

Unutmamamız gereken en önemli şey metoda parametre olarak callback fonksiyon gönderdiğimiz zaman parantez kullanmamalıyız.

Hangi Durumlarda Callback Fonksiyon Kullanırız ?

Yukarıdaki örnekler callback yapısını anlamanız için basitleştirilmiştir. Asenkron programlama ve promise yapılarını kullanırken callback fonksiyonların önemini daha iyi anlayacağınızı düşünüyorum. Callback fonksiyonlar genellikle uyumsuz fonksiyonlarda, bir fonksiyonun başka bir fonksiyonu beklemesi gibi durumlarda kullanılırlar.

YAZAR HAKKINDA

26 Yaşında. Araştırmayı seven, bir şeyler öğretmeye meraklı bir Bilgisayar Mühendisi

0 YORUM

Bu konuya henüz yorum yapılmamış

Yorum Yap

@COPYRIGHT KodlamakLazım Tüm Hakları Saklıdır.