JavaScript Fonksiyonlar

JavaScript Fonksiyonlar, belirli bir görevi gerçekleştirmek için yazılan kod bloklarıdır. Fonksiyonları kullanmamızın bize sağlamış olduğu birçok avantaj bulunuyor.

Örneğin yazmış olduğumuz bir fonksiyonu defalarca kullanabiliriz. Bir fonksiyona farklı farklı parametreler vererek sürekli farklı sonuçlar elde edebiliriz. Böylece hem zamandan tasarruf etmiş oluruz hem de kod tekrarının önüne geçerek temiz bir kod yazmış oluruz.

Şimdi JavaScript de fonksiyonların nasıl kullanıldığına bakalım.

⇒ İlk olarak function anahtar kelimesini yazıyoruz.

⇒ Sonra fonsiyona istediğimiz bir isim veriyoruz. Fonksiyon isimleri harf, rakam, alt çizgi (_) ve dolar işareti ($) içerebilir.

⇒ Sonra parantezler içerisinde fonksiyonun alacağı parametreleri aralarına virgül (,) koyarak yazıyoruz.

⇒ Fonksiyon tarafından çalıştırılacak kodları ise süslü parantezler arasına yazıyoruz.

Sonuç olarak JavaScript fonksiyonlar şu şekilde tanımlanıyor.

<script>
function fonksiyon_Adi(parameter1, parameter2, parameter3) {
// Çalıştırılacak kodlar buraya yazılır
return geriye_dondurulecek_deger;
}
</script>

function fonksiyon_Adi(parameter1, parameter2, parameter3) {

// Çalıştırılacak kodlar buraya yazılır

return geriye_dondurulecek_deger;

}

</script>

Yazmış olduğumuz fonksiyonun geriye bir değer döndürmesini istiyorsak bunu return anahtar kelimesi ile yapabiliyoruz.

İlgili fonksiyon içerisindeki kodlar çalıştırılırken return ifadesine gelindiğinde kodların çalıştırılması durdurulur ve geriye bir değer döndürülür.

Fonksiyonların tanımlanması bu şekilde. Şimdi de tanımlamış olduğumuz bu fonksiyonları nasıl çağırabileceğimize bakalım.

JavaScript de fonksiyonları şu şekilde çağırıyoruz.

⇒ İlk olarak fonksiyonun adını yazıyoruz.

⇒ Sonrasında fonksiyonumuz parametre alan bir fonksiyon ise parantezler içerisinde gerekli tüm parametreleri yazıyoruz.

Fonksiyonların tanımlanmasını, geriye bir değer döndürülmesini ve oluşturulan fonksiyonun çağrılmasını küçük bir örnek üzerinde görelim.

Verilen iki sayının ortalamasını hesaplayan fonksiyonu yazıp sonrasında bu fonksiyonu çağırarak sonucu console ekranına yazdıralım.

<script>
function myFunction(sayi1, sayi2) { 
return (sayi1 + sayi2) / 2; 
} 
var ortalama = myFunction(12, 4);
console.log(ortalama);
</script>

function myFunction(sayi1, sayi2) {

return (sayi1 + sayi2) / 2;

}

var ortalama = myFunction(12, 4);

console.log(ortalama);

</script>

Çıktısı : 8

Çünkü;

sayi1 parametresinin değeri 12
sayi2 parametresinin değeri 4
Fonksiyonu çağırdığımızda, bize geri dönüş değeri olarak (12 + 4) / 2 işleminin sonucunu yani 8 değerini verecektir.
Bu 8 değerini ortalama değişkenine atıyoruz.
Son olarak ortalama değişkeninin değerini console ekranına yazdırıyoruz.

Önemli : Fonksiyon blokları içerisinde tanımlanan değişkenler yerel değişkenler gibi davranır. Yerel değişkenlere sadece fonksiyon içerisinden erişilebilir.

<script>
// adi değişkenine buradan ulaşamayız
function myFunction() {
var adi = "Mehsatek";
// adi değişkenine sadece buradan yani fonksiyon içerisinden ulaşabiliriz
}
// adi değişkenine buradan ulaşamayız
</script>

// adi değişkenine buradan ulaşamayız

function myFunction() {

var adi = "Mehsatek";

// adi değişkenine sadece buradan yani fonksiyon içerisinden ulaşabiliriz

}

// adi değişkenine buradan ulaşamayız

</script>

Konunun daha iyi anlaşılması adına bir örnek üzerinde daha göstermek istiyorum.

Şu şekilde kodlarımız olsun.

<script>
var sayi = 5;
function myFunction (){
var sayi = 10;
console.log(sayi);
}
myFunction();
console.log(sayi);
</script>

var sayi = 5;

function myFunction (){

var sayi = 10;

console.log(sayi);

}

myFunction();

console.log(sayi);

</script>

Çıktısı : 10 ve 5 olacaktır. Şimdi bunun nedenleri üzerinde biraz konuşalım.

var sayi = 5;

var sayi = 5;

Yukarıdaki kod ile sayi değişkenine 5 değerini atamış oluyoruz.

function myFunction (){ 
var sayi = 10; 
console.log(sayi); 
} 
myFunction();

function myFunction (){

var sayi = 10;

console.log(sayi);

}

myFunction();

Yukarıdaki kod ile sayi değişkenine 10 değerini atayıp bu değeri console ekranına yazdırıyoruz. Şuan fonksiyon içerisinde olduğumuz için 5 değil 10 değeri console ekranına yazdırılacaktır. Çünkü sayi değişkeni burada yerel bir değişken gibi davranacaktır.

console.log(sayi);

console.log(sayi);

Son satırda yazmış olduğumuz bu kod ile de console ekranına 5 değerini yazdırıyoruz. Çünkü artık fonksiyon bloğu içerisinde değiliz. Bu yüzden ilk atadığımız 5 değeri etkin olacaktır.

Umarım “JavaScript Fonksiyonlar” yazım sizin için faydalı olmuştur.

Şu yazılar da ilginizi çekebilir.

JavaScript Sonuçlarını Yazdırma Yöntemleri (Alert, Console.log vb..)

Yeni bir yazımda görüşmek üzere.

Kaynaklar : w3schools.com

JavaScript Fonksiyonlar – Fonksiyon Tanımlama ve Kullanımı

JavaScript Fonksiyonlar

Yazar Hakkında

Yorum Yazın

JavaScript Fonksiyonlar

Benzer Yazılar

Yazar Hakkında

Yorum Yazın