[{"data":1,"prerenderedAt":287},["ShallowReactive",2],{"term-c\u002Fclosure":3,"related-c\u002Fclosure":272},{"id":4,"title":5,"acronym":6,"body":7,"category":254,"description":255,"difficulty":256,"extension":257,"letter":258,"meta":259,"navigation":165,"path":260,"related":261,"seo":266,"sitemap":267,"stem":270,"subcategory":6,"__hash__":271},"terms\u002Fterms\u002Fc\u002Fclosure.md","Closure",null,{"type":8,"value":9,"toc":248},"minimark",[10,15,19,23,26,30,237,241,244],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"A closure is when a function remembers the variables from the scope it was created in, even after that scope is gone. It's like a function that carries a little backpack of variables with it wherever it goes. This is how React's useState hook works under the hood — the component function 'closes over' the state variable.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"A closure is a function bundled together with its lexical environment — the variables that were in scope when the function was defined. Even when the outer function has finished executing, the inner function retains access to those variables. Closures enable data encapsulation, factory functions, and stateful callbacks.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","function makeCounter() {\n  let count = 0 \u002F\u002F count is enclosed\n  return {\n    increment: () => ++count,\n    decrement: () => --count,\n    value: () => count\n  }\n}\n\nconst counter = makeCounter()\ncounter.increment() \u002F\u002F 1\ncounter.increment() \u002F\u002F 2\ncounter.value()     \u002F\u002F 2\n\u002F\u002F 'count' is inaccessible from outside\n","javascript","",[38,39,40,60,81,90,114,133,148,154,160,167,184,202,216,231],"code",{"__ignoreMap":36},[41,42,45,49,53,57],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"spNyl","function",[41,50,52],{"class":51},"s2Zo4"," makeCounter",[41,54,56],{"class":55},"sMK4o","()",[41,58,59],{"class":55}," {\n",[41,61,63,66,70,73,77],{"class":43,"line":62},2,[41,64,65],{"class":47},"  let",[41,67,69],{"class":68},"sTEyZ"," count",[41,71,72],{"class":55}," =",[41,74,76],{"class":75},"sbssI"," 0",[41,78,80],{"class":79},"sHwdD"," \u002F\u002F count is enclosed\n",[41,82,84,88],{"class":43,"line":83},3,[41,85,87],{"class":86},"s7zQu","  return",[41,89,59],{"class":55},[41,91,93,96,99,102,105,108,111],{"class":43,"line":92},4,[41,94,95],{"class":51},"    increment",[41,97,98],{"class":55},":",[41,100,101],{"class":55}," ()",[41,103,104],{"class":47}," =>",[41,106,107],{"class":55}," ++",[41,109,110],{"class":68},"count",[41,112,113],{"class":55},",\n",[41,115,117,120,122,124,126,129,131],{"class":43,"line":116},5,[41,118,119],{"class":51},"    decrement",[41,121,98],{"class":55},[41,123,101],{"class":55},[41,125,104],{"class":47},[41,127,128],{"class":55}," --",[41,130,110],{"class":68},[41,132,113],{"class":55},[41,134,136,139,141,143,145],{"class":43,"line":135},6,[41,137,138],{"class":51},"    value",[41,140,98],{"class":55},[41,142,101],{"class":55},[41,144,104],{"class":47},[41,146,147],{"class":68}," count\n",[41,149,151],{"class":43,"line":150},7,[41,152,153],{"class":55},"  }\n",[41,155,157],{"class":43,"line":156},8,[41,158,159],{"class":55},"}\n",[41,161,163],{"class":43,"line":162},9,[41,164,166],{"emptyLinePlaceholder":165},true,"\n",[41,168,170,173,176,179,181],{"class":43,"line":169},10,[41,171,172],{"class":47},"const",[41,174,175],{"class":68}," counter ",[41,177,178],{"class":55},"=",[41,180,52],{"class":51},[41,182,183],{"class":68},"()\n",[41,185,187,190,193,196,199],{"class":43,"line":186},11,[41,188,189],{"class":68},"counter",[41,191,192],{"class":55},".",[41,194,195],{"class":51},"increment",[41,197,198],{"class":68},"() ",[41,200,201],{"class":79},"\u002F\u002F 1\n",[41,203,205,207,209,211,213],{"class":43,"line":204},12,[41,206,189],{"class":68},[41,208,192],{"class":55},[41,210,195],{"class":51},[41,212,198],{"class":68},[41,214,215],{"class":79},"\u002F\u002F 2\n",[41,217,219,221,223,226,229],{"class":43,"line":218},13,[41,220,189],{"class":68},[41,222,192],{"class":55},[41,224,225],{"class":51},"value",[41,227,228],{"class":68},"()     ",[41,230,215],{"class":79},[41,232,234],{"class":43,"line":233},14,[41,235,236],{"class":79},"\u002F\u002F 'count' is inaccessible from outside\n",[11,238,240],{"id":239},"when-youll-hear-this","When You'll Hear This",[16,242,243],{},"React hooks rely on closures to capture state values.,Be careful with closures in loops — they capture by reference, not value.,Module patterns use closures to create private state.",[245,246,247],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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":36,"searchDepth":62,"depth":62,"links":249},[250,251,252,253],{"id":13,"depth":62,"text":14},{"id":21,"depth":62,"text":22},{"id":28,"depth":62,"text":29},{"id":239,"depth":62,"text":240},"frontend","A closure is when a function remembers the variables from the scope it was created in, even after that scope is gone.","advanced","md","c",{},"\u002Fterms\u002Fc\u002Fclosure",[262,263,264,265],"Scope","Hoisting","Callback","Arrow Function",{"title":5,"description":255},{"changefreq":268,"priority":269},"weekly",0.7,"terms\u002Fc\u002Fclosure","gv-rwW6tAt3Q5kpZzjrchPwN2LHZldnWp18tllIcZAs",[273,277,280,284],{"title":265,"path":274,"acronym":6,"category":254,"difficulty":275,"description":276},"\u002Fterms\u002Fa\u002Farrow-function","beginner","Arrow functions are a shorter way to write functions in JavaScript. Instead of writing 'function(x) { return x * 2 }' you write '(x) => x * 2'.",{"title":264,"path":278,"acronym":6,"category":254,"difficulty":275,"description":279},"\u002Fterms\u002Fc\u002Fcallback","A callback is just a function you pass to another function, saying 'when you're done, call this.",{"title":263,"path":281,"acronym":6,"category":254,"difficulty":282,"description":283},"\u002Fterms\u002Fh\u002Fhoisting","intermediate","Hoisting is JavaScript's weird quirk where variable and function declarations are mentally 'moved' to the top of their scope before code runs.",{"title":262,"path":285,"acronym":6,"category":254,"difficulty":282,"description":286},"\u002Fterms\u002Fs\u002Fscope","Scope is about where your variables are visible. Variables defined inside a function can't be seen outside it (that's function scope).",1776518265776]