JavaScript, esnekli\u011fi ve g\u00fcc\u00fcyle modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biridir. Ancak bu esneklik, beraberinde baz\u0131 karma\u015f\u0131kl\u0131klar\u0131 ve “tuzaklar\u0131” da getirir. \u00d6zellikle teknik m\u00fclakatlarda, adaylar\u0131n JavaScript’in bu ince detaylar\u0131n\u0131 ne kadar iyi anlad\u0131\u011f\u0131n\u0131 \u00f6l\u00e7mek i\u00e7in bu “gotcha” noktalar\u0131 s\u0131k\u00e7a sorulur. Bu rehberde, JavaScript’in en yayg\u0131n tuzaklar\u0131n\u0131 ve bunlar\u0131n \u00fcstesinden nas\u0131l gelinece\u011fini detayl\u0131 kod \u00f6rnekleri ve pratik bilgilerle inceleyece\u011fiz.<\/p>\n
Kapsam (scope), de\u011fi\u015fkenlerin ve fonksiyonlar\u0131n eri\u015filebilirli\u011fini belirleyen bir kavramd\u0131r. JavaScript’te \u00fc\u00e7 ana kapsam t\u00fcr\u00fc bulunur: global, fonksiyon (function) ve blok (block) kapsam\u0131. Hoisting ise, kodunuz \u00e7al\u0131\u015ft\u0131r\u0131lmadan \u00f6nce de\u011fi\u015fken ve fonksiyon tan\u0131mlamalar\u0131n\u0131n JavaScript motoru taraf\u0131ndan nas\u0131l yukar\u0131 ta\u015f\u0131nd\u0131\u011f\u0131n\u0131 ifade eder.<\/p>\n
var<\/code>, let<\/code> ve const<\/code> Aras\u0131ndaki Farklar<\/h3>\n\nvar<\/code> (Function Scope):<\/strong> var<\/code> ile tan\u0131mlanan de\u011fi\u015fkenler, i\u00e7inde bulunduklar\u0131 fonksiyonun tamam\u0131nda eri\u015filebilir olur. Global kapsamda tan\u0131mlanm\u0131\u015fsa, t\u00fcm kodda eri\u015filebilir. var<\/code> ile tan\u0131mlanan de\u011fi\u015fkenler hoist edilir<\/em>; yani, bildirimleri fiziksel olarak kodun en \u00fcst\u00fcne ta\u015f\u0131n\u0131r, ancak atamalar\u0131 ta\u015f\u0131nmaz. Bu durum beklenmedik davran\u0131\u015flara yol a\u00e7abilir.<\/li>\nlet<\/code> ve const<\/code> (Block Scope):<\/strong> ES6 ile gelen let<\/code> ve const<\/code>, blok kapsam\u0131na sahiptir. Bu, de\u011fi\u015fkenlerin yaln\u0131zca tan\u0131mland\u0131klar\u0131 s\u00fcsl\u00fc parantezler {}<\/code> i\u00e7inde (if bloklar\u0131, for d\u00f6ng\u00fcleri vb.) eri\u015filebilir oldu\u011fu anlam\u0131na gelir. Her ikisi de hoist edilir, ancak “Temporal Dead Zone” (TDZ) ad\u0131 verilen bir durum nedeniyle, tan\u0131mland\u0131klar\u0131 sat\u0131ra gelene kadar eri\u015filemezler.<\/li>\nconst<\/code> (Sabitlik):<\/strong> const<\/code> da let<\/code> gibi blok kapsaml\u0131d\u0131r ancak bir kez atama yap\u0131ld\u0131ktan sonra de\u011feri yeniden de\u011fi\u015ftirilemez. Nesneler ve diziler i\u00e7in, referans\u0131n sabit oldu\u011fu anlam\u0131na gelir, i\u00e7eri\u011finin de\u011fil.<\/li>\n<\/ul>\nKod \u00d6rnekleri: Hoisting ve Kapsam<\/h4>\n
var<\/code> ile Hoisting Tuza\u011f\u0131:<\/strong><\/p>\nconsole.log(degiskenVar); \/\/ undefined (bildirim hoist edildi, atama edilmedi)\nvar degiskenVar = \"Merhaba var!\";\nconsole.log(degiskenVar); \/\/ Merhaba var!\n\nfunction ornekFonksiyon() {\n console.log(icDegisken); \/\/ undefined\n var icDegisken = \"Fonksiyon i\u00e7i var\";\n console.log(icDegisken); \/\/ Fonksiyon i\u00e7i var\n}\nornekFonksiyon();\n\/\/ console.log(icDegisken); \/\/ ReferenceError: icDegisken is not defined (fonksiyon kapsam\u0131)\n<\/code><\/pre>\nlet<\/code> ile Temporal Dead Zone (TDZ):<\/strong><\/p>\n\/\/ console.log(degiskenLet); \/\/ ReferenceError: Cannot access 'degiskenLet' before initialization (TDZ)\nlet degiskenLet = \"Merhaba let!\";\nconsole.log(degiskenLet); \/\/ Merhaba let!\n\nif (true) {\n \/\/ console.log(blokDegisken); \/\/ ReferenceError: Cannot access 'blokDegisken' before initialization\n let blokDegisken = \"Blok i\u00e7i let\";\n console.log(blokDegisken); \/\/ Blok i\u00e7i let\n}\n\/\/ console.log(blokDegisken); \/\/ ReferenceError: blokDegisken is not defined (blok kapsam\u0131)\n<\/code><\/pre>\nPratik Bilgi:<\/strong> Her zaman let<\/code> ve const<\/code> kullanmay\u0131 tercih edin. Bu, kodunuzu daha \u00f6ng\u00f6r\u00fclebilir hale getirir ve var<\/code>‘\u0131n neden oldu\u011fu yayg\u0131n hoisting ve kapsam sorunlar\u0131ndan ka\u00e7\u0131nman\u0131za yard\u0131mc\u0131 olur. \u00d6zellikle d\u00f6ng\u00fclerde var<\/code> kullanmak, kapan\u0131\u015f (closure) ile ilgili tuzaklara yol a\u00e7abilir (a\u015fa\u011f\u0131da ele al\u0131nacak).<\/p>\nthis<\/code> Anahtar Kelimesinin Gizemleri<\/h2>\nthis<\/code> anahtar kelimesi, JavaScript’teki en kafa kar\u0131\u015ft\u0131r\u0131c\u0131 konulardan biridir. De\u011feri, fonksiyonun nas\u0131l \u00e7a\u011fr\u0131ld\u0131\u011f\u0131na ba\u011fl\u0131 olarak de\u011fi\u015fir. Yani, this<\/code>‘in de\u011feri dinamiktir ve \u00e7al\u0131\u015fma zaman\u0131nda belirlenir.<\/p>\nthis<\/code> Ba\u011flam\u0131n\u0131n Belirlenmesi<\/h3>\n\n- Global Ba\u011flam:<\/strong> Taray\u0131c\u0131da
window<\/code> nesnesine (kat\u0131 modda undefined<\/code>), Node.js’de global<\/code> nesnesine (kat\u0131 modda undefined<\/code>) i\u015faret eder.<\/li>\n- Metot \u00c7a\u011fr\u0131s\u0131:<\/strong> Bir nesnenin metodu olarak \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda,
this<\/code> o nesneye i\u015faret eder.<\/li>\n- Basit Fonksiyon \u00c7a\u011fr\u0131s\u0131:<\/strong> Kat\u0131 olmayan modda
window<\/code>\/global<\/code> nesnesine, kat\u0131 modda ('use strict'<\/code>) ise undefined<\/code>‘a i\u015faret eder.<\/li>\n- Yap\u0131c\u0131 Fonksiyon (Constructor) \u00c7a\u011fr\u0131s\u0131 (
new<\/code> ile):<\/strong> Yeni olu\u015fturulan nesneye i\u015faret eder.<\/li>\ncall()<\/code>, apply()<\/code>, bind()<\/code> Metotlar\u0131:<\/strong> this<\/code> de\u011ferini a\u00e7\u0131k\u00e7a belirlememizi sa\u011flarlar.<\/li>\n- Arrow Fonksiyonlar:<\/strong> Kendi
this<\/code> ba\u011flamlar\u0131n\u0131 olu\u015fturmazlar. Bunun yerine, tan\u0131mland\u0131klar\u0131 lexical (s\u00f6zc\u00fcksel) kapsamdaki<\/em> this<\/code> de\u011ferini miras al\u0131rlar. Bu, this<\/code> ile ilgili bir\u00e7ok yayg\u0131n tuza\u011f\u0131 \u00e7\u00f6zer.<\/li>\n<\/ul>\nKod \u00d6rnekleri: this<\/code> Ba\u011flam\u0131<\/h4>\n\/\/ 1. Global Ba\u011flam\nconsole.log(this === window); \/\/ Taray\u0131c\u0131da: true (kat\u0131 modda de\u011filse)\n\n\/\/ 2. Metot \u00c7a\u011fr\u0131s\u0131\nconst kisi = {\n ad: \"Ali\",\n selamla: function() {\n console.log(Merhaba, ben ${this.ad}<\/code>);\n }\n};\nkisi.selamla(); \/\/ Merhaba, ben Ali (this -> kisi)\n\n\/\/ 3. Basit Fonksiyon \u00c7a\u011fr\u0131s\u0131 (Metottan ayr\u0131lm\u0131\u015f)\nconst selamlaFunc = kisi.selamla;\nselamlaFunc(); \/\/ Merhaba, ben undefined (this -> window\/global veya undefined strict modda)\n\n\/\/ 4. Arrow Fonksiyonlar ile this<\/code>\nconst kisi2 = {\n ad: \"Ay\u015fe\",\n selamlaGecikmeli: function() {\n \/\/ Geleneksel fonksiyon: this ba\u011flam\u0131 setTimeout i\u00e7inde de\u011fi\u015fir\n setTimeout(function() {\n console.log(Gecikmeli (geleneksel): Merhaba, ben ${this.ad}<\/code>); \/\/ this -> window\/global\n }, 100);\n\n \/\/ Arrow fonksiyon: this ba\u011flam\u0131n\u0131 d\u0131\u015far\u0131dan (lexical scope) miras al\u0131r\n setTimeout(() => {\n console.log(Gecikmeli (arrow): Merhaba, ben ${this.ad}<\/code>); \/\/ this -> kisi2\n }, 200);\n }\n};\nkisi2.selamlaGecikmeli();\n\/\/ \u00c7\u0131kt\u0131:\n\/\/ Gecikmeli (geleneksel): Merhaba, ben undefined\n\/\/ Gecikmeli (arrow): Merhaba, ben Ay\u015fe\n<\/code><\/pre>\nPratik Bilgi:<\/strong> this<\/code> ile ilgili beklenmedik davran\u0131\u015flardan ka\u00e7\u0131nmak i\u00e7in \u015funlar\u0131 yap\u0131n:<\/p>\n\n- S\u0131n\u0131f metotlar\u0131nda veya callback fonksiyonlar\u0131nda
this<\/code> ba\u011flam\u0131n\u0131 korumak i\u00e7in arrow fonksiyonlar\u0131 kullan\u0131n.<\/li>\n- Gerekirse
bind()<\/code>, call()<\/code> veya apply()<\/code> metotlar\u0131n\u0131 kullanarak this<\/code> ba\u011flam\u0131n\u0131 a\u00e7\u0131k\u00e7a belirtin.<\/li>\n<\/ul>\nTip D\u00f6n\u00fc\u015f\u00fcm\u00fc (Type Coercion) ve E\u015fitlik Kar\u015f\u0131la\u015ft\u0131rmalar\u0131<\/h2>\n
JavaScript, “gev\u015fek tipli” (loosely typed) bir dildir; yani de\u011fi\u015fkenlerin t\u00fcr\u00fcn\u00fc a\u00e7\u0131k\u00e7a belirtmeniz gerekmez. Bu esneklik, bazen otomatik tip d\u00f6n\u00fc\u015f\u00fcmlerine (type coercion) yol a\u00e7ar ve bu durum e\u015fitlik kar\u015f\u0131la\u015ft\u0131rmalar\u0131nda beklenmedik sonu\u00e7lar do\u011furabilir.<\/p>\n
==<\/code> (Gev\u015fek E\u015fitlik) vs. ===<\/code> (Kat\u0131 E\u015fitlik)<\/h3>\n\n==<\/code> (Abstract Equality Comparison):<\/strong> Bu operat\u00f6r, kar\u015f\u0131la\u015ft\u0131rma yapmadan \u00f6nce farkl\u0131 t\u00fcrdeki de\u011ferleri otomatik olarak ayn\u0131 t\u00fcre d\u00f6n\u00fc\u015ft\u00fcrmeye \u00e7al\u0131\u015f\u0131r. Bu, genellikle beklenmedik ve hata potansiyeli y\u00fcksek durumlara yol a\u00e7ar.<\/li>\n===<\/code> (Strict Equality Comparison):<\/strong> Bu operat\u00f6r, hem de\u011ferin hem de t\u00fcr\u00fcn ayn\u0131 olmas\u0131n\u0131 gerektirir. Otomatik tip d\u00f6n\u00fc\u015f\u00fcm\u00fc yapmaz. Bu, daha g\u00fcvenli ve \u00f6ng\u00f6r\u00fclebilir bir kar\u015f\u0131la\u015ft\u0131rma y\u00f6ntemidir.<\/li>\n<\/ul>\nDi\u011fer Tip D\u00f6n\u00fc\u015f\u00fcm\u00fc Tuzaklar\u0131<\/h3>\n\ntypeof null<\/code>:<\/strong> JavaScript’in eski bir hatas\u0131 nedeniyle typeof null<\/code> de\u011feri \"object\"<\/code> d\u00f6nd\u00fcr\u00fcr. Bu, null<\/code>‘\u0131n \u00f6zel bir ilkel de\u011fer olmas\u0131na ra\u011fmen b\u00f6yledir.<\/li>\nNaN<\/code> Davran\u0131\u015f\u0131:<\/strong> NaN<\/code> (Not-a-Number) de\u011feri, kendine bile e\u015fit de\u011fildir (NaN === NaN<\/code> her zaman false<\/code>‘dur). Bir de\u011ferin NaN<\/code> olup olmad\u0131\u011f\u0131n\u0131 kontrol etmek i\u00e7in Number.isNaN()<\/code> veya eski isNaN()<\/code> fonksiyonunu kullanmal\u0131s\u0131n\u0131z.<\/li>\n- Falsy De\u011ferler:<\/strong> JavaScript’te
false<\/code>, 0<\/code>, \"\"<\/code> (bo\u015f string), null<\/code>, undefined<\/code> ve NaN<\/code> gibi de\u011ferler “falsy” kabul edilir. Bu, boolean ba\u011flam\u0131nda (\u00f6rne\u011fin bir if<\/code> ko\u015fulunda) false<\/code> olarak de\u011ferlendirildikleri anlam\u0131na gelir.<\/li>\n<\/ul>\nKod \u00d6rnekleri: Tip D\u00f6n\u00fc\u015f\u00fcm\u00fc ve E\u015fitlik<\/h4>\n\/\/ == vs ===\nconsole.log(1 == '1'); \/\/ true (string '1' say\u0131 1'e d\u00f6n\u00fc\u015ft\u00fcr\u00fcl\u00fcr)\nconsole.log(1 === '1'); \/\/ false (t\u00fcrler farkl\u0131)\n\nconsole.log(0 == false); \/\/ true\nconsole.log(0 === false); \/\/ false\n\nconsole.log(null == undefined); \/\/ true\nconsole.log(null === undefined); \/\/ false\n\n\/\/ typeof null\nconsole.log(typeof null); \/\/ \"object\" (bir hata!)\nconsole.log(null === null); \/\/ true (de\u011fer ve t\u00fcr ayn\u0131)\n\n\/\/ NaN Davran\u0131\u015f\u0131\nconsole.log(NaN == NaN); \/\/ false\nconsole.log(NaN === NaN); \/\/ false\nconsole.log(Number.isNaN(NaN)); \/\/ true\nconsole.log(Number.isNaN(123)); \/\/ false\nconsole.log(Number.isNaN(\"abc\")); \/\/ false (Number.isNaN sadece NaN kontrol eder)\n\nconsole.log(isNaN(\"abc\")); \/\/ true (isNaN \u00f6nce say\u0131ya d\u00f6n\u00fc\u015ft\u00fcrmeye \u00e7al\u0131\u015f\u0131r)\n\n\/\/ Falsy De\u011ferler\nif (0) { console.log(\"0 true\"); } else { console.log(\"0 false\"); } \/\/ 0 false\nif (\"\") { console.log(\"bo\u015f string true\"); } else { console.log(\"bo\u015f string false\"); } \/\/ bo\u015f string false\nif (null) { console.log(\"null true\"); } else { console.log(\"null false\"); } \/\/ null false\n<\/code><\/pre>\nPratik Bilgi:<\/strong> Her zaman ===<\/code> kullan\u0131n. Bu, kodunuzu daha g\u00fcvenli, daha anla\u015f\u0131l\u0131r ve hatalara kar\u015f\u0131 daha diren\u00e7li hale getirir. typeof null<\/code> tuza\u011f\u0131n\u0131 unutmay\u0131n ve NaN<\/code> kontrol\u00fc i\u00e7in Number.isNaN()<\/code> kullan\u0131n.<\/p>\nKapan\u0131\u015flar (Closures) ve Asenkron JavaScript’in Tuzaklar\u0131<\/h2>\n
Kapan\u0131\u015flar (closures) ve asenkron programlama, JavaScript’in g\u00fcc\u00fcn\u00fc g\u00f6steren ancak ayn\u0131 zamanda yayg\u0131n hata kaynaklar\u0131 olabilen iki temel konudur.<\/p>\n
Kapan\u0131\u015flar (Closures) ile var<\/code> Tuza\u011f\u0131<\/h3>\nKapan\u0131\u015f, bir fonksiyonun kendi d\u0131\u015f kapsam\u0131ndaki de\u011fi\u015fkenlere, d\u0131\u015f fonksiyon sona ermi\u015f olsa bile eri\u015febilmesi durumudur. Bu g\u00fc\u00e7l\u00fc bir \u00f6zelliktir ancak var<\/code> ile d\u00f6ng\u00fclerde kullan\u0131ld\u0131\u011f\u0131nda yayg\u0131n bir tuza\u011fa yol a\u00e7ar.<\/p>\nKod \u00d6rnekleri: Kapan\u0131\u015f ve var<\/code> Tuza\u011f\u0131<\/h4>\n\/\/ var<\/code> ile kapan\u0131\u015f tuza\u011f\u0131\nfor (var i = 0; i < 3; i++) {\n setTimeout(function() {\n console.log(D\u00f6ng\u00fc (var): ${i}<\/code>);\n }, 100 * i);\n}\n\/\/ Beklenen \u00e7\u0131kt\u0131: 0, 1, 2\n\/\/ Ger\u00e7ek \u00e7\u0131kt\u0131: 3, 3, 3 (\u00c7\u00fcnk\u00fc setTimeout'lar \u00e7al\u0131\u015ft\u0131\u011f\u0131nda d\u00f6ng\u00fc bitmi\u015f ve i de\u011feri 3 olmu\u015ftur.\n\/\/ Her kapan\u0131\u015f ayn\u0131 'i' de\u011fi\u015fkenine referans verir.)\n\n\/\/ let<\/code> ile \u00e7\u00f6z\u00fcm\nfor (let j = 0; j < 3; j++) {\n setTimeout(function() {\n console.log(D\u00f6ng\u00fc (let): ${j}<\/code>);\n }, 100 * j);\n}\n\/\/ Beklenen ve Ger\u00e7ek \u00e7\u0131kt\u0131: 0, 1, 2 (Her iterasyonda 'j' i\u00e7in yeni bir blok kapsam\u0131 olu\u015fturulur.)\n<\/code><\/pre>\nPratik Bilgi:<\/strong> D\u00f6ng\u00fclerde zamanlanm\u0131\u015f i\u015flemler (\u00f6rne\u011fin setTimeout<\/code>) veya olay dinleyicileri gibi kapan\u0131\u015f gerektiren durumlarda var<\/code> yerine let<\/code> kullan\u0131n. let<\/code>, her d\u00f6ng\u00fc iterasyonu i\u00e7in yeni bir de\u011fi\u015fken ba\u011flam\u0131 olu\u015fturarak bu tuza\u011f\u0131 ortadan kald\u0131r\u0131r.<\/p>\nAsenkron JavaScript ve Olay D\u00f6ng\u00fcs\u00fc (Event Loop)<\/h3>\n
JavaScript tek i\u015f par\u00e7ac\u0131kl\u0131 (single-threaded) bir dildir ancak asenkron i\u015flemleri (API \u00e7a\u011fr\u0131lar\u0131, setTimeout<\/code>, Promise<\/code>‘lar) Olay D\u00f6ng\u00fcs\u00fc (Event Loop) sayesinde y\u00f6netir. Bu, baz\u0131 i\u015flemlerin an\u0131nda de\u011fil, belirli bir s\u0131ra ve gecikmeyle y\u00fcr\u00fct\u00fcld\u00fc\u011f\u00fc anlam\u0131na gelir.<\/p>\nKod \u00d6rnekleri: Asenkronluk ve Olay D\u00f6ng\u00fcs\u00fc<\/h4>\nconsole.log(\"1. Ba\u015flang\u0131\u00e7\");\n\nsetTimeout(() => {\n console.log(\"2. setTimeout (Makro G\u00f6rev)\");\n}, 0); \/\/ 0 milisaniye bile olsa, bir sonraki olay d\u00f6ng\u00fcs\u00fc turunda \u00e7al\u0131\u015f\u0131r.\n\nPromise.resolve().then(() => {\n console.log(\"3. Promise.resolve (Mikro G\u00f6rev)\");\n});\n\nconsole.log(\"4. Biti\u015f\");\n\n\/\/ Beklenen \u00e7\u0131kt\u0131:\n\/\/ 1. Ba\u015flang\u0131\u00e7\n\/\/ 4. Biti\u015f\n\/\/ 3. Promise.resolve (Mikro g\u00f6revler makro g\u00f6revlerden \u00f6nce i\u015flenir)\n\/\/ 2. setTimeout (En son i\u015flenir)\n<\/code><\/pre>\nPratik Bilgi:<\/strong> Olay D\u00f6ng\u00fcs\u00fc, Mikro G\u00f6rev Kuyru\u011fu (Promise’lar) ve Makro G\u00f6rev Kuyru\u011fu (setTimeout<\/code>, setInterval<\/code>) aras\u0131ndaki fark\u0131 anlamak, asenkron kodunuzun y\u00fcr\u00fctme s\u0131ras\u0131n\u0131 tahmin etmek i\u00e7in hayati \u00f6neme sahiptir. Mikro g\u00f6revler (Promise resolve\/reject) her zaman bir sonraki makro g\u00f6revden \u00f6nce i\u015flenir.<\/p>\nSonu\u00e7: S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h2>\n
JavaScript’in bu “tuzaklar\u0131n\u0131” anlamak, sadece m\u00fclakatlarda ba\u015far\u0131l\u0131 olman\u0131z\u0131 sa\u011flamakla kalmaz, ayn\u0131 zamanda daha sa\u011flam, \u00f6ng\u00f6r\u00fclebilir ve hatas\u0131z kod yazman\u0131za yard\u0131mc\u0131 olur. \u0130\u015fte bu konularda s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan baz\u0131 sorular:<\/p>\n
Neden var<\/code> kullanmaktan ka\u00e7\u0131nmal\u0131y\u0131z?<\/h3>\nvar<\/code>, fonksiyon kapsaml\u0131d\u0131r ve hoisting davran\u0131\u015f\u0131 nedeniyle beklenmedik hatalara yol a\u00e7abilir. \u00d6zellikle d\u00f6ng\u00fclerde kapan\u0131\u015flarla birlikte kullan\u0131ld\u0131\u011f\u0131nda yayg\u0131n sorunlar yarat\u0131r. let<\/code> ve const<\/code>, blok kapsam\u0131 ve Temporal Dead Zone (TDZ) ile bu sorunlar\u0131 \u00e7\u00f6zerek daha g\u00fcvenli ve \u00f6ng\u00f6r\u00fclebilir bir de\u011fi\u015fken y\u00f6netimi sunar.<\/p>\nnull<\/code> ve undefined<\/code> aras\u0131ndaki temel fark nedir?<\/h3>\nundefined<\/code>, bir de\u011fi\u015fkenin de\u011fer atanmad\u0131\u011f\u0131n\u0131 veya bir \u00f6zelli\u011fin var olmad\u0131\u011f\u0131n\u0131 g\u00f6steren bir ilkel tiptir. null<\/code> ise, kas\u0131tl\u0131 olarak bir “de\u011fer yoklu\u011fu”nu temsil etmek i\u00e7in atanan ilkel bir de\u011ferdir. typeof undefined<\/code> => \"undefined\"<\/code>, typeof null<\/code> => \"object\"<\/code> (tarihsel bir hata).<\/p>\nArrow fonksiyonlar\u0131 this<\/code> ba\u011flam\u0131n\u0131 nas\u0131l etkiler?<\/h3>\nArrow fonksiyonlar, kendi this<\/code> ba\u011flamlar\u0131n\u0131 olu\u015fturmazlar. Bunun yerine, tan\u0131mland\u0131klar\u0131 s\u00f6zc\u00fcksel (lexical) kapsamdaki this<\/code> de\u011ferini miras al\u0131rlar. Bu, \u00f6zellikle callback fonksiyonlar\u0131nda this<\/code> ba\u011flam\u0131n\u0131 korumak i\u00e7in \u00e7ok kullan\u0131\u015fl\u0131d\u0131r ve bind()<\/code> kullanma ihtiyac\u0131n\u0131 azalt\u0131r.<\/p>\nJavaScript tek i\u015f par\u00e7ac\u0131kl\u0131 (single-threaded) ise asenkronluk nas\u0131l \u00e7al\u0131\u015f\u0131r?<\/h3>\n
JavaScript motoru tek i\u015f par\u00e7ac\u0131kl\u0131 olsa da, taray\u0131c\u0131lar (veya Node.js \u00e7al\u0131\u015fma zamanlar\u0131) Web API’leri (setTimeout, fetch vb.) gibi ek i\u015f par\u00e7ac\u0131klar\u0131 veya sistem i\u015flemleri sa\u011flar. Bu asenkron i\u015flemler tamamland\u0131\u011f\u0131nda, ilgili callback fonksiyonlar\u0131 G\u00f6rev Kuyru\u011fu’na (Task Queue) eklenir. JavaScript’in Olay D\u00f6ng\u00fcs\u00fc, \u00e7a\u011fr\u0131 y\u0131\u011f\u0131n\u0131 (call stack) bo\u015fald\u0131\u011f\u0131nda bu kuyruktan g\u00f6revleri al\u0131r ve y\u00fcr\u00fct\u00fcr. Promise’lar ise Mikro G\u00f6rev Kuyru\u011fu’nu kullanarak, bir sonraki olay d\u00f6ng\u00fcs\u00fc turundan \u00f6nce \u00e7al\u0131\u015ft\u0131r\u0131l\u0131r.<\/p>\n
Bir kapan\u0131\u015f (closure) ne zaman kullan\u0131\u015fl\u0131d\u0131r?<\/h3>\n
Kapan\u0131\u015flar, \u00f6zellikle veri gizlili\u011fi (private de\u011fi\u015fkenler olu\u015fturma), fonksiyon fabrikalar\u0131 (\u00f6zelle\u015ftirilmi\u015f fonksiyonlar d\u00f6nd\u00fcrme), saya\u00e7lar veya olay dinleyicileri gibi durumlarda \u00e7ok kullan\u0131\u015fl\u0131d\u0131r. \u00d6rne\u011fin, bir d\u0131\u015f fonksiyonun yerel de\u011fi\u015fkenlerine eri\u015febilen i\u00e7 fonksiyonlar olu\u015fturarak, bu de\u011fi\u015fkenleri d\u0131\u015f d\u00fcnyadan izole edebilirsiniz.<\/p>\n
<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"JavaScript, esnekli\u011fi ve g\u00fcc\u00fcyle modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biridir. Ancak bu esneklik, beraberinde baz\u0131 karma\u015f\u0131kl\u0131klar\u0131","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[129],"tags":[],"class_list":{"0":"post-34936","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-javascript","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n
JavaScript'te Kapsam (Scope) ve Hoisting Mekanizmalar\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/javascriptte-kapsam-scope-ve-hoisting-mekanizmalari\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript'te Kapsam (Scope) ve Hoisting Mekanizmalar\u0131\" \/>\n<meta property=\"og:description\" content=\"JavaScript, esnekli\u011fi ve g\u00fcc\u00fcyle modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biridir. Ancak bu esneklik, beraberinde baz\u0131 karma\u015f\u0131kl\u0131klar\u0131\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/javascriptte-kapsam-scope-ve-hoisting-mekanizmalari\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-23T18:41:29+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-kapsam-scope-ve-hoisting-mekanizmalari\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-kapsam-scope-ve-hoisting-mekanizmalari\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"JavaScript’te Kapsam (Scope) ve Hoisting Mekanizmalar\u0131\",\"datePublished\":\"2025-11-23T18:41:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-kapsam-scope-ve-hoisting-mekanizmalari\/\"},\"wordCount\":1502,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Javascript\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/javascriptte-kapsam-scope-ve-hoisting-mekanizmalari\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-kapsam-scope-ve-hoisting-mekanizmalari\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-kapsam-scope-ve-hoisting-mekanizmalari\/\",\"name\":\"JavaScript'te Kapsam (Scope) ve Hoisting Mekanizmalar\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-23T18:41:29+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-kapsam-scope-ve-hoisting-mekanizmalari\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/javascriptte-kapsam-scope-ve-hoisting-mekanizmalari\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-kapsam-scope-ve-hoisting-mekanizmalari\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript’te Kapsam (Scope) ve Hoisting Mekanizmalar\u0131\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"JavaScript'te Kapsam (Scope) ve Hoisting Mekanizmalar\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/javascriptte-kapsam-scope-ve-hoisting-mekanizmalari\/","og_locale":"tr_TR","og_type":"article","og_title":"JavaScript'te Kapsam (Scope) ve Hoisting Mekanizmalar\u0131","og_description":"JavaScript, esnekli\u011fi ve g\u00fcc\u00fcyle modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biridir. Ancak bu esneklik, beraberinde baz\u0131 karma\u015f\u0131kl\u0131klar\u0131","og_url":"https:\/\/fatihsoysal.com\/blog\/javascriptte-kapsam-scope-ve-hoisting-mekanizmalari\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-23T18:41:29+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"11 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-kapsam-scope-ve-hoisting-mekanizmalari\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-kapsam-scope-ve-hoisting-mekanizmalari\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"JavaScript’te Kapsam (Scope) ve Hoisting Mekanizmalar\u0131","datePublished":"2025-11-23T18:41:29+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-kapsam-scope-ve-hoisting-mekanizmalari\/"},"wordCount":1502,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Javascript"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/javascriptte-kapsam-scope-ve-hoisting-mekanizmalari\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-kapsam-scope-ve-hoisting-mekanizmalari\/","url":"https:\/\/fatihsoysal.com\/blog\/javascriptte-kapsam-scope-ve-hoisting-mekanizmalari\/","name":"JavaScript'te Kapsam (Scope) ve Hoisting Mekanizmalar\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-23T18:41:29+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-kapsam-scope-ve-hoisting-mekanizmalari\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/javascriptte-kapsam-scope-ve-hoisting-mekanizmalari\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-kapsam-scope-ve-hoisting-mekanizmalari\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript’te Kapsam (Scope) ve Hoisting Mekanizmalar\u0131"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34936","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=34936"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34936\/revisions"}],"predecessor-version":[{"id":34937,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34936\/revisions\/34937"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=34936"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=34936"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=34936"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}