{"id":31073,"date":"2025-10-05T11:33:10","date_gmt":"2025-10-05T08:33:10","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/javascript-degisken-yonetimi-var-let-const-kapsam-ve-kapatmalar\/"},"modified":"2025-10-05T11:33:10","modified_gmt":"2025-10-05T08:33:10","slug":"javascript-degisken-yonetimi-var-let-const-kapsam-ve-kapatmalar","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/javascript-degisken-yonetimi-var-let-const-kapsam-ve-kapatmalar\/","title":{"rendered":"JavaScript De\u011fi\u015fken Y\u00f6netimi: var, let, const, Kapsam ve Kapatmalar"},"content":{"rendered":"

<\/p>\n

JavaScript geli\u015ftirirken de\u011fi\u015fkenlerin davran\u0131\u015flar\u0131 sizi \u015fa\u015f\u0131rt\u0131yor mu? Global kapsam kirlili\u011fi, beklenmedik de\u011fer atamalar\u0131 veya kapal\u0131 kalma hatalar\u0131yla m\u0131 kar\u015f\u0131la\u015f\u0131yorsunuz? Bu kapsaml\u0131 rehberde, JavaScript’in temel de\u011fi\u015fken bildirim y\u00f6ntemleri olan var<\/code>, let<\/code> ve const<\/code> aras\u0131ndaki farklar\u0131 derinlemesine inceleyecek, kapsam (scope) kavram\u0131n\u0131 t\u00fcm detaylar\u0131yla anlayacak ve modern JavaScript’in en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biri olan kapatmalar\u0131 (closures) ger\u00e7ek d\u00fcnya senaryolar\u0131yla ke\u015ffedeceksiniz. Bu makale, JavaScript’in kalbine inerek daha temiz, g\u00fcvenli ve s\u00fcrd\u00fcr\u00fclebilir kod yazman\u0131z i\u00e7in size yol g\u00f6sterecektir.<\/p>\n

JavaScript, dinamik ve esnek bir dildir, ancak bu esneklik bazen de\u011fi\u015fken y\u00f6netimi konusunda kafa kar\u0131\u015f\u0131kl\u0131\u011f\u0131na yol a\u00e7abilir. \u00d6zellikle eski JavaScript (ES5 \u00f6ncesi) ile modern JavaScript (ES6 ve sonras\u0131) aras\u0131ndaki de\u011fi\u015fken bildirim mekanizmalar\u0131 \u00f6nemli farkl\u0131l\u0131klar g\u00f6sterir. Bu b\u00f6l\u00fcmde, tarihsel s\u00fcre\u00e7ten ba\u015flayarak g\u00fcn\u00fcm\u00fcz\u00fcn en iyi pratiklerine do\u011fru ilerleyece\u011fiz. De\u011fi\u015fkenlerin nas\u0131l tan\u0131mland\u0131\u011f\u0131, nerede eri\u015filebildi\u011fi ve \u00f6mr\u00fcn\u00fcn ne kadar oldu\u011fu, yazd\u0131\u011f\u0131n\u0131z kodun kalitesi ve performans\u0131 a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir.<\/p>\n

Tarihsel olarak, JavaScript’te de\u011fi\u015fken bildirmek i\u00e7in yaln\u0131zca var<\/code> anahtar kelimesi mevcuttu. Bu, uzun y\u0131llar boyunca geli\u015ftiricilerin tek se\u00e7ene\u011fiydi ve beraberinde baz\u0131 benzersiz davran\u0131\u015flar getiriyordu. Ancak ES6 ile birlikte let<\/code> ve const<\/code> tan\u0131t\u0131ld\u0131 ve de\u011fi\u015fken y\u00f6netimine yepyeni bir bak\u0131\u015f a\u00e7\u0131s\u0131 kazand\u0131rd\u0131. Bu \u00fc\u00e7 anahtar kelime, kapsam (scope), yeniden bildirim (re-declaration) ve yeniden atama (re-assignment) konular\u0131nda temelden farkl\u0131l\u0131klar g\u00f6sterir. Bu farkl\u0131l\u0131klar\u0131 anlamak, daha \u00f6ng\u00f6r\u00fclebilir ve hatas\u0131z kod yazman\u0131n ilk ad\u0131m\u0131d\u0131r. Her birinin kendine \u00f6zg\u00fc kullan\u0131m durumlar\u0131 ve tuzaklar\u0131 vard\u0131r. \u00d6rne\u011fin, var<\/code>‘\u0131n fonksiyon kapsam\u0131na sahip olmas\u0131 ve “hoisting” mekanizmas\u0131, \u00f6zellikle yeni ba\u015flayanlar i\u00e7in anla\u015f\u0131lmas\u0131 zor olabilirken, let<\/code> ve const<\/code>‘un blok kapsam\u0131na sahip olmas\u0131 ve Temporal Dead Zone (TDZ) kavram\u0131 modern JavaScript’in temel ta\u015flar\u0131ndand\u0131r. Bu ayr\u0131mlar\u0131 derinlemesine inceleyerek, kodunuzda ne zaman hangisini kullanman\u0131z gerekti\u011fi konusunda net bir yol haritas\u0131 olu\u015fturaca\u011f\u0131z. Bu sayede, gelecekte kar\u015f\u0131la\u015fabilece\u011finiz bir\u00e7ok yayg\u0131n JavaScript hatas\u0131n\u0131 proaktif bir \u015fekilde \u00f6nleyebilirsiniz.<\/p>\n

var ile De\u011fi\u015fken Bildirimi: JavaScript’in \u0130lk Ad\u0131mlar\u0131 ve Fonksiyon Kapsam\u0131<\/h3>\n

var<\/code>, JavaScript’in en eski de\u011fi\u015fken bildirim anahtar kelimesidir. ES6 \u00f6ncesi d\u00f6nemde t\u00fcm de\u011fi\u015fkenler bu anahtar kelime ile tan\u0131mlan\u0131rd\u0131. var<\/code> ile bildirilen de\u011fi\u015fkenler, global kapsamda veya bir fonksiyonun kapsam\u0131nda bulunur. Bu, “fonksiyon kapsam\u0131” (function scope) olarak bilinir. Yani, bir fonksiyon i\u00e7inde var<\/code> ile bildirilen bir de\u011fi\u015fken, o fonksiyonun d\u0131\u015f\u0131ndan eri\u015filemez. Ancak, blok kapsam\u0131 (if<\/code>, for<\/code> d\u00f6ng\u00fcleri gibi kod bloklar\u0131) tan\u0131maz. Bu \u00f6zellik, geli\u015ftiriciler i\u00e7in zaman zaman beklenmedik durumlara yol a\u00e7abilir.<\/p>\n

\u00d6rne\u011fin, bir for<\/code> d\u00f6ng\u00fcs\u00fcnde var<\/code> ile tan\u0131mlanan bir de\u011fi\u015fkenin d\u00f6ng\u00fc d\u0131\u015f\u0131ndan eri\u015filebilir olmas\u0131, global de\u011fi\u015fken kirlili\u011fine veya isim \u00e7ak\u0131\u015fmalar\u0131na neden olabilir. A\u015fa\u011f\u0131daki \u00f6rne\u011fi inceleyelim:<\/p>\n

\nfunction sayacCalistir() {\n  for (var i = 0; i < 5; i++) {\n    console.log(\"D\u00f6ng\u00fc i\u00e7i i (var): \" + i);\n  }\n  console.log(\"D\u00f6ng\u00fc sonras\u0131 i (var): \" + i); \/\/ i hala eri\u015filebilir: 5\n}\n\nsayacCalistir();\n\n\/\/ Global kapsamda var kullan\u0131m\u0131\nvar globalDegisken = \"Ben globalim!\";\n\nif (true) {\n  var yerelDegisken = \"Ben de global gibi davran\u0131yorum, blok kapsam\u0131m yok!\";\n  console.log(yerelDegisken); \/\/ \"Ben de global gibi davran\u0131yorum...\"\n}\nconsole.log(yerelDegisken); \/\/ \"Ben de global gibi davran\u0131yorum...\" - beklentinin aksine eri\u015filebilir!\n    <\/pre>\n
<\/code><\/p>\n
Bu \u00f6rnekte g\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, for<\/code> d\u00f6ng\u00fcs\u00fcnde tan\u0131mlanan i<\/code> de\u011fi\u015fkeni, d\u00f6ng\u00fc bittikten sonra bile fonksiyonun kapsam\u0131 i\u00e7inde eri\u015filebilir olmaya devam eder. Hatta, bir if<\/code> blo\u011fu i\u00e7inde tan\u0131mlanan yerelDegisken<\/code> bile o blo\u011fun d\u0131\u015f\u0131ndan eri\u015filebilmektedir, \u00e7\u00fcnk\u00fc var<\/code> blok kapsam\u0131na sayg\u0131 duymaz. Bu durum, \u00f6zellikle b\u00fcy\u00fck projelerde de\u011fi\u015fkenlerin beklenmedik yerlerde de\u011fi\u015ftirilmesine veya yanl\u0131\u015f de\u011ferler almas\u0131na neden olarak hatalara yol a\u00e7abilir. Bu davran\u0131\u015f ayn\u0131 zamanda, \u00f6zellikle dikkatli olunmad\u0131\u011f\u0131nda, kodun okunabilirli\u011fini ve bak\u0131m\u0131n\u0131 zorla\u015ft\u0131rabilir.<\/p>\n
Bir di\u011fer \u00f6nemli var<\/code> \u00f6zelli\u011fi ise \"hoisting\"dir. JavaScript motoru kodu yorumlarken, var<\/code> ile bildirilen de\u011fi\u015fkenlerin tan\u0131mlamalar\u0131n\u0131 (ancak atamalar\u0131n\u0131 de\u011fil) mevcut kapsam\u0131n en \u00fcst\u00fcne ta\u015f\u0131r. Bu, bir de\u011fi\u015fkeni tan\u0131mlamadan \u00f6nce kullanabilece\u011finiz anlam\u0131na gelir, ancak de\u011feri undefined<\/code> olacakt\u0131r. Bu durum, \u00f6zellikle karma\u015f\u0131k fonksiyonlarda veya yanl\u0131\u015fl\u0131kla ayn\u0131 isimde de\u011fi\u015fkenler tan\u0131mland\u0131\u011f\u0131nda kafa kar\u0131\u015f\u0131kl\u0131\u011f\u0131 yaratabilir.<\/p>\n
\nconsole.log(benNeDegerim); \/\/ undefined\nvar benNeDegerim = \"Merhaba D\u00fcnya\";\nconsole.log(benNeDegerim); \/\/ Merhaba D\u00fcnya\n\n\/\/ Bu asl\u0131nda \u015fu \u015fekilde yorumlan\u0131r:\n\/\/ var benNeDegerim;\n\/\/ console.log(benNeDegerim);\n\/\/ benNeDegerim = \"Merhaba D\u00fcnya\";\n\/\/ console.log(benNeDegerim);\n    <\/pre>\n
<\/code><\/p>\n
var<\/code> ile de\u011fi\u015fkenler birden fazla kez yeniden bildirilebilir (re-declaration) ve yeniden atanabilir (re-assignment). Bu esneklik, bazen avantajl\u0131 gibi g\u00f6r\u00fcnse de, b\u00fcy\u00fck projelerde istenmeyen yan etkilerin ana kayna\u011f\u0131 olabilir, \u00e7\u00fcnk\u00fc ayn\u0131 isimde bir de\u011fi\u015fkeni fark\u0131nda olmadan yeniden tan\u0131mlayarak \u00f6nceki de\u011ferini kaybetme riski vard\u0131r. Bu \u00f6zellikler, var<\/code>'\u0131n modern JavaScript geli\u015ftirmede neden daha az tercih edildi\u011fini a\u00e7\u0131k\u00e7a g\u00f6stermektedir. G\u00fcvenilir ve bak\u0131m\u0131 kolay kod yazmak i\u00e7in let<\/code> ve const<\/code> anahtar kelimelerine y\u00f6nelmek daha do\u011frudur.<\/p>\n
let ile Modern De\u011fi\u015fken Y\u00f6netimi: Blok Kapsam\u0131n\u0131 Anlamak<\/h3>\n
ES6 (ECMAScript 2015) ile hayat\u0131m\u0131za giren let<\/code> anahtar kelimesi, JavaScript'in de\u011fi\u015fken y\u00f6netimi anlay\u0131\u015f\u0131n\u0131 k\u00f6kten de\u011fi\u015ftirdi. var<\/code>'\u0131n baz\u0131 kafa kar\u0131\u015ft\u0131r\u0131c\u0131 davran\u0131\u015flar\u0131n\u0131 ortadan kald\u0131rarak daha \u00f6ng\u00f6r\u00fclebilir ve g\u00fcvenli kod yazmam\u0131z\u0131 sa\u011flad\u0131. let<\/code>'in en \u00f6nemli \u00f6zelli\u011fi, \"blok kapsam\u0131\" (block scope) sunmas\u0131d\u0131r. Bir de\u011fi\u015fken, let<\/code> ile tan\u0131mland\u0131\u011f\u0131nda, yaln\u0131zca tan\u0131mland\u0131\u011f\u0131 kod blo\u011fu ({}<\/code> parantezler aras\u0131ndaki alan) i\u00e7erisinde eri\u015filebilir olur. Bu, if<\/code> ko\u015fullar\u0131, for<\/code> d\u00f6ng\u00fcleri veya herhangi bir s\u00fcsl\u00fc parantez blo\u011fu i\u00e7inde tan\u0131mlanan de\u011fi\u015fkenlerin o blo\u011fun d\u0131\u015f\u0131ndan eri\u015filememesi anlam\u0131na gelir. Bu davran\u0131\u015f, daha az hata potansiyeli ve daha temiz bir kod yap\u0131s\u0131 sa\u011flar.<\/p>\n
var<\/code> \u00f6rne\u011findeki senaryoyu let<\/code> ile tekrar inceleyelim:<\/p>\n
\nfunction yeniSayacCalistir() {\n  for (let j = 0; j < 5; j++) {\n    console.log(\"D\u00f6ng\u00fc i\u00e7i j (let): \" + j);\n  }\n  \/\/ console.log(\"D\u00f6ng\u00fc sonras\u0131 j (let): \" + j); \/\/ ReferenceError: j is not defined\n}\n\nyeniSayacCalistir();\n\n\/\/ Blok kapsam\u0131n\u0131 daha net g\u00f6rmek i\u00e7in:\nif (true) {\n  let yerelLetDegisken = \"Ben sadece bu blo\u011fa aitim!\";\n  console.log(yerelLetDegisken); \/\/ \"Ben sadece bu blo\u011fa aitim!\"\n}\n\/\/ console.log(yerelLetDegisken); \/\/ ReferenceError: yerelLetDegisken is not defined\n    <\/pre>\n
<\/code><\/p>\n
G\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere, for<\/code> d\u00f6ng\u00fcs\u00fc i\u00e7inde tan\u0131mlanan j<\/code> de\u011fi\u015fkeni, d\u00f6ng\u00fc tamamland\u0131ktan sonra eri\u015filemez hale gelir. Benzer \u015fekilde, if<\/code> blo\u011fu i\u00e7inde tan\u0131mlanan yerelLetDegisken<\/code> de sadece o blo\u011fun i\u00e7inde varl\u0131\u011f\u0131n\u0131 s\u00fcrd\u00fcr\u00fcr. Bu, geli\u015ftiricilerin de\u011fi\u015fkenleri daha kontroll\u00fc bir \u015fekilde y\u00f6netmesine ve istenmeyen isim \u00e7ak\u0131\u015fmalar\u0131n\u0131 \u00f6nlemesine olanak tan\u0131r. \u00d6zellikle d\u00f6ng\u00fclerde veya ge\u00e7ici de\u011fi\u015fkenlerin kullan\u0131ld\u0131\u011f\u0131 yerlerde let<\/code> kullanmak, kodunuzun daha mod\u00fcler ve hatas\u0131z olmas\u0131n\u0131 sa\u011flar. Bu \u00f6zellik, var<\/code>'\u0131n yaratt\u0131\u011f\u0131 global kapsam kirlili\u011fi sorununu ortadan kald\u0131r\u0131r ve kodunuzu daha g\u00fcvenli hale getirir.<\/p>\n
\n        Uzman \u0130pucu: \u00c7o\u011fu durumda, de\u011fi\u015fken bildirimleriniz i\u00e7in let<\/code> kullanmak, var<\/code>'dan \u00e7ok daha g\u00fcvenlidir. Bu, kodunuzun bloklara ayr\u0131lm\u0131\u015f ve daha kolay takip edilebilir olmas\u0131n\u0131 sa\u011flar. Global kapsam\u0131 kirletmekten ka\u00e7\u0131nmak i\u00e7in let<\/code> ve const<\/code> tercih edin.\n    <\/div>\n
let<\/code> ayr\u0131ca \"hoisting\" davran\u0131\u015f\u0131na sahiptir, ancak var<\/code>'dan farkl\u0131d\u0131r. let<\/code> ile bildirilen de\u011fi\u015fkenler de kapsamlar\u0131n\u0131n en \u00fcst\u00fcne ta\u015f\u0131n\u0131r, ancak tan\u0131mlanmadan \u00f6nce eri\u015filmeye \u00e7al\u0131\u015f\u0131ld\u0131\u011f\u0131nda bir ReferenceError<\/code> f\u0131rlat\u0131rlar. Bu duruma \"Temporal Dead Zone\" (TDZ) ad\u0131 verilir. TDZ, de\u011fi\u015fkenin bildirildi\u011fi yerden ba\u015flat\u0131ld\u0131\u011f\u0131 yere kadar olan s\u00fcreyi ifade eder. Bu mekanizma, de\u011fi\u015fkenlerin yanl\u0131\u015fl\u0131kla veya erken kullan\u0131lmas\u0131n\u0131 engeller, bu da kodunuzu daha sa\u011flam yapar.<\/p>\n
\n\/\/ console.log(tdzDegisken); \/\/ ReferenceError: Cannot access 'tdzDegisken' before initialization\nlet tdzDegisken = \"TDZ'den sonra eri\u015filebilir\";\nconsole.log(tdzDegisken); \/\/ TDZ'den sonra eri\u015filebilir\n    <\/pre>\n
<\/code><\/p>\n
Son olarak, let<\/code> ile bildirilen de\u011fi\u015fkenler ayn\u0131 kapsam i\u00e7inde yeniden bildirilemez. Bu, ayn\u0131 isme sahip bir de\u011fi\u015fkeni yanl\u0131\u015fl\u0131kla tekrar tan\u0131mlaman\u0131z\u0131 engeller ve b\u00f6ylece kodunuzdaki potansiyel hatalar\u0131 azalt\u0131r. Ancak, ayn\u0131 de\u011fi\u015fken ayn\u0131 kapsam i\u00e7inde farkl\u0131 de\u011ferlerle yeniden atanabilir.<\/p>\n
\nlet sayi = 10;\n\/\/ let sayi = 20; \/\/ SyntaxError: Identifier 'sayi' has already been declared\nsayi = 20; \/\/ Ge\u00e7erli\nconsole.log(sayi); \/\/ 20\n    <\/pre>\n
<\/code><\/p>\n
Bu \u00f6zellikler b\u00fct\u00fcn\u00fcyle ele al\u0131nd\u0131\u011f\u0131nda, let<\/code> modern JavaScript geli\u015ftirmesinde de\u011fi\u015fken y\u00f6netimi i\u00e7in tercih edilmesi gereken bir anahtar kelimedir. Blok kapsam\u0131, TDZ ve yeniden bildirim k\u0131s\u0131tlamalar\u0131 sayesinde, kodunuz daha d\u00fczenli, daha az hataya a\u00e7\u0131k ve daha kolay bak\u0131m\u0131 yap\u0131labilir hale gelir. let<\/code>, var<\/code>'\u0131n neden oldu\u011fu bir\u00e7ok yayg\u0131n sorunu \u00e7\u00f6zerek geli\u015ftiricilere daha g\u00fc\u00e7l\u00fc bir kontrol mekanizmas\u0131 sunar.<\/p>\n
const ile Sabit Bildirimi: G\u00fcvenli ve \u00d6ng\u00f6r\u00fclebilir Kod \u0130\u00e7in Neden Kullanmal\u0131y\u0131z?<\/h3>\n
const<\/code> anahtar kelimesi de let<\/code> gibi ES6 ile tan\u0131t\u0131lm\u0131\u015ft\u0131r ve modern JavaScript'in temel ta\u015flar\u0131ndan biridir. Ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 \u00fczere, const<\/code> \"sabit\" (constant) anlam\u0131na gelir ve bildirildi\u011fi de\u011feri de\u011fi\u015ftiremeyece\u011finiz de\u011fi\u015fkenler i\u00e7in kullan\u0131l\u0131r. let<\/code> gibi, const<\/code> da blok kapsam\u0131na sahiptir ve Temporal Dead Zone (TDZ) prensiplerine uyar. Ancak const<\/code>'u di\u011ferlerinden ay\u0131ran en \u00f6nemli \u00f6zellik, bir kez de\u011fer atand\u0131ktan sonra bu de\u011ferin yeniden atanamamas\u0131d\u0131r.<\/p>\n
Bir const<\/code> de\u011fi\u015fkeni bildirirken ona hemen bir de\u011fer ataman\u0131z zorunludur. Aksi takdirde bir SyntaxError<\/code> al\u0131rs\u0131n\u0131z. Bu tasar\u0131m, de\u011fi\u015fkenlerin ya\u015fam d\u00f6ng\u00fcs\u00fc boyunca \u00f6ng\u00f6r\u00fclebilir kalmas\u0131n\u0131 sa\u011flar ve yanl\u0131\u015fl\u0131kla de\u011ferlerinin de\u011fi\u015ftirilmesini engeller. Bu durum, \u00f6zellikle uygulaman\u0131zdaki kritik yap\u0131land\u0131rma de\u011ferleri, fonksiyonlar veya de\u011fi\u015fmemesi gereken referanslar i\u00e7in idealdir.<\/p>\n
\nconst PI = 3.14159;\n\/\/ PI = 3.14; \/\/ TypeError: Assignment to constant variable.\n\n\/\/ const dogumGunu; \/\/ SyntaxError: Missing initializer in const declaration\n\nif (true) {\n  const blokSabiti = \"Ben sadece bu blokta de\u011fi\u015fmezim.\";\n  console.log(blokSabiti); \/\/ \"Ben sadece bu blokta de\u011fi\u015fmezim.\"\n}\n\/\/ console.log(blokSabiti); \/\/ ReferenceError: blokSabiti is not defined\n    <\/pre>\n
<\/code><\/p>\n
Yukar\u0131daki \u00f6rnekte g\u00f6rebilece\u011finiz gibi, PI<\/code> sabitine yeni bir de\u011fer atamaya \u00e7al\u0131\u015ft\u0131\u011f\u0131m\u0131zda JavaScript bir hata verir. Ayr\u0131ca, const<\/code> ile bildirilen bir de\u011fi\u015fkene ilk anda bir de\u011fer atamazsak yine bir hata ile kar\u015f\u0131la\u015f\u0131r\u0131z. let<\/code> gibi, const<\/code> da blok kapsam\u0131na tabidir, bu da blokSabiti<\/code> de\u011fi\u015fkeninin sadece tan\u0131mland\u0131\u011f\u0131 if<\/code> blo\u011fu i\u00e7inde ge\u00e7erli oldu\u011fu anlam\u0131na gelir. Bu \u00f6zellik, kodunuzun daha g\u00fcvenli olmas\u0131n\u0131 ve beklenmedik de\u011fer de\u011fi\u015fikliklerinden korunmas\u0131n\u0131 sa\u011flar.<\/p>\n
const<\/code> ile ilgili s\u0131k\u00e7a yanl\u0131\u015f anla\u015f\u0131lan bir nokta, de\u011ferin tamamen de\u011fi\u015ftirilemez oldu\u011fu yan\u0131lg\u0131s\u0131d\u0131r. const<\/code> asl\u0131nda, bir de\u011fi\u015fkene atanan *referans\u0131n* de\u011fi\u015ftirilemeyece\u011fini garanti eder. Primitif tipler (say\u0131, string, boolean vb.) i\u00e7in bu, de\u011ferin kendisinin de\u011fi\u015ftirilememesi anlam\u0131na gelir. Ancak, objeler ve diziler gibi referans tiplerinde, de\u011fi\u015fkenin tuttu\u011fu *referans* de\u011fi\u015fmez kal\u0131rken, o referans\u0131n i\u015faret etti\u011fi objenin veya dizinin *i\u00e7eri\u011fi* de\u011fi\u015ftirilebilir.<\/p>\n
\nconst kullanici = { ad: \"Ali\", yas: 30 };\nkullanici.yas = 31; \/\/ Bu ge\u00e7erlidir! Objenin i\u00e7eri\u011fi de\u011fi\u015fti, referans\u0131 de\u011fil.\nconsole.log(kullanici); \/\/ { ad: \"Ali\", yas: 31 }\n\n\/\/ kullanici = { ad: \"Veli\", yas: 25 }; \/\/ TypeError: Assignment to constant variable. (Referans de\u011fi\u015fimi yasak)\n\nconst sayilar = [1, 2, 3];\nsayilar.push(4); \/\/ Bu ge\u00e7erlidir! Dizinin i\u00e7eri\u011fi de\u011fi\u015fti, referans\u0131 de\u011fil.\nconsole.log(sayilar); \/\/ [1, 2, 3, 4]\n\n\/\/ sayilar = [5, 6]; \/\/ TypeError: Assignment to constant variable. (Referans de\u011fi\u015fimi yasak)\n    <\/pre>\n
<\/code><\/p>\n
Bu ayr\u0131m \u00e7ok \u00f6nemlidir. Bir objenin veya dizinin i\u00e7eri\u011fini de\u011fi\u015ftirebilmek, ancak o objeye veya diziye tamamen yeni bir referans atayamamak, const<\/code>'u referans tipleriyle \u00e7al\u0131\u015f\u0131rken hem esnek hem de g\u00fcvenli bir ara\u00e7 haline getirir. Fonksiyonlar\u0131 bildirirken de const<\/code> kullanmak yayg\u0131n bir pratiktir, \u00e7\u00fcnk\u00fc fonksiyon referans\u0131n\u0131n de\u011fi\u015fmemesi, kodun daha \u00f6ng\u00f6r\u00fclebilir olmas\u0131n\u0131 sa\u011flar. \u00d6zellikle bir yard\u0131mc\u0131 fonksiyon veya bir bile\u015fen render fonksiyonu tan\u0131mlarken const<\/code> kullanmak, bu fonksiyonlar\u0131n referanslar\u0131n\u0131n yanl\u0131\u015fl\u0131kla yeniden atanmas\u0131n\u0131 engeller.<\/p>\n
\n        Uzman \u0130pucu: Modern JavaScript geli\u015ftirme prati\u011finde, \u00e7o\u011fu geli\u015ftirici varsay\u0131lan olarak const<\/code> kullan\u0131r ve yaln\u0131zca de\u011ferin sonradan de\u011fi\u015fmesi gerekiyorsa let<\/code>'e ge\u00e7er. var<\/code> kullan\u0131m\u0131 ise genellikle eski kod tabanlar\u0131nda veya belirli (ve nadir) durumlarda tercih edilir. Bu yakla\u015f\u0131m, kodunuzun daha kararl\u0131 ve hatas\u0131z olmas\u0131n\u0131 sa\u011flar.\n    <\/div>\n
\u00d6zetle, const<\/code>, kodunuzun daha g\u00fcvenli, daha anla\u015f\u0131l\u0131r ve daha s\u00fcrd\u00fcr\u00fclebilir olmas\u0131na yard\u0131mc\u0131 olan g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. De\u011fi\u015fkenlerin \u00f6m\u00fcrleri boyunca ayn\u0131 referans\u0131 korumas\u0131n\u0131 sa\u011flamas\u0131, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda, istenmeyen yan etkileri b\u00fcy\u00fck \u00f6l\u00e7\u00fcde azalt\u0131r. let<\/code> ve const<\/code>'un blok kapsam\u0131 ve Temporal Dead Zone gibi \u00f6zellikleri, JavaScript'i di\u011fer modern programlama dillerine daha yak\u0131n bir hale getirmi\u015f ve dilin g\u00fcc\u00fcn\u00fc art\u0131rm\u0131\u015ft\u0131r.<\/p>\n
Kapsam (Scope) Nedir ve JavaScript'te Neden Kritik \u00d6neme Sahiptir?<\/h2>\n
JavaScript'te kapsam (scope), de\u011fi\u015fkenlerin, fonksiyonlar\u0131n ve di\u011fer yap\u0131lar\u0131n kodunuzun hangi b\u00f6lgelerinden eri\u015filebilir oldu\u011funu belirleyen temel bir kavramd\u0131r. Kapsam\u0131 anlamak, de\u011fi\u015fkenlerinizin nerede tan\u0131mland\u0131\u011f\u0131na ve nerede kullan\u0131labilece\u011fine dair net bir zihinsel model olu\u015fturman\u0131za yard\u0131mc\u0131 olur. Yanl\u0131\u015f kapsam y\u00f6netimi, kodunuzda mant\u0131k hatalar\u0131na, beklenmedik davran\u0131\u015flara ve g\u00fcvenlik a\u00e7\u0131klar\u0131na yol a\u00e7abilir. Bu nedenle, JavaScript geli\u015ftiricilerinin bu konuya hakim olmas\u0131 zorunludur. Kapsam, asl\u0131nda dilin bellek y\u00f6netimini ve de\u011fi\u015fkenlerin \"g\u00f6r\u00fcn\u00fcrl\u00fck alan\u0131n\u0131\" nas\u0131l d\u00fczenledi\u011fini a\u00e7\u0131klar. Bu, kodunuzun \u00f6ng\u00f6r\u00fclebilirli\u011fini art\u0131r\u0131r ve karma\u015f\u0131k uygulamalar\u0131n geli\u015ftirilmesini kolayla\u015ft\u0131r\u0131r.<\/p>\n
JavaScript'te \u00fc\u00e7 ana kapsam t\u00fcr\u00fc bulunur: Global Kapsam, Fonksiyon Kapsam\u0131 ve Blok Kapsam\u0131. Bu kapsam t\u00fcrleri, de\u011fi\u015fken bildirim anahtar kelimelerine (var<\/code>, let<\/code>, const<\/code>) g\u00f6re farkl\u0131 davran\u0131\u015flar sergiler ve kodun y\u00fcr\u00fct\u00fclme \u015feklini derinden etkiler. Her kapsam t\u00fcr\u00fcn\u00fcn kendine \u00f6zg\u00fc kurallar\u0131 ve uygulamalar\u0131 vard\u0131r. \u00d6rne\u011fin, global kapsamda tan\u0131mlanan bir de\u011fi\u015fkenin uygulaman\u0131n herhangi bir yerinden eri\u015filebilir olmas\u0131, b\u00fcy\u00fck projelerde isim \u00e7ak\u0131\u015fmalar\u0131na neden olabilir. Fonksiyon kapsam\u0131 ise de\u011fi\u015fkenleri fonksiyon i\u00e7ine hapsederken, blok kapsam\u0131 daha da dar bir alanda de\u011fi\u015fken g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc s\u0131n\u0131rlar. Bu b\u00f6l\u00fcmde, bu \u00fc\u00e7 temel kapsam t\u00fcr\u00fcn\u00fc detayl\u0131 olarak inceleyecek ve her birinin ne anlama geldi\u011fini, ne zaman kullan\u0131ld\u0131\u011f\u0131n\u0131 ve birbirleriyle nas\u0131l etkile\u015fimde bulunduklar\u0131n\u0131 a\u00e7\u0131klayaca\u011f\u0131z.<\/p>\n
Global Kapsam: Her Yerden Eri\u015filebilir De\u011fi\u015fkenler<\/h3>\n
Global kapsam, JavaScript kodunuzun en d\u0131\u015f katman\u0131d\u0131r. Global kapsamda tan\u0131mlanan de\u011fi\u015fkenler ve fonksiyonlar, uygulaman\u0131z\u0131n herhangi bir yerinden, herhangi bir fonksiyonun veya blo\u011fun i\u00e7inden do\u011frudan eri\u015filebilir. Bu, ilk bak\u0131\u015fta kolayl\u0131k gibi g\u00f6r\u00fcnse de, \u00e7o\u011fu zaman istenmeyen yan etkilerle ve \"global kapsam kirlili\u011fi\" (global scope pollution) ile sonu\u00e7lan\u0131r. Global de\u011fi\u015fkenler, birden fazla kod par\u00e7as\u0131 taraf\u0131ndan de\u011fi\u015ftirilebildi\u011fi i\u00e7in \u00f6ng\u00f6r\u00fclemeyen davran\u0131\u015flara yol a\u00e7abilir ve hata ay\u0131klamay\u0131 zorla\u015ft\u0131rabilir.<\/p>\n
\nvar globalMesaj = \"Herkese merhaba!\"; \/\/ var ile global de\u011fi\u015fken\nlet globalSayi = 100; \/\/ let ile global de\u011fi\u015fken\nconst globalSabit = \"De\u011fi\u015fmez de\u011fer\"; \/\/ const ile global de\u011fi\u015fken\n\nfunction gosterMesaj() {\n  console.log(globalMesaj); \/\/ \"Herkese merhaba!\"\n  console.log(globalSayi); \/\/ 100\n}\n\ngosterMesaj();\n\nif (true) {\n  console.log(globalSabit); \/\/ \"De\u011fi\u015fmez de\u011fer\"\n}\n    <\/pre>\n
<\/code><\/p>\n
Yukar\u0131daki \u00f6rnekte, globalMesaj<\/code>, globalSayi<\/code> ve globalSabit<\/code> de\u011fi\u015fkenleri global kapsamda tan\u0131mlanm\u0131\u015ft\u0131r. Bu de\u011fi\u015fkenlere hem gosterMesaj<\/code> fonksiyonu i\u00e7inden hem de bir if<\/code> blo\u011fu i\u00e7inden sorunsuz bir \u015fekilde eri\u015filebilmektedir. Global kapsam\u0131 a\u015f\u0131r\u0131 kullanmaktan ka\u00e7\u0131nmak, iyi bir JavaScript geli\u015ftirme prati\u011fidir. M\u00fcmk\u00fcn oldu\u011funca, de\u011fi\u015fkenlerinizi ihtiya\u00e7 duyulan en dar kapsamda tan\u0131mlamaya \u00e7al\u0131\u015fmal\u0131s\u0131n\u0131z.<\/p>\n
Fonksiyon Kapsam\u0131: var<\/code> ve Fonksiyonlar\u0131n S\u0131n\u0131rlar\u0131<\/h3>\n
Fonksiyon kapsam\u0131, bir de\u011fi\u015fkenin yaln\u0131zca tan\u0131mland\u0131\u011f\u0131 fonksiyon i\u00e7inde eri\u015filebilir oldu\u011fu alan\u0131 ifade eder. var<\/code> anahtar kelimesi ile bildirilen de\u011fi\u015fkenler fonksiyon kapsam\u0131na sahiptir. Bu, bir fonksiyonun i\u00e7inde var<\/code> ile tan\u0131mlanan bir de\u011fi\u015fkenin, o fonksiyonun d\u0131\u015f\u0131ndan eri\u015filemeyece\u011fi anlam\u0131na gelir. Bu mekanizma, fonksiyonlar\u0131n i\u00e7indeki de\u011fi\u015fkenleri d\u0131\u015f d\u00fcnyadan izole ederek veri b\u00fct\u00fcnl\u00fc\u011f\u00fcn\u00fc sa\u011flamaya yard\u0131mc\u0131 olur. Ayr\u0131ca, bu sayede ayn\u0131 isimde de\u011fi\u015fkenleri farkl\u0131 fonksiyonlarda g\u00fcvenle kullanabiliriz.<\/p>\n
\nfunction birFonksiyon() {\n  var fonksiyonIciDegisken = \"Ben sadece bu fonksiyon i\u00e7indeyim.\";\n  console.log(fonksiyonIciDegisken); \/\/ \"Ben sadece bu fonksiyon i\u00e7indeyim.\"\n\n  function icFonksiyon() {\n    console.log(fonksiyonIciDegisken); \/\/ \u0130\u00e7 fonksiyon da eri\u015febilir\n  }\n  icFonksiyon();\n}\n\nbirFonksiyon();\n\/\/ console.log(fonksiyonIciDegisken); \/\/ ReferenceError: fonksiyonIciDegisken is not defined\n    <\/pre>\n
<\/code><\/p>\n
Yukar\u0131daki \u00f6rnekte, fonksiyonIciDegisken<\/code> sadece birFonksiyon<\/code> i\u00e7inde ve onun i\u00e7indeki ba\u015fka bir fonksiyondan eri\u015filebilir durumdad\u0131r. Fonksiyon d\u0131\u015f\u0131ndan eri\u015filmeye \u00e7al\u0131\u015f\u0131ld\u0131\u011f\u0131nda hata verir. Bu, var<\/code>'\u0131n global kapsam kirlili\u011fini tamamen engellemese de, fonksiyon d\u00fczeyinde bir izolasyon sa\u011flar. Ancak, daha \u00f6nce de belirtildi\u011fi gibi, var<\/code>'\u0131n blok kapsam\u0131na sayg\u0131 duymamas\u0131, fonksiyon i\u00e7indeki bloklarda yine de sorunlara yol a\u00e7abilir.<\/p>\n
Blok Kapsam\u0131: let<\/code> ve const<\/code> ile Modern Kapsam Y\u00f6netimi<\/h3>\n
Blok kapsam\u0131, ES6 ile let<\/code> ve const<\/code> anahtar kelimelerinin tan\u0131t\u0131lmas\u0131yla birlikte JavaScript'e eklenen modern bir \u00f6zelliktir. Blok kapsam\u0131na sahip de\u011fi\u015fkenler, yaln\u0131zca tan\u0131mland\u0131klar\u0131 s\u00fcsl\u00fc parantez blo\u011fu ({}<\/code>) i\u00e7inde eri\u015filebilir. Bu bloklar, if<\/code> ko\u015fullar\u0131, for<\/code> d\u00f6ng\u00fcleri, while<\/code> d\u00f6ng\u00fcleri veya basit\u00e7e ba\u011f\u0131ms\u0131z bir kod blo\u011fu olabilir. Blok kapsam\u0131, de\u011fi\u015fkenlerin ya\u015fam s\u00fcresini ve g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc daha hassas bir \u015fekilde kontrol etmemizi sa\u011flayarak kodumuzun daha d\u00fczenli ve hatas\u0131z olmas\u0131n\u0131 sa\u011flar.<\/p>\n
\nfunction kapsamOrnegi() {\n  let x = 10; \/\/ Fonksiyon kapsam\u0131nda let\n  const Y = 20; \/\/ Fonksiyon kapsam\u0131nda const\n\n  if (true) {\n    let z = 30; \/\/ Blok kapsam\u0131nda let\n    const K = 40; \/\/ Blok kapsam\u0131nda const\n    console.log(\"if blo\u011fu i\u00e7i: x=\" + x + \", Y=\" + Y + \", z=\" + z + \", K=\" + K);\n  }\n\n  \/\/ console.log(z); \/\/ ReferenceError: z is not defined\n  \/\/ console.log(K); \/\/ ReferenceError: K is not defined\n  console.log(\"if blo\u011fu d\u0131\u015f\u0131: x=\" + x + \", Y=\" + Y);\n}\n\nkapsamOrnegi();\n    <\/pre>\n
<\/code><\/p>\n
Bu \u00f6rnekte, z<\/code> ve K<\/code> de\u011fi\u015fkenleri sadece if<\/code> blo\u011fu i\u00e7inde tan\u0131mlanm\u0131\u015f ve o blo\u011fun d\u0131\u015f\u0131ndan eri\u015filemez. Bu davran\u0131\u015f, kodun daha mod\u00fcler olmas\u0131n\u0131 sa\u011flar ve ayn\u0131 isimde de\u011fi\u015fkenlerin farkl\u0131 bloklarda g\u00fcvenle kullan\u0131lmas\u0131na izin verir. Blok kapsam\u0131, \u00f6zellikle d\u00f6ng\u00fclerde veya ge\u00e7ici de\u011fi\u015fkenlerin kullan\u0131ld\u0131\u011f\u0131 yerlerde \u00e7ok faydal\u0131d\u0131r, \u00e7\u00fcnk\u00fc bu de\u011fi\u015fkenlerin sadece ihtiya\u00e7 duyuldu\u011fu yerde var olmas\u0131n\u0131 sa\u011flar ve global veya fonksiyon kapsam\u0131n\u0131 kirletmez. Bu sayede, daha temiz, daha g\u00fcvenli ve daha kolay bak\u0131m\u0131 yap\u0131labilen kodlar yazabiliriz.<\/p>\n
Kapsam zinciri (Scope Chain), JavaScript'in bir de\u011fi\u015fkene eri\u015fmeye \u00e7al\u0131\u015ft\u0131\u011f\u0131nda izledi\u011fi yolu ifade eder. Bir de\u011fi\u015fkene veya fonksiyona eri\u015fildi\u011finde, JavaScript motoru ilk olarak mevcut kapsamda arama yapar. E\u011fer bulamazsa, bir \u00fcst kapsama, oradan da bir \u00fcst kapsama do\u011fru ilerler, en sonunda global kapsama ula\u015fana kadar aramaya devam eder. E\u011fer global kapsamda da bulunamazsa, bir ReferenceError<\/code> f\u0131rlat\u0131l\u0131r. Bu hiyerar\u015fik yap\u0131, kapatmalar (closures) gibi ileri d\u00fczey kavramlar\u0131n temelini olu\u015fturur ve de\u011fi\u015fkenlerin do\u011fru s\u0131rada bulunmas\u0131n\u0131 sa\u011flar.<\/p>\n
Kapatmalar (Closures): JavaScript'in G\u00fc\u00e7l\u00fc Mekanizmas\u0131n\u0131 Ke\u015ffedin<\/h2>\n
Kapatmalar (closures), JavaScript'in en g\u00fc\u00e7l\u00fc ve en \u00e7ok yanl\u0131\u015f anla\u015f\u0131lan \u00f6zelliklerinden biridir. Basit\u00e7e ifade etmek gerekirse, bir kapatma, bir fonksiyonun kendi d\u0131\u015f kapsam\u0131ndan de\u011fi\u015fkenlere eri\u015febilmesi ve bu de\u011fi\u015fkenleri hat\u0131rlayabilmesi durumudur, hatta d\u0131\u015f fonksiyon y\u00fcr\u00fctmesini bitirmi\u015f ve kapsam\u0131ndan \u00e7\u0131km\u0131\u015f olsa bile. Bu mekanizma, JavaScript'in \"lexical scoping\" (s\u00f6zl\u00fcksel kapsam) \u00f6zelli\u011finden kaynaklan\u0131r. Yani bir fonksiyon, tan\u0131mland\u0131\u011f\u0131 yerdeki kapsam\u0131 \"hat\u0131rlar\" ve o kapsamdaki de\u011fi\u015fkenlere eri\u015febilir.<\/p>\n
Kapatmalar, JavaScript'te veri gizlili\u011fi (data privacy), fonksiyonelle programlama desenleri (\u00f6rne\u011fin currying veya memoization) ve mod\u00fcl desenleri gibi bir\u00e7ok ileri d\u00fczey teknik i\u00e7in temel olu\u015fturur. Onlar olmadan, bir\u00e7ok yayg\u0131n JavaScript k\u00fct\u00fcphanesi ve \u00e7er\u00e7evesi \u015fu anki hallerinde var olamazd\u0131. Kapatmalar\u0131n g\u00fcc\u00fc, d\u0131\u015f fonksiyonun ya\u015fam d\u00f6ng\u00fcs\u00fc sona erdikten sonra bile, i\u00e7 fonksiyonun o d\u0131\u015f fonksiyonun ortam\u0131na (\u00e7evre kapsam\u0131na) olan referans\u0131n\u0131 korumas\u0131d\u0131r. Bu, i\u00e7 fonksiyonun d\u0131\u015f fonksiyonun de\u011fi\u015fkenlerine eri\u015fmeye devam etmesini sa\u011flar ve bu de\u011fi\u015fkenlerin durumunu korumas\u0131na olanak tan\u0131r. Bu durum, \u00f6zellikle asenkron operasyonlarda veya event handler'larda de\u011fi\u015fkenlerin de\u011ferlerini korumak i\u00e7in hayati \u00f6nem ta\u015f\u0131r. Kapatmalar, kodunuzun daha mod\u00fcler ve esnek olmas\u0131n\u0131 sa\u011flayarak daha karma\u015f\u0131k sorunlar\u0131 \u00e7\u00f6zmenize yard\u0131mc\u0131 olur.<\/p>\n
Kapatmalar Nas\u0131l \u00c7al\u0131\u015f\u0131r? Pratik Bir \u00d6rnek<\/h3>\n
Bir kapatmay\u0131 anlaman\u0131n en iyi yolu, onu pratik bir \u00f6rnekle g\u00f6rmektir. A\u015fa\u011f\u0131daki basit say\u0131c\u0131 fonksiyonunu inceleyelim:<\/p>\n
\nfunction sayiciOlusturucu() {\n  let sayac = 0; \/\/ Bu de\u011fi\u015fken sayiciOlusturucu fonksiyonunun yerel kapsam\u0131ndad\u0131r.\n\n  return function() { \/\/ Bu, kapatmay\u0131 olu\u015fturan i\u00e7 fonksiyondur.\n    sayac++;\n    console.log(sayac);\n  };\n}\n\nconst sayac1 = sayiciOlusturucu(); \/\/ sayac1 \u015fimdi i\u00e7 fonksiyonu tutar.\nsayac1(); \/\/ \u00c7\u0131kt\u0131: 1 (sayac de\u011fi\u015fkeni hat\u0131rlan\u0131yor)\nsayac1(); \/\/ \u00c7\u0131kt\u0131: 2 (sayac de\u011fi\u015fkeni hala hat\u0131rlan\u0131yor ve g\u00fcncelleniyor)\n\nconst sayac2 = sayiciOlusturucu(); \/\/ Yeni bir say\u0131c\u0131 \u00f6rne\u011fi, kendi ba\u011f\u0131ms\u0131z sayac de\u011fi\u015fkeni ile.\nsayac2(); \/\/ \u00c7\u0131kt\u0131: 1\nsayac1(); \/\/ \u00c7\u0131kt\u0131: 3 (sayac1 kendi sayac'\u0131n\u0131 hat\u0131rlamaya devam ediyor)\n    <\/pre>\n
<\/code><\/p>\n
Yukar\u0131daki \u00f6rnekte, sayiciOlusturucu<\/code> fonksiyonu \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda, sayac<\/code> ad\u0131nda bir yerel de\u011fi\u015fken tan\u0131mlan\u0131r ve ard\u0131ndan ba\u015fka bir (isimsiz) fonksiyon d\u00f6nd\u00fcr\u00fcr. sayiciOlusturucu<\/code>'nun y\u00fcr\u00fct\u00fclmesi bittikten sonra bile, d\u00f6nd\u00fcr\u00fclen i\u00e7 fonksiyon, sayac<\/code> de\u011fi\u015fkenine eri\u015febilir ve onu de\u011fi\u015ftirebilir. Bunun nedeni, i\u00e7 fonksiyonun, tan\u0131mland\u0131\u011f\u0131 zamanki d\u0131\u015f kapsam\u0131n\u0131 \"kapatmas\u0131\" (closure) ve o kapsamdaki de\u011fi\u015fkenlere (bu durumda sayac<\/code>'a) bir referans tutmas\u0131d\u0131r. Bu mekanizma, JavaScript'in g\u00fc\u00e7l\u00fc ve esnek yap\u0131s\u0131n\u0131n temelini olu\u015fturur.<\/p>\n
Kapatmalar\u0131n Ger\u00e7ek D\u00fcnya Kullan\u0131m Senaryolar\u0131<\/h3>\n
    \n
  1. \n
    Veri Gizlili\u011fi (Private Variables):<\/strong> Kapatmalar, JavaScript'te do\u011frudan \"private\" de\u011fi\u015fkenler olmamas\u0131na ra\u011fmen, bu etkiyi sim\u00fcle etmenin en yayg\u0131n yoludur. Mod\u00fcl desenleri (module pattern) kullanarak, baz\u0131 de\u011fi\u015fkenleri d\u0131\u015far\u0131dan eri\u015filemez hale getirip, onlara sadece belirli \"public\" fonksiyonlar arac\u0131l\u0131\u011f\u0131yla eri\u015fim sa\u011flayabilirsiniz. Bu, veri b\u00fct\u00fcnl\u00fc\u011f\u00fcn\u00fc korumak ve istenmeyen yan etkileri \u00f6nlemek i\u00e7in \u00e7ok \u00f6nemlidir.<\/p>\n
    \nconst kisiBilgileri = (function() {\n  let ad = \"Gizli Ad\";\n  let yas = 30;\n\n  function getAd() {\n    return ad;\n  }\n\n  function setAd(yeniAd) {\n    ad = yeniAd;\n  }\n\n  return {\n    getAd: getAd,\n    setAd: setAd,\n    getYas: function() { return yas; } \/\/ do\u011frudan d\u00f6n\u00fc\u015f\n  };\n})();\n\nconsole.log(kisiBilgileri.getAd()); \/\/ \"Gizli Ad\"\n\/\/ console.log(kisiBilgileri.ad); \/\/ undefined (ad de\u011fi\u015fkeni d\u0131\u015far\u0131dan eri\u015filemez)\nkisiBilgileri.setAd(\"Yeni \u0130sim\");\nconsole.log(kisiBilgileri.getAd()); \/\/ \"Yeni \u0130sim\"\n            <\/pre>\n
    <\/code><\/p>\n
    Bu \"Immediately Invoked Function Expression\" (IIFE) deseni, ad<\/code> ve yas<\/code> de\u011fi\u015fkenlerini d\u0131\u015f kapsamdan gizler ve onlara sadece kisiBilgileri<\/code> objesinin d\u00f6nd\u00fcrd\u00fc\u011f\u00fc public metotlar arac\u0131l\u0131\u011f\u0131yla eri\u015filmesini sa\u011flar. Bu, g\u00fc\u00e7l\u00fc bir veri kaps\u00fclleme y\u00f6ntemidir.<\/p>\n<\/li>\n
  2. \n
    Zamanlay\u0131c\u0131lar ve Olay \u0130\u015fleyiciler (Event Handlers):<\/strong> Asenkron i\u015flemlerde, kapatmalar, bir d\u00f6ng\u00fc i\u00e7indeki de\u011fi\u015fkenlerin her iterasyon i\u00e7in do\u011fru de\u011ferini korumas\u0131na yard\u0131mc\u0131 olur. \u00d6rne\u011fin, bir d\u00f6ng\u00fc i\u00e7inde birden fazla setTimeout<\/code> \u00e7a\u011fr\u0131s\u0131 yap\u0131ld\u0131\u011f\u0131nda, let<\/code> veya kapatmalar kullanarak her zamanlay\u0131c\u0131n\u0131n kendi ba\u011f\u0131ms\u0131z de\u011fi\u015fken de\u011ferini \"hat\u0131rlamas\u0131n\u0131\" sa\u011flayabiliriz.<\/p>\n
    \n\/\/ var ile kapatma hatas\u0131 (t\u00fcm zamanlay\u0131c\u0131lar son de\u011feri g\u00f6sterir)\nfor (var i = 1; i <= 3; i++) {\n  setTimeout(function() {\n    console.log(\"var ile: \" + i); \/\/ 4, 4, 4 (t\u00fcm i'ler en son de\u011feri olan 4'e referans verir)\n  }, i * 100);\n}\n\n\/\/ let ile do\u011fru kapatma (her zamanlay\u0131c\u0131 kendi i de\u011ferini kapat\u0131r)\nfor (let j = 1; j <= 3; j++) {\n  setTimeout(function() {\n    console.log(\"let ile: \" + j); \/\/ 1, 2, 3\n  }, j * 100);\n}\n\n\/\/ Bir ba\u015fka kapatma \u00e7\u00f6z\u00fcm\u00fc (IIFE kullanarak)\nfor (var k = 1; k <= 3; k++) {\n  (function(kapananK) {\n    setTimeout(function() {\n      console.log(\"IIFE ile: \" + kapananK); \/\/ 1, 2, 3\n    }, kapananK * 100);\n  })(k); \/\/ Mevcut k de\u011ferini IIFE'ye parametre olarak ge\u00e7iririz\n}\n            <\/pre>\n
    <\/code>\n        <\/li>\n<\/ol>\n
    Kapatmalar, JavaScript'in nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 derinlemesine anlamak i\u00e7in anahtar bir konudur. Onlar\u0131 ustaca kullanmak, kodunuzun daha mod\u00fcler, daha g\u00fcvenli ve daha esnek olmas\u0131n\u0131 sa\u011flar. Modern JavaScript'te, let<\/code> ve const<\/code>'un blok kapsam\u0131 sayesinde, d\u00f6ng\u00fclerdeki kapatma sorunlar\u0131n\u0131n \u00e7o\u011fu do\u011fal olarak \u00e7\u00f6z\u00fclm\u00fc\u015ft\u00fcr, ancak genel closure prensibi hala bir\u00e7ok ileri d\u00fczey desenin temelidir.<\/p>\n
    Vaka Analizi: Modern JavaScript Uygulamalar\u0131nda De\u011fi\u015fken Y\u00f6netimi ve Kapsam Stratejileri<\/h2>\n
    \u015eimdiye kadar var<\/code>, let<\/code>, const<\/code>, kapsam ve kapatma kavramlar\u0131n\u0131 tek tek inceledik. Bu b\u00f6l\u00fcmde, bu temel bilgileri bir araya getirerek modern bir JavaScript uygulamas\u0131nda nas\u0131l sa\u011flam bir de\u011fi\u015fken y\u00f6netimi stratejisi olu\u015fturulabilece\u011fini g\u00f6steren bir vaka analizi yapaca\u011f\u0131z. Senaryomuz, bir web uygulamas\u0131nda kullan\u0131c\u0131 aray\u00fcz\u00fc bile\u015fenlerinin durumunu y\u00f6neten basit bir mod\u00fcl olacak. Bu mod\u00fcl, hem dahili durumu koruyacak hem de d\u0131\u015f d\u00fcnyayla kontroll\u00fc bir \u015fekilde etkile\u015fime girecek.<\/p>\n
    Bir \"Modal Dialog\" (a\u00e7\u0131l\u0131r pencere) bile\u015feni geli\u015ftirdi\u011fimizi varsayal\u0131m. Bu modal, a\u00e7\u0131l\u0131p kapanabilen, i\u00e7inde belirli bir mesaj\u0131 g\u00f6sterebilen ve bir butona t\u0131kland\u0131\u011f\u0131nda baz\u0131 aksiyonlar\u0131 tetikleyebilen bir yap\u0131ya sahip olacak. Amac\u0131m\u0131z, modal\u0131n durumunu (a\u00e7\u0131k\/kapal\u0131), g\u00f6sterilen mesaj\u0131 ve tetiklenecek callback fonksiyonlar\u0131n\u0131 g\u00fcvenli ve kaps\u00fcllenmi\u015f bir \u015fekilde y\u00f6netmektir. Bu senaryo, let<\/code>, const<\/code> ve kapatmalar\u0131n g\u00fcc\u00fcn\u00fc g\u00f6stermek i\u00e7in harika bir f\u0131rsat sunar, b\u00f6ylece kodun temizli\u011fini ve bak\u0131m kolayl\u0131\u011f\u0131n\u0131 art\u0131rabiliriz.<\/p>\n
    Modal Mod\u00fcl\u00fc Geli\u015ftirme: Kaps\u00fclleme ve Durum Y\u00f6netimi<\/h3>\n
    A\u015fa\u011f\u0131daki kod, kapatmalar\u0131 kullanarak bir modal bile\u015feni i\u00e7in temel bir mod\u00fcl yap\u0131s\u0131n\u0131 nas\u0131l olu\u015fturaca\u011f\u0131m\u0131z\u0131 g\u00f6stermektedir. Bu yakla\u015f\u0131m, mod\u00fcl\u00fcn i\u00e7 durumunu d\u0131\u015far\u0131dan gelebilecek beklenmedik de\u011fi\u015fikliklerden korurken, ayn\u0131 zamanda gerekli i\u015flevselli\u011fi d\u0131\u015f d\u00fcnyaya sunar. HTML'de gerekli id'lere sahip elementlerin mevcut oldu\u011funu varsay\u0131yoruz.<\/p>\n
    \n\/*\n * Modal Y\u00f6netim Mod\u00fcl\u00fc\n * Bu mod\u00fcl, bir a\u00e7\u0131l\u0131r pencerenin durumunu ve davran\u0131\u015flar\u0131n\u0131 y\u00f6netir.\n * \u0130\u00e7 de\u011fi\u015fkenleri kapatmalar arac\u0131l\u0131\u011f\u0131yla gizler ve kontroll\u00fc bir aray\u00fcz sunar.\n *\/\nconst modalManager = (function() {\n  \/\/ #region Dahili Durum De\u011fi\u015fkenleri (Kapatmalar ile gizlenir)\n  let _isOpen = false; \/\/ Modal\u0131n a\u00e7\u0131k olup olmad\u0131\u011f\u0131n\u0131 tutar (de\u011fi\u015febilir, bu y\u00fczden let)\n  let _currentMessage = \"\"; \/\/ Modalda g\u00f6sterilecek mesaj (de\u011fi\u015febilir)\n  const _modalElement = document.getElementById(\"myModal\"); \/\/ Modal DOM \u00f6\u011fesi (sabit referans)\n  const _messageElement = document.getElementById(\"modalMessage\"); \/\/ Mesaj \u00f6\u011fesi (sabit referans)\n  const _closeButton = document.getElementById(\"closeModal\"); \/\/ Kapatma butonu (sabit referans)\n  const _confirmButton = document.getElementById(\"confirmModal\"); \/\/ Onay butonu (sabit referans)\n\n  \/\/ Olay dinleyicileri i\u00e7in kapatmalar\n  let _onConfirmCallback = null; \/\/ Onay butona bas\u0131ld\u0131\u011f\u0131nda \u00e7al\u0131\u015facak fonksiyon (de\u011fi\u015febilir)\n  let _onCancelCallback = null; \/\/ \u0130ptal edildi\u011finde \u00e7al\u0131\u015facak fonksiyon (de\u011fi\u015febilir)\n  \/\/ #endregion\n\n  \/\/ #region Dahili Yard\u0131mc\u0131 Fonksiyonlar (Kapatmalar ile eri\u015filebilir)\n  function _renderModal() {\n    if (!_modalElement || !_messageElement) return; \/\/ Elementler yoksa i\u015flem yapma\n\n    if (_isOpen) {\n      _modalElement.style.display = \"block\";\n      _messageElement.textContent = _currentMessage;\n    } else {\n      _modalElement.style.display = \"none\";\n      _currentMessage = \"\"; \/\/ Mesaj\u0131 temizle\n    }\n  }\n\n  function _handleClose() {\n    _isOpen = false;\n    _renderModal();\n    if (_onCancelCallback) {\n      _onCancelCallback(); \/\/ \u0130ptal callback'ini \u00e7a\u011f\u0131r\n      _onCancelCallback = null; \/\/ Callback'i s\u0131f\u0131rla\n      _onConfirmCallback = null; \/\/ Di\u011fer callback'i de s\u0131f\u0131rla\n    }\n  }\n\n  function _handleConfirm() {\n    _isOpen = false;\n    _renderModal();\n    if (_onConfirmCallback) {\n      _onConfirmCallback(); \/\/ Onay callback'ini \u00e7a\u011f\u0131r\n      _onConfirmCallback = null; \/\/ Callback'i s\u0131f\u0131rla\n      _onCancelCallback = null; \/\/ Di\u011fer callback'i de s\u0131f\u0131rla\n    }\n  }\n  \/\/ #endregion\n\n  \/\/ #region Olay Dinleyicilerini Kurma\n  if (_closeButton) {\n    _closeButton.addEventListener(\"click\", _handleClose);\n  }\n  if (_confirmButton) {\n      _confirmButton.addEventListener(\"click\", _handleConfirm);\n  }\n  \/\/ D\u0131\u015far\u0131 t\u0131klamada kapatma\n  window.addEventListener(\"click\", (event) => {\n    if (event.target == _modalElement) {\n      _handleClose();\n    }\n  });\n  \/\/ #endregion\n\n  \/\/ #region D\u0131\u015f d\u00fcnyaya sunulan Aray\u00fcz (Public API)\n  return {\n    \/**\n     * Modal\u0131 a\u00e7ar ve bir mesaj ile opsiyonel callback'ler ayarlar.\n     * @param {string} message Modalda g\u00f6sterilecek mesaj.\n     * @param {function} onConfirm Onay butonu t\u0131kland\u0131\u011f\u0131nda \u00e7al\u0131\u015facak callback.\n     * @param {function} onCancel Kapatma butonu veya d\u0131\u015far\u0131 t\u0131klamada \u00e7al\u0131\u015facak callback.\n     *\/\n    open: function(message, onConfirm = null, onCancel = null) {\n      _isOpen = true;\n      _currentMessage = message;\n      _onConfirmCallback = onConfirm;\n      _onCancelCallback = onCancel;\n      _renderModal();\n    },\n    \n    close: function() {\n      _handleClose(); \/\/ Dahili kapatma fonksiyonunu \u00e7a\u011f\u0131r\n    },\n\n    \/**\n     * Modal\u0131n a\u00e7\u0131k olup olmad\u0131\u011f\u0131n\u0131 d\u00f6nd\u00fcr\u00fcr.\n     * @returns {boolean} Modal a\u00e7\u0131k ise true, de\u011filse false.\n     *\/\n    isOpen: function() {\n        return _isOpen;\n    }\n  };\n})();\n\n\/\/ \u00d6rnek Kullan\u0131m:\n\/\/ Bu k\u0131sm\u0131n \u00e7al\u0131\u015fmas\u0131 i\u00e7in HTML'de #myModal, #modalMessage, #closeModal ve #confirmModal elementlerinin olmas\u0131 gerekir.\n\/* \u00d6rnek HTML Yap\u0131s\u0131:\n