Javascript Eğitim Dersleri #014

10 Nisan 2008, Perşembe

Recursive Fonksiyon

Kendini çağıran fonksiyon anlamına gelir. İç-içe derinlikli menü sistemlerinde, forum / bulletin tarzı sistemlerde kullandığımız bir işlemdir. Obje konusu işlerken, key : value durumundan bahsetmiştik. Obje içinde duran elemanlar, key : value şeklinde bulunurlar, hatta bazen value’da bir obje olabilirdi!

  1. var myObject = {
  2.  'key' : {
  3.   'key' : {
  4.    'key' : {
  5.     'key' : "value"
  6.    }
  7.   }
  8.  }
  9. }

value’ye erişmek için;

  1. var mVal = myObject[ 'key' ][ 'key' ][ 'key' ][ 'key' ];

yapmak gerekecekti. Çünki obje içindeki value de bir obje olabiliyordu.

Şimdi iç içe derinliği olan bir ürünler listesi yapalım. Amacımız tek harkette bunu ekrana basmak.

  1. var Menu = {
  2.  'Ev Eşyaları' : {
  3.   'Beyaz Eşya' : {
  4.     'Arçelik' : ""
  5.    ,'Beko' : ""
  6.   }
  7.   ,
  8.   'Mobilya' : {
  9.    'Oturma Grubu' : {
  10.      'Bellona' : ""
  11.     ,'Çilek' : ""
  12.    }
  13.   }
  14.  }
  15.  ,
  16.  'Elektronik' : {
  17.   'Bilgisayar' : {
  18.     'HP' : ""
  19.    ,'Dell' : ""
  20.    ,'Acer' : ""
  21.   }
  22.   ,
  23.   'Televizyon' : {
  24.    'Toshiba' : {
  25.      'LCD' : ""
  26.     ,'Plazma' : ""
  27.    } 
  28.    ,
  29.    'Sony' : ""
  30.   }
  31.  }
  32. };

5.satırdaki Beko, aslında, Ev Eşyaları ana kategorisinden, Beyaz Eşya’ya ait. Eğer biz Menu[ 'Ev Eşyaları' ] istesek bize value olarak bir obje dönecek. bunun içirisinde dolaştığımız zaman; key’i Beyaz Eşya olanın value’su de yine bir obje olacak. Yani sonuçta biz, Beko’a ulaşmak için iç-içe 2-3 tane forin döngüsü yapmak zorunda kalıcaz.

İşin kötü yanı, diğer ürünlerdeki derinlik farklı olabilir. Yani birinde 3 tane forin yaparken, başka bir ürün grubu için belki 5 tane loop yapmak gerekebilir.

Bunun için Recursive işlem yapmamız gerekiyor. Böylece derinlik adedinden bağımsız işlem yapabiliriz.

  1. function print_menu( objObject , strDeep )
  2. {
  3.  for( var key in objObject )
  4.  {
  5.   document.write( '<p>' + strDeep + key + '<\/p>' );
  6.   if( typeof( objObject[ key ] ) == 'object' )
  7.   {
  8.    print_menu( objObject[ key ] , strDeep+'>>' );
  9.   }
  10.  }
  11. }
  12.  
  13. print_menu( Menu , '' );

print_menu fonksiyonuna ilk çağrılışta içinde dolaşacağımız objeyi ( Menu ) ve ilk derinliği ( '' ) parametre olarak geçeriz. Fonksiyona aşağıdaki aşamalardan geçerek çalışır:

  1. İlk key gelir. Bu : Ev Eşyalarıdır.
  2. Derinlik bilgisi olarak geçilen strDeep’in değeri boştur. ( Yani '' )
  3. <p> içine : BOŞ STRING ve Ev Eşyaları yazılır.
  4. Value’ya bakılır, o an için value : objObject[ key ] yani Menu[ 'Ev Eşyaları' ]’dan gelen değerdir.
  5. Eğer o değer bir obje ise fonksiyon kendini çağırır. 2 parametre geçmesi gerekir, ilk parametre obje olmalı yani objObject[ key ] ( Menu[ 'Ev Eşyaları' ] ), ikinci parametre olarak derinlik. O an için BOŞ olan yani '' olana ( strDeep ) >> ekliyerek geçer.
  6. Yani şuanda sakni print_menu( Menu , '' ); yerine, print_menu( Menu[ 'Ev Eşyaları' ] , '>>' ); demiş oluruz.
  7. 1.satırdaki key artık Beyaz Eşya olur.
  8. 2.satırdaki Derinlik bilgisi de >> olur.
  9. 3.satır yine <p> içine : >> ve Beyaz Eşya yazar.
  10. 4.satır aynı kontrolü yapar ve bu iş tüm key/value çifti bitene kadar sürer.

Derste yaptığımız detaylı örnek için tıklayın.