JavaScript’teki en önemli konseptlerden biri de fonksiyonlardır. Bir fonksiyon için bir görevi gerçekleştiren ya da değer üreten, tekrar tekrar kullanılabilen bir dizi ifadelerdir diyebiliriz. Bu bölümde fonksiyonlara giriş yapıp temel kullanımını inceleyeceğiz. Her fonksiyon; fonksiyonun gerçekleştireceği işlevi tanımlayan fonksiyon gövdesi adı verilen ifadelere sahiptir.

Fonksiyon Deklarasyon (Declaration)

//fonksiyon tanımlama
function merhaba() {
  //fonksiyon gövdesi
  console.log('merhaba dunya');
}

//fonksiyon çağırma
merhaba();

2. satırda function anahtar sözcüğü ile merhaba isimli fonksiyonumuzu tanımlıyoruz. Fonksiyon tanımındaki parantezlerimiz boş ise bu fonksiyonun parametre almadığını gösterir. Süslü parantezler içerisine gelen ifade ise fonksiyonumuzun gövdesidir. Fonksiyonumuz çağrılana kadar hiçbir işlem yapmayacaktır. 8. satırda fonksiyonun adını yazıp fonksiyonumuzu çağırıyoruz. Böylece fonksiyon gövdesinde bulunan ifadeyi işleyecektir, yani konsola ‘merhaba dünya’ yazacaktır.

Geriye Değer Döndürme (return)

Bazen fonksiyonun geriye göndereceği değeri ekrana çıktı vermek yerine bir değişken ya da başka bir fonsiyonda daha sonra kullanmamız gerekebilir. Bu gibi durumlarda fonksiyon gövdesinde return ifadesini kullanırız.

function toplam(adet, birim_fiyat) {
  return adet * birim_fiyat;
}

genel_toplam = toplam(5, 7.90) + toplam(4, 8.10) + toplam(2, 2.50);
console.log(genel_toplam);

Bu örneğimizde alışveriş sepetinde 3 adet ürün olduğunu varsayalım. Bu ürünler 5 adet kalem tanesi 7.90 TL, 4 adet defter tanesi 8.10 TL ve 2 adet silgi tanesi 2.50 TL. Sepetteki ürünlerin tümünün genel toplamını hesaplayıp konsola yazdırmak istersek her bir ürün toplam tutarını return edip genel toplam hesabında kullanabiliriz.

function selamla(kimi) {
  return `merhaba ${kimi}`;
}

console.log(selamla('Cezmi')); //konsola 'merhaba Cezmi' yazar.

Yukarıdaki örneğimizde ise fonksiyonumuz bir parametre almıştır. (Fonksiyonlar her bir parametre virgülle ayrılacak şekilde birden fazla parametre alabilir.) Fonksiyon gövdesinde bu seferde return (değer dönderme) ifadesini kullandık. (Buradaki `…` (backtick) içerisinde değişken kullanımı ile ilgili bilgiye 02. Temel JavaScript – Değişkenler ve Veri Tipleri bölümünde değinmiştik tekrar bir gözatabilirsiniz.) 5. satırda da konsola çıktı verirken fonksiyon içerisine ‘Cezmi’ argümanını vererek kullanıp konsola ‘merhaba Cezmi’ yazdırdık.

Parametre ile argüman arasındaki fark: Parametre; fonksiyon tanımlarken fonksiyona verilecek değişkenleri belirtir. Argüman ise fonksiyonu çağırırken fonksiyona geçtiğiniz değerlerdir.

Fonksiyon İfadeleri (Expression)

Fonksiyonumuzu bir değişkene atayarak, bu şekilde kullanıma verilen isimdir. Genelde fonksiyon anonim (isimsiz) bir fonksiyondur.

Not: Anonim fonksiyonun ismi (tanımlayıcısı) olmadığı için bu şekilde bir fonksiyonu ancak bir değişkene atayıp çağırabiliriz.

let topla = function(sayi1, sayi2) {
  return sayi1 + sayi2;
};
toplam = topla(6, 9);
console.log(toplam); //15

