JavaScript’te fonksiyonlar, kodunuzun yap\u0131 ta\u015flar\u0131d\u0131r. Peki, bu yap\u0131 ta\u015flar\u0131n\u0131n ne kadar farkl\u0131 t\u00fcrleri var ve bunlar\u0131 en verimli \u015fekilde nas\u0131l kullanabilirsiniz? Gelin, JavaScript fonksiyonlar\u0131n\u0131n d\u00fcnyas\u0131na ad\u0131m atarak, kodunuzu daha anla\u015f\u0131l\u0131r, yeniden kullan\u0131labilir ve g\u00fc\u00e7l\u00fc hale getirmenin yollar\u0131n\u0131 ke\u015ffedelim.<\/p>\n
Web geli\u015ftirme d\u00fcnyas\u0131nda, \u00f6zellikle de interaktif ve dinamik kullan\u0131c\u0131 deneyimleri yaratma konusunda JavaScript’in rol\u00fc tart\u0131\u015f\u0131lamaz. Ancak bu g\u00fcc\u00fcn ard\u0131nda yatan temel mekanizmalar, yani fonksiyonlar, \u00e7o\u011fu zaman g\u00f6z ard\u0131 edilebilir. Fonksiyonlar, belirli bir g\u00f6revi yerine getiren, yeniden kullan\u0131labilir kod bloklar\u0131d\u0131r. Onlar sayesinde karma\u015f\u0131k i\u015flemleri daha k\u00fc\u00e7\u00fck, y\u00f6netilebilir par\u00e7alara ay\u0131rabilir, kod tekrar\u0131n\u0131 \u00f6nleyebilir ve programlar\u0131m\u0131z\u0131n genel yap\u0131s\u0131n\u0131 daha sa\u011flam hale getirebiliriz. Peki, bu temel yap\u0131 ta\u015flar\u0131n\u0131n ne kadar farkl\u0131 formlar\u0131 bulunuyor ve her birinin kendine \u00f6zg\u00fc avantajlar\u0131 nelerdir? Bu makalede, JavaScript’teki ba\u015fl\u0131ca fonksiyon t\u00fcrlerini derinlemesine inceleyecek, her birinin kullan\u0131m alanlar\u0131n\u0131, \u00f6rneklerini ve ger\u00e7ek d\u00fcnya senaryolar\u0131ndaki uygulamalar\u0131n\u0131 ele alaca\u011f\u0131z.<\/p>\n
Bu yolculuk boyunca, geleneksel fonksiyon tan\u0131mlamalar\u0131ndan ba\u015flay\u0131p, modern JavaScript’in getirdi\u011fi yeniliklere kadar uzanaca\u011f\u0131z. Amac\u0131m\u0131z, hem yeni ba\u015flayanlar\u0131n temel kavramlar\u0131 kolayca anlamas\u0131n\u0131 sa\u011flamak hem de deneyimli geli\u015ftiricilere fonksiyonlar\u0131 daha etkili kullanmalar\u0131 i\u00e7in yeni bak\u0131\u015f a\u00e7\u0131lar\u0131 sunmakt\u0131r. Haz\u0131rsan\u0131z, kodunuzu bir \u00fcst seviyeye ta\u015f\u0131yacak bu ser\u00fcvene ba\u015flayal\u0131m.<\/p>\n
JavaScript’te bir fonksiyon, belirli bir g\u00f6revi yerine getirmek \u00fczere tasarlanm\u0131\u015f, yeniden kullan\u0131labilir bir kod blo\u011fudur. Fonksiyonlar, programlar\u0131n\u0131z\u0131 mod\u00fcler hale getirmenin, kod tekrar\u0131n\u0131 azaltman\u0131n ve okunabilirli\u011fi art\u0131rman\u0131n temel yoludur. D\u00fc\u015f\u00fcn\u00fcn ki bir web sitesinde bir butona t\u0131kland\u0131\u011f\u0131nda bir animasyonun ba\u015flamas\u0131n\u0131 istiyorsunuz. Bu animasyonu tetikleyecek t\u00fcm ad\u0131mlar\u0131 tek bir fonksiyon i\u00e7ine koyabilirsiniz. Daha sonra bu butona her t\u0131kland\u0131\u011f\u0131nda veya ba\u015fka bir yerde ayn\u0131 animasyonu istedi\u011finizde, bu fonksiyonu tekrar tekrar \u00e7a\u011f\u0131rabilirsiniz. Bu, kodunuzu hem daha k\u0131sa hem de daha y\u00f6netilebilir hale getirir.<\/p>\n
Fonksiyonlar, parametreler alabilir ve bir de\u011fer d\u00f6nd\u00fcrebilir. Parametreler, fonksiyona d\u0131\u015far\u0131dan bilgi aktarman\u0131z\u0131 sa\u011flar. \u00d6rne\u011fin, bir toplama fonksiyonu, hangi iki say\u0131n\u0131n toplanaca\u011f\u0131n\u0131 parametre olarak alabilir. D\u00f6nd\u00fcr\u00fclen de\u011fer ise, fonksiyonun i\u015flemini tamamlad\u0131ktan sonra geri verdi\u011fi sonu\u00e7tur. Bu sayede, fonksiyonlar sadece komutlar\u0131 \u00e7al\u0131\u015ft\u0131rmakla kalmaz, ayn\u0131 zamanda hesaplamalar yaparak sonu\u00e7lar\u0131 da bize sunar.<\/p>\n
Temelde, fonksiyonlar \u00fc\u00e7 ana nedenden dolay\u0131 \u00f6nemlidir:<\/p>\n
JavaScript’in ilk zamanlar\u0131ndan beri fonksiyonlar, dilin temel bir par\u00e7as\u0131 olmu\u015ftur. Zamanla, dilin geli\u015fmesiyle birlikte fonksiyon tan\u0131mlama ve kullanma bi\u00e7imleri de \u00e7e\u015fitlenmi\u015ftir. Bu \u00e7e\u015fitlilik, geli\u015ftiricilere daha esnek ve g\u00fc\u00e7l\u00fc kodlama imkanlar\u0131 sunmaktad\u0131r. Bu nedenle, JavaScript’te etkili bir geli\u015ftirici olmak istiyorsan\u0131z, fonksiyonlar\u0131n farkl\u0131 t\u00fcrlerini ve kullan\u0131m senaryolar\u0131n\u0131 iyi anlamak kritik \u00f6neme sahiptir.<\/p>\n
JavaScript’te fonksiyon tan\u0131mlaman\u0131n en temel yollar\u0131 “Function Declaration” ve “Function Expression”d\u0131r. Bu iki y\u00f6ntem, fonksiyonlar\u0131n nas\u0131l olu\u015fturuldu\u011fu ve program ak\u0131\u015f\u0131nda nas\u0131l davrand\u0131\u011f\u0131 konusunda \u00f6nemli farkl\u0131l\u0131klar g\u00f6sterir. Fonksiyon tan\u0131mlama y\u00f6ntemini se\u00e7erken bu farkl\u0131l\u0131klar\u0131 g\u00f6z \u00f6n\u00fcnde bulundurmak, kodunuzun beklenmedik davran\u0131\u015flar sergilemesini \u00f6nleyebilir.<\/p>\n
Function Declaration:<\/strong> Bu, bir fonksiyon tan\u0131mlaman\u0131n en yayg\u0131n ve geleneksel yoludur. Anahtar kelimesi \u00d6rnek olarak, iki say\u0131y\u0131 toplayan bir fonksiyonu Function Declaration ile \u015f\u00f6yle tan\u0131mlayabiliriz:<\/p>\n Burada Function Expression:<\/strong> Bu y\u00f6ntemde ise, fonksiyon bir ifade (expression) olarak tan\u0131mlan\u0131r ve genellikle bir de\u011fi\u015fkene atan\u0131r. Fonksiyonun kendisi isimsiz olabilir (anonymous function) veya bir ad\u0131 olabilir. Function Expression’lar, Function Declaration’lar\u0131n aksine hoisting mekanizmas\u0131ndan tam olarak faydalanmazlar. Bu, fonksiyonun tan\u0131mland\u0131\u011f\u0131 yerden sonra \u00e7a\u011fr\u0131labilece\u011fi anlam\u0131na gelir. E\u011fer tan\u0131mlanmadan \u00f6nce \u00e7a\u011fr\u0131lmaya \u00e7al\u0131\u015f\u0131l\u0131rsa, bir hata (ReferenceError) ile kar\u015f\u0131la\u015f\u0131l\u0131r.<\/p>\n Ayn\u0131 toplama fonksiyonunu Function Expression ile \u015f\u00f6yle tan\u0131mlayabiliriz:<\/p>\n Bu \u00f6rnekte, isimsiz bir fonksiyon bir ES6 (ECMAScript 2015) ile birlikte JavaScript’e gelen en \u00f6nemli yeniliklerden biri Arrow Functions (Ok Fonksiyonlar\u0131) olmu\u015ftur. Ok fonksiyonlar\u0131, geleneksel fonksiyonlara g\u00f6re daha k\u0131sa bir s\u00f6z dizimine sahiptir ve baz\u0131 \u00f6nemli davran\u0131\u015f farkl\u0131l\u0131klar\u0131 sunar. Bu farkl\u0131l\u0131klar, \u00f6zellikle Ok fonksiyonlar\u0131n\u0131n en belirgin \u00f6zelli\u011fi, daha az kodla ayn\u0131 i\u015flevi yerine getirebilmesidir. Tek bir parametre alan ve basit bir ifade d\u00f6nd\u00fcren fonksiyonlar i\u00e7in s\u00fcsl\u00fc parantezlere ve Ayn\u0131 fonksiyonu ok fonksiyonu ile \u015fu \u015fekilde yazabiliriz:<\/p>\n E\u011fer fonksiyon birden fazla parametre al\u0131yorsa, parametreler parantez i\u00e7ine al\u0131n\u0131r:<\/p>\n E\u011fer fonksiyonun g\u00f6vdesi birden fazla sat\u0131rdan olu\u015fuyorsa veya yan etki yaratacak i\u015flemler i\u00e7eriyorsa, s\u00fcsl\u00fc parantezler kullan\u0131l\u0131r ve Ok fonksiyonlar\u0131n\u0131n en kritik farklar\u0131ndan biri, kendi Vaka Analizi: DOM Olay Dinleyicileri<\/strong><\/p>\n Bir butona t\u0131kland\u0131\u011f\u0131nda bir metni de\u011fi\u015ftiren bir senaryo d\u00fc\u015f\u00fcnelim. Geleneksel bir fonksiyonla bu \u015f\u00f6yle yap\u0131labilir:<\/p>\n Ancak ok fonksiyonu kullan\u0131ld\u0131\u011f\u0131nda, Bu \u00f6rnekte, ok fonksiyonu kullan\u0131ld\u0131\u011f\u0131nda Sonu\u00e7 olarak, ok fonksiyonlar\u0131 daha k\u0131sa s\u00f6z dizimi ve dinamik JavaScript’te fonksiyonlar, bir isme sahip olabilir veya isimsiz (anonim) olarak tan\u0131mlanabilir. Bu ayr\u0131m, fonksiyonlar\u0131n nas\u0131l \u00e7a\u011fr\u0131ld\u0131\u011f\u0131, nas\u0131l yeniden kullan\u0131ld\u0131\u011f\u0131 ve program ak\u0131\u015f\u0131ndaki rol\u00fc a\u00e7\u0131s\u0131ndan \u00f6nemli farkl\u0131l\u0131klar yarat\u0131r. Hangi t\u00fcr fonksiyonu se\u00e7ece\u011finiz, kodunuzun okunabilirli\u011fi, bak\u0131m\u0131 ve performans\u0131 \u00fczerinde do\u011frudan etkilidir.<\/p>\n \u0130sme Sahip Fonksiyonlar (Named Functions):<\/strong> Daha \u00f6nce g\u00f6rd\u00fc\u011f\u00fcm\u00fcz Bir \u00f6rnek:<\/p>\n Bu \u00f6rnekte, Anonim Fonksiyonlar (Anonymous Functions):<\/strong> Anonim fonksiyonlar, bir isme sahip olmayan fonksiyonlard\u0131r. Genellikle bir de\u011fi\u015fkene atan\u0131rlar (Function Expression) veya ba\u015fka bir fonksiyona arg\u00fcman olarak ge\u00e7irilirler (Callback Functions). Anonim fonksiyonlar\u0131n ana avantaj\u0131, sadece tek bir yerde kullan\u0131lacaklar\u0131 zaman kodun daha derli toplu g\u00f6r\u00fcnmesini sa\u011flamalar\u0131d\u0131r. Bir de\u011fi\u015fkene atand\u0131klar\u0131nda, o de\u011fi\u015fken arac\u0131l\u0131\u011f\u0131yla \u00e7a\u011fr\u0131labilirler.<\/p>\n \u00d6rnek:<\/p>\n Anonim fonksiyonlar\u0131n bir di\u011fer \u00f6nemli kullan\u0131m alan\u0131 ise callback fonksiyonlar\u0131d\u0131r. Callback fonksiyonlar\u0131, ba\u015fka bir fonksiyonun i\u00e7ine arg\u00fcman olarak ge\u00e7irilen ve o fonksiyon taraf\u0131ndan belirli bir olay ger\u00e7ekle\u015fti\u011finde veya belirli bir zamanda \u00e7al\u0131\u015ft\u0131r\u0131lan fonksiyonlard\u0131r.<\/p>\n Vaka Analizi: Asenkron \u0130\u015flemler ve Callbackler<\/strong><\/p>\n Web geli\u015ftirme s\u0131ras\u0131nda, sunucudan veri \u00e7ekme gibi zaman al\u0131c\u0131 i\u015flemlerle s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131r\u0131z. Bu t\u00fcr asenkron (e\u015fzamans\u0131z) i\u015flemlerde, i\u015flem tamamland\u0131\u011f\u0131nda ne yap\u0131laca\u011f\u0131n\u0131 belirtmek i\u00e7in callback fonksiyonlar\u0131 kullan\u0131l\u0131r. \u00d6rne\u011fin, bir API’den veri \u00e7ekme i\u015flemi:<\/p>\n Bu \u00f6rnekte, Hangi y\u00f6ntemi se\u00e7ece\u011finiz, fonksiyonun kullan\u0131m amac\u0131na ba\u011fl\u0131d\u0131r. Tekrar kullan\u0131lacak ve anlaml\u0131 bir g\u00f6revi yerine getirecek fonksiyonlar i\u00e7in isme sahip fonksiyonlar tercih edilmelidir. Tek seferlik kullan\u0131lacak veya ba\u015fka bir fonksiyona arg\u00fcman olarak ge\u00e7ilecek fonksiyonlar i\u00e7in ise anonim fonksiyonlar daha uygun olabilir. Ok fonksiyonlar\u0131n\u0131n yayg\u0131nla\u015fmas\u0131yla birlikte, anonim fonksiyonlar daha da k\u0131sa ve okunabilir hale gelmi\u015ftir.<\/p>\n JavaScript’te fonksiyonlar, “ilk s\u0131n\u0131f vatanda\u015flar” (first-class citizens) olarak kabul edilir. Bu, fonksiyonlar\u0131n di\u011fer herhangi bir de\u011fer gibi ele al\u0131nabilece\u011fi anlam\u0131na gelir. Yani, bir fonksiyonu bir de\u011fi\u015fkene atayabilir, ba\u015fka bir fonksiyona arg\u00fcman olarak ge\u00e7irebilir, bir fonksiyonun geri d\u00f6nd\u00fcrd\u00fc\u011f\u00fc de\u011fer olabilir ve bir dizinin veya nesnenin eleman\u0131 olarak saklanabilir. Bu yetenek, JavaScript’in esnekli\u011fini ve g\u00fcc\u00fcn\u00fc b\u00fcy\u00fck \u00f6l\u00e7\u00fcde art\u0131r\u0131r.<\/p>\n \u0130lk s\u0131n\u0131f fonksiyonlar\u0131n temel \u00f6zellikleri \u015funlard\u0131r:<\/p>\n Vaka Analizi: Y\u00fcksek Dereceli Fonksiyonlar ve Veri \u0130\u015fleme<\/strong><\/p>\n Bir dizi say\u0131 \u00fczerinde i\u015flem yapan bir senaryo d\u00fc\u015f\u00fcnelim. Belki her say\u0131n\u0131n karesini almak istiyoruz, belki her say\u0131y\u0131 ikiyle \u00e7arpmak, belki de her say\u0131y\u0131 belirli bir e\u015fi\u011fin alt\u0131na d\u00fc\u015f\u00fcrmek. Bu t\u00fcr i\u015flemleri, her seferinde ayr\u0131 bir d\u00f6ng\u00fc yazmak yerine, y\u00fcksek dereceli bir fonksiyon kullanarak daha genel ve yeniden kullan\u0131labilir hale getirebiliriz.<\/p>\n \u00d6rne\u011fin, bir dizideki her elemana belirli bir i\u015flemi uygulayan bir Bu \u00f6rnekte, \u0130lk s\u0131n\u0131f fonksiyonlar, JavaScript’in fonksiyonel programlama paradigmalar\u0131n\u0131 desteklemesini sa\u011flar. Bu da daha temiz, daha ifade edici ve daha az hataya yatk\u0131n kod yazmam\u0131za olanak tan\u0131r. Bu kavram\u0131 iyi anlamak, JavaScript’te daha yetkin bir geli\u015ftirici olman\u0131n anahtarlar\u0131ndan biridir.<\/p>\n Y\u00fcksek dereceli fonksiyonlar (Higher-Order Functions – HOF), JavaScript’in ilk s\u0131n\u0131f fonksiyonlar olma \u00f6zelli\u011finden do\u011frudan t\u00fcreyen g\u00fc\u00e7l\u00fc bir kavramd\u0131r. Temel olarak, bir fonksiyonun y\u00fcksek dereceli olabilmesi i\u00e7in iki ko\u015fuldan en az birini sa\u011flamas\u0131 gerekir:<\/p>\n Bu yetenek, kodumuzda daha y\u00fcksek bir soyutlama seviyesi olu\u015fturmam\u0131za olanak tan\u0131r. Tekrarlayan desenleri (patterns) soyutlayarak, kodumuzu daha k\u0131sa, daha okunabilir ve daha az hataya a\u00e7\u0131k hale getirebiliriz. JavaScript’in yerle\u015fik bir\u00e7ok fonksiyonu (\u00f6rne\u011fin, 1. Fonksiyonlar\u0131 Arg\u00fcman Olarak Alan Y\u00fcksek Dereceli Fonksiyonlar:<\/strong><\/p>\n Bu t\u00fcr fonksiyonlar, belirli bir g\u00f6revi yerine getirmek i\u00e7in ba\u015fka fonksiyonlardan yard\u0131m al\u0131r. En yayg\u0131n \u00f6rnekler, diziler \u00fczerinde i\u015flem yapan metodlard\u0131r.<\/p>\n Vaka Analizi: M\u00fc\u015fteri Sipari\u015flerini \u0130\u015fleme<\/strong><\/p>\n Bir e-ticaret sitesinde, tamamlanm\u0131\u015f sipari\u015flerin toplam tutar\u0131n\u0131 hesaplamak istedi\u011fimizi d\u00fc\u015f\u00fcnelim. Sipari\u015fler bir dizi i\u00e7inde saklan\u0131yor ve her sipari\u015f nesnesinin bir Burada, 2. Fonksiyon D\u00f6nd\u00fcren Y\u00fcksek Dereceli Fonksiyonlar:<\/strong><\/p>\n Bu t\u00fcr fonksiyonlar, dinamik olarak yeni fonksiyonlar olu\u015fturmak i\u00e7in kullan\u0131l\u0131r. Bu, kod tekrar\u0131n\u0131 azaltmak ve \u00f6zel mant\u0131k i\u00e7eren fonksiyonlar \u00fcretmek i\u00e7in harika bir yoldur.<\/p>\n \u00d6rne\u011fin, belirli bir \u00e7arpanla \u00e7arpan fonksiyonlar \u00fcreten bir “fabrika” fonksiyonu yazal\u0131m:<\/p>\n Bu \u00f6rnekte, Y\u00fcksek dereceli fonksiyonlar, JavaScript’in fonksiyonel programlama yeteneklerini ortaya \u00e7\u0131kar\u0131r ve kodunuzu daha mod\u00fcler, esnek ve g\u00fc\u00e7l\u00fc hale getirir. Bu kavramlar\u0131 anlamak, daha geli\u015fmi\u015f JavaScript desenlerini uygulaman\u0131za yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n Kendini \u00c7a\u011f\u0131ran Anonim Fonksiyon \u0130fadeleri (Immediately Invoked Function Expressions – IIFE), JavaScript’te yayg\u0131n olarak kullan\u0131lan bir desen olup, \u00f6zellikle kodun kapsam\u0131n\u0131 (scope) y\u00f6netmek ve de\u011fi\u015fkenlerin global kapsam\u0131 kirletmesini \u00f6nlemek i\u00e7in kullan\u0131l\u0131r. Temel olarak, bir anonim fonksiyon tan\u0131mlan\u0131r ve hemen ard\u0131ndan \u00e7a\u011fr\u0131l\u0131r.<\/p>\n Bir IIFE’nin temel yap\u0131s\u0131 \u015f\u00f6yledir:<\/p>\n Bu yap\u0131y\u0131 olu\u015fturan temel unsurlar \u015funlard\u0131r:<\/p>\n Neden IIFE Kullan\u0131r\u0131z?<\/strong><\/p>\n Vaka Analizi: Basit Bir Mod\u00fcl Olu\u015fturma<\/strong><\/p>\n Diyelim ki bir hesap makinesi mod\u00fcl\u00fc olu\u015fturmak istiyoruz. Bu mod\u00fcl\u00fcn sadece toplama ve \u00e7\u0131karma gibi belirli fonksiyonlar\u0131 d\u0131\u015far\u0131ya a\u00e7\u0131k olmal\u0131, ancak i\u00e7sel hesaplama detaylar\u0131 gizli kalmal\u0131.<\/p>\n Bu \u00f6rnekte, IIFE’ler, \u00f6zellikle eski kod tabanlar\u0131n\u0131 anlamak veya belirli senaryolarda kapsam\u0131 kontroll\u00fc bir \u015fekilde y\u00f6netmek istedi\u011finizde hala de\u011ferli bir ara\u00e7t\u0131r.<\/p>\n Callback fonksiyonlar\u0131, JavaScript’te asenkron (e\u015fzamans\u0131z) i\u015flemleri y\u00f6netmenin temel yollar\u0131ndan biridir. Bir callback fonksiyonu, ba\u015fka bir fonksiyonun arg\u00fcman\u0131 olarak ge\u00e7irilen ve o ana fonksiyonun belirli bir i\u015flemi tamamlamas\u0131 veya belirli bir olay ger\u00e7ekle\u015fmesi \u00fczerine \u00e7al\u0131\u015ft\u0131r\u0131lan bir fonksiyondur. Bu, \u00f6zellikle a\u011f istekleri, dosya okuma\/yazma veya zamanlay\u0131c\u0131lar gibi i\u015flemlerde \u00e7ok \u00f6nemlidir, \u00e7\u00fcnk\u00fc bu i\u015flemler an\u0131nda tamamlanmaz ve program\u0131n ak\u0131\u015f\u0131n\u0131 engellememelidir.<\/p>\n Callbacklerin Rol\u00fc:<\/strong><\/p>\n Senkron (e\u015fzamanl\u0131) bir d\u00fcnyada, bir komut verdi\u011finizde o komut tamamlanana kadar beklersiniz. Ancak web’de, bir sunucuya istek g\u00f6ndermek saniyeler s\u00fcrebilir. E\u011fer JavaScript bu s\u00fcre boyunca beklerse, kullan\u0131c\u0131 aray\u00fcz\u00fc donar ve hi\u00e7bir \u015fey yapamaz hale gelir. \u0130\u015fte burada callback’ler devreye girer.<\/p>\n Bir callback fonksiyonu kullan\u0131ld\u0131\u011f\u0131nda, ana fonksiyon i\u015flemi ba\u015flat\u0131r ve hemen devam eder. \u0130\u015flem tamamland\u0131\u011f\u0131nda, ana fonksiyon callback fonksiyonunu \u00e7a\u011f\u0131rarak i\u015flemi sonu\u00e7land\u0131r\u0131r.<\/p>\n Vaka Analizi: Kullan\u0131c\u0131 Bilgilerini Alma ve \u0130\u015fleme<\/strong><\/p>\n Bir uygulamada, \u00f6nce kullan\u0131c\u0131 bilgilerini \u00e7ekip, ard\u0131ndan bu bilgilerle bir kar\u015f\u0131lama mesaj\u0131 olu\u015fturmak istedi\u011fimizi d\u00fc\u015f\u00fcnelim. Bu iki i\u015flem asenkron olabilir.<\/p>\n Bu \u00f6rnekte, Callback fonksiyonlar\u0131, asenkron olaylar\u0131 y\u00f6netmek i\u00e7in g\u00fc\u00e7l\u00fc bir mekanizma sunar. Ancak, i\u00e7 i\u00e7e ge\u00e7mi\u015f callback’lerin karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 y\u00f6netmek i\u00e7in Promise’ler ve async\/await gibi daha geli\u015fmi\u015f yap\u0131lar\u0131 \u00f6\u011frenmek de \u00f6nemlidir.<\/p>\n JavaScript’te fonksiyon t\u00fcrleri, dilin esnekli\u011fini ve g\u00fcc\u00fcn\u00fc olu\u015fturan temel yap\u0131 ta\u015flar\u0131d\u0131r. Geleneksel Fonksiyonlar, kodunuzu mod\u00fcler hale getirerek karma\u015f\u0131k problemleri daha k\u00fc\u00e7\u00fck, \u00e7\u00f6z\u00fclebilir par\u00e7alara ay\u0131rman\u0131za yard\u0131mc\u0131 olur. Yeniden kullan\u0131labilirlik \u00f6zelli\u011fi sayesinde, ayn\u0131 kod blo\u011funu defalarca yazmak yerine bir kez tan\u0131mlay\u0131p istedi\u011finiz kadar kullanabilirsiniz. Bu hem geli\u015ftirme s\u00fcresini k\u0131salt\u0131r hem de hata olas\u0131l\u0131\u011f\u0131n\u0131 azalt\u0131r.<\/p>\n Modern JavaScript’te (ES6 ve sonras\u0131), ok fonksiyonlar\u0131 (arrow functions) daha k\u0131sa s\u00f6z dizimleri ve farkl\u0131 Bu makalede ele ald\u0131\u011f\u0131m\u0131z fonksiyon t\u00fcrleri, JavaScript geli\u015ftiricilerinin ara\u00e7 kutusundaki en \u00f6nemli unsurlard\u0131r. Bu kavramlar\u0131 derinlemesine anlamak ve pratik uygulamalarla peki\u015ftirmek, sizi daha yetkin bir geli\u015ftirici yapacakt\u0131r. Kodunuzun kalitesini art\u0131rmak ve daha etkili \u00e7\u00f6z\u00fcmler \u00fcretmek i\u00e7in bu fonksiyon t\u00fcrlerini bilin\u00e7li bir \u015fekilde kullanmaya \u00f6zen g\u00f6sterin.<\/p>\n #JavaScript #Fonksiyonlar #WebGeli\u015ftirme #Programlama #Kodlama<\/p>\nfunction<\/code> ile ba\u015flar ve ard\u0131ndan fonksiyon ad\u0131, parantez i\u00e7inde parametreleri ve s\u00fcsl\u00fc parantezler i\u00e7inde fonksiyonun g\u00f6vdesi gelir. Function Declaration’lar, JavaScript’in “hoisting” (yukar\u0131 \u00e7ekme) mekanizmas\u0131ndan faydalan\u0131r. Bu, fonksiyonun tan\u0131mland\u0131\u011f\u0131 yerden daha \u00f6nce \u00e7a\u011fr\u0131labilece\u011fi anlam\u0131na gelir. Taray\u0131c\u0131, kodu \u00e7al\u0131\u015ft\u0131rmadan \u00f6nce t\u00fcm fonksiyon bildirimlerini bellek alan\u0131na y\u00fckler. Bu, \u00f6zellikle b\u00fcy\u00fck kod tabanlar\u0131nda veya mod\u00fcler programlamada olduk\u00e7a kullan\u0131\u015fl\u0131 olabilir.<\/p>\nfunction topla(sayi1, sayi2) {\n return sayi1 + sayi2;\n }\n\n let sonuc = topla(5, 3); \/\/ Fonksiyonu \u00e7a\u011f\u0131rma\n console.log(sonuc); \/\/ \u00c7\u0131kt\u0131: 8<\/code><\/pre>\n<\/p><\/div>\ntopla<\/code> fonksiyonu, sayi1<\/code> ve sayi2<\/code> ad\u0131nda iki parametre al\u0131r ve bu iki say\u0131n\u0131n toplam\u0131n\u0131 d\u00f6nd\u00fcr\u00fcr. Fonksiyonu tan\u0131mlamadan \u00f6nce \u00e7a\u011f\u0131rsayd\u0131k bile (console.log(topla(5, 3));<\/code> gibi), hoisting sayesinde bu kod \u00e7al\u0131\u015f\u0131rd\u0131.<\/p>\nconst toplaExpression = function(sayi1, sayi2) {\n return sayi1 + sayi2;\n };\n\n let sonucExpression = toplaExpression(10, 7); \/\/ Fonksiyonu \u00e7a\u011f\u0131rma\n console.log(sonucExpression); \/\/ \u00c7\u0131kt\u0131: 17<\/code><\/pre>\n<\/p><\/div>\nconst<\/code> de\u011fi\u015fkenine atanm\u0131\u015ft\u0131r. Fonksiyonu \u00e7a\u011f\u0131rmak i\u00e7in bu de\u011fi\u015fkene ba\u015fvurmam\u0131z gerekir. Function Expression’lar, \u00f6zellikle callback (geri \u00e7a\u011f\u0131rma) fonksiyonlar\u0131 veya anl\u0131k olarak tan\u0131mlan\u0131p kullan\u0131lacak fonksiyonlar i\u00e7in tercih edilir. Ayr\u0131ca, mod\u00fcl desenlerinde (module patterns) de s\u0131k\u00e7a kullan\u0131l\u0131rlar. Function Declaration’lar genellikle global veya fonksiyon kapsam\u0131 seviyesinde tan\u0131mlan\u0131rken, Function Expression’lar daha \u00e7ok blok (block scope) veya ifade kapsam\u0131 seviyesinde kullan\u0131l\u0131r.<\/p>\nModern JavaScript: Arrow Functions (Ok Fonksiyonlar\u0131)<\/h2>\n
this<\/code> anahtar kelimesinin kullan\u0131m\u0131 ve ba\u011f\u0131ms\u0131z arguments<\/code> nesnesinin olmamas\u0131 gibi konularda kendini g\u00f6sterir. Ok fonksiyonlar\u0131, modern JavaScript geli\u015ftirmede s\u0131kl\u0131kla tercih edilen bir y\u00f6ntem haline gelmi\u015ftir.<\/p>\nreturn<\/code> anahtar kelimesine bile gerek kalmaz. \u00d6rne\u011fin, bir say\u0131n\u0131n karesini alan geleneksel bir fonksiyonu ele alal\u0131m:<\/p>\nconst kareAl = function(sayi) {\n return sayi * sayi;\n };<\/code><\/pre>\n<\/p><\/div>\nconst kareAlOk = sayi => sayi * sayi;<\/code><\/pre>\n<\/p><\/div>\nconst toplaOk = (sayi1, sayi2) => sayi1 + sayi2;<\/code><\/pre>\n<\/p><\/div>\nreturn<\/code> anahtar kelimesi yine gereklidir:<\/p>\nconst selamVer = (isim) => {\n const mesaj = \"Merhaba, \" + isim + \"!\";\n console.log(mesaj);\n return mesaj;\n };<\/code><\/pre>\n<\/p><\/div>\nthis<\/code> ba\u011flamlar\u0131n\u0131 olu\u015fturmamalar\u0131d\u0131r. Geleneksel fonksiyonlarda this<\/code> anahtar kelimesi, fonksiyonun nas\u0131l \u00e7a\u011fr\u0131ld\u0131\u011f\u0131na ba\u011fl\u0131 olarak farkl\u0131 de\u011ferler alabilir (\u00f6rne\u011fin, bir nesnenin metodu olarak \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda o nesneyi i\u015faret edebilir). Ok fonksiyonlar\u0131 ise, i\u00e7inde tan\u0131mland\u0131klar\u0131 d\u0131\u015f kapsam\u0131n this<\/code> de\u011ferini miras al\u0131rlar. Bu \u00f6zellik, \u00f6zellikle olay dinleyicileri (event listeners) ve callback fonksiyonlar\u0131 i\u00e7inde this<\/code> ile \u00e7al\u0131\u015f\u0131rken b\u00fcy\u00fck kolayl\u0131k sa\u011flar ve yayg\u0131n hatalar\u0131 \u00f6nler.<\/p>\nconst buton = document.getElementById('degistirBtn');\n const paragraf = document.getElementById('icerik');\n\n buton.addEventListener('click', function() {\n \/\/ 'this' burada butonu ifade eder\n console.log(this);\n this.textContent = 'T\u0131kland\u0131!';\n paragraf.textContent = 'Metin ba\u015far\u0131yla de\u011fi\u015ftirildi.';\n });<\/code><\/pre>\n<\/p><\/div>\nthis<\/code> ba\u011flam\u0131 farkl\u0131 davran\u0131r. E\u011fer bu kod bir nesnenin metodu i\u00e7inde olsayd\u0131, this<\/code> o nesneyi i\u015faret ederdi. Bu durum, bazen istenmeyen sonu\u00e7lara yol a\u00e7abilir. Ok fonksiyonlar\u0131 bu sorunu \u00e7\u00f6zmek i\u00e7in tasarlanm\u0131\u015ft\u0131r:<\/p>\nconst buton = document.getElementById('degistirBtn');\n const paragraf = document.getElementById('icerik');\n\n buton.addEventListener('click', () => {\n \/\/ 'this' burada buton'u de\u011fil, d\u0131\u015f kapsamdaki 'this'i ifade eder.\n \/\/ Bu \u00f6rnekte, e\u011fer bu kod global kapsamda ise 'window' nesnesini i\u015faret eder.\n \/\/ Bu nedenle, DOM manip\u00fclasyonu i\u00e7in do\u011frudan 'this' yerine elementin kendisini kullanmak daha do\u011fru olur.\n console.log(this); \/\/ Genellikle window nesnesi (taray\u0131c\u0131da)\n buton.textContent = 'T\u0131kland\u0131!'; \/\/ Do\u011frudan butona eri\u015fim\n paragraf.textContent = 'Metin ba\u015far\u0131yla de\u011fi\u015ftirildi.';\n });<\/code><\/pre>\n<\/p><\/div>\nthis<\/code> ba\u011flam\u0131n\u0131n nas\u0131l de\u011fi\u015fti\u011fini g\u00f6rmek \u00f6nemlidir. Bu durum, ok fonksiyonlar\u0131n\u0131n ne zaman ve nerede kullan\u0131laca\u011f\u0131n\u0131 anlamak i\u00e7in kritik bir bilgidir.<\/p>\nthis<\/code> ba\u011flam\u0131 ile modern JavaScript geli\u015ftirmede \u00f6nemli bir yer tutar. Ancak this<\/code>‘in davran\u0131\u015f\u0131n\u0131 anlamak, onlar\u0131 do\u011fru bir \u015fekilde kullanabilmek i\u00e7in hayati \u00f6nem ta\u015f\u0131r.<\/p>\nAnonim ve \u0130sme Sahip Fonksiyonlar: Se\u00e7imler ve Kullan\u0131m Alanlar\u0131<\/h2>\n
function topla(a, b) { ... }<\/code> gibi fonksiyonlar, a\u00e7\u0131k\u00e7a tan\u0131mlanm\u0131\u015f bir isme sahiptir. Bu isim, fonksiyonun \u00e7a\u011fr\u0131lmas\u0131n\u0131 sa\u011flar ve hata ay\u0131klama (debugging) s\u0131ras\u0131nda \u00e7ok faydal\u0131d\u0131r. Bir hata olu\u015ftu\u011funda, hata mesaj\u0131nda fonksiyonun ad\u0131 g\u00f6r\u00fcn\u00fcr, bu da sorunun kayna\u011f\u0131n\u0131 bulmay\u0131 kolayla\u015ft\u0131r\u0131r. \u0130sme sahip fonksiyonlar, \u00f6zellikle tekrar tekrar kullan\u0131lmas\u0131 gereken veya karma\u015f\u0131k mant\u0131k i\u00e7eren fonksiyonlar i\u00e7in idealdir. Ayr\u0131ca, recursive (\u00f6zyinelemeli) fonksiyonlar, yani kendilerini \u00e7a\u011f\u0131ran fonksiyonlar, isimlerine ihtiya\u00e7 duyarlar.<\/p>\nfunction faktoryelHesapla(n) {\n if (n === 0) {\n return 1;\n } else {\n return n * faktoryelHesapla(n - 1); \/\/ Kendini \u00e7a\u011f\u0131r\u0131yor\n }\n }\n console.log(faktoryelHesapla(5)); \/\/ \u00c7\u0131kt\u0131: 120<\/code><\/pre>\n<\/p><\/div>\nfaktoryelHesapla<\/code> fonksiyonu, \u00f6zyinelemeli yap\u0131s\u0131 gere\u011fi ismine ihtiya\u00e7 duyar. E\u011fer bu fonksiyon isimsiz olsayd\u0131, kendi kendini \u00e7a\u011f\u0131ramazd\u0131.<\/p>\nconst selamVerAnonim = function(isim) {\n console.log(\"Merhaba \" + isim);\n };\n selamVerAnonim(\"Ali\"); \/\/ \u00c7\u0131kt\u0131: Merhaba Ali<\/code><\/pre>\n<\/p><\/div>\nfunction veriCek(url, callback) {\n \/\/ Sim\u00fclasyon: Birka\u00e7 saniye s\u00fcren bir veri \u00e7ekme i\u015flemi\n setTimeout(function() {\n const veri = { id: 1, ad: \"\u00d6rnek \u00dcr\u00fcn\" };\n callback(veri); \/\/ Veri geldi\u011finde callback fonksiyonunu \u00e7al\u0131\u015ft\u0131r\n }, 2000);\n }\n\n veriCek(\"api\/urunler\", function(urunBilgisi) {\n \/\/ Bu anonim fonksiyon, veriCek tamamland\u0131\u011f\u0131nda \u00e7al\u0131\u015f\u0131r\n console.log(\"Veri al\u0131nd\u0131:\", urunBilgisi);\n \/\/ Burada veri ile ilgili i\u015flemler yap\u0131l\u0131r\n });\n\n console.log(\"Veri \u00e7ekme iste\u011fi g\u00f6nderildi...\"); \/\/ Bu sat\u0131r hemen \u00e7al\u0131\u015f\u0131r<\/code><\/pre>\n<\/p><\/div>\nveriCek<\/code> fonksiyonuna ge\u00e7irilen ikinci arg\u00fcman, bir anonim fonksiyondur. Bu fonksiyon, veriCek<\/code> i\u015flemi tamamland\u0131\u011f\u0131nda \u00e7al\u0131\u015facak ve al\u0131nan veriyi i\u015fleyecektir. Bu, asenkron programlaman\u0131n temel ta\u015flar\u0131ndan biridir.<\/p>\n\u0130lk S\u0131n\u0131f Fonksiyonlar (First-Class Functions): JavaScript’in G\u00fcc\u00fc<\/h2>\n
\n
map<\/code> benzeri fonksiyon yazal\u0131m:<\/p>\nfunction herElemanaUygula(dizi, islemFonksiyonu) {\n const sonucDizisi = [];\n for (let i = 0; i < dizi.length; i++) {\n \/\/ islemFonksiyonu, diziye arg\u00fcman olarak ge\u00e7irilen fonksiyondur\n sonucDizisi.push(islemFonksiyonu(dizi[i]));\n }\n return sonucDizisi;\n }\n\n const sayilar = [1, 2, 3, 4, 5];\n\n \/\/ 1. Her say\u0131n\u0131n karesini alan bir fonksiyon\n const kareAl = function(sayi) {\n return sayi * sayi;\n };\n\n \/\/ 2. Her say\u0131y\u0131 ikiyle \u00e7arpan bir fonksiyon\n const ikiyleCarp = function(sayi) {\n return sayi * 2;\n };\n\n const kareler = herElemanaUygula(sayilar, kareAl);\n console.log(\"Kareler:\", kareler); \/\/ \u00c7\u0131kt\u0131: Kareler: [1, 4, 9, 16, 25]\n\n const ciftKatlar = herElemanaUygula(sayilar, ikiyleCarp);\n console.log(\"\u0130kiyle \u00c7arp\u0131lm\u0131\u015f:\", ciftKatlar); \/\/ \u00c7\u0131kt\u0131: \u0130kiyle \u00c7arp\u0131lm\u0131\u015f: [2, 4, 6, 8, 10]\n\n \/\/ Anonim fonksiyonu do\u011frudan ge\u00e7irme\n const esiginiGecenler = herElemanaUygula(sayilar, function(sayi) {\n return sayi > 3;\n });\n console.log(\"3'ten b\u00fcy\u00fck olanlar (true\/false):\", esiginiGecenler); \/\/ \u00c7\u0131kt\u0131: 3'ten b\u00fcy\u00fck olanlar (true\/false): [false, false, false, true, true]<\/code><\/pre>\n<\/p><\/div>\nherElemanaUygula<\/code> fonksiyonu, islemFonksiyonu<\/code> ad\u0131nda bir arg\u00fcman al\u0131r. Bu arg\u00fcman, bir fonksiyondur. Bu sayede, herElemanaUygula<\/code> fonksiyonu, kendisine ge\u00e7irilen i\u015fleme g\u00f6re farkl\u0131 sonu\u00e7lar \u00fcretebilir. Bu, kodun ne kadar esnek ve yeniden kullan\u0131labilir oldu\u011funu g\u00f6sterir. JavaScript’in yerle\u015fik Array.prototype.map<\/code>, filter<\/code> ve reduce<\/code> gibi metodlar\u0131 da y\u00fcksek dereceli fonksiyonlar\u0131n harika \u00f6rnekleridir.<\/p>\nY\u00fcksek Dereceli Fonksiyonlar: Kodunuzu Soyutlay\u0131n<\/h2>\n
\n
Array.prototype.map<\/code>, filter<\/code>, reduce<\/code>, forEach<\/code>) y\u00fcksek dereceli fonksiyonlard\u0131r.<\/p>\n\n
map()<\/code>: Bir dizideki her elemana bir fonksiyon uygulayarak yeni bir dizi olu\u015fturur.<\/li>\nfilter()<\/code>: Bir dizideki elemanlar\u0131, verilen bir fonksiyona g\u00f6re filtreleyerek yeni bir dizi olu\u015fturur.<\/li>\nreduce()<\/code>: Bir diziyi, verilen bir fonksiyona g\u00f6re tek bir de\u011fere indirger.<\/li>\nforEach()<\/code>: Bir dizideki her eleman i\u00e7in verilen bir fonksiyonu \u00e7al\u0131\u015ft\u0131r\u0131r, ancak yeni bir dizi d\u00f6nd\u00fcrmez.<\/li>\n<\/ul>\ntutar<\/code> \u00f6zelli\u011fi var.<\/p>\nconst siparisler = [\n { id: 1, urun: \"Laptop\", tutar: 1200 },\n { id: 2, urun: \"Klavye\", tutar: 75 },\n { id: 3, urun: \"Mouse\", tutar: 25 },\n { id: 4, urun: \"Monit\u00f6r\", tutar: 300 }\n ];\n\n \/\/ map kullanarak sadece tutarlar\u0131 i\u00e7eren yeni bir dizi olu\u015fturma\n const tutarlar = siparisler.map(function(siparis) {\n return siparis.tutar;\n });\n console.log(\"Sadece Tutarlar:\", tutarlar); \/\/ \u00c7\u0131kt\u0131: Sadece Tutarlar: [1200, 75, 25, 300]\n\n \/\/ reduce kullanarak toplam tutar\u0131 hesaplama\n const toplamTutar = tutarlar.reduce(function(birikim, mevcutTutar) {\n return birikim + mevcutTutar;\n }, 0); \/\/ 0, birikimin ba\u015flang\u0131\u00e7 de\u011feridir\n\n console.log(\"Toplam Sipari\u015f Tutar\u0131:\", toplamTutar); \/\/ \u00c7\u0131kt\u0131: Toplam Sipari\u015f Tutar\u0131: 1600\n\n \/\/ Alternatif: map ve reduce'u birle\u015ftirmek\n const toplamTutarTekSatir = siparisler.reduce(function(birikim, siparis) {\n return birikim + siparis.tutar;\n }, 0);\n console.log(\"Toplam Sipari\u015f Tutar\u0131 (Tek Sat\u0131r):\", toplamTutarTekSatir); \/\/ \u00c7\u0131kt\u0131: Toplam Sipari\u015f Tutar\u0131 (Tek Sat\u0131r): 1600\n\n \/\/ filter kullanarak belirli bir tutar\u0131n \u00fczerindeki sipari\u015fleri bulma\n const yuksekTutarliSiparisler = siparisler.filter(function(siparis) {\n return siparis.tutar > 100;\n });\n console.log(\"100 TL \u00dczeri Sipari\u015fler:\", yuksekTutarliSiparisler);\n \/\/ \u00c7\u0131kt\u0131: 100 TL \u00dczeri Sipari\u015fler: [ { id: 1, urun: 'Laptop', tutar: 1200 }, { id: 4, urun: 'Monit\u00f6r', tutar: 300 } ]<\/code><\/pre>\n<\/p><\/div>\nmap<\/code> ve reduce<\/code> fonksiyonlar\u0131, siparisler<\/code> dizisi \u00fczerinde i\u015flem yapmak i\u00e7in anonim fonksiyonlar\u0131 arg\u00fcman olarak alm\u0131\u015ft\u0131r. Bu, kodu \u00e7ok daha okunabilir ve bak\u0131m yap\u0131labilir hale getirir.<\/p>\nfunction carpimFabrikasi(carpan) {\n \/\/ Bu d\u0131\u015f fonksiyon, bir fonksiyon d\u00f6nd\u00fcr\u00fcyor\n return function(sayi) {\n \/\/ D\u00f6nd\u00fcr\u00fclen bu i\u00e7 fonksiyon, d\u0131\u015f fonksiyonun 'carpan' de\u011fi\u015fkenini kullan\u0131yor (closure)\n return sayi * carpan;\n };\n }\n\n const ikiyleCarpanFonksiyon = carpimFabrikasi(2); \/\/ Bu, 2 ile \u00e7arpan bir fonksiyon d\u00f6nd\u00fcr\u00fcr\n const besleCarpanFonksiyon = carpimFabrikasi(5); \/\/ Bu, 5 ile \u00e7arpan bir fonksiyon d\u00f6nd\u00fcr\u00fcr\n\n console.log(ikiyleCarpanFonksiyon(10)); \/\/ \u00c7\u0131kt\u0131: 20\n console.log(besleCarpanFonksiyon(10)); \/\/ \u00c7\u0131kt\u0131: 50\n\n \/\/ Do\u011frudan kullanma\n console.log(carpimFabrikasi(3)(7)); \/\/ \u00c7\u0131kt\u0131: 21 (3 ile \u00e7arpan fonksiyon olu\u015fturulur ve 7'ye uygulan\u0131r)<\/code><\/pre>\n<\/p><\/div>\ncarpimFabrikasi<\/code> fonksiyonu, kendisine verilen carpan<\/code> de\u011ferine g\u00f6re \u00f6zel bir \u00e7arpma fonksiyonu olu\u015fturup d\u00f6nd\u00fcr\u00fcr. Bu, “closure” (kapatma) ad\u0131 verilen bir JavaScript \u00f6zelli\u011finden yararlan\u0131r; i\u00e7teki fonksiyon, d\u0131\u015ftaki fonksiyonun kapsam\u0131ndaki de\u011fi\u015fkenlere (bu durumda carpan<\/code>) eri\u015febilir.<\/p>\nKendini \u00c7a\u011f\u0131ran Anonim Fonksiyon \u0130fadeleri (IIFE): Kapsam Y\u00f6netimi ve Gizlilik<\/h2>\n
(function() {\n \/\/ Fonksiyonun g\u00f6vdesi buraya gelir\n \/\/ Bu kod, tan\u0131mland\u0131\u011f\u0131 anda \u00e7al\u0131\u015f\u0131r\n var yerelDegisken = \"Ben sadece bu IIFE i\u00e7inde g\u00f6r\u00fcn\u00fcr\u00fcm.\";\n console.log(yerelDegisken);\n })(); \/\/ Fonksiyonu hemen \u00e7a\u011f\u0131r\u0131yoruz<\/code><\/pre>\n<\/p><\/div>\n\n
()<\/code>):<\/strong> Fonksiyonu bir ifade (expression) haline getirir. JavaScript, function<\/code> anahtar kelimesini g\u00f6rd\u00fc\u011f\u00fcnde genellikle bir bildirim (declaration) bekler. Fonksiyonu parantez i\u00e7ine almak, bunun bir bildirim de\u011fil, \u00e7a\u011fr\u0131labilecek bir ifade oldu\u011funu belirtir.<\/li>\n()<\/code>):<\/strong> Tan\u0131mlanan anonim fonksiyonu hemen \u00e7a\u011f\u0131r\u0131r.<\/li>\n<\/ul>\n\n
var<\/code>, let<\/code>, const<\/code> ile) global kapsam\u0131 kirletmesini engeller. Bu, \u00f6zellikle eski JavaScript s\u00fcr\u00fcmlerinde (var<\/code>‘\u0131n fonksiyon kapsaml\u0131 oldu\u011fu zamanlarda) global de\u011fi\u015fken \u00e7ak\u0131\u015fmalar\u0131n\u0131 \u00f6nlemek i\u00e7in \u00e7ok \u00f6nemliydi.<\/li>\nvar hesapMakinesi = (function() {\n \/\/ \u00d6zel (private) de\u011fi\u015fkenler ve fonksiyonlar\n var gecmisIslemler = [];\n\n function kaydetIslem(islem) {\n gecmisIslemler.push(islem);\n console.log(\"\u0130\u015flem kaydedildi:\", islem);\n }\n\n \/\/ D\u0131\u015far\u0131ya a\u00e7\u0131k (public) fonksiyonlar\n return {\n topla: function(a, b) {\n var sonuc = a + b;\n kaydetIslem(\"Toplama: \" + a + \" + \" + b + \" = \" + sonuc);\n return sonuc;\n },\n cikar: function(a, b) {\n var sonuc = a - b;\n kaydetIslem(\"\u00c7\u0131karma: \" + a + \" - \" + b + \" = \" + sonuc);\n return sonuc;\n },\n sonIslemleriGoster: function() {\n console.log(\"Son i\u015flemler:\", gecmisIslemler);\n }\n };\n })(); \/\/ IIFE hemen \u00e7a\u011fr\u0131l\u0131yor\n\n console.log(hesapMakinesi.topla(5, 3)); \/\/ \u00c7\u0131kt\u0131: Toplama: 5 + 3 = 8, Sonra: 8\n console.log(hesapMakinesi.cikar(10, 4)); \/\/ \u00c7\u0131kt\u0131: \u00c7\u0131karma: 10 - 4 = 6, Sonra: 6\n hesapMakinesi.sonIslemleriGoster(); \/\/ \u00c7\u0131kt\u0131: Son i\u015flemler: [ 'Toplama: 5 + 3 = 8', '\u00c7\u0131karma: 10 - 4 = 6' ]\n\n \/\/ \u00d6zel de\u011fi\u015fkenlere veya fonksiyonlara d\u0131\u015far\u0131dan eri\u015filemez\n \/\/ console.log(hesapMakinesi.gecmisIslemler); \/\/ Hata: gecmisIslemler undefined\n \/\/ console.log(hesapMakinesi.kaydetIslem(\"test\")); \/\/ Hata: kaydetIslem undefined<\/code><\/pre>\n<\/p><\/div>\ngecmisIslemler<\/code> dizisi ve kaydetIslem<\/code> fonksiyonu, IIFE’nin kapsam\u0131 i\u00e7inde \u00f6zel (private) kal\u0131r. Ancak topla<\/code>, cikar<\/code> ve sonIslemleriGoster<\/code> fonksiyonlar\u0131, IIFE taraf\u0131ndan d\u00f6nd\u00fcr\u00fclen nesne arac\u0131l\u0131\u011f\u0131yla d\u0131\u015far\u0131dan eri\u015filebilir hale gelir. Bu, modern JavaScript’te mod\u00fcl sistemleri (ES Modules) yayg\u0131nla\u015fmadan \u00f6nce de\u011fi\u015fken gizlili\u011fi ve mod\u00fclerlik sa\u011flamak i\u00e7in \u00e7ok etkili bir y\u00f6ntemdi.<\/p>\nCallback Fonksiyonlar\u0131 ve Asenkron Programlama<\/h2>\n
function kullaniciBilgisiGetir(kullaniciId, callback) {\n console.log(Kullan\u0131c\u0131 ${kullaniciId} bilgileri getiriliyor...<\/code>);\n \/\/ Sim\u00fclasyon: A\u011f iste\u011fi veya veritaban\u0131 sorgusu gibi zaman alan bir i\u015flem\n setTimeout(function() {\n const kullanici = {\n id: kullaniciId,\n ad: \"Ay\u015fe\",\n soyad: \"Y\u0131lmaz\"\n };\n \/\/ \u0130\u015flem tamamland\u0131\u011f\u0131nda callback fonksiyonunu \u00e7a\u011f\u0131r\u0131yoruz ve kullan\u0131c\u0131 bilgisini iletiyoruz\n callback(null, kullanici); \/\/ Hata durumunda ilk arg\u00fcman, ba\u015far\u0131 durumunda ikinci arg\u00fcman kullan\u0131l\u0131r (Node.js tarz\u0131 callback)\n }, 1500); \/\/ 1.5 saniye gecikme\n }\n\n function mesajOlustur(kullanici, callback) {\n console.log(\"Kar\u015f\u0131lama mesaj\u0131 olu\u015fturuluyor...\");\n setTimeout(function() {\n if (kullanici) {\n const mesaj = Merhaba ${kullanici.ad} ${kullanici.soyad}!<\/code>;\n callback(null, mesaj);\n } else {\n callback(new Error(\"Kullan\u0131c\u0131 bilgisi bulunamad\u0131.\"));\n }\n }, 500); \/\/ 0.5 saniye gecikme\n }\n\n \/\/ Kullan\u0131m \u00f6rne\u011fi\n kullaniciBilgisiGetir(101, function(hata, kullaniciBilgisi) {\n if (hata) {\n console.error(\"Hata olu\u015ftu:\", hata.message);\n return;\n }\n console.log(\"Kullan\u0131c\u0131 bilgisi al\u0131nd\u0131:\", kullaniciBilgisi);\n\n mesajOlustur(kullaniciBilgisi, function(hata, olusturulanMesaj) {\n if (hata) {\n console.error(\"Mesaj olu\u015fturma hatas\u0131:\", hata.message);\n return;\n }\n console.log(olusturulanMesaj); \/\/ \u00c7\u0131kt\u0131: Merhaba Ay\u015fe Y\u0131lmaz!\n });\n });\n\n console.log(\"\u0130stek g\u00f6nderildi, sonu\u00e7 bekleniyor...\");\n \/*\n Beklenen \u00c7\u0131kt\u0131 S\u0131ras\u0131:\n Kullan\u0131c\u0131 101 bilgileri getiriliyor...\n \u0130stek g\u00f6nderildi, sonu\u00e7 bekleniyor...\n Kullan\u0131c\u0131 bilgisi al\u0131nd\u0131: { id: 101, ad: 'Ay\u015fe', soyad: 'Y\u0131lmaz' }\n Kar\u015f\u0131lama mesaj\u0131 olu\u015fturuluyor...\n Merhaba Ay\u015fe Y\u0131lmaz!\n *\/<\/code><\/pre>\n<\/p><\/div>\nkullaniciBilgisiGetir<\/code> ve mesajOlustur<\/code> fonksiyonlar\u0131, i\u015flemlerini tamamlad\u0131klar\u0131nda kendilerine ge\u00e7irilen callback fonksiyonlar\u0131n\u0131 \u00e7a\u011f\u0131r\u0131r. Bu, i\u00e7 i\u00e7e ge\u00e7mi\u015f callback’ler (“Callback Hell” veya “Pyramid of Doom” olarak da bilinir) olu\u015fturabilir ve kodun okunabilirli\u011fini azaltabilir. Bu sorunu \u00e7\u00f6zmek i\u00e7in Promise’ler ve async\/await gibi daha modern yap\u0131lar geli\u015ftirilmi\u015ftir, ancak callback’ler hala JavaScript’in temel bir par\u00e7as\u0131d\u0131r.<\/p>\nSonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular<\/h2>\n
function<\/code> bildirimleri ve ifadelerinden, modern ok fonksiyonlar\u0131na, ilk s\u0131n\u0131f ve y\u00fcksek dereceli fonksiyonlardan, IIFE’lere ve callback mekanizmalar\u0131na kadar her birinin kendine \u00f6zg\u00fc kullan\u0131m alanlar\u0131 ve avantajlar\u0131 bulunmaktad\u0131r. Bu farkl\u0131l\u0131klar\u0131 anlamak, kodunuzu daha okunabilir, yeniden kullan\u0131labilir, y\u00f6netilebilir ve verimli hale getirmenizi sa\u011flar.<\/p>\nthis<\/code> ba\u011flam\u0131 y\u00f6netimi ile \u00f6ne \u00e7\u0131kar. \u0130lk s\u0131n\u0131f ve y\u00fcksek dereceli fonksiyonlar, kodunuzda soyutlama ve fonksiyonel programlama prensiplerini uygulaman\u0131za olanak tan\u0131r. IIFE’ler ise kapsam y\u00f6netimi ve mod\u00fcl olu\u015fturma gibi konularda hala de\u011ferlidir. Callback fonksiyonlar\u0131 ise, asenkron programlaman\u0131n temelini olu\u015fturur ve web’in dinamik yap\u0131s\u0131n\u0131 y\u00f6netmemizi sa\u011flar.<\/p>\nS\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n
\n
\n
\n Cevap:<\/strong> En b\u00fcy\u00fck farklardan biri this<\/code> anahtar kelimesinin davran\u0131\u015f\u0131d\u0131r. Ok fonksiyonlar\u0131 kendi this<\/code> ba\u011flamlar\u0131n\u0131 olu\u015fturmazlar; bunun yerine d\u0131\u015f kapsamdaki this<\/code> de\u011ferini miras al\u0131rlar. Geleneksel fonksiyonlarda ise this<\/code>, fonksiyonun nas\u0131l \u00e7a\u011fr\u0131ld\u0131\u011f\u0131na ba\u011fl\u0131 olarak de\u011fi\u015fir. Ayr\u0131ca, ok fonksiyonlar\u0131 daha k\u0131sa bir s\u00f6z dizimine sahiptir ve arguments<\/code> nesnesine sahip de\u011fildir.\n <\/li>\n
\n
\n Cevap:<\/strong> \u0130sme sahip fonksiyonlar, hata ay\u0131klamay\u0131 kolayla\u015ft\u0131r\u0131r (hata mesajlar\u0131nda fonksiyon ad\u0131 g\u00f6r\u00fcn\u00fcr), kodun okunabilirli\u011fini art\u0131r\u0131r ve fonksiyonun yeniden kullan\u0131labilirli\u011fini sa\u011flar. \u00d6zyinelemeli (recursive) fonksiyonlar i\u00e7in isim zorunludur. Anonim fonksiyonlar genellikle tek kullan\u0131ml\u0131k veya callback olarak kullan\u0131ld\u0131\u011f\u0131nda daha uygundur.\n <\/li>\n
\n
\n Cevap:<\/strong> Callback hell, i\u00e7 i\u00e7e ge\u00e7mi\u015f \u00e7ok say\u0131da callback fonksiyonunun kodun okunabilirli\u011fini ve y\u00f6netilebilirli\u011fini zorla\u015ft\u0131rmas\u0131 durumudur. Bu durum genellikle asenkron i\u015flemlerin birbirine ba\u011fl\u0131 oldu\u011fu senaryolarda ortaya \u00e7\u0131kar. Callback hell’i \u00f6nlemek i\u00e7in Promise’ler, async\/await<\/code> gibi daha modern asenkron programlama yap\u0131lar\u0131 kullan\u0131labilir.\n <\/li>\n
\n
\n Cevap:<\/strong> Y\u00fcksek dereceli fonksiyonlar, kod tekrar\u0131n\u0131 azaltarak ve soyutlama sa\u011flayarak daha mod\u00fcler, esnek ve bak\u0131m\u0131 kolay kod yazmam\u0131z\u0131 sa\u011flar. Fonksiyonlar\u0131 arg\u00fcman olarak alarak veya d\u00f6nd\u00fcrerek, karma\u015f\u0131k i\u015flemleri daha genel ve yeniden kullan\u0131labilir hale getirirler.\n <\/li>\n
\n
\n Cevap:<\/strong> Modern JavaScript’te ES Mod\u00fclleri (ES Modules) gibi daha geli\u015fmi\u015f mod\u00fcl sistemleri yayg\u0131nla\u015fm\u0131\u015ft\u0131r. Ancak, IIFE’ler hala eski kod tabanlar\u0131n\u0131 anlamak, belirli kapsam y\u00f6netimi gerektiren durumlar veya baz\u0131 k\u00fct\u00fcphanelerin \u00e7al\u0131\u015fma \u015feklini anlamak i\u00e7in de\u011ferlidir. \u00d6zellikle taray\u0131c\u0131 ortam\u0131nda global kapsam\u0131 temiz tutmak i\u00e7in hala kullan\u0131labilirler.\n <\/li>\n<\/ul>\n