[{"data":1,"prerenderedAt":1919},["Reactive",2],{"content-query-olq4nv7mbg":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"_empty":6,"title":8,"description":9,"date":10,"tags":11,"readingTime":15,"body":20,"_type":1914,"_id":1915,"_source":1916,"_file":1917,"_extension":1918},"/blog/await-primitive","blog",false,"","Await Primitive: Why on Earth does this code work!?","Once, while reviewing some code, I ran into a surprising snippet (that I'm going to share with you in a moment), that, at first, made me think \"No way this is going to work\", but after testing it in a browser I, quite shocked, had to change my approach to \"Why on Earth is this working!?\".",1692896400000,[12,13,14],"js","behavior","gotcha",{"text":16,"minutes":17,"time":18,"words":19},"6 min read",5.725,343500,1145,{"type":21,"children":22,"toc":1903},"root",[23,46,51,56,61,131,136,582,612,617,629,648,661,684,689,694,701,706,848,859,864,1038,1048,1053,1059,1064,1075,1080,1097,1109,1133,1138,1144,1155,1184,1190,1195,1202,1207,1231,1403,1409,1421,1453,1458,1641,1647,1666,1677,1859,1865,1888,1893,1898],{"type":24,"tag":25,"props":26,"children":27},"element","p",{},[28,31,37,39,44],{"type":29,"value":30},"text","Once, while reviewing some code, I ran into a surprising snippet (that I'm going to share with you in a moment), that, at first, made me think \"",{"type":24,"tag":32,"props":33,"children":34},"em",{},[35],{"type":29,"value":36},"No way this is going to work",{"type":29,"value":38},"\", but after testing it in a browser I, quite shocked, had to change my approach to \"",{"type":24,"tag":32,"props":40,"children":41},{},[42],{"type":29,"value":43},"Why on Earth is this working!?",{"type":29,"value":45},"\".",{"type":24,"tag":25,"props":47,"children":48},{},[49],{"type":29,"value":50},"The investigation that followed opened my eyes on an unexpected behavior that I found worthy of sharing here.",{"type":24,"tag":25,"props":52,"children":53},{},[54],{"type":29,"value":55},"So what was that snippet? First, let me give you some context.",{"type":24,"tag":25,"props":57,"children":58},{},[59],{"type":29,"value":60},"We're working on a Svelte component and the code is written by a junior developer, who seems familiar with async-await, but doesn't fully comprehend how Promises work yet. In the following code, he's trying to make an HTML element appear in DOM and then perform some operations with it within the same function.",{"type":24,"tag":62,"props":63,"children":64},"details",{},[65,71,76,81],{"type":24,"tag":66,"props":67,"children":68},"summary",{},[69],{"type":29,"value":70},"If you're not familiar with Svelte 4 syntax",{"type":24,"tag":25,"props":72,"children":73},{},[74],{"type":29,"value":75},"No worries - it doesn't have anything to do with the topic of this post.",{"type":24,"tag":25,"props":77,"children":78},{},[79],{"type":29,"value":80},"But for the sake of this example I'll briefly explain what's going on in the code snippet below:",{"type":24,"tag":82,"props":83,"children":84},"ul",{},[85,106],{"type":24,"tag":86,"props":87,"children":88},"li",{},[89,91,97,99,104],{"type":29,"value":90},"First we declare a reactive variable ",{"type":24,"tag":92,"props":93,"children":94},"code-inline",{},[95],{"type":29,"value":96},"show",{"type":29,"value":98}," (yes, all ",{"type":24,"tag":92,"props":100,"children":101},{},[102],{"type":29,"value":103},"let",{"type":29,"value":105}," variables are reactive in Svelte), which controls whether the element is rendered.",{"type":24,"tag":86,"props":107,"children":108},{},[109,111,115,117,122,124,129],{"type":29,"value":110},"Then we declare a variable ",{"type":24,"tag":92,"props":112,"children":113},{},[114],{"type":29,"value":24},{"type":29,"value":116}," that later gets bound to an element in template. So we can expect this variable to be an ",{"type":24,"tag":92,"props":118,"children":119},{},[120],{"type":29,"value":121},"HTMLElement",{"type":29,"value":123}," unless it's not rendered, in which case it'll be ",{"type":24,"tag":92,"props":125,"children":126},{},[127],{"type":29,"value":128},"undefined",{"type":29,"value":130},".",{"type":24,"tag":25,"props":132,"children":133},{},[134],{"type":29,"value":135},"Now that we understand the context let's see the code snippet:",{"type":24,"tag":137,"props":138,"children":142},"code",{"code":139,"language":140,"meta":141},"\u003Cscript>\n    let show = false\n    let element\n\n    async function main() {\n        show = true\n        await element\n        const rect = element.getBoundingClientRect()\n        console.log(rect)\n    }\n\u003C/script>\n\n{#if show}\n    \u003Cdiv bind:this={element}>\n        ...\n    \u003C/div>\n{/if}\n","svelte",null,[143],{"type":24,"tag":144,"props":145,"children":146},"pre",{},[147],{"type":24,"tag":137,"props":148,"children":149},{"__ignoreMap":7},[150,173,216,237,246,283,313,334,387,423,432,449,457,484,539,548,565],{"type":24,"tag":151,"props":152,"children":155},"span",{"class":153,"line":154},"line",1,[156,162,168],{"type":24,"tag":151,"props":157,"children":159},{"class":158},"ct-1369be",[160],{"type":29,"value":161},"\u003C",{"type":24,"tag":151,"props":163,"children":165},{"class":164},"ct-5f6a8a",[166],{"type":29,"value":167},"script",{"type":24,"tag":151,"props":169,"children":170},{"class":158},[171],{"type":29,"value":172},">\n",{"type":24,"tag":151,"props":174,"children":176},{"class":153,"line":175},2,[177,182,187,192,196,200,206,210],{"type":24,"tag":151,"props":178,"children":179},{"class":158},[180],{"type":29,"value":181},"    ",{"type":24,"tag":151,"props":183,"children":185},{"class":184},"ct-336583",[186],{"type":29,"value":103},{"type":24,"tag":151,"props":188,"children":189},{"class":158},[190],{"type":29,"value":191}," ",{"type":24,"tag":151,"props":193,"children":194},{"class":164},[195],{"type":29,"value":96},{"type":24,"tag":151,"props":197,"children":198},{"class":158},[199],{"type":29,"value":191},{"type":24,"tag":151,"props":201,"children":203},{"class":202},"ct-b61278",[204],{"type":29,"value":205},"=",{"type":24,"tag":151,"props":207,"children":208},{"class":158},[209],{"type":29,"value":191},{"type":24,"tag":151,"props":211,"children":213},{"class":212},"ct-74d613",[214],{"type":29,"value":215},"false\n",{"type":24,"tag":151,"props":217,"children":219},{"class":153,"line":218},3,[220,224,228,232],{"type":24,"tag":151,"props":221,"children":222},{"class":158},[223],{"type":29,"value":181},{"type":24,"tag":151,"props":225,"children":226},{"class":184},[227],{"type":29,"value":103},{"type":24,"tag":151,"props":229,"children":230},{"class":158},[231],{"type":29,"value":191},{"type":24,"tag":151,"props":233,"children":234},{"class":164},[235],{"type":29,"value":236},"element\n",{"type":24,"tag":151,"props":238,"children":240},{"class":153,"line":239},4,[241],{"type":24,"tag":151,"props":242,"children":243},{},[244],{"type":29,"value":245},"\n",{"type":24,"tag":151,"props":247,"children":249},{"class":153,"line":248},5,[250,254,259,263,268,272,278],{"type":24,"tag":151,"props":251,"children":252},{"class":158},[253],{"type":29,"value":181},{"type":24,"tag":151,"props":255,"children":256},{"class":184},[257],{"type":29,"value":258},"async",{"type":24,"tag":151,"props":260,"children":261},{"class":158},[262],{"type":29,"value":191},{"type":24,"tag":151,"props":264,"children":265},{"class":184},[266],{"type":29,"value":267},"function",{"type":24,"tag":151,"props":269,"children":270},{"class":158},[271],{"type":29,"value":191},{"type":24,"tag":151,"props":273,"children":275},{"class":274},"ct-f75423",[276],{"type":29,"value":277},"main",{"type":24,"tag":151,"props":279,"children":280},{"class":158},[281],{"type":29,"value":282},"() {\n",{"type":24,"tag":151,"props":284,"children":286},{"class":153,"line":285},6,[287,292,296,300,304,308],{"type":24,"tag":151,"props":288,"children":289},{"class":158},[290],{"type":29,"value":291},"        ",{"type":24,"tag":151,"props":293,"children":294},{"class":164},[295],{"type":29,"value":96},{"type":24,"tag":151,"props":297,"children":298},{"class":158},[299],{"type":29,"value":191},{"type":24,"tag":151,"props":301,"children":302},{"class":202},[303],{"type":29,"value":205},{"type":24,"tag":151,"props":305,"children":306},{"class":158},[307],{"type":29,"value":191},{"type":24,"tag":151,"props":309,"children":310},{"class":212},[311],{"type":29,"value":312},"true\n",{"type":24,"tag":151,"props":314,"children":316},{"class":153,"line":315},7,[317,321,326,330],{"type":24,"tag":151,"props":318,"children":319},{"class":158},[320],{"type":29,"value":291},{"type":24,"tag":151,"props":322,"children":323},{"class":184},[324],{"type":29,"value":325},"await",{"type":24,"tag":151,"props":327,"children":328},{"class":158},[329],{"type":29,"value":191},{"type":24,"tag":151,"props":331,"children":332},{"class":164},[333],{"type":29,"value":236},{"type":24,"tag":151,"props":335,"children":337},{"class":153,"line":336},8,[338,342,347,351,357,361,365,369,373,377,382],{"type":24,"tag":151,"props":339,"children":340},{"class":158},[341],{"type":29,"value":291},{"type":24,"tag":151,"props":343,"children":344},{"class":184},[345],{"type":29,"value":346},"const",{"type":24,"tag":151,"props":348,"children":349},{"class":158},[350],{"type":29,"value":191},{"type":24,"tag":151,"props":352,"children":354},{"class":353},"ct-419fc5",[355],{"type":29,"value":356},"rect",{"type":24,"tag":151,"props":358,"children":359},{"class":158},[360],{"type":29,"value":191},{"type":24,"tag":151,"props":362,"children":363},{"class":202},[364],{"type":29,"value":205},{"type":24,"tag":151,"props":366,"children":367},{"class":158},[368],{"type":29,"value":191},{"type":24,"tag":151,"props":370,"children":371},{"class":353},[372],{"type":29,"value":24},{"type":24,"tag":151,"props":374,"children":375},{"class":158},[376],{"type":29,"value":130},{"type":24,"tag":151,"props":378,"children":379},{"class":274},[380],{"type":29,"value":381},"getBoundingClientRect",{"type":24,"tag":151,"props":383,"children":384},{"class":158},[385],{"type":29,"value":386},"()\n",{"type":24,"tag":151,"props":388,"children":390},{"class":153,"line":389},9,[391,395,400,404,409,414,418],{"type":24,"tag":151,"props":392,"children":393},{"class":158},[394],{"type":29,"value":291},{"type":24,"tag":151,"props":396,"children":397},{"class":353},[398],{"type":29,"value":399},"console",{"type":24,"tag":151,"props":401,"children":402},{"class":158},[403],{"type":29,"value":130},{"type":24,"tag":151,"props":405,"children":406},{"class":274},[407],{"type":29,"value":408},"log",{"type":24,"tag":151,"props":410,"children":411},{"class":158},[412],{"type":29,"value":413},"(",{"type":24,"tag":151,"props":415,"children":416},{"class":164},[417],{"type":29,"value":356},{"type":24,"tag":151,"props":419,"children":420},{"class":158},[421],{"type":29,"value":422},")\n",{"type":24,"tag":151,"props":424,"children":426},{"class":153,"line":425},10,[427],{"type":24,"tag":151,"props":428,"children":429},{"class":158},[430],{"type":29,"value":431},"    }\n",{"type":24,"tag":151,"props":433,"children":435},{"class":153,"line":434},11,[436,441,445],{"type":24,"tag":151,"props":437,"children":438},{"class":158},[439],{"type":29,"value":440},"\u003C/",{"type":24,"tag":151,"props":442,"children":443},{"class":164},[444],{"type":29,"value":167},{"type":24,"tag":151,"props":446,"children":447},{"class":158},[448],{"type":29,"value":172},{"type":24,"tag":151,"props":450,"children":452},{"class":153,"line":451},12,[453],{"type":24,"tag":151,"props":454,"children":455},{},[456],{"type":29,"value":245},{"type":24,"tag":151,"props":458,"children":460},{"class":153,"line":459},13,[461,466,471,475,479],{"type":24,"tag":151,"props":462,"children":463},{"class":158},[464],{"type":29,"value":465},"{#",{"type":24,"tag":151,"props":467,"children":468},{"class":184},[469],{"type":29,"value":470},"if",{"type":24,"tag":151,"props":472,"children":473},{"class":158},[474],{"type":29,"value":191},{"type":24,"tag":151,"props":476,"children":477},{"class":164},[478],{"type":29,"value":96},{"type":24,"tag":151,"props":480,"children":481},{"class":158},[482],{"type":29,"value":483},"}\n",{"type":24,"tag":151,"props":485,"children":487},{"class":153,"line":486},14,[488,493,498,502,507,512,517,521,526,530,535],{"type":24,"tag":151,"props":489,"children":490},{"class":158},[491],{"type":29,"value":492},"    \u003C",{"type":24,"tag":151,"props":494,"children":495},{"class":164},[496],{"type":29,"value":497},"div",{"type":24,"tag":151,"props":499,"children":500},{"class":158},[501],{"type":29,"value":191},{"type":24,"tag":151,"props":503,"children":504},{"class":184},[505],{"type":29,"value":506},"bind",{"type":24,"tag":151,"props":508,"children":509},{"class":158},[510],{"type":29,"value":511},":",{"type":24,"tag":151,"props":513,"children":514},{"class":353},[515],{"type":29,"value":516},"this",{"type":24,"tag":151,"props":518,"children":519},{"class":158},[520],{"type":29,"value":205},{"type":24,"tag":151,"props":522,"children":523},{"class":184},[524],{"type":29,"value":525},"{",{"type":24,"tag":151,"props":527,"children":528},{"class":164},[529],{"type":29,"value":24},{"type":24,"tag":151,"props":531,"children":532},{"class":184},[533],{"type":29,"value":534},"}",{"type":24,"tag":151,"props":536,"children":537},{"class":158},[538],{"type":29,"value":172},{"type":24,"tag":151,"props":540,"children":542},{"class":153,"line":541},15,[543],{"type":24,"tag":151,"props":544,"children":545},{"class":158},[546],{"type":29,"value":547},"        ...\n",{"type":24,"tag":151,"props":549,"children":551},{"class":153,"line":550},16,[552,557,561],{"type":24,"tag":151,"props":553,"children":554},{"class":158},[555],{"type":29,"value":556},"    \u003C/",{"type":24,"tag":151,"props":558,"children":559},{"class":164},[560],{"type":29,"value":497},{"type":24,"tag":151,"props":562,"children":563},{"class":158},[564],{"type":29,"value":172},{"type":24,"tag":151,"props":566,"children":568},{"class":153,"line":567},17,[569,574,578],{"type":24,"tag":151,"props":570,"children":571},{"class":158},[572],{"type":29,"value":573},"{/",{"type":24,"tag":151,"props":575,"children":576},{"class":184},[577],{"type":29,"value":470},{"type":24,"tag":151,"props":579,"children":580},{"class":158},[581],{"type":29,"value":534},{"type":24,"tag":25,"props":583,"children":584},{},[585,587,592,594,598,600,604,606,610],{"type":29,"value":586},"Now, what do you thing the resulting output to the console will be when ",{"type":24,"tag":92,"props":588,"children":589},{},[590],{"type":29,"value":591},"main()",{"type":29,"value":593}," function is called? (I remind you - ",{"type":24,"tag":92,"props":595,"children":596},{},[597],{"type":29,"value":24},{"type":29,"value":599}," is either an ",{"type":24,"tag":92,"props":601,"children":602},{},[603],{"type":29,"value":121},{"type":29,"value":605}," or ",{"type":24,"tag":92,"props":607,"children":608},{},[609],{"type":29,"value":128},{"type":29,"value":611},", never a Promise).",{"type":24,"tag":25,"props":613,"children":614},{},[615],{"type":29,"value":616},"Will we see anything logged at all, or will we see an error?",{"type":24,"tag":25,"props":618,"children":619},{},[620,622,627],{"type":29,"value":621},"When we assign ",{"type":24,"tag":92,"props":623,"children":624},{},[625],{"type":29,"value":626},"show = true",{"type":29,"value":628},", it signals Svelte to react to the state change and render the element. And only after it's rendered it's available through the bound variable.",{"type":24,"tag":25,"props":630,"children":631},{},[632,634,639,641,646],{"type":29,"value":633},"Conventionally, to wait for the element to appear, we would use Svelte's ",{"type":24,"tag":92,"props":635,"children":636},{},[637],{"type":29,"value":638},"tick",{"type":29,"value":640}," function or at least set a really short timeout, but ",{"type":24,"tag":92,"props":642,"children":643},{},[644],{"type":29,"value":645},"await element",{"type":29,"value":647}," is something that just wouldn't work. That's not how JavaScript works, even with reactivity and Svelte's magic you can't await a primitive and expect it to resolve with an updated value. Right?",{"type":24,"tag":25,"props":649,"children":650},{},[651,653,659],{"type":29,"value":652},"Wrong! ",{"type":24,"tag":654,"props":655,"children":656},"strong",{},[657],{"type":29,"value":658},"Mindblowingly",{"type":29,"value":660},", this code doesn't throw an error, and prints to the console exactly what the author's expectation was - a DOMRect of the element.",{"type":24,"tag":25,"props":662,"children":663},{},[664,666,670,672,676,678,682],{"type":29,"value":665},"Moreover, if we removed the ",{"type":24,"tag":92,"props":667,"children":668},{},[669],{"type":29,"value":645},{"type":29,"value":671},", then it would crash, because now ",{"type":24,"tag":92,"props":673,"children":674},{},[675],{"type":29,"value":24},{"type":29,"value":677}," would be ",{"type":24,"tag":92,"props":679,"children":680},{},[681],{"type":29,"value":128},{"type":29,"value":683},"!",{"type":24,"tag":25,"props":685,"children":686},{},[687],{"type":29,"value":688},"Have we been lied to? Can you just await an undefined variable until it gets assigned a value? What's going on here?",{"type":24,"tag":25,"props":690,"children":691},{},[692],{"type":29,"value":693},"Let's figure this out!",{"type":24,"tag":695,"props":696,"children":698},"h2",{"id":697},"the-investigation",[699],{"type":29,"value":700},"The Investigation",{"type":24,"tag":25,"props":702,"children":703},{},[704],{"type":29,"value":705},"Let's consider one more example, this time with a pre-school Vanilla JS question. What's the output of the following code?",{"type":24,"tag":137,"props":707,"children":709},{"code":708,"language":12,"meta":141},"let value\n\nfunction main() {\n  console.log(value)\n}\n\nmain()\n\nvalue = 'hello world'\n",[710],{"type":24,"tag":144,"props":711,"children":712},{},[713],{"type":24,"tag":137,"props":714,"children":715},{"__ignoreMap":7},[716,732,739,758,791,798,805,816,823],{"type":24,"tag":151,"props":717,"children":718},{"class":153,"line":154},[719,723,727],{"type":24,"tag":151,"props":720,"children":721},{"class":184},[722],{"type":29,"value":103},{"type":24,"tag":151,"props":724,"children":725},{"class":158},[726],{"type":29,"value":191},{"type":24,"tag":151,"props":728,"children":729},{"class":164},[730],{"type":29,"value":731},"value\n",{"type":24,"tag":151,"props":733,"children":734},{"class":153,"line":175},[735],{"type":24,"tag":151,"props":736,"children":737},{},[738],{"type":29,"value":245},{"type":24,"tag":151,"props":740,"children":741},{"class":153,"line":218},[742,746,750,754],{"type":24,"tag":151,"props":743,"children":744},{"class":184},[745],{"type":29,"value":267},{"type":24,"tag":151,"props":747,"children":748},{"class":158},[749],{"type":29,"value":191},{"type":24,"tag":151,"props":751,"children":752},{"class":274},[753],{"type":29,"value":277},{"type":24,"tag":151,"props":755,"children":756},{"class":158},[757],{"type":29,"value":282},{"type":24,"tag":151,"props":759,"children":760},{"class":153,"line":239},[761,766,770,774,778,782,787],{"type":24,"tag":151,"props":762,"children":763},{"class":158},[764],{"type":29,"value":765},"  ",{"type":24,"tag":151,"props":767,"children":768},{"class":353},[769],{"type":29,"value":399},{"type":24,"tag":151,"props":771,"children":772},{"class":158},[773],{"type":29,"value":130},{"type":24,"tag":151,"props":775,"children":776},{"class":274},[777],{"type":29,"value":408},{"type":24,"tag":151,"props":779,"children":780},{"class":158},[781],{"type":29,"value":413},{"type":24,"tag":151,"props":783,"children":784},{"class":164},[785],{"type":29,"value":786},"value",{"type":24,"tag":151,"props":788,"children":789},{"class":158},[790],{"type":29,"value":422},{"type":24,"tag":151,"props":792,"children":793},{"class":153,"line":248},[794],{"type":24,"tag":151,"props":795,"children":796},{"class":158},[797],{"type":29,"value":483},{"type":24,"tag":151,"props":799,"children":800},{"class":153,"line":285},[801],{"type":24,"tag":151,"props":802,"children":803},{},[804],{"type":29,"value":245},{"type":24,"tag":151,"props":806,"children":807},{"class":153,"line":315},[808,812],{"type":24,"tag":151,"props":809,"children":810},{"class":274},[811],{"type":29,"value":277},{"type":24,"tag":151,"props":813,"children":814},{"class":158},[815],{"type":29,"value":386},{"type":24,"tag":151,"props":817,"children":818},{"class":153,"line":336},[819],{"type":24,"tag":151,"props":820,"children":821},{},[822],{"type":29,"value":245},{"type":24,"tag":151,"props":824,"children":825},{"class":153,"line":389},[826,830,834,838,842],{"type":24,"tag":151,"props":827,"children":828},{"class":164},[829],{"type":29,"value":786},{"type":24,"tag":151,"props":831,"children":832},{"class":158},[833],{"type":29,"value":191},{"type":24,"tag":151,"props":835,"children":836},{"class":202},[837],{"type":29,"value":205},{"type":24,"tag":151,"props":839,"children":840},{"class":158},[841],{"type":29,"value":191},{"type":24,"tag":151,"props":843,"children":845},{"class":844},"ct-8da4fa",[846],{"type":29,"value":847},"'hello world'",{"type":24,"tag":25,"props":849,"children":850},{},[851,853,857],{"type":29,"value":852},"If you answered ",{"type":24,"tag":92,"props":854,"children":855},{},[856],{"type":29,"value":128},{"type":29,"value":858},", of course you're correct.",{"type":24,"tag":25,"props":860,"children":861},{},[862],{"type":29,"value":863},"But would it change anything if we modified the code like below?",{"type":24,"tag":137,"props":865,"children":867},{"code":866,"language":12,"meta":141},"let value\n\nasync function main() {\n  await value // 👈 add this\n  console.log(value)\n}\n\nmain()\n\nvalue = 'hello world'\n",[868],{"type":24,"tag":144,"props":869,"children":870},{},[871],{"type":24,"tag":137,"props":872,"children":873},{"__ignoreMap":7},[874,889,896,923,952,983,990,997,1008,1015],{"type":24,"tag":151,"props":875,"children":876},{"class":153,"line":154},[877,881,885],{"type":24,"tag":151,"props":878,"children":879},{"class":184},[880],{"type":29,"value":103},{"type":24,"tag":151,"props":882,"children":883},{"class":158},[884],{"type":29,"value":191},{"type":24,"tag":151,"props":886,"children":887},{"class":164},[888],{"type":29,"value":731},{"type":24,"tag":151,"props":890,"children":891},{"class":153,"line":175},[892],{"type":24,"tag":151,"props":893,"children":894},{},[895],{"type":29,"value":245},{"type":24,"tag":151,"props":897,"children":898},{"class":153,"line":218},[899,903,907,911,915,919],{"type":24,"tag":151,"props":900,"children":901},{"class":184},[902],{"type":29,"value":258},{"type":24,"tag":151,"props":904,"children":905},{"class":158},[906],{"type":29,"value":191},{"type":24,"tag":151,"props":908,"children":909},{"class":184},[910],{"type":29,"value":267},{"type":24,"tag":151,"props":912,"children":913},{"class":158},[914],{"type":29,"value":191},{"type":24,"tag":151,"props":916,"children":917},{"class":274},[918],{"type":29,"value":277},{"type":24,"tag":151,"props":920,"children":921},{"class":158},[922],{"type":29,"value":282},{"type":24,"tag":151,"props":924,"children":925},{"class":153,"line":239},[926,930,934,938,942,946],{"type":24,"tag":151,"props":927,"children":928},{"class":158},[929],{"type":29,"value":765},{"type":24,"tag":151,"props":931,"children":932},{"class":184},[933],{"type":29,"value":325},{"type":24,"tag":151,"props":935,"children":936},{"class":158},[937],{"type":29,"value":191},{"type":24,"tag":151,"props":939,"children":940},{"class":164},[941],{"type":29,"value":786},{"type":24,"tag":151,"props":943,"children":944},{"class":158},[945],{"type":29,"value":191},{"type":24,"tag":151,"props":947,"children":949},{"class":948},"ct-24e83a",[950],{"type":29,"value":951},"// 👈 add this\n",{"type":24,"tag":151,"props":953,"children":954},{"class":153,"line":248},[955,959,963,967,971,975,979],{"type":24,"tag":151,"props":956,"children":957},{"class":158},[958],{"type":29,"value":765},{"type":24,"tag":151,"props":960,"children":961},{"class":353},[962],{"type":29,"value":399},{"type":24,"tag":151,"props":964,"children":965},{"class":158},[966],{"type":29,"value":130},{"type":24,"tag":151,"props":968,"children":969},{"class":274},[970],{"type":29,"value":408},{"type":24,"tag":151,"props":972,"children":973},{"class":158},[974],{"type":29,"value":413},{"type":24,"tag":151,"props":976,"children":977},{"class":164},[978],{"type":29,"value":786},{"type":24,"tag":151,"props":980,"children":981},{"class":158},[982],{"type":29,"value":422},{"type":24,"tag":151,"props":984,"children":985},{"class":153,"line":285},[986],{"type":24,"tag":151,"props":987,"children":988},{"class":158},[989],{"type":29,"value":483},{"type":24,"tag":151,"props":991,"children":992},{"class":153,"line":315},[993],{"type":24,"tag":151,"props":994,"children":995},{},[996],{"type":29,"value":245},{"type":24,"tag":151,"props":998,"children":999},{"class":153,"line":336},[1000,1004],{"type":24,"tag":151,"props":1001,"children":1002},{"class":274},[1003],{"type":29,"value":277},{"type":24,"tag":151,"props":1005,"children":1006},{"class":158},[1007],{"type":29,"value":386},{"type":24,"tag":151,"props":1009,"children":1010},{"class":153,"line":389},[1011],{"type":24,"tag":151,"props":1012,"children":1013},{},[1014],{"type":29,"value":245},{"type":24,"tag":151,"props":1016,"children":1017},{"class":153,"line":425},[1018,1022,1026,1030,1034],{"type":24,"tag":151,"props":1019,"children":1020},{"class":164},[1021],{"type":29,"value":786},{"type":24,"tag":151,"props":1023,"children":1024},{"class":158},[1025],{"type":29,"value":191},{"type":24,"tag":151,"props":1027,"children":1028},{"class":202},[1029],{"type":29,"value":205},{"type":24,"tag":151,"props":1031,"children":1032},{"class":158},[1033],{"type":29,"value":191},{"type":24,"tag":151,"props":1035,"children":1036},{"class":844},[1037],{"type":29,"value":847},{"type":24,"tag":25,"props":1039,"children":1040},{},[1041,1043,1047],{"type":29,"value":1042},"Now it prints ",{"type":24,"tag":92,"props":1044,"children":1045},{},[1046],{"type":29,"value":847},{"type":29,"value":683},{"type":24,"tag":25,"props":1049,"children":1050},{},[1051],{"type":29,"value":1052},"I'm going to be honest with you - I was pretty mind blown at this point, but as always. there turned out to be a rational explanation.",{"type":24,"tag":695,"props":1054,"children":1056},{"id":1055},"the-trick",[1057],{"type":29,"value":1058},"The trick",{"type":24,"tag":25,"props":1060,"children":1061},{},[1062],{"type":29,"value":1063},"Yes, the above code works, but not exactly for the perceived reason.",{"type":24,"tag":25,"props":1065,"children":1066},{},[1067,1069,1073],{"type":29,"value":1068},"In both examples it makes it look like a primitive ",{"type":24,"tag":92,"props":1070,"children":1071},{},[1072],{"type":29,"value":128},{"type":29,"value":1074}," value is being awaited until it gets assigned a real value, and only then the async function proceeds with execution.",{"type":24,"tag":25,"props":1076,"children":1077},{},[1078],{"type":29,"value":1079},"But the reality is much more prosaic.",{"type":24,"tag":25,"props":1081,"children":1082},{},[1083,1085,1089,1091,1096],{"type":29,"value":1084},"In fact what's happening is when ",{"type":24,"tag":92,"props":1086,"children":1087},{},[1088],{"type":29,"value":325},{"type":29,"value":1090}," keyword is used with a non-Promise value, ",{"type":24,"tag":654,"props":1092,"children":1093},{},[1094],{"type":29,"value":1095},"JS implicitly transforms it into a Promise that immediately resolves with that value",{"type":29,"value":130},{"type":24,"tag":25,"props":1098,"children":1099},{},[1100,1102,1107],{"type":29,"value":1101},"A-ha, now that explains everything! In both of our examples, of course, the execution isn't paused until the variables value gets updated. It's simply paused until the ",{"type":24,"tag":32,"props":1103,"children":1104},{},[1105],{"type":29,"value":1106},"newly minted Promise gets resolved",{"type":29,"value":1108}," and that just happens to be enough time for the variable's value to update.",{"type":24,"tag":25,"props":1110,"children":1111},{},[1112,1114,1118,1119,1124,1126,1131],{"type":29,"value":1113},"As far as JS is concerned, the ",{"type":24,"tag":92,"props":1115,"children":1116},{},[1117],{"type":29,"value":645},{"type":29,"value":605},{"type":24,"tag":92,"props":1120,"children":1121},{},[1122],{"type":29,"value":1123},"await value",{"type":29,"value":1125}," in our examples could be replaced with ",{"type":24,"tag":92,"props":1127,"children":1128},{},[1129],{"type":29,"value":1130},"await null",{"type":29,"value":1132}," and it would work the same.",{"type":24,"tag":25,"props":1134,"children":1135},{},[1136],{"type":29,"value":1137},"So...",{"type":24,"tag":695,"props":1139,"children":1141},{"id":1140},"can-we-use-it",[1142],{"type":29,"value":1143},"Can we use it?",{"type":24,"tag":25,"props":1145,"children":1146},{},[1147,1149,1154],{"type":29,"value":1148},"While the code turned out to perform correctly thanks to the implicit Promise conversion, and as exciting as it was to unravel this mystery, I still ",{"type":24,"tag":654,"props":1150,"children":1151},{},[1152],{"type":29,"value":1153},"would advise against using this behavior in an actual codebase",{"type":29,"value":130},{"type":24,"tag":25,"props":1156,"children":1157},{},[1158,1160,1164,1166,1171,1172,1176,1177,1182],{"type":29,"value":1159},"Considering the potential confusion caused by this unconventional usage of ",{"type":24,"tag":92,"props":1161,"children":1162},{},[1163],{"type":29,"value":325},{"type":29,"value":1165}," with a primitive (",{"type":24,"tag":92,"props":1167,"children":1168},{},[1169],{"type":29,"value":1170},"await someVariable",{"type":29,"value":605},{"type":24,"tag":92,"props":1173,"children":1174},{},[1175],{"type":29,"value":1130},{"type":29,"value":605},{"type":24,"tag":92,"props":1178,"children":1179},{},[1180],{"type":29,"value":1181},"await 22",{"type":29,"value":1183},"), we should instead use more explicit approaches when we need to pause the execution of an async function.",{"type":24,"tag":695,"props":1185,"children":1187},{"id":1186},"worthy-alternatives",[1188],{"type":29,"value":1189},"Worthy Alternatives",{"type":24,"tag":25,"props":1191,"children":1192},{},[1193],{"type":29,"value":1194},"There are various ways to wait for the DOM to catch up with state updates.",{"type":24,"tag":1196,"props":1197,"children":1199},"h3",{"id":1198},"framework-specific-tick-functions",[1200],{"type":29,"value":1201},"Framework-specific tick functions",{"type":24,"tag":25,"props":1203,"children":1204},{},[1205],{"type":29,"value":1206},"First thing to consider - many frameworks have an \"on next tick\" function just for this purpose, which guarantees that the framework took care of applying your state changes and the DOM was updated.",{"type":24,"tag":25,"props":1208,"children":1209},{},[1210,1212,1216,1218,1223,1225,1229],{"type":29,"value":1211},"For example, Svelte's ",{"type":24,"tag":92,"props":1213,"children":1214},{},[1215],{"type":29,"value":638},{"type":29,"value":1217}," or Vue's ",{"type":24,"tag":92,"props":1219,"children":1220},{},[1221],{"type":29,"value":1222},"nextTick",{"type":29,"value":1224},". Using this approach you could rewrite the ",{"type":24,"tag":92,"props":1226,"children":1227},{},[1228],{"type":29,"value":591},{"type":29,"value":1230}," function from the first example like this:",{"type":24,"tag":137,"props":1232,"children":1234},{"code":1233,"language":12,"meta":141},"async function main() {\n  show = true\n  await tick()\n  const rect = element.getBoundingClientRect()\n  console.log(rect)\n}\n",[1235],{"type":24,"tag":144,"props":1236,"children":1237},{},[1238],{"type":24,"tag":137,"props":1239,"children":1240},{"__ignoreMap":7},[1241,1268,1295,1318,1365,1396],{"type":24,"tag":151,"props":1242,"children":1243},{"class":153,"line":154},[1244,1248,1252,1256,1260,1264],{"type":24,"tag":151,"props":1245,"children":1246},{"class":184},[1247],{"type":29,"value":258},{"type":24,"tag":151,"props":1249,"children":1250},{"class":158},[1251],{"type":29,"value":191},{"type":24,"tag":151,"props":1253,"children":1254},{"class":184},[1255],{"type":29,"value":267},{"type":24,"tag":151,"props":1257,"children":1258},{"class":158},[1259],{"type":29,"value":191},{"type":24,"tag":151,"props":1261,"children":1262},{"class":274},[1263],{"type":29,"value":277},{"type":24,"tag":151,"props":1265,"children":1266},{"class":158},[1267],{"type":29,"value":282},{"type":24,"tag":151,"props":1269,"children":1270},{"class":153,"line":175},[1271,1275,1279,1283,1287,1291],{"type":24,"tag":151,"props":1272,"children":1273},{"class":158},[1274],{"type":29,"value":765},{"type":24,"tag":151,"props":1276,"children":1277},{"class":164},[1278],{"type":29,"value":96},{"type":24,"tag":151,"props":1280,"children":1281},{"class":158},[1282],{"type":29,"value":191},{"type":24,"tag":151,"props":1284,"children":1285},{"class":202},[1286],{"type":29,"value":205},{"type":24,"tag":151,"props":1288,"children":1289},{"class":158},[1290],{"type":29,"value":191},{"type":24,"tag":151,"props":1292,"children":1293},{"class":212},[1294],{"type":29,"value":312},{"type":24,"tag":151,"props":1296,"children":1297},{"class":153,"line":218},[1298,1302,1306,1310,1314],{"type":24,"tag":151,"props":1299,"children":1300},{"class":158},[1301],{"type":29,"value":765},{"type":24,"tag":151,"props":1303,"children":1304},{"class":184},[1305],{"type":29,"value":325},{"type":24,"tag":151,"props":1307,"children":1308},{"class":158},[1309],{"type":29,"value":191},{"type":24,"tag":151,"props":1311,"children":1312},{"class":274},[1313],{"type":29,"value":638},{"type":24,"tag":151,"props":1315,"children":1316},{"class":158},[1317],{"type":29,"value":386},{"type":24,"tag":151,"props":1319,"children":1320},{"class":153,"line":239},[1321,1325,1329,1333,1337,1341,1345,1349,1353,1357,1361],{"type":24,"tag":151,"props":1322,"children":1323},{"class":158},[1324],{"type":29,"value":765},{"type":24,"tag":151,"props":1326,"children":1327},{"class":184},[1328],{"type":29,"value":346},{"type":24,"tag":151,"props":1330,"children":1331},{"class":158},[1332],{"type":29,"value":191},{"type":24,"tag":151,"props":1334,"children":1335},{"class":353},[1336],{"type":29,"value":356},{"type":24,"tag":151,"props":1338,"children":1339},{"class":158},[1340],{"type":29,"value":191},{"type":24,"tag":151,"props":1342,"children":1343},{"class":202},[1344],{"type":29,"value":205},{"type":24,"tag":151,"props":1346,"children":1347},{"class":158},[1348],{"type":29,"value":191},{"type":24,"tag":151,"props":1350,"children":1351},{"class":353},[1352],{"type":29,"value":24},{"type":24,"tag":151,"props":1354,"children":1355},{"class":158},[1356],{"type":29,"value":130},{"type":24,"tag":151,"props":1358,"children":1359},{"class":274},[1360],{"type":29,"value":381},{"type":24,"tag":151,"props":1362,"children":1363},{"class":158},[1364],{"type":29,"value":386},{"type":24,"tag":151,"props":1366,"children":1367},{"class":153,"line":248},[1368,1372,1376,1380,1384,1388,1392],{"type":24,"tag":151,"props":1369,"children":1370},{"class":158},[1371],{"type":29,"value":765},{"type":24,"tag":151,"props":1373,"children":1374},{"class":353},[1375],{"type":29,"value":399},{"type":24,"tag":151,"props":1377,"children":1378},{"class":158},[1379],{"type":29,"value":130},{"type":24,"tag":151,"props":1381,"children":1382},{"class":274},[1383],{"type":29,"value":408},{"type":24,"tag":151,"props":1385,"children":1386},{"class":158},[1387],{"type":29,"value":413},{"type":24,"tag":151,"props":1389,"children":1390},{"class":164},[1391],{"type":29,"value":356},{"type":24,"tag":151,"props":1393,"children":1394},{"class":158},[1395],{"type":29,"value":422},{"type":24,"tag":151,"props":1397,"children":1398},{"class":153,"line":285},[1399],{"type":24,"tag":151,"props":1400,"children":1401},{"class":158},[1402],{"type":29,"value":534},{"type":24,"tag":1196,"props":1404,"children":1406},{"id":1405},"zero-ms-timeout",[1407],{"type":29,"value":1408},"Zero ms Timeout",{"type":24,"tag":25,"props":1410,"children":1411},{},[1412,1414,1419],{"type":29,"value":1413},"Usually, it's enough to push the next step of execution to the end of the event loop. And that is one thing a zero-ms ",{"type":24,"tag":92,"props":1415,"children":1416},{},[1417],{"type":29,"value":1418},"setTimeout",{"type":29,"value":1420}," is often used for.",{"type":24,"tag":1422,"props":1423,"children":1424},"blockquote",{},[1425,1434],{"type":24,"tag":25,"props":1426,"children":1427},{},[1428,1432],{"type":24,"tag":92,"props":1429,"children":1430},{},[1431],{"type":29,"value":1418},{"type":29,"value":1433}," is generally less safe than framework-specific functions and, depending on the scenario, it can make the code unstable, but if you're using a framework (or library) that doesn't have a dedicated \"tick\" function, you might have no other choice but to utilize timeouts in this type of situations.",{"type":24,"tag":25,"props":1435,"children":1436},{},[1437,1439,1444,1446,1451],{"type":29,"value":1438},"Not to worry though: using timeouts ",{"type":24,"tag":32,"props":1440,"children":1441},{},[1442],{"type":29,"value":1443},"with 0 ms delay",{"type":29,"value":1445}," is not considered a bad practice, because it doesn't offset the callback by some ",{"type":24,"tag":32,"props":1447,"children":1448},{},[1449],{"type":29,"value":1450},"magic time period",{"type":29,"value":1452},", but instead simply offsets it until the next event loop.",{"type":24,"tag":25,"props":1454,"children":1455},{},[1456],{"type":29,"value":1457},"Here's an example of how one could implement the timeout in our first example to achieve the same behavior:",{"type":24,"tag":137,"props":1459,"children":1461},{"code":1460,"language":12,"meta":141},"async function main() {\n  show = true\n  setTimeout(() => {\n    const rect = element.getBoundingClientRect()\n    console.log(rect)\n  })\n}\n",[1462],{"type":24,"tag":144,"props":1463,"children":1464},{},[1465],{"type":24,"tag":137,"props":1466,"children":1467},{"__ignoreMap":7},[1468,1495,1522,1548,1595,1626,1634],{"type":24,"tag":151,"props":1469,"children":1470},{"class":153,"line":154},[1471,1475,1479,1483,1487,1491],{"type":24,"tag":151,"props":1472,"children":1473},{"class":184},[1474],{"type":29,"value":258},{"type":24,"tag":151,"props":1476,"children":1477},{"class":158},[1478],{"type":29,"value":191},{"type":24,"tag":151,"props":1480,"children":1481},{"class":184},[1482],{"type":29,"value":267},{"type":24,"tag":151,"props":1484,"children":1485},{"class":158},[1486],{"type":29,"value":191},{"type":24,"tag":151,"props":1488,"children":1489},{"class":274},[1490],{"type":29,"value":277},{"type":24,"tag":151,"props":1492,"children":1493},{"class":158},[1494],{"type":29,"value":282},{"type":24,"tag":151,"props":1496,"children":1497},{"class":153,"line":175},[1498,1502,1506,1510,1514,1518],{"type":24,"tag":151,"props":1499,"children":1500},{"class":158},[1501],{"type":29,"value":765},{"type":24,"tag":151,"props":1503,"children":1504},{"class":164},[1505],{"type":29,"value":96},{"type":24,"tag":151,"props":1507,"children":1508},{"class":158},[1509],{"type":29,"value":191},{"type":24,"tag":151,"props":1511,"children":1512},{"class":202},[1513],{"type":29,"value":205},{"type":24,"tag":151,"props":1515,"children":1516},{"class":158},[1517],{"type":29,"value":191},{"type":24,"tag":151,"props":1519,"children":1520},{"class":212},[1521],{"type":29,"value":312},{"type":24,"tag":151,"props":1523,"children":1524},{"class":153,"line":218},[1525,1529,1533,1538,1543],{"type":24,"tag":151,"props":1526,"children":1527},{"class":158},[1528],{"type":29,"value":765},{"type":24,"tag":151,"props":1530,"children":1531},{"class":274},[1532],{"type":29,"value":1418},{"type":24,"tag":151,"props":1534,"children":1535},{"class":158},[1536],{"type":29,"value":1537},"(() ",{"type":24,"tag":151,"props":1539,"children":1540},{"class":184},[1541],{"type":29,"value":1542},"=>",{"type":24,"tag":151,"props":1544,"children":1545},{"class":158},[1546],{"type":29,"value":1547}," {\n",{"type":24,"tag":151,"props":1549,"children":1550},{"class":153,"line":239},[1551,1555,1559,1563,1567,1571,1575,1579,1583,1587,1591],{"type":24,"tag":151,"props":1552,"children":1553},{"class":158},[1554],{"type":29,"value":181},{"type":24,"tag":151,"props":1556,"children":1557},{"class":184},[1558],{"type":29,"value":346},{"type":24,"tag":151,"props":1560,"children":1561},{"class":158},[1562],{"type":29,"value":191},{"type":24,"tag":151,"props":1564,"children":1565},{"class":353},[1566],{"type":29,"value":356},{"type":24,"tag":151,"props":1568,"children":1569},{"class":158},[1570],{"type":29,"value":191},{"type":24,"tag":151,"props":1572,"children":1573},{"class":202},[1574],{"type":29,"value":205},{"type":24,"tag":151,"props":1576,"children":1577},{"class":158},[1578],{"type":29,"value":191},{"type":24,"tag":151,"props":1580,"children":1581},{"class":353},[1582],{"type":29,"value":24},{"type":24,"tag":151,"props":1584,"children":1585},{"class":158},[1586],{"type":29,"value":130},{"type":24,"tag":151,"props":1588,"children":1589},{"class":274},[1590],{"type":29,"value":381},{"type":24,"tag":151,"props":1592,"children":1593},{"class":158},[1594],{"type":29,"value":386},{"type":24,"tag":151,"props":1596,"children":1597},{"class":153,"line":248},[1598,1602,1606,1610,1614,1618,1622],{"type":24,"tag":151,"props":1599,"children":1600},{"class":158},[1601],{"type":29,"value":181},{"type":24,"tag":151,"props":1603,"children":1604},{"class":353},[1605],{"type":29,"value":399},{"type":24,"tag":151,"props":1607,"children":1608},{"class":158},[1609],{"type":29,"value":130},{"type":24,"tag":151,"props":1611,"children":1612},{"class":274},[1613],{"type":29,"value":408},{"type":24,"tag":151,"props":1615,"children":1616},{"class":158},[1617],{"type":29,"value":413},{"type":24,"tag":151,"props":1619,"children":1620},{"class":164},[1621],{"type":29,"value":356},{"type":24,"tag":151,"props":1623,"children":1624},{"class":158},[1625],{"type":29,"value":422},{"type":24,"tag":151,"props":1627,"children":1628},{"class":153,"line":285},[1629],{"type":24,"tag":151,"props":1630,"children":1631},{"class":158},[1632],{"type":29,"value":1633},"  })\n",{"type":24,"tag":151,"props":1635,"children":1636},{"class":153,"line":315},[1637],{"type":24,"tag":151,"props":1638,"children":1639},{"class":158},[1640],{"type":29,"value":534},{"type":24,"tag":1196,"props":1642,"children":1644},{"id":1643},"explicit-instantly-resolving-promise",[1645],{"type":29,"value":1646},"Explicit Instantly Resolving Promise",{"type":24,"tag":25,"props":1648,"children":1649},{},[1650,1652,1657,1659,1664],{"type":29,"value":1651},"This approach does ",{"type":24,"tag":654,"props":1653,"children":1654},{},[1655],{"type":29,"value":1656},"exactly the same thing",{"type":29,"value":1658}," as the initial example, but ",{"type":24,"tag":32,"props":1660,"children":1661},{},[1662],{"type":29,"value":1663},"without the implicit Promise conversion",{"type":29,"value":1665}," which leaves the readers of such code scratching their heads thinking they're looking at some voodoo magic (and then writing blog posts about it haha).",{"type":24,"tag":25,"props":1667,"children":1668},{},[1669,1671,1676],{"type":29,"value":1670},"Instead, it relies on the same functionality but coded explicitly with ",{"type":24,"tag":92,"props":1672,"children":1673},{},[1674],{"type":29,"value":1675},"Promise.resolve()",{"type":29,"value":511},{"type":24,"tag":137,"props":1678,"children":1680},{"code":1679,"language":12,"meta":141},"async function main() {\n  show = true\n  await Promise.resolve()\n  const rect = element.getBoundingClientRect()\n  console.log(rect)\n}\n",[1681],{"type":24,"tag":144,"props":1682,"children":1683},{},[1684],{"type":24,"tag":137,"props":1685,"children":1686},{"__ignoreMap":7},[1687,1714,1741,1774,1821,1852],{"type":24,"tag":151,"props":1688,"children":1689},{"class":153,"line":154},[1690,1694,1698,1702,1706,1710],{"type":24,"tag":151,"props":1691,"children":1692},{"class":184},[1693],{"type":29,"value":258},{"type":24,"tag":151,"props":1695,"children":1696},{"class":158},[1697],{"type":29,"value":191},{"type":24,"tag":151,"props":1699,"children":1700},{"class":184},[1701],{"type":29,"value":267},{"type":24,"tag":151,"props":1703,"children":1704},{"class":158},[1705],{"type":29,"value":191},{"type":24,"tag":151,"props":1707,"children":1708},{"class":274},[1709],{"type":29,"value":277},{"type":24,"tag":151,"props":1711,"children":1712},{"class":158},[1713],{"type":29,"value":282},{"type":24,"tag":151,"props":1715,"children":1716},{"class":153,"line":175},[1717,1721,1725,1729,1733,1737],{"type":24,"tag":151,"props":1718,"children":1719},{"class":158},[1720],{"type":29,"value":765},{"type":24,"tag":151,"props":1722,"children":1723},{"class":164},[1724],{"type":29,"value":96},{"type":24,"tag":151,"props":1726,"children":1727},{"class":158},[1728],{"type":29,"value":191},{"type":24,"tag":151,"props":1730,"children":1731},{"class":202},[1732],{"type":29,"value":205},{"type":24,"tag":151,"props":1734,"children":1735},{"class":158},[1736],{"type":29,"value":191},{"type":24,"tag":151,"props":1738,"children":1739},{"class":212},[1740],{"type":29,"value":312},{"type":24,"tag":151,"props":1742,"children":1743},{"class":153,"line":218},[1744,1748,1752,1756,1761,1765,1770],{"type":24,"tag":151,"props":1745,"children":1746},{"class":158},[1747],{"type":29,"value":765},{"type":24,"tag":151,"props":1749,"children":1750},{"class":184},[1751],{"type":29,"value":325},{"type":24,"tag":151,"props":1753,"children":1754},{"class":158},[1755],{"type":29,"value":191},{"type":24,"tag":151,"props":1757,"children":1758},{"class":353},[1759],{"type":29,"value":1760},"Promise",{"type":24,"tag":151,"props":1762,"children":1763},{"class":158},[1764],{"type":29,"value":130},{"type":24,"tag":151,"props":1766,"children":1767},{"class":274},[1768],{"type":29,"value":1769},"resolve",{"type":24,"tag":151,"props":1771,"children":1772},{"class":158},[1773],{"type":29,"value":386},{"type":24,"tag":151,"props":1775,"children":1776},{"class":153,"line":239},[1777,1781,1785,1789,1793,1797,1801,1805,1809,1813,1817],{"type":24,"tag":151,"props":1778,"children":1779},{"class":158},[1780],{"type":29,"value":765},{"type":24,"tag":151,"props":1782,"children":1783},{"class":184},[1784],{"type":29,"value":346},{"type":24,"tag":151,"props":1786,"children":1787},{"class":158},[1788],{"type":29,"value":191},{"type":24,"tag":151,"props":1790,"children":1791},{"class":353},[1792],{"type":29,"value":356},{"type":24,"tag":151,"props":1794,"children":1795},{"class":158},[1796],{"type":29,"value":191},{"type":24,"tag":151,"props":1798,"children":1799},{"class":202},[1800],{"type":29,"value":205},{"type":24,"tag":151,"props":1802,"children":1803},{"class":158},[1804],{"type":29,"value":191},{"type":24,"tag":151,"props":1806,"children":1807},{"class":353},[1808],{"type":29,"value":24},{"type":24,"tag":151,"props":1810,"children":1811},{"class":158},[1812],{"type":29,"value":130},{"type":24,"tag":151,"props":1814,"children":1815},{"class":274},[1816],{"type":29,"value":381},{"type":24,"tag":151,"props":1818,"children":1819},{"class":158},[1820],{"type":29,"value":386},{"type":24,"tag":151,"props":1822,"children":1823},{"class":153,"line":248},[1824,1828,1832,1836,1840,1844,1848],{"type":24,"tag":151,"props":1825,"children":1826},{"class":158},[1827],{"type":29,"value":765},{"type":24,"tag":151,"props":1829,"children":1830},{"class":353},[1831],{"type":29,"value":399},{"type":24,"tag":151,"props":1833,"children":1834},{"class":158},[1835],{"type":29,"value":130},{"type":24,"tag":151,"props":1837,"children":1838},{"class":274},[1839],{"type":29,"value":408},{"type":24,"tag":151,"props":1841,"children":1842},{"class":158},[1843],{"type":29,"value":413},{"type":24,"tag":151,"props":1845,"children":1846},{"class":164},[1847],{"type":29,"value":356},{"type":24,"tag":151,"props":1849,"children":1850},{"class":158},[1851],{"type":29,"value":422},{"type":24,"tag":151,"props":1853,"children":1854},{"class":153,"line":285},[1855],{"type":24,"tag":151,"props":1856,"children":1857},{"class":158},[1858],{"type":29,"value":534},{"type":24,"tag":695,"props":1860,"children":1862},{"id":1861},"conclusion",[1863],{"type":29,"value":1864},"Conclusion",{"type":24,"tag":25,"props":1866,"children":1867},{},[1868,1870,1874,1876,1881,1882,1886],{"type":29,"value":1869},"In summary, while the unconventional use of ",{"type":24,"tag":92,"props":1871,"children":1872},{},[1873],{"type":29,"value":325},{"type":29,"value":1875}," with primitive values might be a fascinating \"gotcha\" to explore, it's generally recommended to favor clear and straightforward coding practices. Utilizing established techniques like ",{"type":24,"tag":92,"props":1877,"children":1878},{},[1879],{"type":29,"value":1880},"setTimeout()",{"type":29,"value":605},{"type":24,"tag":92,"props":1883,"children":1884},{},[1885],{"type":29,"value":1675},{"type":29,"value":1887}," ensures that your code remains comprehensible and maintainable when dealing with asynchronous operations.",{"type":24,"tag":25,"props":1889,"children":1890},{},[1891],{"type":29,"value":1892},"Sometimes the way certain things are coded may get mixed with an implicit behavior in such way, that the result makes it seem like there's some black magic involved. But in the end there's always a rational explanation and an improvement to be made to avoid such complexities in the future.",{"type":24,"tag":25,"props":1894,"children":1895},{},[1896],{"type":29,"value":1897},"Don't believe everything that you see, and happy coding!",{"type":24,"tag":1899,"children":1900},"style",[1901],{"type":29,"value":1902},".ct-74d613{color:#D19A66}\n.ct-24e83a{color:#7F848E}\n.ct-8da4fa{color:#98C379}\n.ct-b61278{color:#56B6C2}\n.ct-419fc5{color:#E5C07B}\n.ct-f75423{color:#61AFEF}\n.ct-5f6a8a{color:#E06C75}\n.ct-1369be{color:#ABB2BF}\n.ct-336583{color:#C678DD}",{"title":7,"searchDepth":175,"depth":175,"links":1904},[1905,1906,1907,1908,1913],{"id":697,"depth":175,"text":700},{"id":1055,"depth":175,"text":1058},{"id":1140,"depth":175,"text":1143},{"id":1186,"depth":175,"text":1189,"children":1909},[1910,1911,1912],{"id":1198,"depth":218,"text":1201},{"id":1405,"depth":218,"text":1408},{"id":1643,"depth":218,"text":1646},{"id":1861,"depth":175,"text":1864},"markdown","content:blog:await-primitive.md","content","blog/await-primitive.md","md",1760572598857]