JavaScript, web geli\u015ftirmenin temel ta\u015flar\u0131ndan biri olup, bu dilde fonksiyonlar kodun yeniden kullan\u0131labilirli\u011fini ve mod\u00fclerli\u011fini sa\u011flayan kritik yap\u0131lard\u0131r. Ancak, JavaScript’te fonksiyon tan\u0131mlaman\u0131n birden fazla yolu vard\u0131r ve bu yollar aras\u0131nda ince ama \u00f6nemli farklar bulunur. \u00d6zellikle “Function Declaration” (Fonksiyon Bildirimi) ve “Function Expression” (Fonksiyon \u0130fadesi) aras\u0131ndaki ayr\u0131mlar, kodun \u00e7al\u0131\u015fma zaman\u0131 davran\u0131\u015f\u0131n\u0131, kapsam\u0131n\u0131 ve okunabilirli\u011fini do\u011frudan etkileyebilir. Bu makalede, bu iki temel fonksiyon tan\u0131mlama y\u00f6ntemini detayl\u0131 bir \u015fekilde inceleyecek, aralar\u0131ndaki farklar\u0131 \u00f6rneklerle a\u00e7\u0131klayacak ve hangi senaryoda hangisinin tercih edilmesi gerekti\u011fine dair pratik bilgiler sunaca\u011f\u0131z.<\/p>\n
JavaScript’te fonksiyon tan\u0131mlaman\u0131n en yayg\u0131n iki yolu Function Declaration ve Function Expression’d\u0131r. Her ikisi de ayn\u0131 amaca hizmet etse de, s\u00f6z dizimleri ve \u00e7al\u0131\u015fma zaman\u0131 davran\u0131\u015flar\u0131 a\u00e7\u0131s\u0131ndan belirgin farkl\u0131l\u0131klar g\u00f6sterirler.<\/p>\n
Function Declaration, bir fonksiyonu ba\u011f\u0131ms\u0131z bir kod blo\u011fu olarak tan\u0131mlaman\u0131n en geleneksel yoludur. Genellikle <\/code><\/p>\n Bu \u00f6rnekte, Function Expression, bir fonksiyonu bir de\u011fi\u015fkene atama yoluyla tan\u0131mlamakt\u0131r. Bu durumda, <\/code><\/p>\n Yukar\u0131daki \u00f6rnekte, isimsiz bir fonksiyon Function Expression'lar genellikle anonim olarak kullan\u0131l\u0131r, yani <\/code><\/p>\n \u0130simlendirilmi\u015f fonksiyon ifadesindeki Hoisting (yukar\u0131 \u00e7ekme), JavaScript'in bir mekanizmas\u0131d\u0131r ve de\u011fi\u015fken ile fonksiyon bildirimlerinin, kapsayan kapsamlar\u0131n\u0131n en \u00fcst\u00fcne ta\u015f\u0131nmas\u0131 gibi davran\u0131r. Bu mekanizma, Function Declaration ve Function Expression aras\u0131nda \u00f6nemli bir davran\u0131\u015f fark\u0131 yarat\u0131r.<\/p>\n Function Declaration'lar, tan\u0131mland\u0131klar\u0131 kapsam\u0131n en \u00fcst\u00fcne tamamen \"hoist\" edilir. Bu, fonksiyonun tan\u0131m\u0131ndan \u00f6nce bile \u00e7a\u011fr\u0131labilece\u011fi anlam\u0131na gelir. JavaScript motoru, kodu \u00e7al\u0131\u015ft\u0131rmadan \u00f6nce t\u00fcm Function Declaration'lar\u0131 tarar ve belle\u011fe kaydeder.<\/p>\n <\/code><\/p>\n Yukar\u0131daki \u00f6rnekte, Function Expression'lar ise tamamen hoist edilmezler. Yaln\u0131zca fonksiyonu tutan de\u011fi\u015fkenin bildirimi (\u00f6rne\u011fin <\/code><\/p>\n Hoisting fark\u0131, kodun okunabilirli\u011fi ve potansiyel hatalar a\u00e7\u0131s\u0131ndan \u00f6nemlidir. Function Declaration'lar\u0131n hoisting \u00f6zelli\u011fi, baz\u0131 geli\u015ftiriciler i\u00e7in kodu daha esnek hale getirse de, fonksiyonlar\u0131n nerede tan\u0131mland\u0131\u011f\u0131n\u0131 takip etmeyi zorla\u015ft\u0131rabilir ve beklenmedik davran\u0131\u015flara yol a\u00e7abilir. Function Expression'lar ise daha \u00f6ng\u00f6r\u00fclebilir bir davran\u0131\u015f sergiler; fonksiyonu kullanmadan \u00f6nce tan\u0131mlaman\u0131z gerekti\u011fini a\u00e7\u0131k\u00e7a belirtir. Bu, \u00f6zellikle b\u00fcy\u00fck projelerde veya ekip \u00e7al\u0131\u015fmalar\u0131nda kodun anla\u015f\u0131l\u0131rl\u0131\u011f\u0131n\u0131 art\u0131rabilir.<\/p>\n Fonksiyonlar\u0131n kapsam\u0131 ve isimlendirme kurallar\u0131, Function Declaration ve Function Expression aras\u0131nda farkl\u0131l\u0131k g\u00f6sterir ve kodun nas\u0131l organize edildi\u011fini, de\u011fi\u015fkenlere nas\u0131l eri\u015fildi\u011fini do\u011frudan etkiler.<\/p>\n Function Declaration'lar, tan\u0131mland\u0131klar\u0131 kapsamda (genellikle global veya ba\u015fka bir fonksiyonun kapsam\u0131 i\u00e7inde) bir isimle do\u011frudan eri\u015filebilir hale gelir. Bu isim, o kapsam boyunca kullan\u0131labilir.<\/p>\n <\/code><\/p>\n Burada Function Expression'lar, bir de\u011fi\u015fkene atand\u0131klar\u0131 i\u00e7in, o de\u011fi\u015fkenin kapsam kurallar\u0131na tabi olurlar. <\/code><\/p>\n Bu \u00f6rnekte, Daha \u00f6nce bahsedildi\u011fi gibi, isimlendirilmi\u015f fonksiyon ifadeleri (Named Function Expressions) hata ay\u0131klama s\u00fcre\u00e7lerinde \u00f6nemli avantajlar sunar. Bir hata olu\u015ftu\u011funda, y\u0131\u011f\u0131n izlemede (stack trace) fonksiyonun ad\u0131n\u0131n g\u00f6r\u00fcnmesi, hatan\u0131n kayna\u011f\u0131n\u0131 tespit etmeyi \u00e7ok daha kolayla\u015ft\u0131r\u0131r. Ayr\u0131ca, \u00f6zyinelemeli fonksiyonlar yazarken, fonksiyonun kendi ad\u0131n\u0131 kullanarak kendini \u00e7a\u011f\u0131rmas\u0131na olanak tan\u0131r.<\/p>\n Hangi fonksiyon tan\u0131mlama y\u00f6nteminin ne zaman kullan\u0131laca\u011f\u0131, projenin gereksinimlerine, kodun okunabilirli\u011fine ve bak\u0131m kolayl\u0131\u011f\u0131na ba\u011fl\u0131d\u0131r.<\/p>\n Function Declaration'lar, genellikle global kapsamda veya bir mod\u00fcl\u00fcn en \u00fcst seviyesinde, uygulaman\u0131n ana i\u015flevlerini tan\u0131mlamak i\u00e7in kullan\u0131l\u0131r. Kodun ak\u0131\u015f\u0131n\u0131n do\u011fal bir par\u00e7as\u0131 olarak, tan\u0131mlanmadan \u00f6nce \u00e7a\u011fr\u0131labilme \u00f6zelli\u011fi, \u00f6zellikle yard\u0131mc\u0131 fonksiyonlar veya genel ama\u00e7l\u0131 ara\u00e7lar i\u00e7in pratik olabilir.<\/p>\n * Genel Ama\u00e7l\u0131 Yard\u0131mc\u0131 Fonksiyonlar:<\/strong> Uygulaman\u0131n farkl\u0131 yerlerinde tekrar tekrar kullan\u0131lacak temel i\u015flevler (\u00f6rne\u011fin, matematiksel i\u015flemler, veri formatlama). Function Expression'lar, daha esnek ve dinamik senaryolarda tercih edilir. Bir de\u011fi\u015fkene atanabilmeleri, onlar\u0131 di\u011fer fonksiyonlara arg\u00fcman olarak ge\u00e7irmeye (callback), bir kapan\u0131\u015f (closure) olu\u015fturmaya veya hemen \u00e7a\u011fr\u0131lan fonksiyon ifadeleri (IIFE) olu\u015fturmaya uygun hale getirir.<\/p>\n * Callback Fonksiyonlar\u0131:<\/strong> Zamanlay\u0131c\u0131lar ( <\/code> <\/code> <\/code> ES6 ile birlikte tan\u0131t\u0131lan ok fonksiyonlar\u0131 (Arrow Functions), Function Expression'lar\u0131n daha k\u0131sa bir s\u00f6z dizimine sahip versiyonlar\u0131d\u0131r. \u00d6zellikle callback fonksiyonlar\u0131 i\u00e7in \u00e7ok pop\u00fclerdirler. Ok fonksiyonlar\u0131 her zaman anonimdir ve kendi <\/code><\/p>\n Ok fonksiyonlar\u0131, JavaScript'teki Geleneksel Function Declaration ve Function Expression'larda * Global Kapsamda:<\/strong> <\/code><\/p>\n Ok fonksiyonlar\u0131, kendi <\/code><\/p>\n E\u011fer Kodun okunabilirli\u011fi, bak\u0131m\u0131 ve hata ay\u0131klama kolayl\u0131\u011f\u0131, yaz\u0131l\u0131m geli\u015ftirmenin kritik y\u00f6nleridir. Function Declaration ve Function Expression se\u00e7imleri, bu alanlarda farkl\u0131 etkilere sahip olabilir.<\/p>\n * Function Declaration:<\/strong> Genellikle kodun en \u00fcst\u00fcnde tan\u0131mlan\u0131r ve daha geleneksel, \"imperatif\" bir ak\u0131\u015f sunar. Fonksiyonun ne yapt\u0131\u011f\u0131n\u0131 h\u0131zl\u0131ca anlamak i\u00e7in faydal\u0131d\u0131r. Hoisting nedeniyle, fonksiyonun tan\u0131m\u0131ndan \u00f6nce \u00e7a\u011fr\u0131lmas\u0131, baz\u0131lar\u0131 i\u00e7in okunabilirli\u011fi azaltabilirken, di\u011ferleri i\u00e7in mod\u00fclerli\u011fi art\u0131rabilir. * Function Declaration:<\/strong> Fonksiyonun ad\u0131 her zaman mevcuttur ve hata izlemede (stack trace) a\u00e7\u0131k\u00e7a g\u00f6r\u00fcn\u00fcr. Bu, bir hata olu\u015ftu\u011funda sorunun kayna\u011f\u0131n\u0131 bulmay\u0131 kolayla\u015ft\u0131r\u0131r. * Function Declaration:<\/strong> Hoisting nedeniyle fonksiyonlar, tan\u0131mland\u0131klar\u0131 yerden ba\u011f\u0131ms\u0131z olarak \u00e7a\u011fr\u0131labildi\u011finden, kodun yeniden d\u00fczenlenmesi s\u0131ras\u0131nda dikkatli olunmas\u0131 gerekir. Ancak, genel ama\u00e7l\u0131 fonksiyonlar i\u00e7in statik ve \u00f6ng\u00f6r\u00fclebilir bir yap\u0131 sunar. Function Declaration ve Function Expression, JavaScript'te fonksiyon tan\u0131mlaman\u0131n iki temel yoludur ve her birinin kendine \u00f6zg\u00fc avantajlar\u0131 ve dezavantajlar\u0131 vard\u0131r. Function Declaration'lar hoisting \u00f6zelli\u011fi sayesinde kodun herhangi bir yerinden \u00e7a\u011fr\u0131labilirken, Function Expression'lar bir de\u011fi\u015fkene atand\u0131klar\u0131 i\u00e7in daha \u00e7ok de\u011fi\u015fken kapsam kurallar\u0131na tabi olurlar ve genellikle tan\u0131mland\u0131klar\u0131 yerden sonra \u00e7a\u011fr\u0131lmal\u0131d\u0131r.<\/p>\n Se\u00e7iminiz, projenizin gereksinimlerine, kodun okunabilirli\u011fi hedeflerine ve hata ay\u0131klama kolayl\u0131\u011f\u0131na ba\u011fl\u0131 olmal\u0131d\u0131r. Genel ama\u00e7l\u0131, global fonksiyonlar i\u00e7in Function Declaration'lar uygunken, callback'ler, closure'lar, IIFE'ler ve \"Daha iyi\" diye kesin bir cevap vermek zordur; her ikisinin de kullan\u0131m alanlar\u0131 farkl\u0131d\u0131r. Modern JavaScript'te, Ok fonksiyonlar\u0131 (Arrow Functions), teknik olarak bir Function Expression t\u00fcr\u00fcd\u00fcr. Her zaman anonimdirler ve bir de\u011fi\u015fkene atanarak kullan\u0131l\u0131rlar. Geleneksel Function Expression'lardan farklar\u0131, daha k\u0131sa s\u00f6z dizimleri ve Function Expression'lar bir de\u011fi\u015fkene atand\u0131klar\u0131 i\u00e7in, hoisting davran\u0131\u015f\u0131 de\u011fi\u015fkenin hoisting kural\u0131na tabidir. Named Function Expression'lar, \u00f6zellikle hata ay\u0131klama (debugging) s\u00fcre\u00e7lerinde \u00f6nemlidir. Bir hata olu\u015ftu\u011funda, y\u0131\u011f\u0131n izlemede (stack trace) fonksiyonun ad\u0131n\u0131n g\u00f6r\u00fcnmesi, hatan\u0131n kayna\u011f\u0131n\u0131 tespit etmeyi \u00e7ok daha kolayla\u015ft\u0131r\u0131r. Ayr\u0131ca, \u00f6zyinelemeli (recursive) fonksiyonlar yazarken, fonksiyonun kendi ad\u0131n\u0131 kullanarak kendini \u00e7a\u011f\u0131rmas\u0131na olanak tan\u0131r, bu da kodun daha okunakl\u0131 olmas\u0131n\u0131 sa\u011flar.<\/p>\n","protected":false},"excerpt":{"rendered":"Function Declaration vs Function Expression: Farklar Nelerdir?","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-40999","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nfunction<\/code> anahtar kelimesiyle ba\u015flar, ard\u0131ndan fonksiyonun ad\u0131 gelir ve parantez i\u00e7inde parametreleri, s\u00fcsl\u00fc parantezler i\u00e7inde ise fonksiyonun g\u00f6vdesi yer al\u0131r. Bu t\u00fcr fonksiyonlar, kodun herhangi bir yerinde tan\u0131mlanabilir ve genellikle global veya fonksiyon kapsam\u0131na al\u0131n\u0131r.<\/p>\n\nfunction selamVer(isim) {\n return \"Merhaba, \" + isim + \"!\";\n}\n\nconsole.log(selamVer(\"Ay\u015fe\")); \/\/ Merhaba, Ay\u015fe!\n<\/pre>\nselamVer<\/code> ad\u0131nda bir fonksiyon bildirilmi\u015ftir. Fonksiyonun ad\u0131, ona do\u011frudan eri\u015fim sa\u011flar ve kodun di\u011fer yerlerinden \u00e7a\u011fr\u0131labilir.<\/p>\nFunction Expression Nedir?<\/h3>\n
function<\/code> anahtar kelimesi bir ifadenin par\u00e7as\u0131 olarak kullan\u0131l\u0131r. Fonksiyonun bir de\u011fi\u015fkene atanmas\u0131 nedeniyle, bu ifade bir de\u011fer olarak de\u011ferlendirilir ve de\u011fi\u015fkenin kapsam kurallar\u0131na tabi olur. Function Expression'lar anonim (isimsiz) veya isimlendirilmi\u015f olabilir.<\/p>\n\n\/\/ Anonim Function Expression\nconst selamVerExpress = function(isim) {\n return \"Merhaba, \" + isim + \"!\";\n};\n\nconsole.log(selamVerExpress(\"Ali\")); \/\/ Merhaba, Ali!\n<\/pre>\nselamVerExpress<\/code> adl\u0131 const<\/code> bir de\u011fi\u015fkene atanm\u0131\u015ft\u0131r. Fonksiyona bu de\u011fi\u015fken arac\u0131l\u0131\u011f\u0131yla eri\u015filir.<\/p>\nAnonim ve \u0130simlendirilmi\u015f Fonksiyon \u0130fadeleri<\/h3>\n
function<\/code> anahtar kelimesinden sonra bir isim belirtilmez. Ancak, hata ay\u0131klama s\u00fcre\u00e7lerinde veya \u00f6zyinelemeli (recursive) fonksiyonlarda faydal\u0131 olabilecek isimlendirilmi\u015f fonksiyon ifadeleri de tan\u0131mlanabilir.<\/p>\n\n\/\/ \u0130simlendirilmi\u015f Function Expression\nconst faktoriyel = function carpim(n) {\n if (n <= 1) {\n return 1;\n }\n return n * carpim(n - 1); \/\/ Fonksiyon kendi ismini kullanarak \u00f6zyinelemeli \u00e7a\u011fr\u0131 yapabilir\n};\n\nconsole.log(faktoriyel(5)); \/\/ 120\n\n\/\/ carpim ismi sadece fonksiyonun kendi i\u00e7inde ge\u00e7erlidir, d\u0131\u015far\u0131dan eri\u015filemez:\n\/\/ console.log(carpim(3)); \/\/ ReferenceError: carpim is not defined\n<\/pre>\ncarpim<\/code> ismi, sadece fonksiyonun kendi kapsam\u0131 i\u00e7inde ge\u00e7erlidir ve d\u0131\u015far\u0131dan do\u011frudan \u00e7a\u011fr\u0131lamaz. Bu, hata ay\u0131klama s\u0131ras\u0131nda y\u0131\u011f\u0131n izlemede (stack trace) fonksiyonun ad\u0131n\u0131n g\u00f6r\u00fcnmesini sa\u011flayarak s\u00fcreci kolayla\u015ft\u0131r\u0131r.<\/p>\nHoisting Mekanizmas\u0131 ve Davran\u0131\u015f Farklar\u0131<\/h2>\n
Declaration'lar\u0131n Hoisting'i<\/h3>\n
\nconsole.log(topla(5, 3)); \/\/ 8\n\nfunction topla(a, b) {\n return a + b;\n}\n<\/pre>\ntopla<\/code> fonksiyonu tan\u0131mlanmadan \u00f6nce \u00e7a\u011fr\u0131lmas\u0131na ra\u011fmen hata vermez ve beklenen sonucu d\u00f6nd\u00fcr\u00fcr. Bu, Function Declaration'lar\u0131n \"hoist\" edilmesinin bir sonucudur.<\/p>\nExpression'lar\u0131n Hoisting'i<\/h3>\n
var<\/code>, let<\/code>, const<\/code>) hoist edilir, ancak fonksiyonun kendisine atanan de\u011fer (yani fonksiyonun kodu) hoist edilmez. Bu nedenle, bir Function Expression, tan\u0131mland\u0131\u011f\u0131 sat\u0131rdan \u00f6nce \u00e7a\u011fr\u0131l\u0131rsa hata verir.<\/p>\n\n\/\/ console.log(carp(4, 2)); \/\/ Hata verir! ReferenceError: Cannot access 'carp' before initialization (let\/const i\u00e7in)\n\/\/ Veya TypeError: carp is not a function (var i\u00e7in)\n\nconst carp = function(a, b) {\n return a * b;\n};\n\nconsole.log(carp(4, 2)); \/\/ 8\n<\/pre>\nconst<\/code> veya let<\/code> ile tan\u0131mlanan bir Function Expression'\u0131, tan\u0131mland\u0131\u011f\u0131 sat\u0131rdan \u00f6nce \u00e7a\u011f\u0131rmaya \u00e7al\u0131\u015fmak ReferenceError<\/code> hatas\u0131na yol a\u00e7ar. E\u011fer var<\/code> ile tan\u0131mlanm\u0131\u015f olsayd\u0131, de\u011fi\u015fken hoist edilece\u011fi i\u00e7in undefined<\/code> olurdu ve undefined<\/code> bir fonksiyon gibi \u00e7a\u011fr\u0131lamayaca\u011f\u0131 i\u00e7in TypeError<\/code> hatas\u0131 al\u0131n\u0131rd\u0131.<\/p>\nPratik Uygulamalar ve Potansiyel Hatalar<\/h3>\n
Kapsam (Scope) ve \u0130simlendirme<\/h2>\n
Declaration'larda Global\/Fonksiyon Kapsam\u0131<\/h3>\n
\nfunction disFonksiyon() {\n function icFonksiyon() {\n console.log(\"\u0130\u00e7 fonksiyon \u00e7a\u011fr\u0131ld\u0131.\");\n }\n icFonksiyon(); \/\/ disFonksiyon i\u00e7inde icFonksiyon'a eri\u015filebilir\n}\n\ndisFonksiyon();\n\/\/ icFonksiyon(); \/\/ Hata verir! ReferenceError: icFonksiyon is not defined (d\u0131\u015far\u0131dan eri\u015filemez)\n<\/pre>\nicFonksiyon<\/code>, sadece disFonksiyon<\/code> i\u00e7inde eri\u015filebilir. E\u011fer global kapsamda tan\u0131mlansayd\u0131, t\u00fcm kod boyunca eri\u015filebilir olurdu.<\/p>\nExpression'larda De\u011fi\u015fken Kapsam\u0131<\/h3>\n
var<\/code>, let<\/code> veya const<\/code> ile tan\u0131mlanmalar\u0131na ba\u011fl\u0131 olarak farkl\u0131 kapsam davran\u0131\u015flar\u0131 sergilerler. let<\/code> ve const<\/code> ile tan\u0131mlananlar blok kapsaml\u0131d\u0131r, var<\/code> ile tan\u0131mlananlar ise fonksiyon kapsaml\u0131d\u0131r.<\/p>\n\nif (true) {\n const sayHello = function() {\n console.log(\"Merhaba!\");\n };\n sayHello(); \/\/ Merhaba! (if blo\u011fu i\u00e7inde eri\u015filebilir)\n}\n\n\/\/ sayHello(); \/\/ Hata verir! ReferenceError: sayHello is not defined (if blo\u011fu d\u0131\u015f\u0131nda eri\u015filemez)\n<\/pre>\nsayHello<\/code> fonksiyonu sadece if<\/code> blo\u011fu i\u00e7inde tan\u0131mlanm\u0131\u015f ve eri\u015filebilir durumdad\u0131r. Bu, kodun daha d\u00fczenli ve kapsanm\u0131\u015f olmas\u0131n\u0131 sa\u011flar.<\/p>\n\u0130simlendirilmi\u015f Fonksiyon \u0130fadelerinin Avantajlar\u0131<\/h3>\n
Kullan\u0131m Senaryolar\u0131 ve En \u0130yi Pratikler<\/h2>\n
Declaration Kullan\u0131m Alanlar\u0131<\/h3>\n
\n* Mod\u00fcl D\u0131\u015fa Aktar\u0131mlar\u0131:<\/strong> Mod\u00fcllerin d\u0131\u015fa aktard\u0131\u011f\u0131 ana i\u015flevler.
\n* Okunabilirlik Odakl\u0131 Kod:<\/strong> Kodun \u00fcst k\u0131s\u0131mlar\u0131nda tan\u0131mlanm\u0131\u015f ve alt k\u0131s\u0131mlar\u0131nda kullan\u0131lan fonksiyonlar.<\/p>\nExpression Kullan\u0131m Alanlar\u0131 (Callbacks, Closures, IIFE)<\/h3>\n
setTimeout<\/code>, setInterval<\/code>), olay dinleyicileri (addEventListener<\/code>) veya dizi metotlar\u0131 (map<\/code>, filter<\/code>, forEach<\/code>) gibi asenkron i\u015flemlerde s\u0131k\u00e7a kullan\u0131l\u0131r.<\/p>\n\n document.getElementById(\"btn\").addEventListener(\"click\", function() {\n console.log(\"Butona t\u0131kland\u0131!\");\n });\n <\/pre>\n
\n* Closures (Kapan\u0131\u015flar):<\/strong> Bir fonksiyonun, tan\u0131mland\u0131\u011f\u0131 ortamdaki de\u011fi\u015fkenlere eri\u015fmeye devam etmesini sa\u011flayan g\u00fc\u00e7l\u00fc bir JavaScript \u00f6zelli\u011fidir. Function Expression'lar bu yap\u0131y\u0131 olu\u015fturmak i\u00e7in idealdir.<\/p>\n\n function sayacOlusturucu() {\n let sayac = 0;\n return function() { \/\/ Bu bir Function Expression'd\u0131r (closure)\n sayac++;\n console.log(sayac);\n };\n }\n\n const sayac1 = sayacOlusturucu();\n sayac1(); \/\/ 1\n sayac1(); \/\/ 2\n <\/pre>\n
\n* Immediately Invoked Function Expressions (IIFE):<\/strong> Kendi kapsam\u0131n\u0131 olu\u015fturan ve hemen \u00e7al\u0131\u015fan fonksiyonlard\u0131r. Global kapsam\u0131 kirletmeden de\u011fi\u015fkenleri ve fonksiyonlar\u0131 izole etmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n\n (function() {\n const ozelDegisken = \"Bu sadece IIFE i\u00e7inde eri\u015filebilir.\";\n console.log(ozelDegisken);\n })();\n \/\/ console.log(ozelDegisken); \/\/ Hata verir!\n <\/pre>\n
\n* Mod\u00fcler Programlama:<\/strong> Fonksiyonlar\u0131 bir nesnenin \u00f6zelli\u011fi olarak tan\u0131mlamak veya mod\u00fcller i\u00e7inde \u00f6zel (private) fonksiyonlar olu\u015fturmak i\u00e7in.<\/p>\nModern JavaScript ve Ok Fonksiyonlar\u0131<\/h3>\n
this<\/code> ba\u011flamlar\u0131n\u0131 olu\u015fturmazlar (lexical this<\/code> kullan\u0131rlar).<\/p>\n\n\/\/ Geleneksel Function Expression\nconst toplaGeleneksel = function(a, b) {\n return a + b;\n};\n\n\/\/ Ok Fonksiyonu\nconst toplaOk = (a, b) => a + b;\n\nconsole.log(toplaOk(7, 3)); \/\/ 10\n<\/pre>\nthis<\/code> ba\u011flam\u0131 davran\u0131\u015flar\u0131 ve daha k\u0131sa s\u00f6z dizimi nedeniyle bir\u00e7ok durumda Function Expression'lara tercih edilebilir. Ancak, kendi this<\/code> ba\u011flamlar\u0131n\u0131 ba\u011flamad\u0131klar\u0131 i\u00e7in, nesne metotlar\u0131 olarak veya arguments<\/code> objesine ihtiya\u00e7 duyulan yerlerde dikkatli kullan\u0131lmal\u0131d\u0131rlar.<\/p>\n\"this\" Anahtar Kelimesinin Davran\u0131\u015f\u0131<\/h2>\n
this<\/code> anahtar kelimesi, fonksiyonun nas\u0131l \u00e7a\u011fr\u0131ld\u0131\u011f\u0131na ba\u011fl\u0131 olarak farkl\u0131 bir ba\u011flama i\u015faret edebilir. Function Declaration ve Function Expression'lar, this<\/code> ba\u011flam\u0131n\u0131 dinamik olarak belirlerken, ok fonksiyonlar\u0131 farkl\u0131 bir davran\u0131\u015f sergiler.<\/p>\nDeclaration ve Expression'da \"this\" Ba\u011flam\u0131<\/h3>\n
this<\/code>'in de\u011feri, fonksiyonun \u00e7a\u011fr\u0131ld\u0131\u011f\u0131 ba\u011flama (context) g\u00f6re de\u011fi\u015fir.<\/p>\nthis<\/code>, global objeyi (taray\u0131c\u0131da window<\/code>, Node.js'te global<\/code>) g\u00f6sterir.
\n* Nesne Metodu Olarak:<\/strong> this<\/code>, metodu \u00e7a\u011f\u0131ran nesneyi g\u00f6sterir.
\n* Olay Dinleyicisinde:<\/strong> this<\/code>, olay\u0131n ger\u00e7ekle\u015fti\u011fi HTML elementini g\u00f6sterir.
\n* call()<\/code>, apply()<\/code>, bind()<\/code> ile:<\/strong> this<\/code>, bu metotlarla a\u00e7\u0131k\u00e7a belirtilen objeyi g\u00f6sterir.
\n* \"Strict Mode\"da:<\/strong> this<\/code>, undefined<\/code> olur (global objeye ba\u011flanmaz).<\/p>\n\nconst araba = {\n marka: \"BMW\",\n hizlan: function() { \/\/ Function Expression\n console.log(this.marka + \" h\u0131zlan\u0131yor.\");\n }\n};\n\naraba.hizlan(); \/\/ BMW h\u0131zlan\u0131yor. (this, araba nesnesini g\u00f6sterir)\n\nconst hizlanTekBasina = araba.hizlan;\nhizlanTekBasina(); \/\/ undefined h\u0131zlan\u0131yor. (this, global objeyi g\u00f6sterir, strict mode'da hata verir)\n<\/pre>\nOk Fonksiyonlar\u0131nda Lexical \"this\"<\/h3>\n
this<\/code> ba\u011flamlar\u0131n\u0131 olu\u015fturmazlar. Bunun yerine, tan\u0131mland\u0131klar\u0131 ortamdaki (lexical scope) this<\/code> de\u011ferini miras al\u0131rlar. Bu davran\u0131\u015f, \u00f6zellikle i\u00e7 i\u00e7e fonksiyonlarda this<\/code> ba\u011flam\u0131n\u0131 y\u00f6netmeyi \u00e7ok daha kolayla\u015ft\u0131r\u0131r.<\/p>\n\nconst motor = {\n marka: \"Yamaha\",\n calistir: function() { \/\/ Function Expression (kendi this'i var)\n console.log(this.marka + \" \u00e7al\u0131\u015f\u0131yor.\");\n\n setTimeout(() => { \/\/ Ok fonksiyonu (d\u0131\u015f kapsamdaki this'i miras al\u0131r)\n console.log(this.marka + \" r\u00f6lantide.\");\n }, 1000);\n }\n};\n\nmotor.calistir();\n\/\/ \u00c7\u0131kt\u0131:\n\/\/ Yamaha \u00e7al\u0131\u015f\u0131yor.\n\/\/ (1 saniye sonra)\n\/\/ Yamaha r\u00f6lantide.\n<\/pre>\nsetTimeout<\/code> i\u00e7indeki fonksiyon bir Function Expression olsayd\u0131, this<\/code> window<\/code> objesini g\u00f6sterir ve this.marka<\/code> undefined<\/code> olurdu. Ok fonksiyonlar\u0131, bu t\u00fcr durumlarda this<\/code> ba\u011flam\u0131n\u0131 korumak i\u00e7in idealdir.<\/p>\nBa\u011flam Y\u00f6netimi \u0130pu\u00e7lar\u0131<\/h3>\n
this<\/code> ba\u011flam\u0131n\u0131 anlamak ve do\u011fru y\u00f6netmek, JavaScript'te ustala\u015fman\u0131n \u00f6nemli bir par\u00e7as\u0131d\u0131r.
\n* Function Declaration\/Expression:<\/strong> Fonksiyonun nas\u0131l \u00e7a\u011fr\u0131ld\u0131\u011f\u0131na dikkat edin. Bir nesnenin metodu olarak m\u0131, yoksa ba\u011f\u0131ms\u0131z bir fonksiyon olarak m\u0131?
\n* Ok Fonksiyonlar\u0131:<\/strong> \u00d6zellikle callback'lerde veya i\u00e7 i\u00e7e fonksiyonlarda this<\/code> ba\u011flam\u0131n\u0131 korumak istedi\u011finizde tercih edin.
\n* bind()<\/code>, call()<\/code>, apply()<\/code>:<\/strong> this<\/code> ba\u011flam\u0131n\u0131 a\u00e7\u0131k\u00e7a kontrol etmeniz gerekti\u011finde bu metotlar\u0131 kullan\u0131n.<\/p>\nOkunabilirlik, Bak\u0131m ve Hata Ay\u0131klama<\/h2>\n
Kod Okunabilirli\u011fi \u00dczerine Etkileri<\/h3>\n
\n* Function Expression:<\/strong> Daha \u00e7ok bir de\u011fi\u015fkene atama gibi davrand\u0131\u011f\u0131 i\u00e7in, kodun ak\u0131\u015f\u0131nda daha \"do\u011fal\" bir yere sahip olabilir. \u00d6zellikle callback veya IIFE gibi belirli senaryolarda kullan\u0131ld\u0131\u011f\u0131nda, kodun amac\u0131n\u0131 daha net g\u00f6sterebilir. Ok fonksiyonlar\u0131, k\u0131sa ve \u00f6z s\u00f6z dizimleri sayesinde \u00f6zellikle k\u00fc\u00e7\u00fck, tek sat\u0131rl\u0131k fonksiyonlarda okunabilirli\u011fi art\u0131r\u0131r.<\/p>\nHata Ay\u0131klama S\u00fcre\u00e7leri<\/h3>\n
\n* Anonim Function Expression:<\/strong> Anonim fonksiyonlar, hata izlemede genellikle \"anonymous function\" olarak g\u00f6r\u00fcn\u00fcr. Bu, \u00f6zellikle i\u00e7 i\u00e7e veya karma\u015f\u0131k callback zincirlerinde hatan\u0131n hangi anonim fonksiyondan geldi\u011fini anlamay\u0131 zorla\u015ft\u0131rabilir.
\n* \u0130simlendirilmi\u015f Function Expression:<\/strong> Hata ay\u0131klama a\u00e7\u0131s\u0131ndan anonim ifadelere g\u00f6re daha avantajl\u0131d\u0131r. Fonksiyonun ad\u0131, y\u0131\u011f\u0131n izlemede g\u00f6r\u00fcn\u00fcr ve hata tespiti s\u00fcrecini basitle\u015ftirir.<\/p>\nKod Bak\u0131m Kolayl\u0131\u011f\u0131<\/h3>\n
\n* Function Expression:<\/strong> \u00d6zellikle const<\/code> ile kullan\u0131ld\u0131\u011f\u0131nda, fonksiyonun sadece tan\u0131mland\u0131\u011f\u0131 yerde eri\u015filebilir olmas\u0131n\u0131 sa\u011flayarak daha kapsanm\u0131\u015f ve izole kod bloklar\u0131 olu\u015fturur. Bu, b\u00fcy\u00fck kod tabanlar\u0131nda ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00f6netmeyi ve kodun yan etkilerini azaltmay\u0131 kolayla\u015ft\u0131r\u0131r, bu da bak\u0131m\u0131 basitle\u015ftirir. IIFE'ler ve closure'lar, mod\u00fclerli\u011fi art\u0131rarak bak\u0131m y\u00fck\u00fcn\u00fc azaltabilir.<\/p>\nSonu\u00e7<\/h2>\n
this<\/code> ba\u011flam\u0131n\u0131 korumak istedi\u011finiz durumlar i\u00e7in Function Expression'lar (\u00f6zellikle ok fonksiyonlar\u0131) daha iyi bir se\u00e7imdir. Modern JavaScript geli\u015ftirme prati\u011finde, const<\/code> ile tan\u0131mlanm\u0131\u015f Function Expression'lar ve ok fonksiyonlar\u0131, kodun daha \u00f6ng\u00f6r\u00fclebilir, kapsanm\u0131\u015f ve okunabilir olmas\u0131n\u0131 sa\u011flayarak s\u0131kl\u0131kla tercih edilmektedir. Her iki y\u00f6ntemi de anlamak ve do\u011fru yerde kullanmak, daha sa\u011flam ve s\u00fcrd\u00fcr\u00fclebilir JavaScript kodu yazman\u0131za yard\u0131mc\u0131 olacakt\u0131r.<\/p>\nS\u0131k Sorulan Sorular (SSS)<\/h2>\n
Hangisi daha iyi bir pratik veya performansl\u0131d\u0131r?<\/h3>\n
const<\/code> ile tan\u0131mlanm\u0131\u015f Function Expression'lar ve ok fonksiyonlar\u0131, hoisting'in getirdi\u011fi belirsizlikleri azaltt\u0131\u011f\u0131 ve kapsam y\u00f6netimini kolayla\u015ft\u0131rd\u0131\u011f\u0131 i\u00e7in genellikle tercih edilir. Performans a\u00e7\u0131s\u0131ndan, \u00e7o\u011fu durumda aralar\u0131nda g\u00f6zle g\u00f6r\u00fcl\u00fcr bir fark yoktur. \u00d6nemli olan, ba\u011flama uygun olan\u0131 se\u00e7mektir.<\/p>\nOk fonksiyonlar\u0131 bu iki kategoriye mi girer?<\/h3>\n
this<\/code> ba\u011flam\u0131n\u0131 tan\u0131mland\u0131klar\u0131 ortamdan (lexical scope) miras almalar\u0131d\u0131r.<\/p>\nNeden Function Expression'lar hoisting'e tabi de\u011fildir?<\/h3>\n
var<\/code> ile tan\u0131mlanan de\u011fi\u015fkenler hoist edilir ancak undefined<\/code> olarak ba\u015flat\u0131l\u0131r; let<\/code> ve const<\/code> ile tan\u0131mlananlar ise hoist edilse bile ba\u015flat\u0131lmazlar ve eri\u015filemezler (Temporal Dead Zone<\/code>). Fonksiyonun kendisi bir de\u011fer oldu\u011fu i\u00e7in, de\u011fi\u015fken atanana kadar bu de\u011fere eri\u015filemez. Bu nedenle, fonksiyonun kodu tan\u0131mlanmadan \u00f6nce \u00e7a\u011fr\u0131lamaz.<\/p>\nNamed Function Expression kullanmak neden \u00f6nemlidir?<\/h3>\n