[{"data":1,"prerenderedAt":650},["ShallowReactive",2],{"post-\u002Fmastering-closures-in-javascript-a-beginners-guide":3},{"page":4,"translation":512,"nav":527,"related":640,"random":643},{"id":5,"title":6,"body":7,"categories":510,"category":512,"date":513,"description":514,"draft":515,"extension":516,"image":517,"kind":512,"lang":518,"meta":519,"navigation":171,"path":520,"readingTime":168,"seo":521,"slug":522,"stem":522,"tags":523,"translationKey":522,"type":511,"updated":525,"__hash__":526},"posts\u002Fmastering-closures-in-javascript-a-beginners-guide.md","Mastering Closures in JavaScript: A Beginner's Guide",{"type":8,"value":9,"toc":504},"minimark",[10,53,56,63,66,71,132,134,139,142,225,236,261,288,291,299,301,305,312,315,440,465,467,471,477,484,487,492,500],[11,12,13,21],"blockquote",{},[14,15,16,17],"p",{},"💡 ",[18,19,20],"strong",{},"Quick Summary (TL;DR):",[22,23,24,35,41,47],"ul",{},[25,26,27,30,31,34],"li",{},[18,28,29],{},"What is a Closure?:"," A closure is the combination of a function bundled together with references to its surrounding state (the ",[18,32,33],{},"lexical environment",").",[25,36,37,40],{},[18,38,39],{},"Core Feature:"," Inner functions retain access to scope variables of their outer function even after the outer function has finished executing.",[25,42,43,46],{},[18,44,45],{},"Common Use Cases:"," Creating private variables\u002Fencapsulation, function factories, and maintaining state in callbacks.",[25,48,49,52],{},[18,50,51],{},"Memory Caution:"," Since closures keep variables in memory, they prevent garbage collection for those references, which can lead to memory overhead if overused.",[14,54,55],{},"Closures are a fundamental concept in JavaScript, and they can be a little tricky to understand at first. However, once you grasp how they work, they become an incredibly powerful tool in your JavaScript development toolkit.",[14,57,58,59,62],{},"Simply put, ",[18,60,61],{},"a closure is a function that remembers the environment in which it was created",", even when it is executed outside of that environment.",[64,65],"hr",{},[67,68,70],"h3",{"id":69},"scope-access-levels-inside-a-closure","Scope Access Levels inside a Closure",[72,73,74,91],"table",{},[75,76,77],"thead",{},[78,79,80,85,88],"tr",{},[81,82,84],"th",{"align":83},"left","Scope Level",[81,86,87],{"align":83},"Accessible?",[81,89,90],{"align":83},"Description",[92,93,94,108,120],"tbody",{},[78,95,96,102,105],{},[97,98,99],"td",{"align":83},[18,100,101],{},"Local Scope",[97,103,104],{"align":83},"Yes",[97,106,107],{"align":83},"Variables declared directly inside the inner function itself.",[78,109,110,115,117],{},[97,111,112],{"align":83},[18,113,114],{},"Outer Function Scope",[97,116,104],{"align":83},[97,118,119],{"align":83},"Variables and parameters of the parent outer function (lexical scope).",[78,121,122,127,129],{},[97,123,124],{"align":83},[18,125,126],{},"Global Scope",[97,128,104],{"align":83},[97,130,131],{"align":83},"Globally defined variables accessible anywhere in the script.",[64,133],{},[135,136,138],"h2",{"id":137},"understanding-lexical-scope-a-basic-example","Understanding Lexical Scope: A Basic Example",[14,140,141],{},"To understand this concept better, let's take a look at a basic example:",[143,144,149],"pre",{"className":145,"code":146,"language":147,"meta":148,"style":148},"language-javascript shiki shiki-themes github-light github-dark","function outerFunction(param) {\n  let outerVariable = 'I am the outer variable';\n\n  function innerFunction() {\n    console.log(outerVariable + ', and the param is ' + param);\n  }\n\n  return innerFunction;\n}\n\nlet returnedFunction = outerFunction('Hello, World!');\nreturnedFunction();\n","javascript","",[150,151,152,160,166,173,179,185,191,196,202,208,213,219],"code",{"__ignoreMap":148},[153,154,157],"span",{"class":155,"line":156},"line",1,[153,158,159],{},"function outerFunction(param) {\n",[153,161,163],{"class":155,"line":162},2,[153,164,165],{},"  let outerVariable = 'I am the outer variable';\n",[153,167,169],{"class":155,"line":168},3,[153,170,172],{"emptyLinePlaceholder":171},true,"\n",[153,174,176],{"class":155,"line":175},4,[153,177,178],{},"  function innerFunction() {\n",[153,180,182],{"class":155,"line":181},5,[153,183,184],{},"    console.log(outerVariable + ', and the param is ' + param);\n",[153,186,188],{"class":155,"line":187},6,[153,189,190],{},"  }\n",[153,192,194],{"class":155,"line":193},7,[153,195,172],{"emptyLinePlaceholder":171},[153,197,199],{"class":155,"line":198},8,[153,200,201],{},"  return innerFunction;\n",[153,203,205],{"class":155,"line":204},9,[153,206,207],{},"}\n",[153,209,211],{"class":155,"line":210},10,[153,212,172],{"emptyLinePlaceholder":171},[153,214,216],{"class":155,"line":215},11,[153,217,218],{},"let returnedFunction = outerFunction('Hello, World!');\n",[153,220,222],{"class":155,"line":221},12,[153,223,224],{},"returnedFunction();\n",[14,226,227,228,231,232,235],{},"In this code, we have an outer function called ",[150,229,230],{},"outerFunction"," and an inner function called ",[150,233,234],{},"innerFunction",".",[14,237,238,239,241,242,245,246,249,250,252,253,255,256,258,259,235],{},"The ",[150,240,230],{}," takes a parameter called ",[150,243,244],{},"param"," and declares a local variable called ",[150,247,248],{},"outerVariable",". The ",[150,251,234],{}," has no parameters of its own, but it references both ",[150,254,248],{}," and ",[150,257,244],{}," belonging to the ",[150,260,230],{},[14,262,263,264,267,268,270,271,274,275,255,277,279,280,282,283,285,286,235],{},"When we call ",[150,265,266],{},"outerFunction('Hello, World!')",", it returns the ",[150,269,234],{}," itself. Crucially, when we execute ",[150,272,273],{},"returnedFunction()"," later, it still has full access to ",[150,276,248],{},[150,278,244],{}," even though ",[150,281,230],{}," has already finished executing. This is a closure in action: ",[150,284,234],{}," has closed over the lexical environment of ",[150,287,230],{},[14,289,290],{},"Output in the console:",[143,292,297],{"className":293,"code":295,"language":296,"meta":148},[294],"language-text","I am the outer variable, and the param is Hello, World!\n","text",[150,298,295],{"__ignoreMap":148},[64,300],{},[135,302,304],{"id":303},"practical-example-data-encapsulation-private-variables","Practical Example: Data Encapsulation (Private Variables)",[14,306,307,308,311],{},"One of the most valuable use cases for closures is creating private variables. JavaScript classes now have native private fields (",[150,309,310],{},"#privateField","), but closures remain the classic, highly-flexible way to achieve encapsulation.",[14,313,314],{},"Consider this counter factory:",[143,316,318],{"className":145,"code":317,"language":147,"meta":148,"style":148},"function createCounter() {\n  let count = 0; \u002F\u002F Private state variable\n\n  return {\n    increment() {\n      count++;\n      return count;\n    },\n    decrement() {\n      count--;\n      return count;\n    },\n    getValue() {\n      return count;\n    }\n  };\n}\n\nconst counter = createCounter();\nconsole.log(counter.increment()); \u002F\u002F 1\nconsole.log(counter.increment()); \u002F\u002F 2\nconsole.log(counter.count);       \u002F\u002F undefined (cannot be accessed or mutated directly!)\nconsole.log(counter.getValue());   \u002F\u002F 2\n",[150,319,320,325,330,334,339,344,349,354,359,364,369,373,377,383,388,394,400,405,410,416,422,428,434],{"__ignoreMap":148},[153,321,322],{"class":155,"line":156},[153,323,324],{},"function createCounter() {\n",[153,326,327],{"class":155,"line":162},[153,328,329],{},"  let count = 0; \u002F\u002F Private state variable\n",[153,331,332],{"class":155,"line":168},[153,333,172],{"emptyLinePlaceholder":171},[153,335,336],{"class":155,"line":175},[153,337,338],{},"  return {\n",[153,340,341],{"class":155,"line":181},[153,342,343],{},"    increment() {\n",[153,345,346],{"class":155,"line":187},[153,347,348],{},"      count++;\n",[153,350,351],{"class":155,"line":193},[153,352,353],{},"      return count;\n",[153,355,356],{"class":155,"line":198},[153,357,358],{},"    },\n",[153,360,361],{"class":155,"line":204},[153,362,363],{},"    decrement() {\n",[153,365,366],{"class":155,"line":210},[153,367,368],{},"      count--;\n",[153,370,371],{"class":155,"line":215},[153,372,353],{},[153,374,375],{"class":155,"line":221},[153,376,358],{},[153,378,380],{"class":155,"line":379},13,[153,381,382],{},"    getValue() {\n",[153,384,386],{"class":155,"line":385},14,[153,387,353],{},[153,389,391],{"class":155,"line":390},15,[153,392,393],{},"    }\n",[153,395,397],{"class":155,"line":396},16,[153,398,399],{},"  };\n",[153,401,403],{"class":155,"line":402},17,[153,404,207],{},[153,406,408],{"class":155,"line":407},18,[153,409,172],{"emptyLinePlaceholder":171},[153,411,413],{"class":155,"line":412},19,[153,414,415],{},"const counter = createCounter();\n",[153,417,419],{"class":155,"line":418},20,[153,420,421],{},"console.log(counter.increment()); \u002F\u002F 1\n",[153,423,425],{"class":155,"line":424},21,[153,426,427],{},"console.log(counter.increment()); \u002F\u002F 2\n",[153,429,431],{"class":155,"line":430},22,[153,432,433],{},"console.log(counter.count);       \u002F\u002F undefined (cannot be accessed or mutated directly!)\n",[153,435,437],{"class":155,"line":436},23,[153,438,439],{},"console.log(counter.getValue());   \u002F\u002F 2\n",[14,441,442,443,446,447,450,451,454,455,454,458,461,462,464],{},"In this example, the ",[150,444,445],{},"count"," variable cannot be accessed from outside the ",[150,448,449],{},"createCounter"," function. The returned methods (",[150,452,453],{},"increment",", ",[150,456,457],{},"decrement",[150,459,460],{},"getValue",") form a closure over the environment containing ",[150,463,445],{},", allowing safe access and modification while keeping the actual data hidden.",[64,466],{},[135,468,470],{"id":469},"a-word-on-memory-management","A Word on Memory Management",[14,472,473,474,235],{},"While closures are incredibly useful, they come with a performance trade-off: ",[18,475,476],{},"memory retention",[14,478,479,480,483],{},"Normally, when a function finishes executing, JavaScript's Garbage Collector frees up the memory associated with its local variables. However, because a closure holds a reference to the outer function's scope, those variables ",[18,481,482],{},"remain in memory"," as long as the inner function is alive.",[14,485,486],{},"If you create many closures or hold references to large objects inside them without releasing the inner functions when they are no longer needed, it can lead to memory overhead.",[488,489,491],"h5",{"id":490},"bu-yazıda-yapılan-değişiklikler","Bu Yazıda Yapılan Değişiklikler",[22,493,494],{},[25,495,496,497,499],{},"21.06.2026: Veri gizleme (data encapsulation) amacıyla ",[150,498,449],{}," kullanılarak fonksiyon kapatması (closure) örneklendirildi. Kapatmaların Garbage Collector davranışları ve hafıza yönetimi (memory leaks) üzerindeki etkileri teknik olarak açıklandı. Scope seviyelerini listeleyen tablo ile özet paneli eklendi.",[501,502,503],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":148,"searchDepth":162,"depth":162,"links":505},[506,507,508,509],{"id":69,"depth":168,"text":70},{"id":137,"depth":162,"text":138},{"id":303,"depth":162,"text":304},{"id":469,"depth":162,"text":470},[511],"technical",null,"2023-01-09","Demystify closures in JavaScript. Learn how functions retain their lexical scope, build private variables, and understand the memory implications.",false,"md","\u002Fimages\u002Fhero\u002Fclosures.avif","en",{},"\u002Fmastering-closures-in-javascript-a-beginners-guide",{"title":6,"description":514},"mastering-closures-in-javascript-a-beginners-guide",[147,524],"programming","2026-06-21","fkPCqdFdUt4J-d8GB0QdIzq2qewyLeQ3Wj5uLFj8_R8",{"prev":528,"next":531,"others":534,"lucky":639,"readingTime":168},{"path":529,"title":530},"\u002Fphp-generators-a-beginners-guide-to-iteration","PHP Generators: A Beginner's Guide to Iteration",{"path":532,"title":533},"\u002Fthe-top-php-certification-programs-for-developers","The Top PHP Certification Programs for Developers",[535,538,541,544,547,550,553,556,559,562,565,568,571,574,577,580,583,586,589,592,595,598,601,604,607,608,609,612,615,618,621,624,627,630,633,636],{"path":536,"title":537},"\u002Ffull-stack-project-development","Sample REST API Project",{"path":539,"title":540},"\u002Frest-api-authentication","How to Perform REST API Authentication?",{"path":542,"title":543},"\u002Frest-api-design","REST API Design: Principles and Output Format",{"path":545,"title":546},"\u002Frest-api-documentation-and-testing","How to Document and Test a REST API?",{"path":548,"title":549},"\u002Frest-api-error-handling","How to Perform REST API Error Handling?",{"path":551,"title":552},"\u002Frest-api-security","How to Secure a REST API?",{"path":554,"title":555},"\u002Frest-api-uri-structure","What Should the REST API URI Structure Be?",{"path":557,"title":558},"\u002Ftroubleshooting-cyberpanel-inaccessibility-after-ubuntu-release-upgrade","Troubleshooting CyberPanel Inaccessibility After Ubuntu Release Upgrade",{"path":560,"title":561},"\u002Freset-wordpress-admin-password-using-wp-cli","Reset WordPress Admin Password Using WP-CLI",{"path":563,"title":564},"\u002Fgraphql-vs-rest-api-which-is-the-best-choice-for-headless-wordpress","GraphQL vs REST API: Which is the Best Choice for Headless WordPress?",{"path":566,"title":567},"\u002Fgrow-your-business-in-turkey-with-expert-wordpress-plugin-and-theme-localization-and-support-services","Grow Your Business in Turkey with Expert WordPress Plugin and Theme Localization and Support Services",{"path":569,"title":570},"\u002Fgetting-started-with-devops-understanding-the-principles-and-adopting-the-tools","Getting Started with DevOps: Understanding the Principles and Adopting the Tools",{"path":572,"title":573},"\u002Fphp-graphql-development-advanced-techniques-for-optimizing-your-apis","PHP GraphQL Development: Advanced Techniques for Optimizing Your APIs",{"path":575,"title":576},"\u002Fadvanced-techniques-for-dependency-injection-in-php-tips-code-samples-and-faqs","Advanced Techniques for Dependency Injection in PHP: Tips, Code Samples, and FAQs",{"path":578,"title":579},"\u002Fmaximize-the-potential-of-headless-wordpress-with-graphql","Maximize the Potential of Headless WordPress with GraphQL",{"path":581,"title":582},"\u002Fwriting-clean-modular-and-reusable-code-in-php","Best Practices for Writing Clean, Modular, and Reusable Code in PHP",{"path":584,"title":585},"\u002Fheadless-cmss-an-overview-of-popular-alternatives-to-contentful-and-wordpress","Headless CMSs: An Overview of Popular Alternatives to Contentful and WordPress",{"path":587,"title":588},"\u002Fci-cd-for-php-a-comprehensive-guide","CI\u002FCD for PHP: A Comprehensive Guide",{"path":590,"title":591},"\u002Fintroduction-to-php-namespaces-a-beginners-guide-to-structuring-your-code","Introduction to PHP Namespaces: A Beginner's Guide to Structuring Your Code",{"path":593,"title":594},"\u002Fwhat-is-graylog-a-powerful-tool-for-collecting-indexing-and-analyzing-log-data","What is Graylog? A Powerful Tool for Collecting, Indexing, and Analyzing Log Data",{"path":596,"title":597},"\u002Felevate-your-turkish-audience-experience-with-professional-wordpress-plugin-and-theme-translation","Elevate Your Turkish Audience Experience with Professional WordPress Plugin and Theme Translation",{"path":599,"title":600},"\u002Fhow-to-set-up-a-self-hosted-api-gateway-a-comprehensive-guide","How to Set Up a Self-Hosted API Gateway: A Comprehensive Guide",{"path":602,"title":603},"\u002Fdifference-between-generators-and-iterators-in-php","The Key Differences Between PHP Generators and Iterators",{"path":605,"title":606},"\u002Fphp-and-machine-learning-a-winning-combination-with-php-ml","PHP and Machine Learning: A Winning Combination with PHP-ML",{"path":529,"title":530},{"path":532,"title":533},{"path":610,"title":611},"\u002Fhow-to-revalidate-next-js-isr-cache-on-demand-cache-regeneration","How to Revalidate Next.js ISR Cache? On-Demand Cache Regeneration",{"path":613,"title":614},"\u002Ftips-for-translating-a-wordpress-plugin-wordpress-theme-to-turkish","Tips for Translating a WordPress Plugin \u002F WordPress Theme to Turkish",{"path":616,"title":617},"\u002Fall-about-headless-wordpress","All About Headless WordPress",{"path":619,"title":620},"\u002Finstall-composer-on-ubuntu","How to Install Composer on Ubuntu \u002F Linux",{"path":622,"title":623},"\u002Fwhat-is-an-api-gateway","What is an API Gateway? Should You Use It?",{"path":625,"title":626},"\u002Fis-jwt-safe-or-is-it-vulnerable","Is JWT Safe or Is It Vulnerable?",{"path":628,"title":629},"\u002Ftailwind-css-to-use-or-not-to-use-that-is-the-question","Tailwind CSS! To use? Or not to use? That is the question.",{"path":631,"title":632},"\u002Fwhat-is-hateoas","What is HATEOAS?",{"path":634,"title":635},"\u002Fhello-world","Hello World: A New Multilingual Journey",{"path":637,"title":638},"\u002Fwhat-is-ecmascript","What is ECMAScript? What is not?",{"path":602,"title":603},[641],{"path":637,"title":638,"date":642},"2022-04-08",[644,646,648],{"path":529,"title":530,"date":645},"2023-01-10",{"path":548,"title":549,"date":647},"2026-06-20",{"path":634,"title":635,"date":649},"2022-05-11",1782141981613]