[{"data":1,"prerenderedAt":233},["ShallowReactive",2],{"term-h\u002Fhoisting":3,"related-h\u002Fhoisting":225},{"id":4,"title":5,"acronym":6,"body":7,"category":209,"description":210,"difficulty":211,"extension":212,"letter":213,"meta":214,"navigation":114,"path":215,"related":216,"seo":219,"sitemap":220,"stem":223,"subcategory":6,"__hash__":224},"terms\u002Fterms\u002Fh\u002Fhoisting.md","Hoisting",null,{"type":8,"value":9,"toc":203},"minimark",[10,15,19,23,26,30,192,196,199],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Hoisting is JavaScript's weird quirk where variable and function declarations are mentally 'moved' to the top of their scope before code runs. So you can call a function before you write it in the file. Variables declared with var are hoisted but initialized as undefined, which causes confusing bugs. This is why everyone uses let and const now.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Hoisting is a JavaScript mechanism where variable and function declarations are moved to the top of their containing scope during the compilation phase, before code execution. Function declarations are fully hoisted (callable before declaration). var declarations are hoisted but initialized as undefined. let and const are hoisted but remain in a 'temporal dead zone' until their declaration line.",[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","\u002F\u002F Function hoisting — works fine\nconsole.log(greet()) \u002F\u002F 'Hello!'\nfunction greet() { return 'Hello!' }\n\n\u002F\u002F var hoisting — confusing!\nconsole.log(x) \u002F\u002F undefined (not an error!)\nvar x = 5\n\n\u002F\u002F let — temporal dead zone\nconsole.log(y) \u002F\u002F ReferenceError\nlet y = 5\n","javascript","",[38,39,40,49,76,109,116,122,137,153,158,164,179],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F Function hoisting — works fine\n",[41,50,52,56,60,64,67,70,73],{"class":43,"line":51},2,[41,53,55],{"class":54},"sTEyZ","console",[41,57,59],{"class":58},"sMK4o",".",[41,61,63],{"class":62},"s2Zo4","log",[41,65,66],{"class":54},"(",[41,68,69],{"class":62},"greet",[41,71,72],{"class":54},"()) ",[41,74,75],{"class":47},"\u002F\u002F 'Hello!'\n",[41,77,79,83,86,89,92,96,99,103,106],{"class":43,"line":78},3,[41,80,82],{"class":81},"spNyl","function",[41,84,85],{"class":62}," greet",[41,87,88],{"class":58},"()",[41,90,91],{"class":58}," {",[41,93,95],{"class":94},"s7zQu"," return",[41,97,98],{"class":58}," '",[41,100,102],{"class":101},"sfazB","Hello!",[41,104,105],{"class":58},"'",[41,107,108],{"class":58}," }\n",[41,110,112],{"class":43,"line":111},4,[41,113,115],{"emptyLinePlaceholder":114},true,"\n",[41,117,119],{"class":43,"line":118},5,[41,120,121],{"class":47},"\u002F\u002F var hoisting — confusing!\n",[41,123,125,127,129,131,134],{"class":43,"line":124},6,[41,126,55],{"class":54},[41,128,59],{"class":58},[41,130,63],{"class":62},[41,132,133],{"class":54},"(x) ",[41,135,136],{"class":47},"\u002F\u002F undefined (not an error!)\n",[41,138,140,143,146,149],{"class":43,"line":139},7,[41,141,142],{"class":81},"var",[41,144,145],{"class":54}," x ",[41,147,148],{"class":58},"=",[41,150,152],{"class":151},"sbssI"," 5\n",[41,154,156],{"class":43,"line":155},8,[41,157,115],{"emptyLinePlaceholder":114},[41,159,161],{"class":43,"line":160},9,[41,162,163],{"class":47},"\u002F\u002F let — temporal dead zone\n",[41,165,167,169,171,173,176],{"class":43,"line":166},10,[41,168,55],{"class":54},[41,170,59],{"class":58},[41,172,63],{"class":62},[41,174,175],{"class":54},"(y) ",[41,177,178],{"class":47},"\u002F\u002F ReferenceError\n",[41,180,182,185,188,190],{"class":43,"line":181},11,[41,183,184],{"class":81},"let",[41,186,187],{"class":54}," y ",[41,189,148],{"class":58},[41,191,152],{"class":151},[11,193,195],{"id":194},"when-youll-hear-this","When You'll Hear This",[16,197,198],{},"Avoid relying on hoisting — declare variables before using them.,var hoisting is a common source of subtle bugs.,Prefer const\u002Flet over var to avoid hoisting confusion.",[200,201,202],"style",{},"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 .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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":51,"depth":51,"links":204},[205,206,207,208],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":194,"depth":51,"text":195},"frontend","Hoisting is JavaScript's weird quirk where variable and function declarations are mentally 'moved' to the top of their scope before code runs.","intermediate","md","h",{},"\u002Fterms\u002Fh\u002Fhoisting",[217,218],"Scope","Closure",{"title":5,"description":210},{"changefreq":221,"priority":222},"weekly",0.7,"terms\u002Fh\u002Fhoisting","rvNr6WzRwqcqgcxtxhH-AZAdV3Sz7mqpEc_ygQZ-yLw",[226,230],{"title":218,"path":227,"acronym":6,"category":209,"difficulty":228,"description":229},"\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":217,"path":231,"acronym":6,"category":209,"difficulty":211,"description":232},"\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).",1776518287044]