[{"data":1,"prerenderedAt":356},["ShallowReactive",2],{"term-d\u002Fdestructuring":3,"related-d\u002Fdestructuring":344},{"id":4,"title":5,"acronym":6,"body":7,"category":327,"description":328,"difficulty":329,"extension":330,"letter":331,"meta":332,"navigation":102,"path":333,"related":334,"seo":338,"sitemap":339,"stem":342,"subcategory":6,"__hash__":343},"terms\u002Fterms\u002Fd\u002Fdestructuring.md","Destructuring",null,{"type":8,"value":9,"toc":321},"minimark",[10,15,19,23,26,30,299,303,317],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Destructuring lets you unpack values from arrays or objects into variables in one clean line. Instead of writing 'const name = user.name; const age = user.age;' you write 'const { name, age } = user'. It's one of those features that makes modern JavaScript code feel like a different language compared to ES5.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Destructuring is an ES6 syntax for extracting values from arrays or properties from objects into distinct variables. Object destructuring can rename variables (const { name: firstName } = user), provide defaults ({ role = 'viewer' } = user), and nest (const { address: { city } } = user). Array destructuring is positional.",[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 Object destructuring\nconst { name, age, role = 'viewer' } = user\n\n\u002F\u002F Rename while destructuring\nconst { firstName: first, lastName: last } = person\n\n\u002F\u002F Array destructuring\nconst [first, second, ...rest] = [1, 2, 3, 4, 5]\n\n\u002F\u002F In function parameters\nfunction render({ title, body, published = false }) {\n  console.log(title, body, published)\n}\n","javascript","",[38,39,40,49,97,104,110,145,150,156,214,219,225,264,293],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F Object destructuring\n",[41,50,52,56,60,64,67,70,72,75,78,81,85,88,91,94],{"class":43,"line":51},2,[41,53,55],{"class":54},"spNyl","const",[41,57,59],{"class":58},"sMK4o"," {",[41,61,63],{"class":62},"sTEyZ"," name",[41,65,66],{"class":58},",",[41,68,69],{"class":62}," age",[41,71,66],{"class":58},[41,73,74],{"class":62}," role ",[41,76,77],{"class":58},"=",[41,79,80],{"class":58}," '",[41,82,84],{"class":83},"sfazB","viewer",[41,86,87],{"class":58},"'",[41,89,90],{"class":58}," }",[41,92,93],{"class":58}," =",[41,95,96],{"class":62}," user\n",[41,98,100],{"class":43,"line":99},3,[41,101,103],{"emptyLinePlaceholder":102},true,"\n",[41,105,107],{"class":43,"line":106},4,[41,108,109],{"class":47},"\u002F\u002F Rename while destructuring\n",[41,111,113,115,117,121,124,127,129,132,134,137,140,142],{"class":43,"line":112},5,[41,114,55],{"class":54},[41,116,59],{"class":58},[41,118,120],{"class":119},"swJcz"," firstName",[41,122,123],{"class":58},":",[41,125,126],{"class":62}," first",[41,128,66],{"class":58},[41,130,131],{"class":119}," lastName",[41,133,123],{"class":58},[41,135,136],{"class":62}," last ",[41,138,139],{"class":58},"}",[41,141,93],{"class":58},[41,143,144],{"class":62}," person\n",[41,146,148],{"class":43,"line":147},6,[41,149,103],{"emptyLinePlaceholder":102},[41,151,153],{"class":43,"line":152},7,[41,154,155],{"class":47},"\u002F\u002F Array destructuring\n",[41,157,159,161,164,167,169,172,174,177,180,183,185,187,191,193,196,198,201,203,206,208,211],{"class":43,"line":158},8,[41,160,55],{"class":54},[41,162,163],{"class":58}," [",[41,165,166],{"class":62},"first",[41,168,66],{"class":58},[41,170,171],{"class":62}," second",[41,173,66],{"class":58},[41,175,176],{"class":58}," ...",[41,178,179],{"class":62},"rest",[41,181,182],{"class":58},"]",[41,184,93],{"class":58},[41,186,163],{"class":62},[41,188,190],{"class":189},"sbssI","1",[41,192,66],{"class":58},[41,194,195],{"class":189}," 2",[41,197,66],{"class":58},[41,199,200],{"class":189}," 3",[41,202,66],{"class":58},[41,204,205],{"class":189}," 4",[41,207,66],{"class":58},[41,209,210],{"class":189}," 5",[41,212,213],{"class":62},"]\n",[41,215,217],{"class":43,"line":216},9,[41,218,103],{"emptyLinePlaceholder":102},[41,220,222],{"class":43,"line":221},10,[41,223,224],{"class":47},"\u002F\u002F In function parameters\n",[41,226,228,231,235,238,242,244,247,249,252,254,258,261],{"class":43,"line":227},11,[41,229,230],{"class":54},"function",[41,232,234],{"class":233},"s2Zo4"," render",[41,236,237],{"class":58},"({",[41,239,241],{"class":240},"sHdIc"," title",[41,243,66],{"class":58},[41,245,246],{"class":240}," body",[41,248,66],{"class":58},[41,250,251],{"class":240}," published",[41,253,93],{"class":58},[41,255,257],{"class":256},"sfNiH"," false",[41,259,260],{"class":58}," })",[41,262,263],{"class":58}," {\n",[41,265,267,270,273,276,279,282,284,286,288,290],{"class":43,"line":266},12,[41,268,269],{"class":62},"  console",[41,271,272],{"class":58},".",[41,274,275],{"class":233},"log",[41,277,278],{"class":119},"(",[41,280,281],{"class":62},"title",[41,283,66],{"class":58},[41,285,246],{"class":62},[41,287,66],{"class":58},[41,289,251],{"class":62},[41,291,292],{"class":119},")\n",[41,294,296],{"class":43,"line":295},13,[41,297,298],{"class":58},"}\n",[11,300,302],{"id":301},"when-youll-hear-this","When You'll Hear This",[16,304,305,306,309,310,313,314,272],{},"Destructuring function parameters makes APIs much more readable.,React's useState returns an array, which you destructure: const ",[41,307,308],{},"count, setCount"," = useState(0).,Swap two variables without a temp: ",[41,311,312],{},"a, b"," = ",[41,315,316],{},"b, a",[318,319,320],"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 .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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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":322},[323,324,325,326],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":301,"depth":51,"text":302},"frontend","Destructuring lets you unpack values from arrays or objects into variables in one clean line. Instead of writing 'const name = user.name; const age = user.","beginner","md","d",{},"\u002Fterms\u002Fd\u002Fdestructuring",[335,336,337],"Spread Operator","Arrow Function","JSON",{"title":5,"description":328},{"changefreq":340,"priority":341},"weekly",0.7,"terms\u002Fd\u002Fdestructuring","4yJ0S0YakT5BE9pP9xNccipepoBlpJY4C-LiOkZGToc",[345,348,353],{"title":336,"path":346,"acronym":6,"category":327,"difficulty":329,"description":347},"\u002Fterms\u002Fa\u002Farrow-function","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":337,"path":349,"acronym":350,"category":351,"difficulty":329,"description":352},"\u002Fterms\u002Fj\u002Fjson","JavaScript Object Notation","backend","JSON is the universal language the internet uses to pass data around. It looks like a JavaScript object — curly braces, key-value pairs.",{"title":335,"path":354,"acronym":6,"category":327,"difficulty":329,"description":355},"\u002Fterms\u002Fs\u002Fspread-operator","The spread operator (...) lets you unpack an array or object and spread its contents somewhere else. Need to copy an array? Spread it.",1776518274034]