Yukarıda anonim fonksiyon ile kullanılmış 2 argüman alan fonksiyon ifadesine örnek verilmiştir. Rekürsif (kendi kendini çağıran fonksiyon) kullanıma ihtiyaç duyulan yerlerde isimli bir fonksiyon kullanmamız gerekecektir. Aşağıda faktoriyel hesaplayan rekürsif bir fonksiyo ifadesi örneği verilmiştir.

let faktoriyel = function faktoriyel(n) {
  if (n <= 1)
    return 1; //n = 0 ise 0! = 1 ve n = 1 ise 1! = 1 olduğundan dolayı
  return n * faktoriyel(n - 1);
};

console.log(faktoriyel(6)); //720

Argümana Atanan Varsayılan Değer

Fonksiyon tanımında parametrelere varsayılan bir değer atanabilir. Fonksiyonu çağırırken argüman sağlanmadıysa varsayılan değer işleme alınır, şayet bir argüman olarak bir değer verilirse varsayılan yerine bu değer alınır.

function kdvHesapla(fiyat, kdv_orani = 18) {
  return fiyat * kdv_orani / 100;
}

console.log(kdvHesapla(390)); //70.2

Örneğimizde KDV oranı olarak 18 varsayılan değeri verilmiştir. Şayet KDV oranı 18’den farklı ise fonksiyonu çağırırken argüman olarak sağlanırsa bu değer kullanılır. 18’den farklı değilse bunu argüman olarak yeniden vermemize gerek yok. Varsayılan değer alacak parametreler fonksiyon tanımında sıralamada sona doğru yazılması akıllıca bir tercih olacaktır. Yukarıdaki örneği %12 kdv oranı bir ürün için kdv hesaplamamız gerekirse argüman olarak 12 vermemiz gerekecektir.

function kdvHesapla(fiyat, kdv_orani = 18) {
  return fiyat * kdv_orani / 100;
}

console.log(kdvHesapla(400, 12)); //48

Kısaca Hoisting Nedir?

Bu kelimeyi şu ana kadar kullanmadık ama hazır temel anlamda fonksiyonlardan söz ederken JavaScript’te önemli bir kavram olan hoisting (yukarı çekme) üzerine kısaca değinmemiz gerekir.

Hoisting nedir sorusunun yanıtı; deklare ettiğimiz değişken ve fonksiyonların kod çalıştırılmadan hemen önce JavaScript tarafından kapsam alanlarının üstüne taşınmasına verilen isimdir diyebiliriz. JavaScript bir fonksiyon deklare edildiğini görürse bunun deklare edildiği satırdan önce de (tabi ilgili kapsam alanı dahilinde) kullanılabileceğini farz ederek bu fonksiyon deklarasyonunu kapsan alanının en üstüne taşır.

Tanımı yaptık şimdi örneklere geçince daha iyi anlayacaksınız.

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

console.log(topla(5,7));

Örneğimizde önce topla isimli fonksiyonumuzu tanımladık sonrasında da konsola çıktı vermek için fonksiyonumuzu burada çağırdık. Konsola 5 ile 7’nin toplamı olan 12 sayısını yazdıracaktır.

console.log(topla(5,7));

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

Şimdi ise önce fonksiyonu çağırdık sonra da tanımlamasını yaptık. Burada topla fonksiyonu bulunduğu global scope (global kapsamda) içerisinde hoist (yukarı çekildi) oldu. Yine konsola 5 ile 7’nin toplamı olan 12 sayısı yazdırılacaktır.

Not: Hoisting değişkene atanan fonksiyon ifadeleri için geçerli değildir. Aşağıdaki örneğimiz referans hatası verecektir ve çalışmayacaktır.

console.log(topla(5,7));

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

Şimdilik kafanız çok karışmasın sadece yeri geldiği için değinmek istedik. İleri seviyede JavaScript konularına girince scope (kapsam alanı) ve hoisting (yukarı taşıma) kavramlarının önemini anlayacaksınız.

Bir Yorum Yaz