[{"data":1,"prerenderedAt":333},["ShallowReactive",2],{"term-s\u002Fspread-operator":3,"related-s\u002Fspread-operator":321},{"id":4,"title":5,"acronym":6,"body":7,"category":304,"description":305,"difficulty":306,"extension":307,"letter":308,"meta":309,"navigation":124,"path":310,"related":311,"seo":315,"sitemap":316,"stem":319,"subcategory":6,"__hash__":320},"terms\u002Fterms\u002Fs\u002Fspread-operator.md","Spread Operator",null,{"type":8,"value":9,"toc":298},"minimark",[10,15,19,23,26,30,287,291,294],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"The spread operator (...) lets you unpack an array or object and spread its contents somewhere else. Need to copy an array? Spread it. Need to merge two objects? Spread them together. It's one of those features that once you know it, you use it constantly.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"The spread operator (...) is an ES6 feature that expands iterables (arrays, strings) or objects into individual elements. For arrays, it enables cloning, concatenation, and passing array elements as function arguments. For objects (object spread, ES2018), it creates shallow copies and enables merging. It creates a new reference — spreading is a shallow copy.",[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 Array spread\nconst a = [1, 2, 3]\nconst b = [...a, 4, 5] \u002F\u002F [1, 2, 3, 4, 5]\n\n\u002F\u002F Object spread (shallow copy + merge)\nconst user = { name: 'Alice', role: 'admin' }\nconst updatedUser = { ...user, role: 'viewer' }\n\u002F\u002F { name: 'Alice', role: 'viewer' }\n\n\u002F\u002F Spread as function args\nconst nums = [3, 1, 4, 1, 5]\nMath.max(...nums) \u002F\u002F 5\n","javascript","",[38,39,40,49,85,119,126,132,179,212,218,223,229,263],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F Array spread\n",[41,50,52,56,60,64,67,71,74,77,79,82],{"class":43,"line":51},2,[41,53,55],{"class":54},"spNyl","const",[41,57,59],{"class":58},"sTEyZ"," a ",[41,61,63],{"class":62},"sMK4o","=",[41,65,66],{"class":58}," [",[41,68,70],{"class":69},"sbssI","1",[41,72,73],{"class":62},",",[41,75,76],{"class":69}," 2",[41,78,73],{"class":62},[41,80,81],{"class":69}," 3",[41,83,84],{"class":58},"]\n",[41,86,88,90,93,95,97,100,103,105,108,110,113,116],{"class":43,"line":87},3,[41,89,55],{"class":54},[41,91,92],{"class":58}," b ",[41,94,63],{"class":62},[41,96,66],{"class":58},[41,98,99],{"class":62},"...",[41,101,102],{"class":58},"a",[41,104,73],{"class":62},[41,106,107],{"class":69}," 4",[41,109,73],{"class":62},[41,111,112],{"class":69}," 5",[41,114,115],{"class":58},"] ",[41,117,118],{"class":47},"\u002F\u002F [1, 2, 3, 4, 5]\n",[41,120,122],{"class":43,"line":121},4,[41,123,125],{"emptyLinePlaceholder":124},true,"\n",[41,127,129],{"class":43,"line":128},5,[41,130,131],{"class":47},"\u002F\u002F Object spread (shallow copy + merge)\n",[41,133,135,137,140,142,145,149,152,155,159,162,164,167,169,171,174,176],{"class":43,"line":134},6,[41,136,55],{"class":54},[41,138,139],{"class":58}," user ",[41,141,63],{"class":62},[41,143,144],{"class":62}," {",[41,146,148],{"class":147},"swJcz"," name",[41,150,151],{"class":62},":",[41,153,154],{"class":62}," '",[41,156,158],{"class":157},"sfazB","Alice",[41,160,161],{"class":62},"'",[41,163,73],{"class":62},[41,165,166],{"class":147}," role",[41,168,151],{"class":62},[41,170,154],{"class":62},[41,172,173],{"class":157},"admin",[41,175,161],{"class":62},[41,177,178],{"class":62}," }\n",[41,180,182,184,187,189,191,194,197,199,201,203,205,208,210],{"class":43,"line":181},7,[41,183,55],{"class":54},[41,185,186],{"class":58}," updatedUser ",[41,188,63],{"class":62},[41,190,144],{"class":62},[41,192,193],{"class":62}," ...",[41,195,196],{"class":58},"user",[41,198,73],{"class":62},[41,200,166],{"class":147},[41,202,151],{"class":62},[41,204,154],{"class":62},[41,206,207],{"class":157},"viewer",[41,209,161],{"class":62},[41,211,178],{"class":62},[41,213,215],{"class":43,"line":214},8,[41,216,217],{"class":47},"\u002F\u002F { name: 'Alice', role: 'viewer' }\n",[41,219,221],{"class":43,"line":220},9,[41,222,125],{"emptyLinePlaceholder":124},[41,224,226],{"class":43,"line":225},10,[41,227,228],{"class":47},"\u002F\u002F Spread as function args\n",[41,230,232,234,237,239,241,244,246,249,251,253,255,257,259,261],{"class":43,"line":231},11,[41,233,55],{"class":54},[41,235,236],{"class":58}," nums ",[41,238,63],{"class":62},[41,240,66],{"class":58},[41,242,243],{"class":69},"3",[41,245,73],{"class":62},[41,247,248],{"class":69}," 1",[41,250,73],{"class":62},[41,252,107],{"class":69},[41,254,73],{"class":62},[41,256,248],{"class":69},[41,258,73],{"class":62},[41,260,112],{"class":69},[41,262,84],{"class":58},[41,264,266,269,272,276,279,281,284],{"class":43,"line":265},12,[41,267,268],{"class":58},"Math",[41,270,271],{"class":62},".",[41,273,275],{"class":274},"s2Zo4","max",[41,277,278],{"class":58},"(",[41,280,99],{"class":62},[41,282,283],{"class":58},"nums) ",[41,285,286],{"class":47},"\u002F\u002F 5\n",[11,288,290],{"id":289},"when-youll-hear-this","When You'll Hear This",[16,292,293],{},"Spread is the idiomatic way to update state in React (immutably).,Spread creates a shallow copy — nested objects are still shared references.,Rest syntax (...rest) is the 'opposite' — it collects remaining elements.",[295,296,297],"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 .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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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":299},[300,301,302,303],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":289,"depth":51,"text":290},"frontend","The spread operator (...) lets you unpack an array or object and spread its contents somewhere else. Need to copy an array? Spread it.","beginner","md","s",{},"\u002Fterms\u002Fs\u002Fspread-operator",[312,313,314],"Destructuring","Arrow Function","JSON",{"title":5,"description":305},{"changefreq":317,"priority":318},"weekly",0.7,"terms\u002Fs\u002Fspread-operator","xzAM9sXpth2_I4er2YalUIbzfi_VggU9_hFdBkNA4_8",[322,325,328],{"title":313,"path":323,"acronym":6,"category":304,"difficulty":306,"description":324},"\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":312,"path":326,"acronym":6,"category":304,"difficulty":306,"description":327},"\u002Fterms\u002Fd\u002Fdestructuring","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.",{"title":314,"path":329,"acronym":330,"category":331,"difficulty":306,"description":332},"\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.",1776518314584]