[{"data":1,"prerenderedAt":1308},["ShallowReactive",2],{"blog-\u002Fblog\u002Fjavascript-destructuring-spread-rest":3},{"id":4,"title":5,"body":6,"description":1293,"difficulty":1294,"extension":1295,"framework":1296,"frameworkSlug":1297,"meta":1298,"navigation":217,"order":60,"path":1299,"qaPath":1300,"seo":1301,"stem":1302,"subtopic":1303,"topic":1304,"topicSlug":1305,"updated":1306,"__hash__":1307},"blog\u002Fblog\u002Fjavascript-destructuring-spread-rest.md","JavaScript Destructuring, Spread & Rest — The Complete Guide to Objects and Arrays",{"type":7,"value":8,"toc":1278},"minimark",[9,14,35,39,46,139,142,146,161,255,266,270,273,346,369,373,380,421,435,439,446,536,546,550,562,620,633,637,643,739,750,754,769,837,843,847,857,911,914,948,954,958,971,1071,1085,1089,1092,1207,1211,1271,1274],[10,11,13],"h2",{"id":12},"three-features-that-reshaped-javascript","Three features that reshaped JavaScript",[15,16,17,18,22,23,26,27,30,31,34],"p",{},"Few ES2015 additions changed daily JavaScript as much as ",[19,20,21],"strong",{},"destructuring",", ",[19,24,25],{},"spread",", and\n",[19,28,29],{},"rest",". Together they let you pull values out of objects and arrays, copy and merge data\nstructures, and collect variable arguments — all concisely and declaratively. They appear in\nnearly every modern codebase: React props, function options, immutable state updates, and API\nresponse handling. This guide focuses on the ",[19,32,33],{},"object"," side (array destructuring has its own\nguide) plus the general rest\u002Fspread mechanics that apply everywhere.",[10,36,38],{"id":37},"object-destructuring-basics","Object destructuring basics",[15,40,41,42,45],{},"Object destructuring extracts properties into variables ",[19,43,44],{},"by name",", matching keys to variable\nnames.",[47,48,53],"pre",{"className":49,"code":50,"language":51,"meta":52,"style":52},"language-js shiki shiki-themes github-light github-dark","const user = { name: 'Ada', age: 36, city: 'London' }\nconst { name, age } = user\nname   \u002F\u002F 'Ada'\nage    \u002F\u002F 36 matched by property name, not position\n","js","",[54,55,56,95,120,130],"code",{"__ignoreMap":52},[57,58,61,65,69,72,76,80,83,86,89,92],"span",{"class":59,"line":60},"line",1,[57,62,64],{"class":63},"szBVR","const",[57,66,68],{"class":67},"sj4cs"," user",[57,70,71],{"class":63}," =",[57,73,75],{"class":74},"sVt8B"," { name: ",[57,77,79],{"class":78},"sZZnC","'Ada'",[57,81,82],{"class":74},", age: ",[57,84,85],{"class":67},"36",[57,87,88],{"class":74},", city: ",[57,90,91],{"class":78},"'London'",[57,93,94],{"class":74}," }\n",[57,96,98,100,103,106,108,111,114,117],{"class":59,"line":97},2,[57,99,64],{"class":63},[57,101,102],{"class":74}," { ",[57,104,105],{"class":67},"name",[57,107,22],{"class":74},[57,109,110],{"class":67},"age",[57,112,113],{"class":74}," } ",[57,115,116],{"class":63},"=",[57,118,119],{"class":74}," user\n",[57,121,123,126],{"class":59,"line":122},3,[57,124,125],{"class":74},"name   ",[57,127,129],{"class":128},"sJ8bj","\u002F\u002F 'Ada'\n",[57,131,133,136],{"class":59,"line":132},4,[57,134,135],{"class":74},"age    ",[57,137,138],{"class":128},"\u002F\u002F 36 matched by property name, not position\n",[15,140,141],{},"Unlike array destructuring (by position), object destructuring matches by key — order doesn't\nmatter, only the names.",[10,143,145],{"id":144},"renaming-and-defaults","Renaming and defaults",[15,147,148,149,152,153,156,157,160],{},"You can ",[19,150,151],{},"rename"," a destructured property and provide ",[19,154,155],{},"defaults"," for missing ones. Defaults\napply only when the value is ",[54,158,159],{},"undefined",".",[47,162,164],{"className":49,"code":163,"language":51,"meta":52,"style":52},"const { name: fullName, role = 'guest' } = user\nfullName   \u002F\u002F 'Ada' (renamed)\nrole       \u002F\u002F 'guest' (default — user has no role)\n\nconst { count = 0 } = { count: null }\ncount      \u002F\u002F null default not applied (null is not undefined)\n",[54,165,166,197,205,213,219,246],{"__ignoreMap":52},[57,167,168,170,172,175,178,181,183,186,188,191,193,195],{"class":59,"line":60},[57,169,64],{"class":63},[57,171,102],{"class":74},[57,173,105],{"class":174},"s4XuR",[57,176,177],{"class":74},": ",[57,179,180],{"class":67},"fullName",[57,182,22],{"class":74},[57,184,185],{"class":67},"role",[57,187,71],{"class":63},[57,189,190],{"class":78}," 'guest'",[57,192,113],{"class":74},[57,194,116],{"class":63},[57,196,119],{"class":74},[57,198,199,202],{"class":59,"line":97},[57,200,201],{"class":74},"fullName   ",[57,203,204],{"class":128},"\u002F\u002F 'Ada' (renamed)\n",[57,206,207,210],{"class":59,"line":122},[57,208,209],{"class":74},"role       ",[57,211,212],{"class":128},"\u002F\u002F 'guest' (default — user has no role)\n",[57,214,215],{"class":59,"line":132},[57,216,218],{"emptyLinePlaceholder":217},true,"\n",[57,220,222,224,226,229,231,234,236,238,241,244],{"class":59,"line":221},5,[57,223,64],{"class":63},[57,225,102],{"class":74},[57,227,228],{"class":67},"count",[57,230,71],{"class":63},[57,232,233],{"class":67}," 0",[57,235,113],{"class":74},[57,237,116],{"class":63},[57,239,240],{"class":74}," { count: ",[57,242,243],{"class":67},"null",[57,245,94],{"class":74},[57,247,249,252],{"class":59,"line":248},6,[57,250,251],{"class":74},"count      ",[57,253,254],{"class":128},"\u002F\u002F null default not applied (null is not undefined)\n",[15,256,257,258,261,262,265],{},"Rename with ",[54,259,260],{},"key: newName"," and combine with a default: ",[54,263,264],{},"{ key: newName = fallback }",". This is\nextremely common when adapting external data to local naming.",[10,267,269],{"id":268},"nested-destructuring","Nested destructuring",[15,271,272],{},"Patterns can mirror nested structure, reaching deep into objects in one statement.",[47,274,276],{"className":49,"code":275,"language":51,"meta":52,"style":52},"const config = { server: { host: 'localhost', port: 8080 } }\nconst { server: { host, port } } = config\nhost   \u002F\u002F 'localhost'\nport   \u002F\u002F 8080\n",[54,277,278,302,330,338],{"__ignoreMap":52},[57,279,280,282,285,287,290,293,296,299],{"class":59,"line":60},[57,281,64],{"class":63},[57,283,284],{"class":67}," config",[57,286,71],{"class":63},[57,288,289],{"class":74}," { server: { host: ",[57,291,292],{"class":78},"'localhost'",[57,294,295],{"class":74},", port: ",[57,297,298],{"class":67},"8080",[57,300,301],{"class":74}," } }\n",[57,303,304,306,308,311,314,317,319,322,325,327],{"class":59,"line":97},[57,305,64],{"class":63},[57,307,102],{"class":74},[57,309,310],{"class":174},"server",[57,312,313],{"class":74},": { ",[57,315,316],{"class":67},"host",[57,318,22],{"class":74},[57,320,321],{"class":67},"port",[57,323,324],{"class":74}," } } ",[57,326,116],{"class":63},[57,328,329],{"class":74}," config\n",[57,331,332,335],{"class":59,"line":122},[57,333,334],{"class":74},"host   ",[57,336,337],{"class":128},"\u002F\u002F 'localhost'\n",[57,339,340,343],{"class":59,"line":132},[57,341,342],{"class":74},"port   ",[57,344,345],{"class":128},"\u002F\u002F 8080\n",[15,347,348,349,351,352,355,356,358,359,361,362,365,366,368],{},"Be careful: ",[54,350,310],{}," itself is ",[19,353,354],{},"not"," bound here — only ",[54,357,316],{}," and ",[54,360,321],{},". And destructuring a\nmissing nested object throws, so guard with defaults: ",[54,363,364],{},"const { server: { port } = {} } = config","\nto avoid crashing when ",[54,367,310],{}," is absent.",[10,370,372],{"id":371},"computed-property-keys","Computed property keys",[15,374,375,376,379],{},"You can destructure a ",[19,377,378],{},"dynamic"," key using bracket syntax — useful when the property name is in\na variable.",[47,381,383],{"className":49,"code":382,"language":51,"meta":52,"style":52},"const key = 'age'\nconst { [key]: value } = user\nvalue   \u002F\u002F 36 destructured the property named by `key`\n",[54,384,385,397,413],{"__ignoreMap":52},[57,386,387,389,392,394],{"class":59,"line":60},[57,388,64],{"class":63},[57,390,391],{"class":67}," key",[57,393,71],{"class":63},[57,395,396],{"class":78}," 'age'\n",[57,398,399,401,404,407,409,411],{"class":59,"line":97},[57,400,64],{"class":63},[57,402,403],{"class":74}," { [key]: ",[57,405,406],{"class":67},"value",[57,408,113],{"class":74},[57,410,116],{"class":63},[57,412,119],{"class":74},[57,414,415,418],{"class":59,"line":122},[57,416,417],{"class":74},"value   ",[57,419,420],{"class":128},"\u002F\u002F 36 destructured the property named by `key`\n",[15,422,423,424,427,428,431,432,434],{},"The ",[54,425,426],{},"[key]:"," part says \"the property whose name is the value of ",[54,429,430],{},"key",",\" and ",[54,433,406],{}," is where it\nlands.",[10,436,438],{"id":437},"destructuring-function-parameters","Destructuring function parameters",[15,440,441,442,445],{},"A hugely popular pattern: destructure an ",[19,443,444],{},"options object"," right in the parameter list, with\ndefaults, so callers pass named arguments in any order.",[47,447,449],{"className":49,"code":448,"language":51,"meta":52,"style":52},"function fetchData({ url, method = 'GET', retries = 3 } = {}) {\n  \u002F\u002F ...\n}\nfetchData({ url: '\u002Fapi', retries: 5 })   \u002F\u002F named, order-independent\nfetchData()                               \u002F\u002F works — the `= {}` default prevents a throw\n",[54,450,451,493,498,503,526],{"__ignoreMap":52},[57,452,453,456,460,463,466,468,471,473,476,478,481,483,486,488,490],{"class":59,"line":60},[57,454,455],{"class":63},"function",[57,457,459],{"class":458},"sScJk"," fetchData",[57,461,462],{"class":74},"({ ",[57,464,465],{"class":174},"url",[57,467,22],{"class":74},[57,469,470],{"class":174},"method",[57,472,71],{"class":63},[57,474,475],{"class":78}," 'GET'",[57,477,22],{"class":74},[57,479,480],{"class":174},"retries",[57,482,71],{"class":63},[57,484,485],{"class":67}," 3",[57,487,113],{"class":74},[57,489,116],{"class":63},[57,491,492],{"class":74}," {}) {\n",[57,494,495],{"class":59,"line":97},[57,496,497],{"class":128},"  \u002F\u002F ...\n",[57,499,500],{"class":59,"line":122},[57,501,502],{"class":74},"}\n",[57,504,505,508,511,514,517,520,523],{"class":59,"line":132},[57,506,507],{"class":458},"fetchData",[57,509,510],{"class":74},"({ url: ",[57,512,513],{"class":78},"'\u002Fapi'",[57,515,516],{"class":74},", retries: ",[57,518,519],{"class":67},"5",[57,521,522],{"class":74}," })   ",[57,524,525],{"class":128},"\u002F\u002F named, order-independent\n",[57,527,528,530,533],{"class":59,"line":221},[57,529,507],{"class":458},[57,531,532],{"class":74},"()                               ",[57,534,535],{"class":128},"\u002F\u002F works — the `= {}` default prevents a throw\n",[15,537,538,539,542,543,545],{},"The trailing ",[54,540,541],{},"= {}"," is essential: without it, calling with no argument tries to destructure\n",[54,544,159],{}," and throws.",[10,547,549],{"id":548},"the-rest-pattern-in-objects","The rest pattern in objects",[15,551,552,553,556,557,561],{},"A ",[19,554,555],{},"rest element"," in destructuring collects the ",[558,559,560],"em",{},"remaining"," properties into a new object —\nperfect for \"extract a few fields, keep the rest.\"",[47,563,565],{"className":49,"code":564,"language":51,"meta":52,"style":52},"const { id, ...rest } = { id: 1, name: 'Ada', age: 36 }\nid     \u002F\u002F 1\nrest   \u002F\u002F { name: 'Ada', age: 36 } everything else\n",[54,566,567,604,612],{"__ignoreMap":52},[57,568,569,571,573,576,578,581,583,585,587,590,593,596,598,600,602],{"class":59,"line":60},[57,570,64],{"class":63},[57,572,102],{"class":74},[57,574,575],{"class":67},"id",[57,577,22],{"class":74},[57,579,580],{"class":63},"...",[57,582,29],{"class":67},[57,584,113],{"class":74},[57,586,116],{"class":63},[57,588,589],{"class":74}," { id: ",[57,591,592],{"class":67},"1",[57,594,595],{"class":74},", name: ",[57,597,79],{"class":78},[57,599,82],{"class":74},[57,601,85],{"class":67},[57,603,94],{"class":74},[57,605,606,609],{"class":59,"line":97},[57,607,608],{"class":74},"id     ",[57,610,611],{"class":128},"\u002F\u002F 1\n",[57,613,614,617],{"class":59,"line":122},[57,615,616],{"class":74},"rest   ",[57,618,619],{"class":128},"\u002F\u002F { name: 'Ada', age: 36 } everything else\n",[15,621,622,623,626,627,629,630,632],{},"This is the idiomatic way to ",[19,624,625],{},"omit"," a property immutably (here, removing ",[54,628,575],{},"), since ",[54,631,29],{},"\nis a new object without it.",[10,634,636],{"id":635},"object-spread","Object spread",[15,638,423,639,642],{},[19,640,641],{},"spread operator"," in object literals copies an object's enumerable own properties into a\nnew object — the basis of shallow copying and merging.",[47,644,646],{"className":49,"code":645,"language":51,"meta":52,"style":52},"const original = { a: 1, b: 2 }\nconst copy = { ...original }              \u002F\u002F shallow copy\nconst merged = { ...original, c: 3 }      \u002F\u002F add a property\nconst updated = { ...original, b: 20 }    \u002F\u002F override b\n",[54,647,648,670,689,714],{"__ignoreMap":52},[57,649,650,652,655,657,660,662,665,668],{"class":59,"line":60},[57,651,64],{"class":63},[57,653,654],{"class":67}," original",[57,656,71],{"class":63},[57,658,659],{"class":74}," { a: ",[57,661,592],{"class":67},[57,663,664],{"class":74},", b: ",[57,666,667],{"class":67},"2",[57,669,94],{"class":74},[57,671,672,674,677,679,681,683,686],{"class":59,"line":97},[57,673,64],{"class":63},[57,675,676],{"class":67}," copy",[57,678,71],{"class":63},[57,680,102],{"class":74},[57,682,580],{"class":63},[57,684,685],{"class":74},"original }              ",[57,687,688],{"class":128},"\u002F\u002F shallow copy\n",[57,690,691,693,696,698,700,702,705,708,711],{"class":59,"line":122},[57,692,64],{"class":63},[57,694,695],{"class":67}," merged",[57,697,71],{"class":63},[57,699,102],{"class":74},[57,701,580],{"class":63},[57,703,704],{"class":74},"original, c: ",[57,706,707],{"class":67},"3",[57,709,710],{"class":74}," }      ",[57,712,713],{"class":128},"\u002F\u002F add a property\n",[57,715,716,718,721,723,725,727,730,733,736],{"class":59,"line":132},[57,717,64],{"class":63},[57,719,720],{"class":67}," updated",[57,722,71],{"class":63},[57,724,102],{"class":74},[57,726,580],{"class":63},[57,728,729],{"class":74},"original, b: ",[57,731,732],{"class":67},"20",[57,734,735],{"class":74}," }    ",[57,737,738],{"class":128},"\u002F\u002F override b\n",[15,740,741,742,745,746,749],{},"On key conflicts, ",[19,743,744],{},"later sources win"," — that \"override order\" powers config\u002Fdefaults patterns:\n",[54,747,748],{},"{ ...defaults, ...userOptions }"," lets user options override defaults.",[10,751,753],{"id":752},"spread-vs-objectassign","Spread vs Object.assign",[15,755,756,757,760,761,764,765,768],{},"Both spread and ",[54,758,759],{},"Object.assign"," shallow-merge objects. Spread creates a fresh object; ",[54,762,763],{},"assign","\nmutates its first argument (unless you pass ",[54,766,767],{},"{}",").",[47,770,772],{"className":49,"code":771,"language":51,"meta":52,"style":52},"const merged1 = { ...a, ...b }              \u002F\u002F new object preferred\nconst merged2 = Object.assign({}, a, b)     \u002F\u002F same result\nconst mutated = Object.assign(a, b)         \u002F\u002F mutates `a`\n",[54,773,774,798,818],{"__ignoreMap":52},[57,775,776,778,781,783,785,787,790,792,795],{"class":59,"line":60},[57,777,64],{"class":63},[57,779,780],{"class":67}," merged1",[57,782,71],{"class":63},[57,784,102],{"class":74},[57,786,580],{"class":63},[57,788,789],{"class":74},"a, ",[57,791,580],{"class":63},[57,793,794],{"class":74},"b }              ",[57,796,797],{"class":128},"\u002F\u002F new object preferred\n",[57,799,800,802,805,807,810,812,815],{"class":59,"line":97},[57,801,64],{"class":63},[57,803,804],{"class":67}," merged2",[57,806,71],{"class":63},[57,808,809],{"class":74}," Object.",[57,811,763],{"class":458},[57,813,814],{"class":74},"({}, a, b)     ",[57,816,817],{"class":128},"\u002F\u002F same result\n",[57,819,820,822,825,827,829,831,834],{"class":59,"line":122},[57,821,64],{"class":63},[57,823,824],{"class":67}," mutated",[57,826,71],{"class":63},[57,828,809],{"class":74},[57,830,763],{"class":458},[57,832,833],{"class":74},"(a, b)         ",[57,835,836],{"class":128},"\u002F\u002F mutates `a`\n",[15,838,839,840,842],{},"Prefer spread for readability and to avoid accidental mutation. ",[54,841,759],{}," is still useful\nwhen you intentionally want to mutate a target or copy onto an existing object.",[10,844,846],{"id":845},"the-shallow-copy-pitfall","The shallow-copy pitfall",[15,848,849,850,852,853,856],{},"The single most important caveat: object spread and ",[54,851,759],{}," are ",[19,854,855],{},"shallow",". Nested\nobjects are shared by reference, not cloned.",[47,858,860],{"className":49,"code":859,"language":51,"meta":52,"style":52},"const state = { user: { name: 'Ada' } }\nconst copy = { ...state }\ncopy.user.name = 'Grace'\nstate.user.name   \u002F\u002F 'Grace' nested object was shared\n",[54,861,862,878,893,903],{"__ignoreMap":52},[57,863,864,866,869,871,874,876],{"class":59,"line":60},[57,865,64],{"class":63},[57,867,868],{"class":67}," state",[57,870,71],{"class":63},[57,872,873],{"class":74}," { user: { name: ",[57,875,79],{"class":78},[57,877,301],{"class":74},[57,879,880,882,884,886,888,890],{"class":59,"line":97},[57,881,64],{"class":63},[57,883,676],{"class":67},[57,885,71],{"class":63},[57,887,102],{"class":74},[57,889,580],{"class":63},[57,891,892],{"class":74},"state }\n",[57,894,895,898,900],{"class":59,"line":122},[57,896,897],{"class":74},"copy.user.name ",[57,899,116],{"class":63},[57,901,902],{"class":78}," 'Grace'\n",[57,904,905,908],{"class":59,"line":132},[57,906,907],{"class":74},"state.user.name   ",[57,909,910],{"class":128},"\u002F\u002F 'Grace' nested object was shared\n",[15,912,913],{},"To update nested data immutably, spread at each level you change:",[47,915,917],{"className":49,"code":916,"language":51,"meta":52,"style":52},"const updated = { ...state, user: { ...state.user, name: 'Grace' } }   \u002F\u002F new nested object\n",[54,918,919],{"__ignoreMap":52},[57,920,921,923,925,927,929,931,934,936,939,942,945],{"class":59,"line":60},[57,922,64],{"class":63},[57,924,720],{"class":67},[57,926,71],{"class":63},[57,928,102],{"class":74},[57,930,580],{"class":63},[57,932,933],{"class":74},"state, user: { ",[57,935,580],{"class":63},[57,937,938],{"class":74},"state.user, name: ",[57,940,941],{"class":78},"'Grace'",[57,943,944],{"class":74}," } }   ",[57,946,947],{"class":128},"\u002F\u002F new nested object\n",[15,949,950,951,160],{},"For arbitrarily deep clones of plain data, use ",[54,952,953],{},"structuredClone(state)",[10,955,957],{"id":956},"rest-parameters-in-functions","Rest parameters in functions",[15,959,960,961,963,964,967,968,160],{},"Beyond destructuring, ",[54,962,580],{}," in a function signature creates a ",[19,965,966],{},"rest parameter"," that gathers\nextra arguments into a real array — the modern replacement for ",[54,969,970],{},"arguments",[47,972,974],{"className":49,"code":973,"language":51,"meta":52,"style":52},"function sum(...nums) {\n  return nums.reduce((a, b) => a + b, 0)   \u002F\u002F nums is a true array\n}\nsum(1, 2, 3, 4)   \u002F\u002F 10\n",[54,975,976,994,1040,1044],{"__ignoreMap":52},[57,977,978,980,983,986,988,991],{"class":59,"line":60},[57,979,455],{"class":63},[57,981,982],{"class":458}," sum",[57,984,985],{"class":74},"(",[57,987,580],{"class":63},[57,989,990],{"class":174},"nums",[57,992,993],{"class":74},") {\n",[57,995,996,999,1002,1005,1008,1011,1013,1016,1019,1022,1025,1028,1031,1034,1037],{"class":59,"line":97},[57,997,998],{"class":63},"  return",[57,1000,1001],{"class":74}," nums.",[57,1003,1004],{"class":458},"reduce",[57,1006,1007],{"class":74},"((",[57,1009,1010],{"class":174},"a",[57,1012,22],{"class":74},[57,1014,1015],{"class":174},"b",[57,1017,1018],{"class":74},") ",[57,1020,1021],{"class":63},"=>",[57,1023,1024],{"class":74}," a ",[57,1026,1027],{"class":63},"+",[57,1029,1030],{"class":74}," b, ",[57,1032,1033],{"class":67},"0",[57,1035,1036],{"class":74},")   ",[57,1038,1039],{"class":128},"\u002F\u002F nums is a true array\n",[57,1041,1042],{"class":59,"line":122},[57,1043,502],{"class":74},[57,1045,1046,1049,1051,1053,1055,1057,1059,1061,1063,1066,1068],{"class":59,"line":132},[57,1047,1048],{"class":458},"sum",[57,1050,985],{"class":74},[57,1052,592],{"class":67},[57,1054,22],{"class":74},[57,1056,667],{"class":67},[57,1058,22],{"class":74},[57,1060,707],{"class":67},[57,1062,22],{"class":74},[57,1064,1065],{"class":67},"4",[57,1067,1036],{"class":74},[57,1069,1070],{"class":128},"\u002F\u002F 10\n",[15,1072,1073,1074,1077,1078,1081,1082,1084],{},"Same token, opposite jobs: rest ",[19,1075,1076],{},"collects"," (in a pattern\u002Fsignature), spread ",[19,1079,1080],{},"expands"," (in a\nliteral\u002Fcall). Position tells you which: ",[54,1083,580],{}," on the binding side is rest; on the value side\nit's spread.",[10,1086,1088],{"id":1087},"combining-everything","Combining everything",[15,1090,1091],{},"These features compose into expressive one-liners common in real code:",[47,1093,1095],{"className":49,"code":1094,"language":51,"meta":52,"style":52},"function updateUser(user, { ...changes }) {\n  return { ...user, ...changes, updatedAt: Date.now() }   \u002F\u002F immutable update\n}\n\nconst [first, ...others] = items          \u002F\u002F array rest\nconst { theme, ...settings } = preferences \u002F\u002F object rest\n",[54,1096,1097,1120,1145,1149,1153,1181],{"__ignoreMap":52},[57,1098,1099,1101,1104,1106,1109,1112,1114,1117],{"class":59,"line":60},[57,1100,455],{"class":63},[57,1102,1103],{"class":458}," updateUser",[57,1105,985],{"class":74},[57,1107,1108],{"class":174},"user",[57,1110,1111],{"class":74},", { ",[57,1113,580],{"class":63},[57,1115,1116],{"class":174},"changes",[57,1118,1119],{"class":74}," }) {\n",[57,1121,1122,1124,1126,1128,1131,1133,1136,1139,1142],{"class":59,"line":97},[57,1123,998],{"class":63},[57,1125,102],{"class":74},[57,1127,580],{"class":63},[57,1129,1130],{"class":74},"user, ",[57,1132,580],{"class":63},[57,1134,1135],{"class":74},"changes, updatedAt: Date.",[57,1137,1138],{"class":458},"now",[57,1140,1141],{"class":74},"() }   ",[57,1143,1144],{"class":128},"\u002F\u002F immutable update\n",[57,1146,1147],{"class":59,"line":122},[57,1148,502],{"class":74},[57,1150,1151],{"class":59,"line":132},[57,1152,218],{"emptyLinePlaceholder":217},[57,1154,1155,1157,1160,1163,1165,1167,1170,1173,1175,1178],{"class":59,"line":221},[57,1156,64],{"class":63},[57,1158,1159],{"class":74}," [",[57,1161,1162],{"class":67},"first",[57,1164,22],{"class":74},[57,1166,580],{"class":63},[57,1168,1169],{"class":67},"others",[57,1171,1172],{"class":74},"] ",[57,1174,116],{"class":63},[57,1176,1177],{"class":74}," items          ",[57,1179,1180],{"class":128},"\u002F\u002F array rest\n",[57,1182,1183,1185,1187,1190,1192,1194,1197,1199,1201,1204],{"class":59,"line":248},[57,1184,64],{"class":63},[57,1186,102],{"class":74},[57,1188,1189],{"class":67},"theme",[57,1191,22],{"class":74},[57,1193,580],{"class":63},[57,1195,1196],{"class":67},"settings",[57,1198,113],{"class":74},[57,1200,116],{"class":63},[57,1202,1203],{"class":74}," preferences ",[57,1205,1206],{"class":128},"\u002F\u002F object rest\n",[10,1208,1210],{"id":1209},"key-takeaways","Key takeaways",[1212,1213,1214,1228,1238,1248,1256,1265],"ul",{},[1215,1216,1217,1220,1221,1224,1225,1227],"li",{},[19,1218,1219],{},"Object destructuring"," matches by name; supports renaming (",[54,1222,1223],{},"key: alias","), defaults (for\n",[54,1226,159],{}," only), nested patterns, and computed keys.",[1215,1229,1230,1231,1234,1235,1237],{},"Destructuring ",[19,1232,1233],{},"parameters"," with a ",[54,1236,541],{}," default is the clean way to accept options\nobjects.",[1215,1239,423,1240,1243,1244,1247],{},[19,1241,1242],{},"rest pattern"," (",[54,1245,1246],{},"{ a, ...rest }",") collects remaining properties — great for omitting a\nfield immutably.",[1215,1249,1250,1252,1253,1255],{},[19,1251,636],{}," copies\u002Fmerges with \"last wins\" ordering; prefer it over ",[54,1254,759],{}," to\navoid mutation.",[1215,1257,1258,1259,1261,1262,160],{},"Spread is ",[19,1260,855],{}," — spread at each nested level you change, or use ",[54,1263,1264],{},"structuredClone",[1215,1266,1267,1270],{},[19,1268,1269],{},"Rest parameters"," gather extra arguments into a real array; rest collects, spread expands.",[15,1272,1273],{},"These three features are the connective tissue of modern JavaScript — fluency with them makes\ndata transformation, immutable updates, and flexible APIs feel effortless.",[1275,1276,1277],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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);}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}",{"title":52,"searchDepth":97,"depth":97,"links":1279},[1280,1281,1282,1283,1284,1285,1286,1287,1288,1289,1290,1291,1292],{"id":12,"depth":97,"text":13},{"id":37,"depth":97,"text":38},{"id":144,"depth":97,"text":145},{"id":268,"depth":97,"text":269},{"id":371,"depth":97,"text":372},{"id":437,"depth":97,"text":438},{"id":548,"depth":97,"text":549},{"id":635,"depth":97,"text":636},{"id":752,"depth":97,"text":753},{"id":845,"depth":97,"text":846},{"id":956,"depth":97,"text":957},{"id":1087,"depth":97,"text":1088},{"id":1209,"depth":97,"text":1210},"Master object destructuring, spread, and rest in modern JavaScript — renaming, defaults, nested patterns, merging objects, rest parameters, and the shallow-copy pitfall.","medium","md","JavaScript","javascript",{},"\u002Fblog\u002Fjavascript-destructuring-spread-rest","\u002Fjavascript\u002Fmodern\u002Fdestructuring-spread-rest",{"title":5,"description":1293},"blog\u002Fjavascript-destructuring-spread-rest","Destructuring, Spread & Rest","Modern JavaScript (ES6+)","modern","2026-06-18","a3MDcRtiuUqiQLbJGWTShI7jS1312y38ZZ1n_wHAY9E",1781808673080]