[{"data":1,"prerenderedAt":352},["ShallowReactive",2],{"term-c\u002Fcallback":3,"related-c\u002Fcallback":337},{"id":4,"title":5,"acronym":6,"body":7,"category":319,"description":320,"difficulty":321,"extension":322,"letter":323,"meta":324,"navigation":176,"path":325,"related":326,"seo":331,"sitemap":332,"stem":335,"subcategory":6,"__hash__":336},"terms\u002Fterms\u002Fc\u002Fcallback.md","Callback",null,{"type":8,"value":9,"toc":313},"minimark",[10,15,19,23,26,30,302,306,309],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"A callback is just a function you pass to another function, saying 'when you're done, call this.' Like giving someone your phone number and saying 'text me when the pizza is ready.' Callbacks were how JavaScript handled async stuff before Promises, which led to the legendary 'callback hell' of deeply nested spaghetti code.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"A callback is a function passed as an argument to another function, to be invoked at a later time (synchronously or asynchronously). They are foundational to JavaScript's asynchronous model. Nesting callbacks leads to 'callback hell' (pyramid of doom). Promises and async\u002Fawait were introduced to address this readability problem.",[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 Simple callback\nfunction greet(name, callback) {\n  console.log('Hello, ' + name)\n  callback()\n}\ngreet('World', () => console.log('Done!'))\n\n\u002F\u002F Callback hell (avoid this)\ngetUser(id, function(user) {\n  getPosts(user.id, function(posts) {\n    getComments(posts[0].id, function(comments) {\n      \u002F\u002F 😱 pyramid of doom\n    })\n  })\n})\n","javascript","",[38,39,40,49,80,114,123,129,171,178,184,207,235,272,278,286,294],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F Simple callback\n",[41,50,52,56,60,64,68,71,74,77],{"class":43,"line":51},2,[41,53,55],{"class":54},"spNyl","function",[41,57,59],{"class":58},"s2Zo4"," greet",[41,61,63],{"class":62},"sMK4o","(",[41,65,67],{"class":66},"sHdIc","name",[41,69,70],{"class":62},",",[41,72,73],{"class":66}," callback",[41,75,76],{"class":62},")",[41,78,79],{"class":62}," {\n",[41,81,83,87,90,93,96,99,103,105,108,111],{"class":43,"line":82},3,[41,84,86],{"class":85},"sTEyZ","  console",[41,88,89],{"class":62},".",[41,91,92],{"class":58},"log",[41,94,63],{"class":95},"swJcz",[41,97,98],{"class":62},"'",[41,100,102],{"class":101},"sfazB","Hello, ",[41,104,98],{"class":62},[41,106,107],{"class":62}," +",[41,109,110],{"class":85}," name",[41,112,113],{"class":95},")\n",[41,115,117,120],{"class":43,"line":116},4,[41,118,119],{"class":58},"  callback",[41,121,122],{"class":95},"()\n",[41,124,126],{"class":43,"line":125},5,[41,127,128],{"class":62},"}\n",[41,130,132,135,137,139,142,144,146,149,152,155,157,159,161,163,166,168],{"class":43,"line":131},6,[41,133,134],{"class":58},"greet",[41,136,63],{"class":85},[41,138,98],{"class":62},[41,140,141],{"class":101},"World",[41,143,98],{"class":62},[41,145,70],{"class":62},[41,147,148],{"class":62}," ()",[41,150,151],{"class":54}," =>",[41,153,154],{"class":85}," console",[41,156,89],{"class":62},[41,158,92],{"class":58},[41,160,63],{"class":85},[41,162,98],{"class":62},[41,164,165],{"class":101},"Done!",[41,167,98],{"class":62},[41,169,170],{"class":85},"))\n",[41,172,174],{"class":43,"line":173},7,[41,175,177],{"emptyLinePlaceholder":176},true,"\n",[41,179,181],{"class":43,"line":180},8,[41,182,183],{"class":47},"\u002F\u002F Callback hell (avoid this)\n",[41,185,187,190,193,195,198,200,203,205],{"class":43,"line":186},9,[41,188,189],{"class":58},"getUser",[41,191,192],{"class":85},"(id",[41,194,70],{"class":62},[41,196,197],{"class":54}," function",[41,199,63],{"class":62},[41,201,202],{"class":66},"user",[41,204,76],{"class":62},[41,206,79],{"class":62},[41,208,210,213,215,217,219,222,224,226,228,231,233],{"class":43,"line":209},10,[41,211,212],{"class":58},"  getPosts",[41,214,63],{"class":95},[41,216,202],{"class":85},[41,218,89],{"class":62},[41,220,221],{"class":85},"id",[41,223,70],{"class":62},[41,225,197],{"class":54},[41,227,63],{"class":62},[41,229,230],{"class":66},"posts",[41,232,76],{"class":62},[41,234,79],{"class":62},[41,236,238,241,243,245,248,252,255,257,259,261,263,265,268,270],{"class":43,"line":237},11,[41,239,240],{"class":58},"    getComments",[41,242,63],{"class":95},[41,244,230],{"class":85},[41,246,247],{"class":95},"[",[41,249,251],{"class":250},"sbssI","0",[41,253,254],{"class":95},"]",[41,256,89],{"class":62},[41,258,221],{"class":85},[41,260,70],{"class":62},[41,262,197],{"class":54},[41,264,63],{"class":62},[41,266,267],{"class":66},"comments",[41,269,76],{"class":62},[41,271,79],{"class":62},[41,273,275],{"class":43,"line":274},12,[41,276,277],{"class":47},"      \u002F\u002F 😱 pyramid of doom\n",[41,279,281,284],{"class":43,"line":280},13,[41,282,283],{"class":62},"    }",[41,285,113],{"class":95},[41,287,289,292],{"class":43,"line":288},14,[41,290,291],{"class":62},"  }",[41,293,113],{"class":95},[41,295,297,300],{"class":43,"line":296},15,[41,298,299],{"class":62},"}",[41,301,113],{"class":85},[11,303,305],{"id":304},"when-youll-hear-this","When You'll Hear This",[16,307,308],{},"Array methods like .map() and .filter() take callbacks.,Callback hell is why Promises were invented.,Event listeners use callbacks: element.addEventListener('click', callback).",[310,311,312],"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 .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 .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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":314},[315,316,317,318],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":304,"depth":51,"text":305},"frontend","A callback is just a function you pass to another function, saying 'when you're done, call this.","beginner","md","c",{},"\u002Fterms\u002Fc\u002Fcallback",[327,328,329,330],"Promise","Async\u002FAwait","Event Loop","Closure",{"title":5,"description":320},{"changefreq":333,"priority":334},"weekly",0.7,"terms\u002Fc\u002Fcallback","GkIEMdUeN2Wc6q1t4N_rc9EgwXL4mg6bLNr64S9zb2I",[338,342,346,349],{"title":328,"path":339,"acronym":6,"category":319,"difficulty":340,"description":341},"\u002Fterms\u002Fa\u002Fasync-await","intermediate","Async\u002Fawait is syntactic sugar that makes Promises look like normal, readable code. Instead of chaining .then().then().",{"title":330,"path":343,"acronym":6,"category":319,"difficulty":344,"description":345},"\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":329,"path":347,"acronym":6,"category":319,"difficulty":344,"description":348},"\u002Fterms\u002Fe\u002Fevent-loop","JavaScript can only do one thing at a time (single-threaded), but the Event Loop is the trick that makes it seem like it can multitask.",{"title":327,"path":350,"acronym":6,"category":319,"difficulty":340,"description":351},"\u002Fterms\u002Fp\u002Fpromise","A Promise is JavaScript's way of saying 'I'll give you a value eventually — it's not ready yet, but I promise.",1776518263712]