9 JavaScript Fonksiyon Tipi: Ba\u015flang\u0131\u00e7 Seviyesinden \u0130leri D\u00fczeye<\/p>\n
JavaScript ile web geli\u015ftirmeye yeni ba\u015flayanlar i\u00e7in fonksiyonlar, programlaman\u0131n olmazsa olmaz yap\u0131 ta\u015flar\u0131ndan biridir. Ancak, farkl\u0131 fonksiyon t\u00fcrlerini anlamak ve bunlar\u0131 do\u011fru ba\u011flamda kullanmak, kodun okunabilirli\u011fini, s\u00fcrd\u00fcr\u00fclebilirli\u011fini ve performans\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde etkiler. Bu makalede, dokuz temel JavaScript fonksiyon t\u00fcr\u00fcn\u00fc ad\u0131m ad\u0131m ele alaca\u011f\u0131z ve ger\u00e7ek d\u00fcnya senaryolar\u0131yla peki\u015ftirece\u011fiz. Bu rehber, yeni ba\u015flayanlardan deneyimli geli\u015ftiricilere kadar herkese fayda sa\u011flayacak \u015fekilde tasarlanm\u0131\u015ft\u0131r.<\/p>\n
Fonksiyonlar, belirli bir g\u00f6revi yerine getiren kod bloklar\u0131d\u0131r. Temel olarak, belirli bir i\u015fi yapmak i\u00e7in bir araya getirilmi\u015f komut dizileridir. JavaScript’te fonksiyonlar, tekrar kullan\u0131labilir kod par\u00e7ac\u0131klar\u0131 sa\u011flayarak kodun daha d\u00fczenli, okunabilir ve y\u00f6netilebilir olmas\u0131n\u0131 sa\u011flar. Bir fonksiyonu tan\u0131mlaman\u0131n birka\u00e7 farkl\u0131 yolu vard\u0131r:<\/p>\n
Fonksiyon Bildirimi (Function Declaration):<\/strong><\/p>\n <\/code><\/p>\n Fonksiyon \u0130fadesi (Function Expression):<\/strong><\/p>\n <\/code><\/p>\n Ok Fonksiyonlar\u0131 (Arrow Functions):<\/strong> ES6 ile gelen ok fonksiyonlar\u0131, daha \u00f6zl\u00fc bir fonksiyon tan\u0131mlama y\u00f6ntemidir:<\/p>\n <\/code><\/p>\n Bu \u00fc\u00e7 y\u00f6ntem de ayn\u0131 sonucu \u00fcretir, ancak kullan\u0131m alanlar\u0131na g\u00f6re tercih edilebilirler. Fonksiyon bildirimleri hoisting \u00f6zelli\u011fine sahiptir (yani, kodun neresinde tan\u0131mlan\u0131rsa tan\u0131mlans\u0131n, kodun ba\u015f\u0131nda tan\u0131mlanm\u0131\u015f gibi davran\u0131rlar), fonksiyon ifadeleri ise de\u011fi\u015fken atama gibi davran\u0131r.<\/p>\n Fonksiyonlar, parametre al\u0131p almad\u0131klar\u0131na g\u00f6re s\u0131n\u0131fland\u0131r\u0131labilir. Parametresiz fonksiyonlar<\/strong>, herhangi bir girdi almadan \u00e7al\u0131\u015f\u0131rlar. \u00d6rne\u011fin, \u015fu fonksiyon her \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda ayn\u0131 i\u015fi yapar:<\/p>\n <\/code><\/p>\n Parametreli fonksiyonlar<\/strong> ise, \u00e7al\u0131\u015fmalar\u0131 i\u00e7in girdi olarak parametreler al\u0131rlar. Bu, fonksiyonun daha esnek ve tekrar kullan\u0131labilir olmas\u0131n\u0131 sa\u011flar. \u00d6rne\u011fin, yukar\u0131daki Parametresiz fonksiyonlar, her zaman ayn\u0131 g\u00f6revi yerine getirecek basit i\u015flemler i\u00e7in uygundur. Parametreli fonksiyonlar ise daha dinamik ve karma\u015f\u0131k i\u015flemler i\u00e7in tercih edilmelidir. \u00d6rne\u011fin, bir hesap makinesi uygulamas\u0131 i\u00e7in, toplama, \u00e7\u0131karma, \u00e7arpma ve b\u00f6lme i\u015flemlerini yapan parametreli fonksiyonlar kullanmak daha mant\u0131kl\u0131d\u0131r.<\/p>\n Fonksiyonlar, i\u015flemlerinin sonucunu geri d\u00f6nd\u00fcrebilir veya d\u00f6nd\u00fcrmeyebilirler. Geri d\u00f6n\u00fc\u015f de\u011feri olmayan fonksiyonlar, genellikle bir yan etkiye sahiptirler (\u00f6rne\u011fin, ekrana bir mesaj yazd\u0131rmak veya bir dosyaya veri yazmak). Geri d\u00f6n\u00fc\u015f de\u011feri olan fonksiyonlar ise, i\u015flemlerinin sonucunu \u00e7a\u011f\u0131r\u0131ld\u0131\u011f\u0131 yere geri d\u00f6nd\u00fcr\u00fcrler. Bu de\u011fer, ba\u015fka bir fonksiyonun girdisi olarak veya bir de\u011fi\u015fkene atanarak kullan\u0131labilir.<\/p>\n <\/code><\/p>\n Geri d\u00f6n\u00fc\u015f de\u011feri olan fonksiyonlar, kodun ak\u0131\u015f\u0131n\u0131 kontrol etmek ve mod\u00fclerli\u011fi art\u0131rmak i\u00e7in \u00f6nemlidir. \u00d6rne\u011fin, bir form do\u011frulama fonksiyonu, do\u011frulama sonucunu (true veya false) geri d\u00f6nd\u00fcrerek, formun g\u00f6nderilip g\u00f6nderilmeyece\u011fine karar vermeye olanak tan\u0131r.<\/p>\n Recursive fonksiyonlar, kendi kendini \u00e7a\u011f\u0131ran fonksiyonlard\u0131r. Bu, belirli algoritmalar\u0131n (\u00f6rne\u011fin, fakt\u00f6riyel hesaplama, Fibonacci dizisi olu\u015fturma) daha \u00f6zl\u00fc bir \u015fekilde ifade edilmesini sa\u011flar. Ancak, recursive fonksiyonlar dikkatli kullan\u0131lmal\u0131d\u0131r, \u00e7\u00fcnk\u00fc sonsuz d\u00f6ng\u00fclere neden olabilirler. Bir recursive fonksiyonun, her \u00e7a\u011fr\u0131da problemi daha k\u00fc\u00e7\u00fck bir alt probleme indirgemesi ve bir durdurma ko\u015fuluna sahip olmas\u0131 gerekir.<\/p>\n <\/code><\/p>\n Bu \u00f6rnekte, Anl\u0131k fonksiyonlar (Immediately Invoked Function Expressions - IIFE), tan\u0131mland\u0131klar\u0131 anda hemen \u00e7al\u0131\u015ft\u0131r\u0131lan fonksiyonlard\u0131r. Bu, global de\u011fi\u015fken kirlili\u011fini \u00f6nlemek ve kodun farkl\u0131 b\u00f6l\u00fcmlerini birbirinden izole etmek i\u00e7in kullan\u0131l\u0131r. IIFE'ler genellikle, belirli bir g\u00f6rev i\u00e7in ge\u00e7ici de\u011fi\u015fkenler olu\u015fturmak ve bu de\u011fi\u015fkenlerin global kapsamda g\u00f6r\u00fcnmesini engellemek i\u00e7in kullan\u0131l\u0131r. Ayr\u0131ca, namespace olu\u015fturmak i\u00e7in de kullan\u0131labilirler.<\/p>\n <\/code><\/p>\n Bu \u00f6rnekte, IIFE i\u00e7inde tan\u0131mlanan Y\u00fcksek dereceli fonksiyonlar (Higher-Order Functions), fonksiyonlar\u0131 parametre olarak alan veya fonksiyonlar\u0131 geri d\u00f6nd\u00fcren fonksiyonlard\u0131r. JavaScript'te bir\u00e7ok yerle\u015fik y\u00fcksek dereceli fonksiyon mevcuttur (\u00f6rne\u011fin, <\/code><\/p>\n Bu \u00f6rnekte, Callback fonksiyonlar, ba\u015fka bir fonksiyonun tamamlanmas\u0131ndan sonra \u00e7al\u0131\u015ft\u0131r\u0131lan fonksiyonlard\u0131r. Asenkron i\u015flemler (\u00f6rne\u011fin, a\u011f istekleri, zamanlay\u0131c\u0131lar) ile \u00e7al\u0131\u015f\u0131rken s\u0131k\u00e7a kullan\u0131l\u0131rlar. Bir callback fonksiyonu, asenkron i\u015flemin sonucunu i\u015fleme al\u0131r veya bir sonraki i\u015flemi ba\u015flat\u0131r.<\/p>\n <\/code><\/p>\n Bu \u00f6rnekte, Closure, bir fonksiyonun, kendi kapsam\u0131n\u0131n d\u0131\u015f\u0131ndaki de\u011fi\u015fkenlere eri\u015febilme \u00f6zelli\u011fidir. Bir fonksiyon, tan\u0131mland\u0131\u011f\u0131 \u00e7evredeki de\u011fi\u015fkenlere, o fonksiyonun \u00f6mr\u00fc boyunca eri\u015febilir. Bu \u00f6zellik, \u00f6zel de\u011fi\u015fkenler olu\u015fturmak ve veri gizlemeyi uygulamak i\u00e7in kullan\u0131labilir.<\/p>\n <\/code><\/p>\n Bu \u00f6rnekte, function selamla(isim) {\n console.log(\"Merhaba, \" + isim + \"!\");\n}\n\nselamla(\"Fatih\"); \/\/ \"Merhaba, Fatih!\" \u00e7\u0131kt\u0131s\u0131n\u0131 verir.<\/pre>\nconst selamla2 = function(isim) {\n console.log(\"Merhaba, \" + isim + \"!\");\n};\n\nselamla2(\"Soysal\"); \/\/ \"Merhaba, Soysal!\" \u00e7\u0131kt\u0131s\u0131n\u0131 verir.<\/pre>\nconst selamla3 = (isim) => {\n console.log(\"Merhaba, \" + isim + \"!\");\n};\n\nselamla3(\"Okuyucu\"); \/\/ \"Merhaba, Okuyucu!\" \u00e7\u0131kt\u0131s\u0131n\u0131 verir.<\/pre>\n2. Parametreli ve Parametresiz Fonksiyonlar: Hangisini Ne Zaman Kullanmal\u0131y\u0131z?<\/h2>\n
function bugunTarihiYazdir() {\n console.log(new Date());\n}<\/pre>\nselamla<\/code> fonksiyonlar\u0131 parametre alarak farkl\u0131 isimleri selamlayabilir. Parametrelerin say\u0131s\u0131 ve veri tipleri fonksiyonun tan\u0131m\u0131na g\u00f6re belirlenir. <\/p>\n3. Geri D\u00f6n\u00fc\u015f De\u011feri Olan ve Olmayan Fonksiyonlar: Kodun Ak\u0131\u015f\u0131n\u0131 Kontrol Etmek<\/h2>\n
function topla(a, b) {\n return a + b;\n}\n\nlet sonuc = topla(5, 3); \/\/ sonuc de\u011fi\u015fkeni 8 de\u011ferini al\u0131r.\n\nfunction ekranaYazdir(mesaj) {\n console.log(mesaj); \/\/ Geri d\u00f6n\u00fc\u015f de\u011feri yok.\n}<\/pre>\n4. Recursive Fonksiyonlar: Kendi Kendini \u00c7a\u011f\u0131ran Fonksiyonlar<\/h2>\n
function faktoriyel(n) {\n if (n === 0) {\n return 1; \/\/ Durdurma ko\u015fulu\n } else {\n return n * faktoriyel(n - 1);\n }\n}\n\nconsole.log(faktoriyel(5)); \/\/ 120 \u00e7\u0131kt\u0131s\u0131n\u0131 verir.<\/pre>\nfaktoriyel<\/code> fonksiyonu, n<\/code> de\u011feri 0 olana kadar kendi kendini \u00e7a\u011f\u0131r\u0131r. Her \u00e7a\u011fr\u0131da, n<\/code> de\u011feri 1 azalt\u0131l\u0131r ve sonu\u00e7, \u00f6nceki \u00e7a\u011fr\u0131n\u0131n sonucu ile \u00e7arp\u0131l\u0131r. Durdurma ko\u015fulu olmazsa, fonksiyon sonsuza kadar \u00e7al\u0131\u015fmaya devam eder.<\/p>\n5. Anl\u0131k Fonksiyonlar (IIFE): Kod Kaps\u00fclleme<\/h2>\n
(function() {\n let gizliDegisken = \"Bu de\u011fi\u015fken global kapsamda g\u00f6r\u00fcnmez.\";\n console.log(gizliDegisken);\n})();<\/pre>\ngizliDegisken<\/code> de\u011fi\u015fkeni, sadece IIFE i\u00e7inde ge\u00e7erlidir ve global kapsamda g\u00f6r\u00fcnmez.<\/p>\n6. Y\u00fcksek Dereceli Fonksiyonlar: Fonksiyonlar\u0131 Parametre Olarak Alan ve Geri D\u00f6nd\u00fcren Fonksiyonlar<\/h2>\n
map<\/code>, filter<\/code>, reduce<\/code>). Bu fonksiyonlar, dizi i\u015flemlerini daha \u00f6zl\u00fc ve okunabilir bir \u015fekilde yapmay\u0131 sa\u011flar. Y\u00fcksek dereceli fonksiyonlar\u0131n kullan\u0131m\u0131, kodun daha fonksiyonel ve daha temiz olmas\u0131n\u0131 sa\u011flar.<\/p>\nconst sayilar = [1, 2, 3, 4, 5];\n\nconst kareleri = sayilar.map(sayi => sayi * sayi); \/\/ map fonksiyonu, her say\u0131n\u0131n karesini hesaplar.\n\nconsole.log(kareleri); \/\/ [1, 4, 9, 16, 25] \u00e7\u0131kt\u0131s\u0131n\u0131 verir.<\/pre>\nmap<\/code> fonksiyonu, sayilar<\/code> dizisinin her eleman\u0131na bir fonksiyon uygular ve yeni bir dizi d\u00f6nd\u00fcr\u00fcr.<\/p>\n7. Callback Fonksiyonlar: Asenkron \u0130\u015flemler<\/h2>\n
function istekYap(url, callback) {\n \/\/ ... a\u011f iste\u011fi ...\n setTimeout(() => {\n const veri = { mesaj: \"\u0130stek ba\u015far\u0131l\u0131!\" };\n callback(veri);\n }, 1000); \/\/ 1 saniye sonra callback fonksiyonunu \u00e7al\u0131\u015ft\u0131r.\n}\n\nistekYap(\"\/api\/data\", (veri) => {\n console.log(veri); \/\/ { mesaj: \"\u0130stek ba\u015far\u0131l\u0131!\" } \u00e7\u0131kt\u0131s\u0131n\u0131 verir.\n});<\/pre>\nistekYap<\/code> fonksiyonu, a\u011f iste\u011fini tamamlad\u0131ktan sonra callback<\/code> fonksiyonunu \u00e7al\u0131\u015ft\u0131r\u0131r. callback<\/code> fonksiyonu, a\u011f iste\u011finin sonucunu i\u015fleme al\u0131r.<\/p>\n8. Closure Fonksiyonlar: Kapsam ve Bellek Y\u00f6netimi<\/h2>\n
function disFonksiyon() {\n let x = 10;\n function icFonksiyon() {\n console.log(x);\n }\n return icFonksiyon;\n}\n\nlet benimFonksiyonum = disFonksiyon();\nbenimFonksiyonum(); \/\/ 10 \u00e7\u0131kt\u0131s\u0131n\u0131 verir.<\/pre>\nicFonksiyon<\/code>, disFonksiyon<\/code> i\u00e7inde tan\u0131mlanm\u0131\u015ft\u0131r ve x<\/code> de\u011fi\u015fkenine eri\u015febilir. disFonksiyon<\/code> d\u00f6nd\u00fckten sonra bile, icFonksiyon<\/code>, x<\/code> de\u011fi\u015fkenine eri\u015fmeye devam eder.<\/p>\n9. A\u015f\u0131r\u0131 Y\u00fckleme (Overloading) ve Ge\u00e7i\u015f Parametreleri (Default Parameters): Fonksiyon Esnekli\u011fi<\/h2>\n