JavaScript d\u00fcnyas\u0131na yeni ad\u0131m atanlar veya tecr\u00fcbeli geli\u015ftiriciler i\u00e7in closure’lar, ba\u015flang\u0131\u00e7ta gizemli ve karma\u015f\u0131k g\u00f6r\u00fcnebilir. Ancak endi\u015felenmeyin, bu \u201csihirli\u201d yap\u0131lar asl\u0131nda JavaScript’in temel mekanizmalar\u0131n\u0131n do\u011fal bir sonucudur. Closure’lar\u0131 tam anlam\u0131yla kavrayabilmek i\u00e7in, \u00f6ncelikle JavaScript’in y\u00fcr\u00fctme ba\u011flam\u0131, kapsam (scope) ve ‘this’<\/a> anahtar kelimesinin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 derinlemesine anlamak kritik \u00f6nem ta\u015f\u0131r. Bu kapsaml\u0131 rehberde, kodunuzun derinliklerine inerek, ba\u011flam kavram\u0131n\u0131n inceliklerini ad\u0131m ad\u0131m ke\u015ffedecek ve b\u00f6ylece closure’lara sa\u011flam bir zemin haz\u0131rlayaca\u011f\u0131z.<\/p>\n Modern JavaScript uygulamalar\u0131, kullan\u0131c\u0131 etkile\u015fimlerinden veri y\u00f6netimine kadar pek \u00e7ok farkl\u0131 katmanda karma\u015f\u0131k mant\u0131klar bar\u0131nd\u0131r\u0131r. Bu karma\u015f\u0131kl\u0131\u011f\u0131n \u00fcstesinden gelmek i\u00e7in, geli\u015ftiricilerin kodlar\u0131n\u0131n sadece ne yapt\u0131\u011f\u0131n\u0131 de\u011fil, ayn\u0131 zamanda nas\u0131l<\/em> ve nerede<\/em> \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 da bilmesi gerekir. \u0130\u015fte tam da bu noktada \u201cba\u011flam\u201d kavram\u0131 devreye girer. Ba\u011flam, bir fonksiyonun veya kod blo\u011funun ne zaman, nerede ve hangi verilere eri\u015febilece\u011fini belirleyen \u00e7evresel ko\u015fullar b\u00fct\u00fcn\u00fcd\u00fcr. \u00c7o\u011fu zaman g\u00f6z ard\u0131 edilen bu temel yap\u0131 ta\u015flar\u0131, de\u011fi\u015fkenlerin ya\u015fam d\u00f6ng\u00fcs\u00fcnden fonksiyonlar\u0131n davran\u0131\u015flar\u0131na, hatta performans optimizasyonlar\u0131na kadar her \u015feyi etkiler.<\/p>\n D\u00fc\u015f\u00fcnsenize, bir kod par\u00e7as\u0131 yazd\u0131n\u0131z ve bekledi\u011finiz gibi \u00e7al\u0131\u015fm\u0131yor. Muhtemelen sorun, o kodun hangi ba\u011flamda \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 tam olarak anlayamaman\u0131zdan kaynaklan\u0131yordur. \u00d6zellikle asenkron i\u015flemler, olay dinleyicileri veya mod\u00fcler yap\u0131larla \u00e7al\u0131\u015f\u0131rken, ‘this’<\/a> anahtar kelimesinin beklenmedik davran\u0131\u015flar\u0131 veya d\u0131\u015f kapsamdaki de\u011fi\u015fkenlere eri\u015fim sorunlar\u0131 s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan senaryolard\u0131r. \u0130\u015fte bu gibi durumlarda, y\u00fcr\u00fctme ba\u011flam\u0131n\u0131, de\u011fi\u015fken kapsam\u0131n\u0131 ve ‘this’<\/a> de\u011ferinin nas\u0131l belirlendi\u011fini bilmek, sizi saatler s\u00fcren hata ay\u0131klama s\u00fcre\u00e7lerinden kurtarabilir. Closure’lar ise, tam da bu ba\u011flam y\u00f6netimi yeteneklerinin bir sonucudur. D\u0131\u015f kapsamdaki de\u011fi\u015fkenleri “kapatma” (closure) yetene\u011fi, ancak o de\u011fi\u015fkenlerin ya\u015fam s\u00fcresini ve eri\u015fim kurallar\u0131n\u0131 belirleyen ba\u011flam\u0131 tam olarak anlad\u0131\u011f\u0131m\u0131zda anlam kazan\u0131r. Bu rehberde, bu temel prensipleri somut \u00f6rneklerle ele alacak, b\u00f6ylece JavaScript’in kalbine giden yolu ayd\u0131nlataca\u011f\u0131z.<\/p>\n K\u0131sacas\u0131, closure’lar, JavaScript’in en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biri olabilir; ancak temel ba\u011flam mekanizmalar\u0131n\u0131 anlamadan onlar\u0131 do\u011fru bir \u015fekilde kullanmak veya potansiyel tuzaklardan ka\u00e7\u0131nmak neredeyse imkans\u0131zd\u0131r. Bu makale, sizi bu temel bilgilerle donatarak, daha temiz, daha \u00f6ng\u00f6r\u00fclebilir ve daha az hataya a\u00e7\u0131k kodlar yazman\u0131z i\u00e7in gerekli altyap\u0131y\u0131 sa\u011flayacakt\u0131r.<\/p>\n JavaScript motoru, kodumuzu \u00e7al\u0131\u015ft\u0131r\u0131rken her \u015feyi bir “y\u00fcr\u00fctme ba\u011flam\u0131” i\u00e7inde yapar. Bu y\u00fcr\u00fctme ba\u011flam\u0131, kodun \u00e7al\u0131\u015ft\u0131r\u0131ld\u0131\u011f\u0131 ortam\u0131 tan\u0131mlayan soyut bir kavramd\u0131r. Her JavaScript kodu \u00e7al\u0131\u015ft\u0131r\u0131ld\u0131\u011f\u0131nda, motor bir y\u00fcr\u00fctme ba\u011flam\u0131 olu\u015fturur. Temel olarak iki t\u00fcr y\u00fcr\u00fctme ba\u011flam\u0131 vard\u0131r:<\/p>\n Her y\u00fcr\u00fctme ba\u011flam\u0131 \u00fc\u00e7 ana bile\u015fenden olu\u015fur:<\/p>\n T\u00fcm bu y\u00fcr\u00fctme ba\u011flamlar\u0131, bir “\u00c7a\u011fr\u0131 Y\u0131\u011f\u0131n\u0131” (Call Stack) ad\u0131 verilen LIFO (Last-In, First-Out) prensibiyle \u00e7al\u0131\u015fan bir veri yap\u0131s\u0131nda y\u00f6netilir. Bir fonksiyon \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda, onun y\u00fcr\u00fctme ba\u011flam\u0131 y\u0131\u011f\u0131na eklenir. Fonksiyon i\u015fini bitirdi\u011finde, ba\u011flam y\u0131\u011f\u0131ndan \u00e7\u0131kar\u0131l\u0131r. Global y\u00fcr\u00fctme ba\u011flam\u0131 her zaman y\u0131\u011f\u0131n\u0131n en alt\u0131nda bulunur.<\/p>\n <\/code><\/p>\n Bu mekanizmay\u0131 anlamak, JavaScript'in de\u011fi\u015fkenlere nas\u0131l eri\u015fti\u011fini ve closure'lar\u0131n nas\u0131l olu\u015ftu\u011funu kavramak i\u00e7in temel bir ad\u0131md\u0131r.<\/p>\n JavaScript'te kapsam (scope), de\u011fi\u015fkenlerin ve fonksiyonlar\u0131n nerede eri\u015filebilir oldu\u011funu belirleyen kurallar b\u00fct\u00fcn\u00fcd\u00fcr. Bu kurallar, kodumuzun okunabilirli\u011fini ve bak\u0131m\u0131n\u0131 do\u011frudan etkilerken, ayn\u0131 zamanda hatalar\u0131n \u00f6nlenmesine de yard\u0131mc\u0131 olur. JavaScript, s\u00f6zc\u00fcksel kapsamlamay\u0131 (lexical scoping) kullan\u0131r, yani de\u011fi\u015fkenlerin kapsam\u0131, kodun fiziksel olarak nerede yaz\u0131ld\u0131\u011f\u0131na g\u00f6re belirlenir, \u00e7al\u0131\u015fma zaman\u0131na g\u00f6re de\u011fil.<\/p>\n JavaScript'te \u00fc\u00e7 ana kapsam t\u00fcr\u00fc bulunur:<\/p>\n Scope Zinciri (Scope Chain):<\/strong> Bir fonksiyon \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda ve bir de\u011fi\u015fkene eri\u015fmeye \u00e7al\u0131\u015f\u0131ld\u0131\u011f\u0131nda, JavaScript motoru belirli bir s\u0131rayla kapsamlar\u0131 kontrol eder. Bu s\u0131raya \"scope zinciri\" denir. JavaScript, de\u011fi\u015fkeni ilk olarak mevcut kapsamda arar. Bulamazsa, bir \u00fcst kapsama (yani, fonksiyonun tan\u0131mland\u0131\u011f\u0131 d\u0131\u015f kapsama) bakar. Bu i\u015flem, de\u011fi\u015fkeni bulana veya global kapsama ula\u015fana kadar devam eder. Global kapsamda da bulunamazsa, bir hata ( <\/code><\/p>\n Yukar\u0131daki \u00f6rnekte, Bu temel farkl\u0131l\u0131klar\u0131 kavramak, daha modern ve g\u00fcvenli JavaScript yazmak i\u00e7in kritik bir ad\u0131md\u0131r.<\/p>\n JavaScript'teki 'this'<\/a> anahtar kelimesi, \u00e7o\u011fu geli\u015ftiricinin kafas\u0131n\u0131 kar\u0131\u015ft\u0131ran, hatta deneyimli olanlar\u0131n bile zaman zaman hata yapmas\u0131na neden olan bir yap\u0131d\u0131r. 'this'<\/a>, bir fonksiyonun \u00e7a\u011fr\u0131ld\u0131\u011f\u0131 anki ba\u011flama g\u00f6re de\u011ferini dinamik olarak de\u011fi\u015ftiren bir referanst\u0131r. Yani, 'this'<\/a>'in de\u011feri, fonksiyonun nas\u0131l<\/em> \u00e7a\u011fr\u0131ld\u0131\u011f\u0131na ba\u011fl\u0131d\u0131r, nerede<\/em> tan\u0131mland\u0131\u011f\u0131na de\u011fil (arrow fonksiyonlar\u0131 hari\u00e7).<\/p>\n <\/code>\n <\/li>\n <\/code>\n <\/li>\n <\/code>\n <\/li>\n <\/code>\n <\/li>\n<\/ul>\n<\/li>\n <\/code><\/p>\n E\u011fer Y\u00fcr\u00fctme ba\u011flam\u0131n\u0131, kapsam\u0131 ve 'this'<\/a> anahtar kelimesini anlamak sadece teorik bir bilgi y\u0131\u011f\u0131n\u0131 de\u011fildir; ayn\u0131 zamanda g\u00fcnl\u00fck kodlama pratiklerinizde size somut faydalar sa\u011flayacak g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Bu bilgiyi kullanarak kodunuzu daha optimize, daha az hataya a\u00e7\u0131k ve daha mod\u00fcler hale getirebilirsiniz.<\/p>\n Frontend geli\u015ftirmede en s\u0131k kar\u015f\u0131la\u015f\u0131lan senaryolardan biri, bir DOM eleman\u0131na olay dinleyici (event listener) eklemektir. Bir\u00e7ok durumda, olay dinleyici i\u00e7indeki <\/code><\/p>\n Yukar\u0131daki \u00f6rnekte, Ba\u011flam ve kapsam bilgisi, \u00f6zellikle b\u00fcy\u00fck uygulamalarda kodun mod\u00fclerli\u011fini ve s\u00fcrd\u00fcr\u00fclebilirli\u011fini art\u0131ran desenlerin olu\u015fturulmas\u0131nda anahtar rol oynar. Mod\u00fcl Deseni, \u00f6zel (private) de\u011fi\u015fkenleri ve fonksiyonlar\u0131 olu\u015fturmak i\u00e7in closure'lar\u0131 ve dolay\u0131s\u0131yla ba\u011flam bilgisini kullan\u0131r.<\/p>\n <\/code><\/p>\n Bu \"Immediately Invoked Function Expression\" (IIFE)<\/a> deseni, Bellek Y\u00f6netimi ve Performans:<\/strong> Ba\u011flam bilgisi, performans optimizasyonlar\u0131nda da etkilidir. \u00d6rne\u011fin, gereksiz closure'lar olu\u015fturmaktan ka\u00e7\u0131narak veya b\u00fcy\u00fck objeleri global kapsamda tutmaktan vazge\u00e7erek bellek kullan\u0131m\u0131n\u0131 azaltabilirsiniz. De\u011fi\u015fkenlerin ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc ve eri\u015filebilirli\u011fini do\u011fru bir \u015fekilde y\u00f6netmek, \u00f6zellikle uzun \u00f6m\u00fcrl\u00fc uygulamalarda kaynak kullan\u0131m\u0131n\u0131 optimize etmek i\u00e7in hayati \u00f6neme sahiptir. Kapsam d\u0131\u015f\u0131na \u00e7\u0131kan referanslar\u0131 d\u00fczg\u00fcn bir \u015fekilde temizlemek, \u00e7\u00f6p toplay\u0131c\u0131n\u0131n (garbage collector) i\u015fini kolayla\u015ft\u0131r\u0131r ve bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nler.<\/p>\n Bu pratik uygulamalar, ba\u011flam bilgisinin sadece soyut bir kavram olmad\u0131\u011f\u0131n\u0131, ayn\u0131 zamanda g\u00fcnl\u00fck kodlama m\u00fccadelelerinizde size nas\u0131l somut avantajlar sa\u011flayabilece\u011fini a\u00e7\u0131k\u00e7a g\u00f6stermektedir. Bu temel mekanizmalar\u0131 sa\u011flam bir \u015fekilde kavrad\u0131\u011f\u0131n\u0131zda, daha ileri d\u00fczey konulara (closure'lar gibi) \u00e7ok daha rahat bir \u015fekilde adapte olabilirsiniz.<\/p>\n Temel y\u00fcr\u00fctme ba\u011flam\u0131, kapsam ve 'this'<\/a> kavramlar\u0131n\u0131 anlad\u0131\u011f\u0131m\u0131za g\u00f6re, \u015fimdi bu bilgiyi kullanarak daha karma\u015f\u0131k senaryolar\u0131 nas\u0131l y\u00f6netece\u011fimize ve yayg\u0131n tuzaklardan nas\u0131l ka\u00e7\u0131naca\u011f\u0131m\u0131za odaklanal\u0131m. JavaScript'in dinamik yap\u0131s\u0131, ba\u011flam\u0131 manip\u00fcle etme esnekli\u011fi sunarken, ayn\u0131 zamanda dikkatli olunmazsa beklenmedik sorunlara yol a\u00e7abilir.<\/p>\n Daha \u00f6nce bahsetti\u011fimiz kapsam zinciri, de\u011fi\u015fkenlere eri\u015fim kurallar\u0131n\u0131 belirler. Ancak bazen, bir de\u011fi\u015fkene eri\u015fmeye \u00e7al\u0131\u015ft\u0131\u011f\u0131m\u0131zda, o de\u011fi\u015fkenin mevcut kapsamda veya kapsam zincirinde olmad\u0131\u011f\u0131n\u0131 g\u00f6r\u00fcr\u00fcz ve <\/code><\/p>\n Web uygulamalar\u0131m\u0131z\u0131n mobil cihazlarda da sorunsuz \u00e7al\u0131\u015fmas\u0131, g\u00fcn\u00fcm\u00fcz\u00fcn vazge\u00e7ilmez bir gereksinimidir. Mobil cihazlar\u0131n k\u0131s\u0131tl\u0131 i\u015flem g\u00fcc\u00fc ve bellek kaynaklar\u0131, ba\u011flam y\u00f6netimini daha da kritik hale getirir. Gereksiz closure'lar veya b\u00fcy\u00fck objeleri uzun s\u00fcre bellekte tutan referanslar, mobil cihazlarda performans d\u00fc\u015f\u00fc\u015flerine ve hatta uygulaman\u0131n \u00e7\u00f6kmesine yol a\u00e7abilir. Media query<\/a>'ler gibi responsive tasar\u0131m ara\u00e7lar\u0131 UI taraf\u0131nda devreye girerken, JavaScript taraf\u0131nda da ba\u011flam\u0131 etkin y\u00f6netmek gerekir. \u00d6rne\u011fin:<\/p>\n Ba\u011flam\u0131n derinlemesine anla\u015f\u0131lmas\u0131, sadece kodunuzun do\u011frulu\u011funu art\u0131rmakla kalmaz, ayn\u0131 zamanda uygulaman\u0131z\u0131n performans\u0131n\u0131 ve genel sa\u011fl\u0131\u011f\u0131n\u0131 da do\u011frudan etkiler. Bu ileri d\u00fczey kavramlar, sizi daha yetkin bir JavaScript geli\u015ftiricisi haline getirecek ve karma\u015f\u0131k sorunlarla ba\u015fa \u00e7\u0131kma yetene\u011finizi g\u00fc\u00e7lendirecektir.<\/p>\n Bu makale boyunca, JavaScript'in y\u00fcr\u00fctme ba\u011flam\u0131, kapsam (scope) zinciri ve 'this'<\/a> anahtar kelimesinin inceliklerini ayr\u0131nt\u0131l\u0131 bir \u015fekilde inceledik. Art\u0131k biliyorsunuz ki, bir fonksiyonun veya de\u011fi\u015fkenin davran\u0131\u015f\u0131n\u0131 belirleyen sadece yazd\u0131\u011f\u0131n\u0131z kod de\u011fil, ayn\u0131 zamanda o kodun hangi \u00e7evrede ve hangi ko\u015fullar alt\u0131nda \u00e7al\u0131\u015ft\u0131\u011f\u0131d\u0131r. Bu temel kavramlar, JavaScript'in \u00e7al\u0131\u015fma mekanizmas\u0131n\u0131n omurgas\u0131n\u0131 olu\u015fturur ve bu omurgay\u0131 sa\u011flam bir \u015fekilde anlamak, daha karma\u015f\u0131k yap\u0131 ta\u015flar\u0131n\u0131, \u00f6zellikle de closure'lar\u0131 do\u011fru bir \u015fekilde kavraman\u0131n \u00f6n ko\u015fuludur.<\/p>\n Closure'lar, asl\u0131nda kapsam zincirinin ve fonksiyonlar\u0131n kendi olu\u015fturulduklar\u0131 s\u00f6zc\u00fcksel ortam\u0131 \"hat\u0131rlama\" yetene\u011finin do\u011fal bir sonucudur. Bir fonksiyon, kendi d\u0131\u015f kapsam\u0131ndaki de\u011fi\u015fkenlere, d\u0131\u015f fonksiyonun y\u00fcr\u00fctmesi sona ermi\u015f olsa bile eri\u015febiliyorsa, bu bir closure'd\u0131r. Bu yetenek, veri gizleme, durum y\u00f6netimi, currying gibi bir\u00e7ok g\u00fc\u00e7l\u00fc programlama desenine olanak tan\u0131r. Ancak, bu sihirli yap\u0131larla \u00e7al\u0131\u015f\u0131rken, ba\u011flam\u0131n nas\u0131l de\u011fi\u015fti\u011fini ve de\u011fi\u015fkenlerin ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc g\u00f6z ard\u0131 etmek, kolayca bellek s\u0131z\u0131nt\u0131lar\u0131na veya beklenmeyen davran\u0131\u015flara yol a\u00e7abilir.<\/p>\n \u00d6zetle, JavaScript'in kalbindeki bu temel mekanizmalar\u0131 sa\u011flam bir \u015fekilde \u00f6\u011frenmek, sadece closure'lar\u0131 de\u011fil, ayn\u0131 zamanda Promise'ler, async\/await, mod\u00fcl sistemleri, hatta React veya Vue gibi modern k\u00fct\u00fcphanelerdeki state y\u00f6netimi gibi ileri d\u00fczey konular\u0131 da daha derinlemesine anlaman\u0131za yard\u0131mc\u0131 olacakt\u0131r. Art\u0131k closure'lara giden yolda sa\u011flam bir temele sahipsiniz. Bu bilgiyi kullanarak, daha temiz, daha verimli ve daha profesyonel JavaScript kodlar\u0131 yazmaya haz\u0131rs\u0131n\u0131z!<\/p>\n \u0130\u015fte JavaScript ba\u011flam\u0131 hakk\u0131nda en s\u0131k kar\u015f\u0131la\u015f\u0131lan baz\u0131 sorular ve cevaplar\u0131:<\/p>\nJavaScript’te Y\u00fcr\u00fctme Ba\u011flam\u0131 (Execution Context) Nedir?<\/h2>\n
\n
window<\/code> objesini, Node.js ortam\u0131nda ise global<\/code> objesini ifade eder. T\u00fcm global de\u011fi\u015fkenler ve fonksiyonlar bu ba\u011flamda tan\u0131mlan\u0131r. Betik \u00e7al\u0131\u015fmaya ba\u015flad\u0131\u011f\u0131nda ilk ve tek olu\u015fan ba\u011flam budur.<\/li>\n\n
var<\/code>, fonksiyon bildirimleri) ve fonksiyonlar\u0131n arg\u00fcmanlar\u0131n\u0131 i\u00e7erir. ES6 ile birlikte gelen let<\/code> ve const<\/code> anahtar kelimeleriyle tan\u0131mlanan de\u011fi\u015fkenler ise, daha \u00e7ok “Lexical Environment” i\u00e7inde ele al\u0131n\u0131r ve TDZ (Temporal Dead Zone) gibi farkl\u0131 davran\u0131\u015flar sergilerler.<\/li>\nthis<\/code> Ba\u011flam\u0131:<\/strong> ‘this’<\/a> anahtar kelimesinin hangi objeyi referans ald\u0131\u011f\u0131n\u0131 belirleyen bile\u015fendir. Bu de\u011fer, fonksiyonun nas\u0131l \u00e7a\u011fr\u0131ld\u0131\u011f\u0131na ba\u011fl\u0131 olarak dinamik olarak de\u011fi\u015febilir, bu da \u00e7o\u011fu geli\u015ftiricinin kafas\u0131n\u0131 kar\u0131\u015ft\u0131ran bir noktad\u0131r.<\/li>\n<\/ol>\n\nfunction birinciFonksiyon() {\n console.log(\"Birinci fonksiyon \u00e7al\u0131\u015f\u0131yor.\");\n ikinciFonksiyon();\n console.log(\"Birinci fonksiyon bitti.\");\n}\n\nfunction ikinciFonksiyon() {\n console.log(\"\u0130kinci fonksiyon \u00e7al\u0131\u015f\u0131yor.\");\n}\n\nbirinciFonksiyon();\n\/\/ \u00c7a\u011fr\u0131 Y\u0131\u011f\u0131n\u0131 Olu\u015fumu:\n\/\/ 1. Global EC (y\u0131\u011f\u0131na eklenir)\n\/\/ 2. birinciFonksiyon EC (birinciFonksiyon \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda y\u0131\u011f\u0131na eklenir)\n\/\/ 3. ikinciFonksiyon EC (ikinciFonksiyon \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda y\u0131\u011f\u0131na eklenir)\n\/\/ 4. ikinciFonksiyon EC biter, y\u0131\u011f\u0131ndan \u00e7\u0131kar\n\/\/ 5. birinciFonksiyon EC biter, y\u0131\u011f\u0131ndan \u00e7\u0131kar\n\/\/ 6. Global EC biter (betik sona erdi\u011finde)\n <\/pre>\nScope Zinciri ve De\u011fi\u015fken Eri\u015fimi Nas\u0131l \u0130\u015fler?<\/h2>\n
\n
var<\/code> ile) yaln\u0131zca o fonksiyon i\u00e7inde eri\u015filebilir. Fonksiyon d\u0131\u015f\u0131nda bu de\u011fi\u015fkenlere eri\u015fmeye \u00e7al\u0131\u015fmak bir referans hatas\u0131na yol a\u00e7ar. Bu, de\u011fi\u015fkenlerin fonksiyonun \u00f6mr\u00fcyle s\u0131n\u0131rl\u0131 kalmas\u0131n\u0131 sa\u011flar.<\/li>\nlet<\/code> ve const<\/code> anahtar kelimeleri ile tan\u0131t\u0131lan bu kapsam t\u00fcr\u00fc, s\u00fcsl\u00fc parantez {}<\/code> ile tan\u0131mlanan her blok i\u00e7inde ge\u00e7erlidir (\u00f6rne\u011fin, if<\/code> bloklar\u0131, for<\/code> d\u00f6ng\u00fcleri). Bu, de\u011fi\u015fkenlerin yaln\u0131zca tan\u0131mland\u0131klar\u0131 blok i\u00e7inde eri\u015filebilir oldu\u011fu anlam\u0131na gelir ve var<\/code> ile gelen baz\u0131 beklenmedik davran\u0131\u015flar\u0131 ortadan kald\u0131r\u0131r.<\/li>\n<\/ul>\nReferenceError<\/code>) f\u0131rlat\u0131l\u0131r.<\/p>\n\nlet globalDegisken = \"Ben globalim\";\n\nfunction disFonksiyon() {\n let disDegisken = \"Ben d\u0131\u015far\u0131day\u0131m\";\n\n function icFonksiyon() {\n let icDegisken = \"Ben i\u00e7erideyim\";\n console.log(icDegisken); \/\/ 'icDegisken' mevcut kapsamda bulunur\n console.log(disDegisken); \/\/ 'disDegisken' bir \u00fcst kapsamda bulunur\n console.log(globalDegisken); \/\/ 'globalDegisken' en \u00fcst (global) kapsamda bulunur\n }\n\n icFonksiyon();\n \/\/ console.log(icDegisken); \/\/ Hata! icDegisken burada tan\u0131ml\u0131 de\u011fil\n}\n\ndisFonksiyon();\n\/\/ console.log(disDegisken); \/\/ Hata! disDegisken burada tan\u0131ml\u0131 de\u011fil\n <\/pre>\nicFonksiyon<\/code> kendi kapsam\u0131ndaki icDegisken<\/code>'e, ard\u0131ndan tan\u0131mland\u0131\u011f\u0131 yer olan disFonksiyon<\/code>'un kapsam\u0131ndaki disDegisken<\/code>'e ve son olarak global kapsamdaki globalDegisken<\/code>'e eri\u015febilir. Bu, s\u00f6zc\u00fcksel kapsamlaman\u0131n ve kapsam zincirinin temel \u00e7al\u0131\u015fma prensibidir.<\/p>\nvar<\/code>, let<\/code> ve const<\/code> aras\u0131ndaki farklar da bu ba\u011flamda olduk\u00e7a \u00f6nemlidir:<\/p>\n\n
var<\/code>: Fonksiyon kapsaml\u0131d\u0131r ve hoist edilir (yani, tan\u0131mlama yukar\u0131 ta\u015f\u0131n\u0131r, ancak de\u011fer atamas\u0131 yap\u0131lmaz). Bu da beklenmedik davran\u0131\u015flara yol a\u00e7abilir.<\/li>\nlet<\/code> ve const<\/code>: Blok kapsaml\u0131d\u0131r ve hoist edilir ancak \"Temporal Dead Zone\" (TDZ) i\u00e7inde kal\u0131r. Yani, de\u011fi\u015fken tan\u0131mland\u0131\u011f\u0131 sat\u0131ra gelene kadar ona eri\u015fmeye \u00e7al\u0131\u015f\u0131rsan\u0131z hata al\u0131rs\u0131n\u0131z. Bu, daha \u00f6ng\u00f6r\u00fclebilir ve hatas\u0131z kod yazman\u0131za yard\u0131mc\u0131 olur.<\/li>\n<\/ul>\nthis<\/code> Anahtar Kelimesinin Gizemi: this<\/code> Nas\u0131l Belirlenir ve Neden \u00d6nemlidir?<\/h2>\nthis<\/code>'in de\u011ferini belirleyen temel kurallar \u015funlard\u0131r:<\/p>\n\n
this<\/code>:<\/strong> Global kapsamda ('this'<\/a> bir fonksiyonun i\u00e7inde de\u011filken), this<\/code> her zaman global objeyi referans al\u0131r. Taray\u0131c\u0131da bu window<\/code><\/a> objesi, Node.js'te ise global<\/code><\/a> objesidir.<\/li>\nthis<\/code>:<\/strong> Bir fonksiyon bir objenin metodu olarak \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda (\u00f6rne\u011fin, obj.metot()<\/code>), this<\/code> o objeyi referans al\u0131r.\n\nconst kullanici = {\n ad: \"Ali\",\n selamla: function() {\n console.log(\"Merhaba, ben \" + this.ad);\n }\n};\nkullanici.selamla(); \/\/ \u00c7\u0131kt\u0131: Merhaba, ben Ali (this -> kullanici objesi)\n <\/pre>\nthis<\/code>:<\/strong> Bir fonksiyon ba\u011f\u0131ms\u0131z olarak \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda (yani, bir obje \u00fczerinden de\u011fil, \u00f6rne\u011fin fonksiyonAdi()<\/code>), kat\u0131 modda ('use strict'<\/code>) this<\/code> undefined<\/code><\/a> olur. Kat\u0131 mod d\u0131\u015f\u0131nda ise global objeye (window<\/code><\/a>) i\u015faret eder. Bu, genellikle istenmeyen bir durumdur ve en yayg\u0131n 'this'<\/a> hatalar\u0131ndan birine yol a\u00e7ar.\n\nfunction selamVer() {\n console.log(\"Merhaba, ben \" + this.ad);\n}\nconst kullanici2 = { ad: \"Ay\u015fe\" };\nselamVer(); \/\/ 'use strict' yoksa: Merhaba, ben undefined (this -> window)\n <\/pre>\nthis<\/code>:<\/strong> Bir fonksiyon new<\/code><\/a> anahtar kelimesiyle \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda, o bir kurucu fonksiyon haline gelir ve this<\/code> yeni olu\u015fturulan objeyi referans al\u0131r.\n\nfunction Kisi(ad) {\n this.ad = ad;\n}\nconst yeniKisi = new Kisi(\"Can\");\nconsole.log(yeniKisi.ad); \/\/ \u00c7\u0131kt\u0131: Can (this -> yeniKisi objesi)\n <\/pre>\ncall()<\/code><\/a>, apply()<\/code><\/a> ve bind()<\/code><\/a> metotlar\u0131 ile 'this'<\/a>'in de\u011ferini manuel olarak ayarlayabiliriz.\n\n
call()<\/code> ve apply()<\/code>: Fonksiyonu hemen \u00e7al\u0131\u015ft\u0131r\u0131r ve ilk arg\u00fcman olarak this<\/code>'in referans edece\u011fi objeyi al\u0131r. call()<\/code> arg\u00fcmanlar\u0131 ayr\u0131 ayr\u0131 al\u0131rken, apply()<\/code> arg\u00fcmanlar\u0131 bir dizi olarak al\u0131r.<\/li>\nbind()<\/code>: Fonksiyonu hemen \u00e7al\u0131\u015ft\u0131rmaz, ancak this<\/code> de\u011feri sabitlenmi\u015f (ba\u011flanm\u0131\u015f) yeni bir fonksiyon d\u00f6nd\u00fcr\u00fcr. Bu, \u00f6zellikle olay dinleyicilerinde veya asenkron callback'lerde \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.\n\nfunction selamVerExplicit(selam) {\n console.log(selam + \", ben \" + this.ad);\n}\nconst person = { ad: \"Deniz\" };\nselamVerExplicit.call(person, \"Merhaba\"); \/\/ Merhaba, ben Deniz\nconst bagliSelamVer = selamVerExplicit.bind(person, \"Merhaba\");\nbagliSelamVer(); \/\/ Merhaba, ben Deniz\n <\/pre>\nthis<\/code>:<\/strong> ES6 ile gelen ok fonksiyonlar\u0131, 'this'<\/a>'in nas\u0131l davrand\u0131\u011f\u0131 konusunda devrim niteli\u011findedir. Arrow fonksiyonlar kendi this<\/code> ba\u011flam\u0131n\u0131 olu\u015fturmazlar; bunun yerine, tan\u0131mland\u0131klar\u0131 s\u00f6zc\u00fcksel ortamdaki this<\/code> de\u011ferini miras al\u0131rlar. Bu, onlar\u0131 \u00f6zellikle callback fonksiyonlar\u0131 i\u00e7in ideal k\u0131lar ve yukar\u0131daki \"basit fonksiyon \u00e7a\u011fr\u0131s\u0131\" kaynakl\u0131 hatalar\u0131 \u00f6nler.\n\nconst kullanici3 = {\n ad: \"Zeynep\",\n selamla: function() {\n setTimeout(() => {\n console.log(\"Merhaba, ben \" + this.ad); \/\/ this -> kullanici3 objesi\n }, 100);\n }\n};\nkullanici3.selamla(); \/\/ \u00c7\u0131kt\u0131: Merhaba, ben Zeynep\n <\/pre>\nsetTimeout<\/code> i\u00e7inde normal bir fonksiyon kullansayd\u0131k, 'this'<\/a> muhtemelen global objeye veya undefined<\/code><\/a>'a i\u015faret edecekti.<\/p>\n<\/li>\n<\/ol>\nthis<\/code>'in nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 kavramak, \u00f6zellikle olay dinleyicileri, s\u0131n\u0131f tabanl\u0131 yap\u0131lar ve modern JavaScript \u00e7er\u00e7eveleriyle \u00e7al\u0131\u015f\u0131rken hayati \u00f6neme sahiptir. Bu bilgi, beklenmedik davran\u0131\u015flar\u0131 \u00f6nlemenin ve daha g\u00fcvenilir kod yazman\u0131n anahtar\u0131d\u0131r.<\/p>\nPratik Uygulamalar: Ba\u011flam Bilgisiyle Kodunuzu Nas\u0131l Optimize Edebilirsiniz?<\/h2>\n
Event Handler'larda
this<\/code> Y\u00f6netimi<\/h3>\nthis<\/code>, olay\u0131n ger\u00e7ekle\u015fti\u011fi DOM eleman\u0131na i\u015faret eder. Ancak bir s\u0131n\u0131f metodunu do\u011frudan event handler olarak atad\u0131\u011f\u0131n\u0131zda, 'this'<\/a>'in s\u0131n\u0131f \u00f6rne\u011fi yerine DOM eleman\u0131na i\u015faret etmesiyle kar\u015f\u0131la\u015fabilirsiniz. \u0130\u015fte bu noktada bind()<\/code> metodunun veya arrow fonksiyonlar\u0131n\u0131n g\u00fcc\u00fc devreye girer.<\/p>\n\nclass Sayac {\n constructor() {\n this.sayi = 0;\n this.buton = document.createElement('button');\n this.buton.textContent = Say\u0131m: ${this.sayi}<\/code>;\n document.body.appendChild(this.buton);\n\n \/\/ Yanl\u0131\u015f Yakla\u015f\u0131m: 'this' buton objesini i\u015faret eder\n \/\/ this.buton.addEventListener('click', this.artir);\n\n \/\/ Do\u011fru Yakla\u015f\u0131m 1: bind() ile 'this'i sabitlemek\n \/\/ this.buton.addEventListener('click', this.artir.bind(this));\n\n \/\/ Do\u011fru Yakla\u015f\u0131m 2: Arrow fonksiyonu ile 'this'i miras almak\n this.buton.addEventListener('click', () => this.artir());\n }\n\n artir() {\n this.sayi++;\n this.buton.textContent = Say\u0131m: ${this.sayi}<\/code>;\n console.log(\"Mevcut Say\u0131:\", this.sayi);\n }\n}\n\nnew Sayac();\n <\/pre>\nartir<\/code> metodu bir s\u0131n\u0131f metodudur. E\u011fer do\u011frudan this.buton.addEventListener('click', this.artir);<\/code> \u015feklinde \u00e7a\u011f\u0131r\u0131rsak, artir<\/code> i\u00e7indeki this<\/code>, buton<\/code> DOM eleman\u0131n\u0131 g\u00f6sterecektir, bu da this.sayi<\/code>'nin undefined<\/code><\/a> olmas\u0131na neden olur. Ancak bind(this)<\/code> kullanarak veya bir arrow fonksiyonu i\u00e7inde \u00e7a\u011f\u0131rarak, artir<\/code> metodu i\u00e7indeki this<\/code>'in Sayac<\/code> s\u0131n\u0131f\u0131n\u0131n \u00f6rne\u011fini do\u011fru bir \u015fekilde referans almas\u0131n\u0131 sa\u011flayabiliriz.<\/p>\nMod\u00fcl Desenleri ve Veri Gizleme<\/h3>\n
\nconst sayacModulu = (function() {\n let _sayi = 0; \/\/ \u00d6zel (private) de\u011fi\u015fken - d\u0131\u015far\u0131dan do\u011frudan eri\u015filemez\n\n function artir() {\n _sayi++;\n console.log(\"Art\u0131r\u0131ld\u0131:\", _sayi);\n }\n\n function azalt() {\n _sayi--;\n console.log(\"Azalt\u0131ld\u0131:\", _sayi);\n }\n\n function gecerliDeger() {\n return _sayi;\n }\n\n return { \/\/ Public aray\u00fcz\n artir: artir,\n azalt: azalt,\n deger: gecerliDeger\n };\n})();\n\nsayacModulu.artir(); \/\/ Art\u0131r\u0131ld\u0131: 1\nsayacModulu.artir(); \/\/ Art\u0131r\u0131ld\u0131: 2\nconsole.log(sayacModulu.deger()); \/\/ 2\n\/\/ console.log(sayacModulu._sayi); \/\/ undefined - _sayi d\u0131\u015far\u0131dan eri\u015filemez\n\n <\/pre>\n_sayi<\/code> de\u011fi\u015fkenini d\u0131\u015f fonksiyonun kapsam\u0131 i\u00e7inde tutar. D\u0131\u015f fonksiyon \u00e7al\u0131\u015ft\u0131r\u0131ld\u0131ktan sonra bile, artir<\/code>, azalt<\/code> ve gecerliDeger<\/code> fonksiyonlar\u0131 bu _sayi<\/code> de\u011fi\u015fkenine eri\u015febilir \u00e7\u00fcnk\u00fc closure olu\u015fturmu\u015flard\u0131r. Bu, d\u0131\u015f d\u00fcnyaya sadece ihtiyac\u0131m\u0131z olan aray\u00fcz\u00fc sunarken, i\u00e7 detaylar\u0131 g\u00fcvende tutmam\u0131z\u0131 sa\u011flar. Bu, do\u011frudan closure'lar\u0131n bir uygulamas\u0131d\u0131r, ancak temeli kapsam (scope) bilgisidir.<\/p>\nremoveEventListener<\/code>) unutmay\u0131n. Aksi takdirde, fonksiyonlar ve dolay\u0131s\u0131yla ba\u011fl\u0131 olduklar\u0131 d\u0131\u015f ba\u011flamlar bellekte gereksiz yere tutulmaya devam edebilir.\n <\/div>\n\u0130leri D\u00fczey Kavramlar: Ba\u011flam Manip\u00fclasyonu ve Yayg\u0131n Hatalardan Ka\u00e7\u0131nma<\/h2>\n
Kapsam D\u0131\u015f\u0131 De\u011fi\u015fken Eri\u015fimi ve Hata Ay\u0131klama<\/h3>\n
ReferenceError<\/code><\/a> ile kar\u015f\u0131la\u015f\u0131r\u0131z. Bu genellikle de\u011fi\u015fkenin yanl\u0131\u015f kapsamda tan\u0131mlanmas\u0131ndan veya eri\u015filmeye \u00e7al\u0131\u015f\u0131lan fonksiyonun beklenen ba\u011flamdan farkl\u0131 bir yerde \u00e7a\u011fr\u0131lmas\u0131ndan kaynaklan\u0131r.<\/p>\n\nfunction birIslemYap() {\n let deger = \"\u00d6nemli Veri\";\n setTimeout(function() {\n \/\/ console.log(deger); \/\/ Buras\u0131 \u00e7al\u0131\u015f\u0131r m\u0131?\n }, 1000);\n}\n\n\/\/ Bir d\u0131\u015f fonksiyonu d\u00fc\u015f\u00fcnd\u00fc\u011f\u00fcm\u00fczde:\nfunction disFonksiyon() {\n let x = 10;\n \/\/ Burada y'ye eri\u015fmeye \u00e7al\u0131\u015fmak hata verir, \u00e7\u00fcnk\u00fc y sadece icFonksiyon i\u00e7inde tan\u0131ml\u0131d\u0131r.\n \/\/ console.log(y); \/\/ ReferenceError\n function icFonksiyon() {\n let y = 20;\n console.log(x); \/\/ x'e eri\u015fim m\u00fcmk\u00fcn, \u00e7\u00fcnk\u00fc d\u0131\u015f kapsamda\n }\n icFonksiyon();\n}\ndisFonksiyon();\n <\/pre>\nsetTimeout<\/code> \u00f6rne\u011finde, anonim fonksiyon bir closure olu\u015fturdu\u011fu i\u00e7in deger<\/code> de\u011fi\u015fkenine eri\u015febilir. Ancak, e\u011fer deger<\/code> ba\u015fka bir fonksiyonda tan\u0131ml\u0131 olsayd\u0131 ve o fonksiyonun y\u00fcr\u00fctmesi tamamland\u0131ysa, eri\u015fim m\u00fcmk\u00fcn olmazd\u0131. Bu durumlar\u0131 hata ay\u0131klarken, geli\u015ftirici ara\u00e7lar\u0131ndaki (Chrome DevTools gibi) \"Scope\" panelini kullanarak o anki y\u00fcr\u00fctme ba\u011flam\u0131ndaki ve kapsam zincirindeki de\u011fi\u015fkenleri incelemek \u00e7ok faydal\u0131d\u0131r. Bu panel, o anda hangi de\u011fi\u015fkenlerin eri\u015filebilir oldu\u011funu ve 'this'<\/a>'in neyi g\u00f6sterdi\u011fini a\u00e7\u0131k\u00e7a g\u00f6sterir.<\/p>\ntry...catch<\/code> Bloklar\u0131 ve Ba\u011flam\u0131n Etkisi<\/h3>\ntry...catch<\/code><\/a> bloklar\u0131, hata y\u00f6netimi i\u00e7in hayati \u00f6neme sahiptir. Bir hata yakaland\u0131\u011f\u0131nda, catch<\/code> blo\u011fu i\u00e7inde farkl\u0131 bir y\u00fcr\u00fctme ba\u011flam\u0131na girebilirsiniz. \u00d6zellikle asenkron kodlarda (Promise<\/code><\/a>'ler veya async\/await<\/code><\/a>) hatalar\u0131 do\u011fru bir \u015fekilde ele almak i\u00e7in, hatan\u0131n olu\u015ftu\u011fu ba\u011flam\u0131 anlamak ve bu ba\u011flamdan bilgi alabilmek \u00f6nemlidir. Hata objeleri genellikle y\u0131\u011f\u0131n izlemesi (stack trace) i\u00e7erir, bu da hatan\u0131n \u00e7a\u011fr\u0131 y\u0131\u011f\u0131n\u0131nda nerede meydana geldi\u011fini g\u00f6sterir ve ba\u011flam\u0131 analiz etmede yard\u0131mc\u0131 olur.<\/p>\nMobil Uyumlu Geli\u015ftirme ve Ba\u011flam Y\u00f6netimi<\/h3>\n
\n
requestAnimationFrame<\/code><\/a>, throttle<\/code><\/a> veya debounce<\/code><\/a> gibi teknikleri kullanarak fonksiyon \u00e7a\u011fr\u0131lar\u0131n\u0131n ve dolay\u0131s\u0131yla yeni y\u00fcr\u00fctme ba\u011flamlar\u0131n\u0131n say\u0131s\u0131n\u0131 s\u0131n\u0131rlamak, mobil cihazlarda ak\u0131c\u0131 bir kullan\u0131c\u0131 deneyimi sa\u011flar.<\/li>\n<\/ul>\nClosure'lara Haz\u0131r M\u0131s\u0131n\u0131z? Temelleri Sa\u011flamla\u015ft\u0131rman\u0131n \u00d6nemi<\/h2>\n
S\u0131k\u00e7a Sorulan Sorular: Ba\u011flam Hakk\u0131nda Merak Edilenler<\/h2>\n
\n
var<\/code>, let<\/code> ve const<\/code> neden farkl\u0131 kapsam davran\u0131\u015flar\u0131 g\u00f6sterir?<\/strong><\/dt>\nvar<\/code> fonksiyon kapsaml\u0131d\u0131r ve hoist edilir (tan\u0131mlamas\u0131 en \u00fcste ta\u015f\u0131n\u0131r), bu da bazen beklenmeyen davran\u0131\u015flara yol a\u00e7ar. let<\/code> ve const<\/code> ise ES6 ile gelmi\u015f olup blok kapsaml\u0131d\u0131rlar. Ayr\u0131ca, hoist edilirler ancak \"Temporal Dead Zone\" (TDZ) i\u00e7inde kal\u0131rlar; yani tan\u0131mland\u0131klar\u0131 sat\u0131ra gelmeden eri\u015filmeye \u00e7al\u0131\u015f\u0131ld\u0131\u011f\u0131nda hata verirler. const<\/code> ek olarak bir kez atand\u0131ktan sonra de\u011feri de\u011fi\u015ftirilemez.<\/dd>\nundefined<\/code><\/a>'\u0131 (aksi halde window<\/code><\/a>'u), kurucu \u00e7a\u011fr\u0131s\u0131nda yeni objeyi i\u015faret eder. Arrow fonksiyonlar\u0131 ise 'this'<\/a>'i tan\u0131mland\u0131klar\u0131 s\u00f6zc\u00fcksel ortamdan miras al\u0131r. call()<\/code><\/a>, apply()<\/code><\/a> ve bind()<\/code><\/a> metotlar\u0131 ile 'this'<\/a>'i manuel olarak ba\u011flayabilirsiniz.<\/dd>\n