JavaScript – Fonksiyonlar

Fonksiyonlar tüm programalama dillerinde sürekli olarak yapmak zorunda olduğumuz işleri tek bir kere kodlayıp sonra onu her yerde çağırıp kullanma fırsatı sunar.

Bir işlemi yaptırmak için uzun uzun aynı kodları sürekli yazmak yerine sadece bir kere fonksiyon olarak tanımlayıp o fonksiyonu istediğimiz yerde kullanabilir ve işlemlerimizi çok uzun satır kodlar yazmadan tek bir satırda halledebiliriz.

JavaScript ile fonksiyon kullanımına bir kaç örnek verip bu örnekleri açıklayalım;

ilk örneğimizde basit bir hesap makinesini fonksiyon kullanarak ve kullanmayarak yapıp fonksiyon kullanımını ve mantığını görelim.

Fonksiyonsuz kod:

const sayi1 = Number(prompt(“Bir sayı giriniz”));
const sayi2 = Number(prompt(“İkinci sayıyı giriniz”));
const hesapTuru = prompt(“Hangi işlem yaptırılacak?”);
let sonuc;

if(hesapTuru == “*”)
{
sonuc = sayi1 * sayi2;
alert(“Çarpma işlemi yapıldı. Sonuç = “+ sonuc);
}
else if(hesapTuru == “+”)
{
sonuc = sayi1 + sayi2;
alert(“Toplama işlemi yapıldı. Sonuç = “+ sonuc);
}
else if(hesapTuru == “/”)
{
sonuc = sayi1 / sayi2;
alert(“Bölme işlemi yapıldı. Sonuç = “+ sonuc);
}
else if(hesapTuru == “-“)
{
sonuc = sayi1 – sayi2;
alert(“Çıkarma işlemi yapıldı. Sonuç = “+ sonuc);
}
else{
alert(“Beklenmedik bir hata meydana geldi.”);
}

Gelelim yukarıdaki kodun açıklamasına;

İlk olarak kullanıcıdan const türünde 2 adet sabit sayı aldık. Sayı aldığımızı Number() fonksiyonu ile değeri sayıya çevirdiği için kesinleştirdik. Eğer Number() fonksiyonunu kullanmasaydık toplama işlemi yaparken girilen iki sayıyı bize yanyana yazacaktı.

Yani şöyle; toplama yaparken ilk sayı 10, ikinci sayı 10 çıktısı 1010 olacak ama bizim istediğimiz 20 olması.

Hemen altında hesapTuru olarak bir sabit istedik kullanıcıdan.
hesapTuru adındaki sabitimiz kullanıcının girdiği “*”, “/”, “-“, “+” bu dört işlemden birine göre işlemi gerekli koşulları sağlayan if bloğumuza gönderiyor.

Çalışan if-else bloğu içinde bir işlem gerçekleşiyor ve sonuç çıktı olarak ekrana yazdırılıyor.

Şimdi asıl olaya gelelim… Eğer biz bu işlemleri tekrar yaptırmak istersek yukarıdaki kodları tekrar yazmamız veya kullanacağımız alana göre gerekli düzenlemeleri yapıp kopyala yapıştır yaparak kullanmamız gerekecek ve bu da onlarca satır kod demek.

Bu durumun üstesinden gelmek için yani fonksiyonu sadece bir kere kodlayıp gerekli parametreleri vererek istediğimiz sonuçları tek satır koddan alabiliriz.

Hemen yukarıdaki kodun fonksiyonlu halini ve kullanımını kodlayıp anlatalım…

ECMAScript 6 Standartlarına uygun Fonksiyonlu kod:

const deger1 = Number(prompt(“Bir sayı giriniz”));
const deger2 = Number(prompt(“İkinci sayıyı giriniz”));
const islemTuru = prompt(“Hangi işlem yaptırılacak?”);
let toplam;

const hesapMakinesi = (sayi1, sayi2, hesapTuru) =>{

if(hesapTuru == “*”)
{
sonuc = sayi1 * sayi2;
return “Çarpma işlemi yapıldı. Sonuç = “+ sonuc;
}
else if(hesapTuru == “+”)
{
sonuc = sayi1 + sayi2;
return “Toplama işlemi yapıldı. Sonuç = “+ sonuc;
}
else if(hesapTuru == “/”)
{
sonuc = sayi1 / sayi2;
return “Bölme işlemi yapıldı. Sonuç = “+ sonuc;
}
else if(hesapTuru == “-“)
{
sonuc = sayi1 – sayi2;
return “Çıkarma işlemi yapıldı. Sonuç = “+ sonuc;
}
else{
return “Beklenmedik bir hata meydana geldi.”;
}

}

alert(hesapMakinesi(deger1,deger2,islemTuru));

ES6 standartlarına uygun bir şekilde kodladığımız JavaScript fonksiyonumuzun kullanımından bahsedelim;

Burada gördüğünüz gibi ilk olarak kullanıcıdan gerekli bilgiler isteniyor ve bu bilgiler hesapMakinesi() fonksiyonuna gönderiliyor.

Burada bilgilerin sırası çok önemli eğer yukarıdaki örnekte olduğu gibi değil de şu şekilde gönderseydik;

alert(hesapMakinesi(islemTuru,deger2,deger1));

yukarıdaki şekilde verileri fonksiyona verseydik fonksiyonun en altta bulunan else bloğu çalışacaktı yani hatalı bir işlem yapmış olacaktık.

Bu kodları başka yerlerde kullanmak istiyorsak yapmamız gereken tek şey gerekli değerleri doğru bir şekilde fonksiyona göndermek.

alert(hesapMakinesi(sayi1,sayi2,YapilacakIslem)); şeklinde fonksiyonumuzu kullanabiliriz.

İncelemeniz için bir kaç örnek daha vermek istiyorum hem konsol hem de tarayıcıda çalışanlar için;

// ES6 Fonksiyon ile sayının karesi alma;

let sayi1 = prompt(“Hangi sayının karesi alınacak?”);

const kareAl = (deger) =>{
return deger * deger;
}

alert(kareAl(sayi1));

Yukarıdaki kodu google chrome veya başka bir tarayıcı konsolunda çalıştırırsanız sonucu göreceksiniz. Mesela 5 girdik bunu kendisi ile çarpıp sonucu 25 olarak yazacaktır.

// Konsolda ES6 Fonksiyon ile sayının karesi alma;

let sayi1 = 7;
const kareAlx = (deger) =>{
return deger * deger;
}

console.log(kareAlx(sayi1));

Yukarıdaki kodu visual studio code veya başka bir editörde çalıştırırsanız sonucu göreceksiniz. Mesela 7 girdik bunu kendisi ile çarpıp sonucu 49 olarak yazacaktır.

JavaScript’in alışılmış function() tanımlaması ile bir örnek yapalım;

const sayim = prompt(“Hangi sayının karesi alınacak?”);

function kareAl(deger){
return deger * deger;
}

alert(kareAl(sayim));

Yukarıdaki kod da ES6 ile değişen ama sürekli kullanılan tipik fonksiyon tanımlasıdır aynı işlemi yapar.

Kısaca fonksiyonlar bizi satırlarca kod yazmaktan ve tekrar eden kodlardan kurtarır. Yapmamız gereken fonksiyonumuza belirli değerleri gönderip içinde işlem yaptırıp tekrardan veriyi işlenmiş halde almaktır.