Bu makalemizde, daha önceden gördüğümüz fonksiyonlara, son üç makalede gördüğümüz değişken, dizi ve nesneleri parametre olarak geçmeyi ve geriye değer döndürmeyi işleyeceğiz.

Hatırlarsan, daha önceki bir makalemizde, yazdığımız kodların dev tek bir bütün olmasındansa, bunları fonksiyonlar şeklinde parçalara bölmenin hem kodların yönetilebilirliği, hem de ruh sağlımızın  sürekliliği için zorunlu olduğundan bahsetmiştik. Ancak orada gördüğümüz fonksiyonlar, örneğin ekrana belirtilen metni yazmak gibi kendilerine verilen küçük işleri yerine getiriyorlardı. Peki ya kendisine verilen iki sayının toplamını ekrana yazacak bir fonksiyon yazmak istesek, nasıl yapacağız? Buradaki "kendisine verilen iki sayı" sözü çok önemli. Bu demek oluyor ki, fonksiyonlara dışarıdan içeriye doğru değişkenlerin geçilmesi gerekiyor. Şimdi bunu nasıl yapacağımızı görelim.


İlk olarak klasik HTML belgemizi oluşturuyoruz.





<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="program.js"></script>
</head>
<body>
</body>
</html>


Ardından aşağıdaki kodlarla ve "program.js" ismiyle yeni bir dosya daha oluşturuyoruz.

"use strict";

$(document).ready(function () {

    add(2, 3);

});

function add(value1, value2) {

    $("body").append(value1 + value2);

}

Bu örneğin hazır yazılmışını çalıştırmak için buraya tıklayabilirsin. Karşına aşağıdaki gibi bir sayfanın gelmesi gerekiyor.


Öncelikle ilk fark edeceğin şey, artık değişken ve fonksiyon isimlerinde Türkçe değil İngilizce kelimeleri kullanmam olmalı. Bu konu hakkında daha önce de konuşmuştuk.

Daha önceki makalemizde, fonksiyon adından sonra gelen ve içi boş olan parantezlerden bahsetmiştim. İşte burada o iki parantez arasına "value1" ve "value2" adında iki değişken ismi yazıyoruz. Buraya istediğimiz kadar değişken ismi yazabiliriz. Yeter ki araları virgül ile ayrılmış olsun.

Ardından fonksiyonu çağırırken, yine şimdiye kadar içi boş kullandığımız parantezlerin içerisine 2 ve 3 değerlerini geçiyoruz. Bu değerler, aynı sırada, fonksiyonun beklediği parametrelere atanıyor. Yani "value1" parametresinin değeri 2, "value2" parametresinin değeri de 3 oluyor. Sonuç olarak da bu iki değeri birbiri ile toplayarak ekrana yazdırıyoruz.

Fonksiyonlara değişkenleri geçebildiğimiz gibi, dizileri de aynı şekilde geçebiliriz. Yine örnek üzerinden gidelim. "program.js" dosyamızın içeriğini aşağıdaki kodlarla değiştirelim.

"use strict";

$(document).ready(function () {

    var param = [2, 3];

    add(param);

});

function add(values) {

    $("body").append(values[0] + values[1]);

}

Bu örneğin hazır yazılmışını çalıştırmak için buraya tıklayabilirsin. Karşına aşağıdaki gibi bir sayfanın gelmesi gerekiyor.


Kodu incelersen, öncelikle "param" adında iki değer içeren bir dizi tanımladığımızı göreceksin. Ardından bu dizi fonksiyona parametre olarak geçiliyor. Her ne kadar bu örnekte tek bir dizi geçilmiş olsa da, ihtiyaç durumunda birden fazla dizi geçmemiz de mümkündür. Fonksiyon içerisinde de dizinin ilk ve ikinci elemanı toplanarak ekrana yazdırılıyor.

Bir de fonksiyonlara nesneleri geçmeyi görelim. "program.js" dosyamızın içeriğini aşağıdaki kodlarla değiştirelim.

"use strict";

$(document).ready(function () {

    var param = {
        value1: 2,
        value2: 3
    };

    add(param);

});

function add(values) {

    $("body").append(values.value1 + values.value2);

}

Bu örneğin hazır yazılmışını çalıştırmak için buraya tıklayabilirsin. Karşına aşağıdaki gibi bir sayfanın gelmesi gerekiyor.


Bu kez de "param" adında bir nesne tanımladık ve bu nesneyi fonksiyona parametre olarak geçtik. Aynı dizilerde olduğu gibi, ihtiyaç halinde burada birden fazla nesne geçmemiz de mümkündü. Fonksiyon içerisinde de nesnenin içerdiği değerlerini toplatarak ekrana yazdırdık.

Böylece fonksiyonları çağırırken, onlara parametre geçmeyi öğrendik. İhtiyaç durumunda bu üç yöntemi de birbirleri ile karıştırarak hep birlikte de kullanabiliriz.

Geriye kaldı son bir konu; fonksiyondan geriye değer dönülmesi. Şimdiye kadar yaptığımız tüm fonksiyon örneklerinde, ekrana sonucu yazmak gibi işlemleri fonksiyonun içerisinde bitiriyorduk. Oysa gerçek programlarda yazılan fonksiyonlar çoğunlukla verilen değerler üzerinde bir miktar hesaplama yaparak sonucu geri döndürmek için kullanılır. Bunun için de, fonksiyonlardan geriye nasıl değer döneceğimizi bilmemiz gerekir. Örnek üzerinden gidelim. "program.js" dosyamızın içeriğini aşağıdaki kodlarla değiştirelim.

"use strict";

$(document).ready(function () {

    var result = add(2, 3);

    $("body").append(result);

});

function add(value1, value2) {

    return value1 + value2;

}

Bu örneğin hazır yazılmışını çalıştırmak için buraya tıklayabilirsin. Karşına aşağıdaki gibi bir sayfanın gelmesi gerekiyor.


Bu örneğimiz aslında ilk örneğimize çok benziyor. Fark olarak, fonksiyon içerisinde sonucu ekrana yazdırmak yerine "return" ifadesi ile fonksiyonu çağıran yere geri döndürüyoruz. Burada da "result" değişkeni dönen değeri kapmak için hazır bekliyor. Son olarak "result" değişkeninin değerini ekrana yazdırıyoruz.

Fonksiyonlar ile alakalı anlatılabilecek halen konularımız var ama birbirine karışmaması için bundan sonrasını diğer makalelere bırakıyorum. Son olarak öğrendiklerimizi özetleyelim.
  • Fonksiyonlara dışarıdan değişken, dizi ve nesne geçilmesi mümkündür.
  • Fonksiyonu çağırım sırasında gönderilen parametreler için, fonksiyon içerisinde bekleyen parametrelere aynı sırada atama yapılır.
  • "return" ifadesi kullanılarak fonksiyonlardan geriye değişken, dizi veya nesne dönebiliriz.


Yorum Gönder

 
Top