[{"data":1,"prerenderedAt":281},["ShallowReactive",2],{"term-s\u002Fscope":3,"related-s\u002Fscope":269},{"id":4,"title":5,"acronym":6,"body":7,"category":252,"description":253,"difficulty":254,"extension":255,"letter":256,"meta":257,"navigation":72,"path":258,"related":259,"seo":263,"sitemap":264,"stem":267,"subcategory":6,"__hash__":268},"terms\u002Fterms\u002Fs\u002Fscope.md","Scope",null,{"type":8,"value":9,"toc":246},"minimark",[10,15,19,23,26,30,235,239,242],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Scope is about where your variables are visible. Variables defined inside a function can't be seen outside it (that's function scope). Variables defined with let\u002Fconst inside {} blocks have block scope. Variables at the top of the file are global and visible everywhere (usually a bad idea).",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Scope in JavaScript determines the accessibility of variables. ES6 introduced block-scoped let and const (accessible within the nearest {} block), complementing function scope (var, accessible within the enclosing function) and global scope. JavaScript uses lexical (static) scoping — scope is determined at write time, not runtime.",[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","const globalVar = 'I am global'\n\nfunction outer() {\n  const outerVar = 'I am outer'\n\n  function inner() {\n    const innerVar = 'I am inner'\n    console.log(globalVar) \u002F\u002F accessible\n    console.log(outerVar)  \u002F\u002F accessible (closure)\n    console.log(innerVar)  \u002F\u002F accessible\n  }\n\n  \u002F\u002F console.log(innerVar) \u002F\u002F ReferenceError!\n}\n","javascript","",[38,39,40,67,74,90,109,114,127,145,171,191,209,215,220,229],"code",{"__ignoreMap":36},[41,42,45,49,53,57,60,64],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"spNyl","const",[41,50,52],{"class":51},"sTEyZ"," globalVar ",[41,54,56],{"class":55},"sMK4o","=",[41,58,59],{"class":55}," '",[41,61,63],{"class":62},"sfazB","I am global",[41,65,66],{"class":55},"'\n",[41,68,70],{"class":43,"line":69},2,[41,71,73],{"emptyLinePlaceholder":72},true,"\n",[41,75,77,80,84,87],{"class":43,"line":76},3,[41,78,79],{"class":47},"function",[41,81,83],{"class":82},"s2Zo4"," outer",[41,85,86],{"class":55},"()",[41,88,89],{"class":55}," {\n",[41,91,93,96,99,102,104,107],{"class":43,"line":92},4,[41,94,95],{"class":47},"  const",[41,97,98],{"class":51}," outerVar",[41,100,101],{"class":55}," =",[41,103,59],{"class":55},[41,105,106],{"class":62},"I am outer",[41,108,66],{"class":55},[41,110,112],{"class":43,"line":111},5,[41,113,73],{"emptyLinePlaceholder":72},[41,115,117,120,123,125],{"class":43,"line":116},6,[41,118,119],{"class":47},"  function",[41,121,122],{"class":82}," inner",[41,124,86],{"class":55},[41,126,89],{"class":55},[41,128,130,133,136,138,140,143],{"class":43,"line":129},7,[41,131,132],{"class":47},"    const",[41,134,135],{"class":51}," innerVar",[41,137,101],{"class":55},[41,139,59],{"class":55},[41,141,142],{"class":62},"I am inner",[41,144,66],{"class":55},[41,146,148,151,154,157,161,164,167],{"class":43,"line":147},8,[41,149,150],{"class":51},"    console",[41,152,153],{"class":55},".",[41,155,156],{"class":82},"log",[41,158,160],{"class":159},"swJcz","(",[41,162,163],{"class":51},"globalVar",[41,165,166],{"class":159},") ",[41,168,170],{"class":169},"sHwdD","\u002F\u002F accessible\n",[41,172,174,176,178,180,182,185,188],{"class":43,"line":173},9,[41,175,150],{"class":51},[41,177,153],{"class":55},[41,179,156],{"class":82},[41,181,160],{"class":159},[41,183,184],{"class":51},"outerVar",[41,186,187],{"class":159},")  ",[41,189,190],{"class":169},"\u002F\u002F accessible (closure)\n",[41,192,194,196,198,200,202,205,207],{"class":43,"line":193},10,[41,195,150],{"class":51},[41,197,153],{"class":55},[41,199,156],{"class":82},[41,201,160],{"class":159},[41,203,204],{"class":51},"innerVar",[41,206,187],{"class":159},[41,208,170],{"class":169},[41,210,212],{"class":43,"line":211},11,[41,213,214],{"class":55},"  }\n",[41,216,218],{"class":43,"line":217},12,[41,219,73],{"emptyLinePlaceholder":72},[41,221,223,226],{"class":43,"line":222},13,[41,224,225],{"class":169},"  \u002F\u002F console.log(innerVar)",[41,227,228],{"class":169}," \u002F\u002F ReferenceError!\n",[41,230,232],{"class":43,"line":231},14,[41,233,234],{"class":55},"}\n",[11,236,238],{"id":237},"when-youll-hear-this","When You'll Hear This",[16,240,241],{},"Prefer const and let over var for predictable block scoping.,Accidental global variables are a common source of bugs.,Understanding scope is key to understanding closures.",[243,244,245],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .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":69,"depth":69,"links":247},[248,249,250,251],{"id":13,"depth":69,"text":14},{"id":21,"depth":69,"text":22},{"id":28,"depth":69,"text":29},{"id":237,"depth":69,"text":238},"frontend","Scope is about where your variables are visible. Variables defined inside a function can't be seen outside it (that's function scope).","intermediate","md","s",{},"\u002Fterms\u002Fs\u002Fscope",[260,261,262],"Closure","Hoisting","Arrow Function",{"title":5,"description":253},{"changefreq":265,"priority":266},"weekly",0.7,"terms\u002Fs\u002Fscope","lTBRPNzeV1EJ7gJT_UWvDAn8gPAEdRung5lttUz13wI",[270,274,278],{"title":262,"path":271,"acronym":6,"category":252,"difficulty":272,"description":273},"\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":260,"path":275,"acronym":6,"category":252,"difficulty":276,"description":277},"\u002Fterms\u002Fc\u002Fclosure","advanced","A closure is when a function remembers the variables from the scope it was created in, even after that scope is gone.",{"title":261,"path":279,"acronym":6,"category":252,"difficulty":254,"description":280},"\u002Fterms\u002Fh\u002Fhoisting","Hoisting is JavaScript's weird quirk where variable and function declarations are mentally 'moved' to the top of their scope before code runs.",1776518311089]