\nJavaScript de\u011fi\u015fkenleri, modern web uygulamalar\u0131n\u0131n ve programlama mant\u0131\u011f\u0131n\u0131n temel yap\u0131 ta\u015flar\u0131ndan biridir. Kodunuzda ge\u00e7ici veya kal\u0131c\u0131 olarak bilgi depolaman\u0131n ve bu bilgilere eri\u015fmenin anahtar mekanizmas\u0131d\u0131r. Bu kapsaml\u0131 rehberde, \nProgramlama d\u00fcnyas\u0131na ad\u0131m atan herkesin ilk \u00f6\u011frendi\u011fi kavramlardan biri de\u011fi\u015fkenlerdir. Peki, bu de\u011fi\u015fkenler neden bu kadar b\u00fcy\u00fck bir \u00f6neme sahiptir ve herhangi bir programlama dilinde, \u00f6zellikle de JavaScript’te, neden vazge\u00e7ilmez bir role sahiptirler? En basit ifadeyle, de\u011fi\u015fkenler, bilgisayar belle\u011finde ge\u00e7ici olarak veri depolamak i\u00e7in kullan\u0131lan isimlendirilmi\u015f depolama alanlar\u0131d\u0131r. T\u0131pk\u0131 bir kutunun i\u00e7ine e\u015fyalar\u0131n\u0131z\u0131 koyup \u00fczerine bir etiket yap\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131z gibi, de\u011fi\u015fkenler de bilgileri saklamam\u0131z\u0131 ve bu bilgilere bir isim arac\u0131l\u0131\u011f\u0131yla kolayca eri\u015fmemizi sa\u011flar. Bu sayede, program\u0131n\u0131z\u0131n farkl\u0131 noktalar\u0131nda ayn\u0131 verilere ba\u015fvurabilir, onlar\u0131 de\u011fi\u015ftirebilir ve manip\u00fcle edebilirsiniz.\n<\/p>\n \nBir web uygulamas\u0131nda kullan\u0131c\u0131 ad\u0131, al\u0131\u015fveri\u015f sepetindeki \u00fcr\u00fcn say\u0131s\u0131, bir butonun t\u0131klanma durumu veya anl\u0131k d\u00f6viz kuru gibi y\u00fczlerce farkl\u0131 t\u00fcrde veriyi y\u00f6netmeniz gerekebilir. \u0130\u015fte tam bu noktada, de\u011fi\u015fkenler devreye girer. Bu verileri her seferinde ba\u015ftan yazmak yerine, bir de\u011fi\u015fkene atayarak program\u0131n\u0131z\u0131n daha d\u00fczenli, okunabilir ve y\u00f6netilebilir olmas\u0131n\u0131 sa\u011flars\u0131n\u0131z. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n sepetine \u00fcr\u00fcn ekledi\u011finde, \nDe\u011fi\u015fkenler olmadan, kodunuz karma\u015f\u0131k, tekrarlayan ve hatalara a\u00e7\u0131k hale gelir. Herhangi bir veri de\u011fi\u015fikli\u011fi gerekti\u011finde, bu verinin ge\u00e7ti\u011fi t\u00fcm sat\u0131rlar\u0131 tek tek bulup g\u00fcncellemeniz gerekir ki bu, b\u00fcy\u00fck projelerde neredeyse imkans\u0131zd\u0131r. Dolay\u0131s\u0131yla, de\u011fi\u015fkenler sadece veri depolamakla kalmaz, ayn\u0131 zamanda kodun mod\u00fclerli\u011fini, esnekli\u011fini ve yeniden kullan\u0131labilirli\u011fini art\u0131rarak modern yaz\u0131l\u0131m geli\u015ftirmenin temelini olu\u015fturur. JavaScript’in dinamik yap\u0131s\u0131 sayesinde, de\u011fi\u015fkenler farkl\u0131 t\u00fcrlerdeki verileri (say\u0131lar, metinler, boolean de\u011ferler, nesneler vb.) kolayca saklayabilir ve hatta \u00e7al\u0131\u015fma zaman\u0131nda tiplerini de\u011fi\u015ftirebilir. Bu esneklik, geli\u015ftiricilere b\u00fcy\u00fck bir g\u00fc\u00e7 verirken, ayn\u0131 zamanda de\u011fi\u015fkenlerin do\u011fru ve dikkatli bir \u015fekilde y\u00f6netilmesini de zorunlu k\u0131lar. Bu y\u00fczden, de\u011fi\u015fkenlerin nas\u0131l tan\u0131mland\u0131\u011f\u0131n\u0131, nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 ve aralar\u0131ndaki farklar\u0131 anlamak, etkili JavaScript kodu yazman\u0131n ilk ve en \u00f6nemli ad\u0131m\u0131d\u0131r.\n<\/p>\n \nJavaScript’te de\u011fi\u015fken tan\u0131mlamak i\u00e7in \u00fc\u00e7 ana anahtar kelime bulunur: \n <\/code><\/p>\n \nYukar\u0131daki \u00f6rnekte g\u00f6rebilece\u011finiz gibi, \n <\/code><\/p>\n \n \n <\/code><\/p>\n \nDikkat edilmesi gereken \u00f6nemli bir nokta, <\/code><\/p>\n \nVaka Analizi: Neden \nBunun yerine, geli\u015ftiricilere genellikle \u015fu kurala uymalar\u0131 tavsiye edilir: e\u011fer bir de\u011fi\u015fkenin de\u011feri asla de\u011fi\u015fmeyecekse \nJavaScript'te de\u011fi\u015fken tan\u0131mlamak kadar, onlara anlaml\u0131 ve kurallara uygun isimler vermek de b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. De\u011fi\u015fken isimleri, kodun okunabilirli\u011fini, anla\u015f\u0131labilirli\u011fini ve bak\u0131m\u0131n\u0131 do\u011frudan etkiler. K\u00f6t\u00fc isimlendirilmi\u015f bir de\u011fi\u015fken, gelecekteki bir geli\u015ftirici (hatta kendiniz bile!) i\u00e7in kodu anlamay\u0131 ve hata ay\u0131klamay\u0131 kabusa \u00e7evirebilir. Bu nedenle, JavaScript'in de\u011fi\u015fken isimlendirme kurallar\u0131na uyman\u0131n yan\u0131 s\u0131ra, sekt\u00f6rdeki en iyi pratikleri de benimsemek kritik bir beceridir.\n<\/p>\n \nJavaScript motoru taraf\u0131ndan zorunlu k\u0131l\u0131nan baz\u0131 temel kurallar vard\u0131r:\n<\/p>\n \nGe\u00e7ersiz ve Ge\u00e7erli \u0130simlendirme \u00d6rnekleri:\n<\/p>\n <\/code><\/p>\n \nKurallara uymak yeterli de\u011fildir; kodun kalitesini art\u0131rmak i\u00e7in belirli isimlendirme konvansiyonlar\u0131na uymak da \u00f6nemlidir.\n<\/p>\n <\/code>\n <\/li>\n <\/code>\n <\/li>\n <\/code>\n <\/li>\n <\/code>\n <\/li>\n<\/ol>\n \nDe\u011fi\u015fken isimleri, ne anlama geldiklerini ve ne i\u015fe yarad\u0131klar\u0131n\u0131 net bir \u015fekilde ifade etmelidir. K\u0131sa ama anlams\u0131z isimlerden ka\u00e7\u0131n\u0131lmal\u0131d\u0131r.\n<\/p>\n \nAyr\u0131ca, de\u011fi\u015fken isimlerinde \u0130ngilizce kelimeler kullanmak, uluslararas\u0131 projelerde veya tak\u0131m \u00e7al\u0131\u015fmalar\u0131nda daha yayg\u0131n ve tercih edilen bir yakla\u015f\u0131md\u0131r. Ancak, e\u011fer proje tamamen T\u00fcrk\u00e7e konu\u015fan bir ekip taraf\u0131ndan geli\u015ftiriliyorsa ve sadece bu ekibin kullan\u0131m\u0131na y\u00f6nelikse T\u00fcrk\u00e7e isimler de tercih edilebilir. \u00d6nemli olan, tutarl\u0131 olmakt\u0131r.\n<\/p>\n \nSonu\u00e7 olarak, de\u011fi\u015fken isimlendirme, sadece kodun \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayan bir detay de\u011fil, ayn\u0131 zamanda kodun kalitesini, s\u00fcrd\u00fcr\u00fclebilirli\u011fini ve tak\u0131m i\u00e7inde i\u015fbirli\u011fini do\u011frudan etkileyen bir sanatt\u0131r. \u0130yi isimlendirilmi\u015f kod, kendi kendini belgeleyen kod olarak kabul edilir ve gelecekte zaman ve emekten tasarruf etmenizi sa\u011flar.\n<\/p>\n \nJavaScript'te de\u011fi\u015fkenlerin kapsam\u0131 veya \"scope\", bir de\u011fi\u015fkenin kodunuzun hangi b\u00f6l\u00fcmlerinden eri\u015filebilir oldu\u011funu belirleyen \u00f6nemli bir kavramd\u0131r. Kapsam kurallar\u0131, de\u011fi\u015fkenlerin ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc, \u00e7ak\u0131\u015fmalar\u0131 ve potansiyel hatalar\u0131 kontrol etmede kilit rol oynar. Do\u011fru kapsam y\u00f6netimi, kodunuzun daha g\u00fcvenli, d\u00fczenli ve \u00f6ng\u00f6r\u00fclebilir olmas\u0131n\u0131 sa\u011flar. JavaScript'te \u00fc\u00e7 ana scope t\u00fcr\u00fc vard\u0131r: Global scope, Function scope ve Block scope. Bu kapsamlar, \nGlobal scope'ta tan\u0131mlanan de\u011fi\u015fkenler, JavaScript kodunun herhangi bir yerinden eri\u015filebilir. Bir de\u011fi\u015fkeni herhangi bir fonksiyonun veya blo\u011fun d\u0131\u015f\u0131nda tan\u0131mlad\u0131\u011f\u0131n\u0131zda, o de\u011fi\u015fken otomatik olarak global scope'a ait olur. Global de\u011fi\u015fkenler, uygulaman\u0131z\u0131n farkl\u0131 b\u00f6l\u00fcmleri aras\u0131nda veri payla\u015f\u0131m\u0131 i\u00e7in kullan\u0131\u015fl\u0131 olabilir, ancak ayn\u0131 zamanda dikkatli kullan\u0131lmad\u0131\u011f\u0131nda istenmeyen yan etkilere yol a\u00e7ma potansiyeli ta\u015f\u0131r. \u00c7ok say\u0131da global de\u011fi\u015fken kullanmak, isim \u00e7ak\u0131\u015fmalar\u0131na (naming collisions) ve kodun karma\u015f\u0131k hale gelmesine neden olabilir.\n<\/p>\n <\/code><\/p>\n \nG\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, \n <\/code><\/p>\n \nFunction scope, bir fonksiyonun kendi i\u00e7 i\u015fleyi\u015fini d\u0131\u015f d\u00fcnyadan korumak i\u00e7in do\u011fal bir mekanizma sa\u011flar. \n <\/code><\/p>\n \nBu \u00f6rnek, \nBir web uygulamas\u0131nda genellikle bir\u00e7ok fonksiyon ve blok bulunur. E\u011fer de\u011fi\u015fken kapsam\u0131n\u0131 do\u011fru anlamazsan\u0131z, kolayca hatalar yapabilirsiniz. \u00d6rne\u011fin, bir form g\u00f6nderimi i\u015fleyicisi yazd\u0131\u011f\u0131n\u0131z\u0131 varsayal\u0131m:\n<\/p>\n <\/code><\/p>\n \nBu senaryoda, \n\u00d6zetle, JavaScript'te kapsam, de\u011fi\u015fkenlerin eri\u015filebilirli\u011fini ve ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc kontrol eden temel bir mekanizmad\u0131r. \nJavaScript, 'dinamik tipli' bir dildir. Bu, bir de\u011fi\u015fken tan\u0131mlarken belirli bir veri tipi belirtmenize gerek olmad\u0131\u011f\u0131 anlam\u0131na gelir. JavaScript motoru, de\u011fi\u015fkene atanan de\u011fere g\u00f6re otomatik olarak veri tipini belirler. Ayr\u0131ca, ayn\u0131 de\u011fi\u015fken, program\u0131n farkl\u0131 noktalar\u0131nda farkl\u0131 tiplerde de\u011ferler alabilir. Bu esneklik, h\u0131zl\u0131 geli\u015ftirmeye olanak tan\u0131rken, tip d\u00f6n\u00fc\u015f\u00fcmlerini ve farkl\u0131 veri tiplerini anlamay\u0131 kritik hale getirir. JavaScript'te temelde iki t\u00fcr veri tipi kategorisi bulunur: ilkel (primitive) tipler ve ilkel olmayan (non-primitive) tipler.\n<\/p>\n \n\u0130lkel tipler, basit ve tek bir de\u011fer depolayan tiplerdir. Bir de\u011fi\u015fkene ilkel bir de\u011fer atand\u0131\u011f\u0131nda, de\u011ferin kendisi kopyalan\u0131r.\n<\/p>\n <\/code>\n <\/li>\n <\/code>\n <\/li>\n <\/code>\n <\/li>\n <\/code>\n <\/li>\n <\/code>\n <\/li>\n <\/code>\n <\/li>\n <\/code>\n <\/li>\n<\/ul>\n \n\u0130lkel olmayan tipler, birden fazla de\u011feri veya daha karma\u015f\u0131k yap\u0131lar\u0131 depolayabilen tiplerdir. Bir de\u011fi\u015fkene ilkel olmayan bir de\u011fer atand\u0131\u011f\u0131nda, de\u011ferin kendisi yerine bellekteki referans\u0131 kopyalan\u0131r.\n<\/p>\n <\/code>\n <\/li>\n <\/code>\n <\/li>\n <\/code>\n <\/li>\n<\/ul>\n \nJavaScript'in dinamik tipli do\u011fas\u0131, \u00e7o\u011fu zaman tip d\u00f6n\u00fc\u015f\u00fcmlerini beraberinde getirir. Tip d\u00f6n\u00fc\u015f\u00fcm\u00fc, bir veri tipinin ba\u015fka bir veri tipine d\u00f6n\u00fc\u015ft\u00fcr\u00fclmesi i\u015flemidir. Bu d\u00f6n\u00fc\u015f\u00fcmler iki \u015fekilde ger\u00e7ekle\u015febilir:\n<\/p>\nvar<\/code>, let<\/code>, const<\/code> gibi de\u011fi\u015fken tan\u0131mlama y\u00f6ntemleri aras\u0131ndaki kritik farklar\u0131, kullan\u0131m alanlar\u0131n\u0131 ve en iyi uygulamalar\u0131 derinlemesine inceleyece\u011fiz. B\u00f6ylece, programlama ser\u00fcveninize sa\u011flam bir ba\u015flang\u0131\u00e7 yapacak ve JavaScript’in veri y\u00f6netimi yeteneklerini tam anlam\u0131yla kavrayacaks\u0131n\u0131z.\n<\/p>\nsepetUrunSayisi<\/code> ad\u0131nda bir de\u011fi\u015fkenin de\u011ferini art\u0131rmak, kodun ne yapt\u0131\u011f\u0131n\u0131 \u00e7ok daha net bir \u015fekilde ortaya koyar. Ayr\u0131ca, e\u011fer sepetin maksimum \u00fcr\u00fcn kapasitesi gibi bir sabit de\u011fer varsa, bunu MAX_SEPET_KAPASITESI<\/code> gibi bir de\u011fi\u015fkende saklamak, program\u0131n bak\u0131m\u0131n\u0131 ve gelecekteki de\u011fi\u015fiklikleri kolayla\u015ft\u0131r\u0131r.\n<\/p>\nJavaScript’te De\u011fi\u015fken Tan\u0131mlama: Var, Let ve Const Aras\u0131ndaki Farklar Nelerdir?<\/h3>\n
var<\/code>, let<\/code> ve const<\/code>. Tarihsel olarak var<\/code> en eski y\u00f6ntemdir ve JavaScript’in ilk zamanlar\u0131ndan beri kullan\u0131lmaktad\u0131r. Ancak ES6 (ECMAScript 2015) ile birlikte hayat\u0131m\u0131za giren let<\/code> ve const<\/code>, de\u011fi\u015fken y\u00f6netimi konusunda \u00e7ok daha modern ve g\u00fcvenli yakla\u015f\u0131mlar sunmu\u015ftur. Bu \u00fc\u00e7 anahtar kelimenin her birinin kendine has \u00f6zellikleri, kapsama alanlar\u0131 (scope) ve kullan\u0131m senaryolar\u0131 vard\u0131r. Bu farklar\u0131 anlamak, temiz, hatas\u0131z ve bak\u0131m\u0131 kolay JavaScript kodu yazmak i\u00e7in kritik \u00f6neme sahiptir.\n<\/p>\nvar<\/code> Anahtar Kelimesi: Geleneksel Yakla\u015f\u0131m<\/h4>\nvar<\/code> ile tan\u0131mlanan de\u011fi\u015fkenler, JavaScript’in en eski ve en esnek de\u011fi\u015fken tan\u0131mlama y\u00f6ntemidir. Temel \u00f6zelli\u011fi ‘function scope’a sahip olmas\u0131d\u0131r. Yani, bir fonksiyon i\u00e7inde tan\u0131mlanan var<\/code> de\u011fi\u015fkeni yaln\u0131zca o fonksiyon i\u00e7inde eri\u015filebilirken, fonksiyon d\u0131\u015f\u0131nda tan\u0131mlanan bir var<\/code> de\u011fi\u015fkeni global scope’ta bulunur ve her yerden eri\u015filebilir. En \u00f6nemli davran\u0131\u015flar\u0131ndan biri de ‘hoisting’dir. var<\/code> ile tan\u0131mlanan bir de\u011fi\u015fken, i\u00e7inde bulundu\u011fu scope’un en \u00fcst\u00fcne ta\u015f\u0131n\u0131r, ancak sadece bildirimi (declaration) ta\u015f\u0131n\u0131r, atamas\u0131 (initialization) de\u011fil. Bu durum, beklenmedik davran\u0131\u015flara ve hatalara yol a\u00e7abilir. \u00d6rne\u011fin:\n<\/p>\n\n console.log(mesaj); \/\/ undefined (hoisting nedeniyle bildirim yukar\u0131 ta\u015f\u0131n\u0131r)\n var mesaj = \"Merhaba d\u00fcnya!\";\n console.log(mesaj); \/\/ Merhaba d\u00fcnya!\n\n function ornekFonksiyon() {\n var sayi = 10;\n if (true) {\n var sayi = 20; \/\/ Ayn\u0131 de\u011fi\u015fken yeniden tan\u0131mlanabilir!\n console.log(sayi); \/\/ 20\n }\n console.log(sayi); \/\/ 20 (var block scope'a sahip de\u011fil)\n }\n ornekFonksiyon();\n \/\/ console.log(sayi); \/\/ Hata: sayi is not defined (function scope)\n<\/pre>\nvar<\/code> ile ayn\u0131 isimde bir de\u011fi\u015fkeni birden fazla kez tan\u0131mlamak m\u00fcmk\u00fcnd\u00fcr ve bu durum genellikle kodun karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 ve hata potansiyelini art\u0131r\u0131r. Ayr\u0131ca, if<\/code> blo\u011fu i\u00e7inde tan\u0131mlanan sayi<\/code> de\u011fi\u015fkeninin if<\/code> blo\u011fu d\u0131\u015f\u0131ndan da eri\u015filebilir olmas\u0131 (function scope<\/code> nedeniyle), \u00e7o\u011fu zaman istenmeyen bir durumdur ve 'shadowing' gibi hatalara yol a\u00e7abilir.\n<\/p>\nlet<\/code> Anahtar Kelimesi: Esnek ve G\u00fcvenli Se\u00e7im<\/h4>\nlet<\/code> anahtar kelimesi, ES6 ile birlikte gelmi\u015f ve var<\/code>'\u0131n bir\u00e7ok dezavantaj\u0131n\u0131 gidermi\u015ftir. En belirgin \u00f6zelli\u011fi 'block scope'a sahip olmas\u0131d\u0131r. Bu, let<\/code> ile tan\u0131mlanan bir de\u011fi\u015fkenin yaln\u0131zca tan\u0131mland\u0131\u011f\u0131 blok (s\u00fcsl\u00fc parantezler {}<\/code>) veya alt bloklar i\u00e7inde eri\u015filebilir oldu\u011fu anlam\u0131na gelir. let<\/code> de\u011fi\u015fkenleri yeniden tan\u0131mlanamaz, ancak de\u011ferleri sonradan de\u011fi\u015ftirilebilir. let<\/code> de hoisting'e tabidir, ancak 'Temporal Dead Zone (TDZ)' ad\u0131 verilen bir mekanizma nedeniyle, de\u011fi\u015fken tan\u0131mlanmadan \u00f6nce eri\u015filmeye \u00e7al\u0131\u015f\u0131l\u0131rsa bir hata f\u0131rlat\u0131r. Bu, var<\/code>'daki undefined<\/code> sorununu \u00e7\u00f6zerek daha g\u00fcvenli bir davran\u0131\u015f sunar.\n<\/p>\n\n \/\/ console.log(isim); \/\/ Hata: Cannot access 'isim' before initialization (TDZ)\n let isim = \"Ahmet\";\n console.log(isim); \/\/ Ahmet\n\n function ornekFonksiyonLet() {\n let yas = 30;\n if (true) {\n let yas = 40; \/\/ Farkl\u0131 bir de\u011fi\u015fken, yeni bir block scope'ta\n console.log(yas); \/\/ 40\n }\n console.log(yas); \/\/ 30 (D\u0131\u015f bloktaki yas de\u011fi\u015fkeni hala ge\u00e7erli)\n }\n ornekFonksiyonLet();\n\n let renk = \"mavi\";\n \/\/ let renk = \"k\u0131rm\u0131z\u0131\"; \/\/ Hata: 'renk' zaten tan\u0131mlanm\u0131\u015f\n renk = \"ye\u015fil\"; \/\/ De\u011feri de\u011fi\u015ftirilebilir\n console.log(renk); \/\/ ye\u015fil\n<\/pre>\nlet<\/code> sayesinde, de\u011fi\u015fkenlerin kapsam\u0131n\u0131 daha iyi kontrol edebilir ve ayn\u0131 isme sahip de\u011fi\u015fkenlerin farkl\u0131 bloklarda ba\u011f\u0131ms\u0131z olarak \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayabiliriz. Bu, \u00f6zellikle d\u00f6ng\u00fcler ve ko\u015fullu ifadeler i\u00e7inde de\u011fi\u015fken y\u00f6netimi yaparken kodun okunabilirli\u011fini ve g\u00fcvenilirli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r.\n<\/p>\nconst<\/code> Anahtar Kelimesi: Sabit De\u011ferler \u0130\u00e7in<\/h4>\nconst<\/code> da let<\/code> gibi ES6 ile gelmi\u015f olup, let<\/code> ile benzer \u015fekilde 'block scope' ve 'Temporal Dead Zone (TDZ)' \u00f6zelliklerine sahiptir. Ancak const<\/code>'un temel fark\u0131, bir kez tan\u0131mland\u0131ktan sonra de\u011ferinin de\u011fi\u015ftirilemez<\/b> olmas\u0131d\u0131r. Bu y\u00fczden const<\/code> ile bir de\u011fi\u015fken tan\u0131mlad\u0131\u011f\u0131n\u0131zda, ona hemen bir ba\u015flang\u0131\u00e7 de\u011feri ataman\u0131z zorunludur. Genellikle sabit kalmas\u0131 beklenen de\u011ferler (\u00f6rne\u011fin, bir API anahtar\u0131, maksimum deneme say\u0131s\u0131, PI say\u0131s\u0131) i\u00e7in kullan\u0131l\u0131r.\n<\/p>\n\n const PI = 3.14159;\n \/\/ PI = 3.14; \/\/ Hata: Assignment to constant variable.\n\n const KULLANICI_ADI = \"admin\";\n \/\/ const KULLANICI_ADI; \/\/ Hata: Missing initializer in const declaration\n\n function ornekFonksiyonConst() {\n const ID = 123;\n if (true) {\n const ID = 456; \/\/ Yeni bir block scope'ta farkl\u0131 bir ID\n console.log(ID); \/\/ 456\n }\n console.log(ID); \/\/ 123\n }\n ornekFonksiyonConst();\n<\/pre>\nconst<\/code>'un de\u011fi\u015fkenin kendisinin referans\u0131n\u0131 sabitlemesidir, de\u011ferini de\u011fil (ilkel tipler i\u00e7in de\u011ferini de sabitler). E\u011fer bir const<\/code> de\u011fi\u015fkenine bir nesne veya dizi atan\u0131rsa, bu nesne veya dizinin \u00f6zelliklerini veya elemanlar\u0131n\u0131 de\u011fi\u015ftirmek m\u00fcmk\u00fcnd\u00fcr. const<\/code> sadece o de\u011fi\u015fkenin ba\u015fka bir nesneye\/diziye yeniden atanamayaca\u011f\u0131n\u0131 garanti eder.\n<\/p>\n\n const ayarlar = { tema: \"dark\", dil: \"tr\" };\n ayarlar.tema = \"light\"; \/\/ Bu ge\u00e7erlidir! Nesnenin i\u00e7eri\u011fi de\u011fi\u015febilir.\n console.log(ayarlar); \/\/ { tema: \"light\", dil: \"tr\" }\n\n \/\/ ayarlar = { tema: \"light\", dil: \"en\" }; \/\/ Hata: Assignment to constant variable.\n<\/pre>\nlet<\/code> ve const<\/code> tercih edilmeli?
\nModern JavaScript geli\u015ftirme pratiklerinde, var<\/code> kullan\u0131m\u0131 genellikle tavsiye edilmez. var<\/code>'\u0131n esnekli\u011fi (yeniden tan\u0131mlanabilme, function scope) \u00e7o\u011fu zaman istenmeyen yan etkilere ve hatalara yol a\u00e7abilir, \u00f6zellikle b\u00fcy\u00fck kod tabanlar\u0131nda veya tak\u0131m \u00e7al\u0131\u015fmalar\u0131nda. \u00d6rne\u011fin, bir d\u00f6ng\u00fc i\u00e7inde var<\/code> ile tan\u0131mlanan bir de\u011fi\u015fken, d\u00f6ng\u00fc d\u0131\u015f\u0131ndan da eri\u015filebilir hale gelir ve d\u00f6ng\u00fc tamamland\u0131ktan sonra bile son de\u011ferini korur. Bu, \u00f6zellikle asenkron i\u015flemlerde (callbacks, Promises) beklenmedik sonu\u00e7lara yol a\u00e7abilir.\n<\/p>\nconst<\/code> kullan\u0131n. E\u011fer de\u011fi\u015fkenin de\u011feri daha sonra de\u011fi\u015fecekse (\u00f6rne\u011fin, bir saya\u00e7, bir form alan\u0131 de\u011feri), let<\/code> kullan\u0131n. Bu yakla\u015f\u0131m, kodun niyetini a\u00e7\u0131k\u00e7a belirtir ve potansiyel hatalar\u0131 azalt\u0131r. const<\/code> kullanmak, kodun daha g\u00fcvenli ve \u00f6ng\u00f6r\u00fclebilir olmas\u0131n\u0131 sa\u011flar, \u00e7\u00fcnk\u00fc bir de\u011ferin yanl\u0131\u015fl\u0131kla de\u011fi\u015ftirilmesini engeller. let<\/code> ise, dinamik gereksinimleri kar\u015f\u0131larken var<\/code>'\u0131n getirdi\u011fi kapsam (scope) karma\u015f\u0131kl\u0131klar\u0131ndan ka\u00e7\u0131nman\u0131z\u0131 sa\u011flar. Bu modern pratikler, JavaScript ekosisteminde kabul g\u00f6rm\u00fc\u015f standartlar haline gelmi\u015ftir.\n<\/p>\nconst<\/code> kullanmay\u0131 d\u00fc\u015f\u00fcn\u00fcn. E\u011fer de\u011ferini de\u011fi\u015ftirmek zorundaysan\u0131z, o zaman let<\/code>'e ge\u00e7in. var<\/code>'\u0131 ise modern projelerde neredeyse hi\u00e7 kullanmaman\u0131z \u015fiddetle tavsiye edilir. Bu, kodunuzun daha \u00f6ng\u00f6r\u00fclebilir ve hatas\u0131z olmas\u0131n\u0131 sa\u011flar.\n<\/div>\nDe\u011fi\u011fi\u015fken \u0130simlendirme Kurallar\u0131 ve En \u0130yi Uygulamalar Nelerdir?<\/h2>\n
JavaScript De\u011fi\u015fken \u0130simlendirme Kurallar\u0131<\/h3>\n
\n
_<\/code>) ve Dolar \u0130\u015fareti ($<\/code>)<\/strong>: De\u011fi\u015fken isimleri bu karakterleri i\u00e7erebilir.<\/li>\n1numara<\/code> ge\u00e7ersizdir).<\/li>\nkullanici adi<\/code> ge\u00e7ersizdir).<\/li>\nmesaj<\/code>, Mesaj<\/code> ve MESAJ<\/code> \u00fc\u00e7 farkl\u0131 de\u011fi\u015fkendir.<\/li>\nfor<\/code>, while<\/code>, function<\/code>, let<\/code>, const<\/code>, var<\/code>, if<\/code>, else<\/code>, return<\/code> gibi kelimeler kullan\u0131lamaz.<\/li>\n<\/ul>\n\n \/\/ Ge\u00e7erli \u0130simler\n let kullaniciAdi = \"Ali\";\n let _telefonNumarasi = \"5551234567\";\n let $fiyat = 99.99;\n let toplam_maliyet = 250;\n let mesaj9 = \"Merhaba\";\n\n \/\/ Ge\u00e7ersiz \u0130simler (hata verir)\n \/\/ let 1urun = \"Elma\"; \/\/ Say\u0131 ile ba\u015fl\u0131yor\n \/\/ let ilk urun = \"Armut\"; \/\/ Bo\u015fluk i\u00e7eriyor\n \/\/ let for = \"d\u00f6ng\u00fc\"; \/\/ Rezerv kelime\n \/\/ let const = \"sabit\"; \/\/ Rezerv kelime\n<\/pre>\nDe\u011fi\u015fken \u0130simlendirmede En \u0130yi Uygulamalar (Konvansiyonlar)<\/h3>\n
\n
camelCase<\/code>)<\/strong>: JavaScript'te en yayg\u0131n kullan\u0131lan isimlendirme konvansiyonudur. \u0130lk kelime k\u00fc\u00e7\u00fck harfle ba\u015flar, sonraki kelimelerin ilk harfleri b\u00fcy\u00fck olur. De\u011fi\u015fkenler ve fonksiyonlar i\u00e7in kullan\u0131l\u0131r.\n\n let toplamSiparisAdedi = 15;\n let urunFiyatiHesapla = (adet, fiyat) => adet * fiyat;\n <\/pre>\nPascalCase<\/code>)<\/strong>: Her kelimenin ilk harfi b\u00fcy\u00fck harfle ba\u015flar. Genellikle s\u0131n\u0131f isimleri ve yap\u0131c\u0131 fonksiyonlar (constructor functions) i\u00e7in kullan\u0131l\u0131r.\n\n class KullaniciProfil { \/* ... *\/ }\n function SiparisDetay(urun, adet) { \/* ... *\/ }\n <\/pre>\nsnake_case<\/code>)<\/strong>: Kelimeler alt \u00e7izgi ile ayr\u0131l\u0131r. Baz\u0131 dillerde (Python gibi) yayg\u0131n olsa da, JavaScript'te genellikle sabitler d\u0131\u015f\u0131nda tercih edilmez.\n\n \/\/ Genellikle di\u011fer dillerde veya sabitlerde kullan\u0131l\u0131r.\n \/\/ let toplam_tutar = 100; \/\/ JavaScript'te pek yayg\u0131n de\u011fil\n <\/pre>\nkebab-case<\/code>)<\/strong>: Kelimeler tire ile ayr\u0131l\u0131r. HTML\/CSS'de yayg\u0131n olsa da, JavaScript de\u011fi\u015fken isimleri i\u00e7in kullan\u0131lamaz \u00e7\u00fcnk\u00fc tire \u00e7\u0131karma operat\u00f6r\u00fc olarak yorumlan\u0131r.<\/li>\nUPPER_SNAKE_CASE<\/code>)<\/strong>: const<\/code> ile tan\u0131mlanm\u0131\u015f, de\u011feri hi\u00e7 de\u011fi\u015fmeyecek ger\u00e7ek sabitler i\u00e7in kullan\u0131l\u0131r.\n\n const MAX_OGRENCI_SAYISI = 30;\n const API_KEY = \"abcxyz123\";\n <\/pre>\nAnla\u015f\u0131l\u0131r ve A\u00e7\u0131klay\u0131c\u0131 \u0130simler Kullanman\u0131n \u00d6nemi<\/h3>\n
\n
let x = 10;<\/code> (x neyi temsil ediyor?)<\/li>\nlet ogrenciSayisi = 10;<\/code> (a\u00e7\u0131k\u00e7a \u00f6\u011frenci say\u0131s\u0131n\u0131 belirtiyor)<\/li>\nlet data = fetch('...');<\/code> (hangi veri?)<\/li>\nlet kullaniciVerileri = fetch('...');<\/code> (kullan\u0131c\u0131ya ait veriler)<\/li>\n<\/ul>\nJavaScript'te De\u011fi\u015fkenlerin Kapsam\u0131 (Scope): Nerede Eri\u015febiliriz?<\/h2>\n
var<\/code>, let<\/code> ve const<\/code> anahtar kelimeleriyle tan\u0131mlanan de\u011fi\u015fkenlerin davran\u0131\u015flar\u0131n\u0131 do\u011frudan etkiler.\n<\/p>\nGlobal Scope: Her Yerden Eri\u015filebilir De\u011fi\u015fkenler<\/h3>\n
\n let globalMesaj = \"Bu global bir mesajd\u0131r.\"; \/\/ Global scope\n\n function birinciFonksiyon() {\n console.log(globalMesaj); \/\/ Global de\u011fi\u015fkene eri\u015fim\n globalMesaj = \"Mesaj birinci fonksiyonda de\u011fi\u015fti.\";\n }\n\n function ikinciFonksiyon() {\n console.log(globalMesaj); \/\/ De\u011fi\u015fen global mesaj\u0131 g\u00f6r\u00fcr\n }\n\n birinciFonksiyon(); \/\/ Global mesaj\u0131 de\u011fi\u015ftirir\n ikinciFonksiyon(); \/\/ \"Mesaj birinci fonksiyonda de\u011fi\u015fti.\" \u00e7\u0131kt\u0131s\u0131n\u0131 verir\n<\/pre>\nglobalMesaj<\/code> de\u011fi\u015fkenine her iki fonksiyondan da eri\u015febildik ve hatta bir fonksiyondan de\u011fi\u015ftirdi\u011fimizde di\u011fer fonksiyon da bu de\u011fi\u015fikli\u011fi alg\u0131lad\u0131. Bu durumun faydalar\u0131 oldu\u011fu kadar, b\u00fcy\u00fck uygulamalarda hangi fonksiyonun hangi global de\u011fi\u015fkeni de\u011fi\u015ftirdi\u011fini takip etmenin zorla\u015fmas\u0131 gibi dezavantajlar\u0131 da vard\u0131r.\n<\/p>\nFunction Scope: Fonksiyonlara \u00d6zel De\u011fi\u015fkenler (
var<\/code> ile)<\/h3>\nvar<\/code> anahtar kelimesi ile tan\u0131mlanan de\u011fi\u015fkenler 'function scope'a sahiptir. Bu, bir var<\/code> de\u011fi\u015fkeninin yaln\u0131zca tan\u0131mland\u0131\u011f\u0131 fonksiyon i\u00e7inde veya i\u00e7 i\u00e7e ge\u00e7mi\u015f fonksiyonlarda eri\u015filebilir oldu\u011fu anlam\u0131na gelir. Fonksiyon d\u0131\u015f\u0131ndan bu de\u011fi\u015fkenlere eri\u015fmeye \u00e7al\u0131\u015fmak bir referans hatas\u0131na (ReferenceError) yol a\u00e7ar. Bu, de\u011fi\u015fkenleri belirli bir i\u015flevsel birim i\u00e7inde izole etmenin ve isim \u00e7ak\u0131\u015fmalar\u0131n\u0131 azaltman\u0131n bir yoludur.\n<\/p>\n\n function hesaplaToplam(s1, s2) {\n var toplam = s1 + s2; \/\/ toplam<\/code> function scope'ta\n console.log(\"Fonksiyon i\u00e7inde toplam:\", toplam);\n }\n\n hesaplaToplam(5, 7); \/\/ \"Fonksiyon i\u00e7inde toplam: 12\"\n \/\/ console.log(\"Fonksiyon d\u0131\u015f\u0131nda toplam:\", toplam); \/\/ Hata: toplam is not defined\n<\/pre>\ntoplam<\/code> de\u011fi\u015fkeni, hesaplaToplam<\/code> fonksiyonunun d\u0131\u015f d\u00fcnyadan ba\u011f\u0131ms\u0131z \u00e7al\u0131\u015fmas\u0131n\u0131 garanti eder.\n<\/p>\nBlock Scope: Modern ve Hassas Kontrol (
let<\/code> ve const<\/code> ile)<\/h3>\nlet<\/code> ve const<\/code> anahtar kelimeleri, ES6 ile birlikte 'block scope' kavram\u0131n\u0131 getirmi\u015ftir. Block scope, s\u00fcsl\u00fc parantezlerle {}<\/code> tan\u0131mlanan her blok i\u00e7in (\u00f6rne\u011fin if<\/code> ifadeleri, for<\/code> d\u00f6ng\u00fcleri, while<\/code> d\u00f6ng\u00fcleri veya basit bir kod blo\u011fu) ayr\u0131 bir kapsam olu\u015fturur. let<\/code> veya const<\/code> ile tan\u0131mlanan de\u011fi\u015fkenler yaln\u0131zca o blo\u011fun i\u00e7inde ve alt bloklar\u0131nda eri\u015filebilir. Bu, de\u011fi\u015fkenlerin ya\u015fam s\u00fcresini \u00e7ok daha hassas bir \u015fekilde kontrol etmemizi sa\u011flar ve var<\/code>'\u0131n neden oldu\u011fu bir\u00e7ok kapsam sorununu ortadan kald\u0131r\u0131r.\n<\/p>\n\n if (true) {\n let ad = \"Mehmet\"; \/\/ Block scope'ta\n const soyad = \"Y\u0131lmaz\"; \/\/ Block scope'ta\n var sehir = \"Ankara\"; \/\/ Function\/Global scope'ta (blok i\u00e7indeki var!)\n console.log(ad, soyad, sehir); \/\/ Mehmet Y\u0131lmaz Ankara\n }\n\n \/\/ console.log(ad); \/\/ Hata: ad is not defined (blok d\u0131\u015f\u0131ndan eri\u015filemez)\n \/\/ console.log(soyad); \/\/ Hata: soyad is not defined (blok d\u0131\u015f\u0131ndan eri\u015filemez)\n console.log(sehir); \/\/ Ankara (var oldu\u011fu i\u00e7in blok d\u0131\u015f\u0131ndan eri\u015filebilir!)\n\n for (let i = 0; i < 3; i++) {\n \/\/ i<\/code> her iterasyonda yeniden tan\u0131mlanmaz, ancak her d\u00f6ng\u00fc i\u00e7in ayr\u0131 bir i<\/code> kapsam\u0131 olu\u015fur.\n console.log(D\u00f6ng\u00fc i\u00e7i i: ${i}<\/code>);\n }\n \/\/ console.log(i); \/\/ Hata: i is not defined (d\u00f6ng\u00fc blo\u011fu d\u0131\u015f\u0131ndan eri\u015filemez)\n<\/pre>\nlet<\/code> ve const<\/code>'un neden modern JavaScript'te tercih edildi\u011fini net bir \u015fekilde g\u00f6sterir. De\u011fi\u015fkenlerin belirli bir blokla s\u0131n\u0131rl\u0131 olmas\u0131, kodun daha \u00f6ng\u00f6r\u00fclebilir olmas\u0131n\u0131 ve istenmeyen yan etkilerin \u00f6n\u00fcne ge\u00e7ilmesini sa\u011flar. \u00d6zellikle d\u00f6ng\u00fclerde, var<\/code> kullan\u0131ld\u0131\u011f\u0131nda olu\u015fan \"kapan\u0131\u015f sorunu\" (closure issue<\/code>) let<\/code> ile do\u011fal olarak \u00e7\u00f6z\u00fcl\u00fcr, \u00e7\u00fcnk\u00fc her d\u00f6ng\u00fc iterasyonu kendi i<\/code> de\u011fi\u015fkenine sahip olur.\n<\/p>\nVaka Analizi: Scope Hatalar\u0131n\u0131 \u00d6nleme<\/h3>\n
\n let kullaniciVerisi = {}; \/\/ Global veya daha geni\u015f kapsaml\u0131 bir de\u011fi\u015fken\n\n function formGonder() {\n let inputAd = document.getElementById(\"ad\").value;\n let inputEmail = document.getElementById(\"email\").value;\n\n if (inputAd && inputEmail) {\n kullaniciVerisi = {\n ad: inputAd,\n email: inputEmail\n };\n console.log(\"Form verileri kaydedildi:\", kullaniciVerisi);\n } else {\n console.log(\"L\u00fctfen t\u00fcm alanlar\u0131 doldurun.\");\n }\n\n \/\/ console.log(inputAd); \/\/ Bu sat\u0131r fonksiyonda oldu\u011fu i\u00e7in eri\u015filebilir\n }\n \/\/ console.log(inputAd); \/\/ Hata: inputAd is not defined (fonksiyon d\u0131\u015f\u0131ndan eri\u015filemez)\n<\/pre>\ninputAd<\/code> ve inputEmail<\/code> de\u011fi\u015fkenleri formGonder<\/code> fonksiyonunun kapsam\u0131ndad\u0131r. Bu de\u011fi\u015fkenlere fonksiyon d\u0131\u015f\u0131ndan eri\u015fmeye \u00e7al\u0131\u015fmak hata verecektir, ki bu genellikle istenen davran\u0131\u015ft\u0131r. kullaniciVerisi<\/code> ise daha geni\u015f bir kapsamda tan\u0131mlanarak farkl\u0131 fonksiyonlar\u0131n da bu verilere eri\u015fmesini sa\u011flar. Do\u011fru kapsam y\u00f6netimi sayesinde, farkl\u0131 fonksiyonlar\u0131n ayn\u0131 isimde de\u011fi\u015fkenleri kullanmas\u0131 durumunda bile \u00e7ak\u0131\u015fmalar\u0131n \u00f6n\u00fcne ge\u00e7ilir ve kodunuz daha g\u00fcvenli hale gelir.\n<\/p>\nvar<\/code>, let<\/code> ve const<\/code> aras\u0131ndaki se\u00e7im, bu kapsam kurallar\u0131n\u0131 nas\u0131l uygulayaca\u011f\u0131n\u0131z\u0131 ve kodunuzun ne kadar g\u00fcvenli ve d\u00fczenli olaca\u011f\u0131n\u0131 do\u011frudan etkiler. Modern uygulamalarda, let<\/code> ve const<\/code> kullanarak block scope'un avantajlar\u0131ndan faydalanmak, daha temiz ve s\u00fcrd\u00fcr\u00fclebilir kod yazman\u0131n anahtar\u0131d\u0131r.\n<\/p>\nDe\u011fi\u015fken T\u00fcrleri ve Tip D\u00f6n\u00fc\u015f\u00fcmleri Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h2>\n
\u0130lkel (Primitive) Veri Tipleri<\/h3>\n
\n
''<\/code> veya \"\"<\/code>) aras\u0131na yaz\u0131lan metinlerdir.\n\n let ad = \"Can\";\n let selam = 'Merhaba D\u00fcnya!';\n <\/pre>\n\n let yas = 30;\n let pi = 3.14;\n <\/pre>\ntrue<\/code> (do\u011fru) veya false<\/code> (yanl\u0131\u015f) de\u011ferlerini alabilen tiplerdir. Ko\u015fullu ifadelerde s\u0131k\u00e7a kullan\u0131l\u0131r.\n\n let yetkiliMi = true;\n let aktifMi = false;\n <\/pre>\n\n let tanimsizDegisken; \/\/ de\u011feri undefined\n console.log(tanimsizDegisken); \/\/ undefined\n <\/pre>\nundefined<\/code>'dan farkl\u0131 olarak, null<\/code> bir geli\u015ftirici taraf\u0131ndan bilin\u00e7li olarak atan\u0131r.\n\n let bosDeger = null;\n console.log(bosDeger); \/\/ null\n <\/pre>\n\n const id = Symbol('kimlik');\n const id2 = Symbol('kimlik');\n console.log(id === id2); \/\/ false (her Symbol benzersizdir)\n <\/pre>\nn<\/code> son eki ile tan\u0131mlan\u0131r.\n\n let buyukSayi = 9007199254740991n; \/\/ 'n' ile BigInt olarak tan\u0131mlan\u0131r\n <\/pre>\n\u0130lkel Olmayan (Non-Primitive) Veri Tipleri<\/h3>\n
\n
\n let kullanici = {\n ad: \"Zeynep\",\n yas: 28,\n email: \"zeynep@example.com\"\n };\n <\/pre>\n\n let renkler = [\"k\u0131rm\u0131z\u0131\", \"ye\u015fil\", \"mavi\"];\n <\/pre>\n\n function selamVer() {\n console.log(\"Merhaba!\");\n }\n <\/pre>\nTip D\u00f6n\u00fc\u015f\u00fcmleri (Type Coercion)<\/h3>\n
\n