[{"data":1,"prerenderedAt":1437},["ShallowReactive",2],{"blog-\u002Fblog\u002Fjavascript-array-destructuring-spread":3},{"id":4,"title":5,"body":6,"description":1422,"difficulty":1423,"extension":1424,"framework":1425,"frameworkSlug":1426,"meta":1427,"navigation":196,"order":239,"path":1428,"qaPath":1429,"seo":1430,"stem":1431,"subtopic":1432,"topic":1433,"topicSlug":1434,"updated":1435,"__hash__":1436},"blog\u002Fblog\u002Fjavascript-array-destructuring-spread.md","JavaScript Array Destructuring & Spread — Unpacking, Copying and Combining Arrays",{"type":7,"value":8,"toc":1407},"minimark",[9,14,41,45,56,125,132,136,151,307,325,329,340,448,459,463,477,667,678,682,693,774,785,789,795,872,878,882,897,965,972,976,983,1048,1055,1059,1066,1137,1147,1151,1154,1246,1256,1260,1266,1352,1356,1400,1403],[10,11,13],"h2",{"id":12},"two-sides-of-the-same-syntax","Two sides of the same syntax",[15,16,17,18,22,23,27,28,31,32,35,36,40],"p",{},"ES2015 introduced two features that transformed how we work with arrays: ",[19,20,21],"strong",{},"destructuring",",\nwhich unpacks values ",[24,25,26],"em",{},"out"," of an array into variables, and the ",[19,29,30],{},"spread operator",", which\nexpands an array ",[24,33,34],{},"into"," individual elements. They share the ",[37,38,39],"code",{},"..."," token for the rest\u002Fspread\nroles and together make array manipulation dramatically more concise. This guide covers both,\ntheir interaction, and the patterns and pitfalls that matter day to day.",[10,42,44],{"id":43},"array-destructuring-basics","Array destructuring basics",[15,46,47,48,51,52,55],{},"Destructuring unpacks values by ",[19,49,50],{},"position"," using a pattern on the left of ",[37,53,54],{},"=",".",[57,58,63],"pre",{"className":59,"code":60,"language":61,"meta":62,"style":62},"language-js shiki shiki-themes github-light github-dark","const [first, second] = [10, 20]\nfirst    \u002F\u002F 10\nsecond   \u002F\u002F 20 assigned by index, not by name\n","js","",[37,64,65,106,116],{"__ignoreMap":62},[66,67,70,74,78,82,85,88,91,93,95,98,100,103],"span",{"class":68,"line":69},"line",1,[66,71,73],{"class":72},"szBVR","const",[66,75,77],{"class":76},"sVt8B"," [",[66,79,81],{"class":80},"sj4cs","first",[66,83,84],{"class":76},", ",[66,86,87],{"class":80},"second",[66,89,90],{"class":76},"] ",[66,92,54],{"class":72},[66,94,77],{"class":76},[66,96,97],{"class":80},"10",[66,99,84],{"class":76},[66,101,102],{"class":80},"20",[66,104,105],{"class":76},"]\n",[66,107,109,112],{"class":68,"line":108},2,[66,110,111],{"class":76},"first    ",[66,113,115],{"class":114},"sJ8bj","\u002F\u002F 10\n",[66,117,119,122],{"class":68,"line":118},3,[66,120,121],{"class":76},"second   ",[66,123,124],{"class":114},"\u002F\u002F 20 assigned by index, not by name\n",[15,126,127,128,131],{},"It works on any ",[19,129,130],{},"iterable"," — arrays, strings, Sets, Maps, generators — not just arrays.\nThat generality is why it's so widely useful.",[10,133,135],{"id":134},"skipping-defaults-and-swapping","Skipping, defaults, and swapping",[15,137,138,139,142,143,146,147,150],{},"You can ",[19,140,141],{},"skip"," positions with empty commas, supply ",[19,144,145],{},"defaults"," for missing values, and\n",[19,148,149],{},"swap"," variables with no temp.",[57,152,154],{"className":59,"code":153,"language":61,"meta":62,"style":62},"const [, , third] = ['a', 'b', 'c']   \u002F\u002F skip first two -> 'c'\n\nconst [a = 1, b = 2] = [10]           \u002F\u002F a=10, b=2 (default for missing)\nconst [c = 5] = [null]                \u002F\u002F c=null default only for undefined\n\nlet x = 1, y = 2\n;[x, y] = [y, x]                       \u002F\u002F swap without a temp\n",[37,155,156,192,198,237,267,272,293],{"__ignoreMap":62},[66,157,158,160,163,166,168,170,172,176,178,181,183,186,189],{"class":68,"line":69},[66,159,73],{"class":72},[66,161,162],{"class":76}," [, , ",[66,164,165],{"class":80},"third",[66,167,90],{"class":76},[66,169,54],{"class":72},[66,171,77],{"class":76},[66,173,175],{"class":174},"sZZnC","'a'",[66,177,84],{"class":76},[66,179,180],{"class":174},"'b'",[66,182,84],{"class":76},[66,184,185],{"class":174},"'c'",[66,187,188],{"class":76},"]   ",[66,190,191],{"class":114},"\u002F\u002F skip first two -> 'c'\n",[66,193,194],{"class":68,"line":108},[66,195,197],{"emptyLinePlaceholder":196},true,"\n",[66,199,200,202,204,207,210,213,215,218,220,223,225,227,229,231,234],{"class":68,"line":118},[66,201,73],{"class":72},[66,203,77],{"class":76},[66,205,206],{"class":80},"a",[66,208,209],{"class":72}," =",[66,211,212],{"class":80}," 1",[66,214,84],{"class":76},[66,216,217],{"class":80},"b",[66,219,209],{"class":72},[66,221,222],{"class":80}," 2",[66,224,90],{"class":76},[66,226,54],{"class":72},[66,228,77],{"class":76},[66,230,97],{"class":80},[66,232,233],{"class":76},"]           ",[66,235,236],{"class":114},"\u002F\u002F a=10, b=2 (default for missing)\n",[66,238,240,242,244,247,249,252,254,256,258,261,264],{"class":68,"line":239},4,[66,241,73],{"class":72},[66,243,77],{"class":76},[66,245,246],{"class":80},"c",[66,248,209],{"class":72},[66,250,251],{"class":80}," 5",[66,253,90],{"class":76},[66,255,54],{"class":72},[66,257,77],{"class":76},[66,259,260],{"class":80},"null",[66,262,263],{"class":76},"]                ",[66,265,266],{"class":114},"\u002F\u002F c=null default only for undefined\n",[66,268,270],{"class":68,"line":269},5,[66,271,197],{"emptyLinePlaceholder":196},[66,273,275,278,281,283,285,288,290],{"class":68,"line":274},6,[66,276,277],{"class":72},"let",[66,279,280],{"class":76}," x ",[66,282,54],{"class":72},[66,284,212],{"class":80},[66,286,287],{"class":76},", y ",[66,289,54],{"class":72},[66,291,292],{"class":80}," 2\n",[66,294,296,299,301,304],{"class":68,"line":295},7,[66,297,298],{"class":76},";[x, y] ",[66,300,54],{"class":72},[66,302,303],{"class":76}," [y, x]                       ",[66,305,306],{"class":114},"\u002F\u002F swap without a temp\n",[15,308,309,310,313,314,317,318,320,321,324],{},"Two subtleties: defaults apply ",[19,311,312],{},"only"," when the value is ",[37,315,316],{},"undefined"," (not ",[37,319,260],{}," or other\nfalsy values), and the swap line should start with a semicolon if the previous statement\ndidn't end with one — otherwise ",[37,322,323],{},"["," is parsed as indexing.",[10,326,328],{"id":327},"nested-patterns-and-rest","Nested patterns and rest",[15,330,331,332,335,336,339],{},"Patterns can mirror nested structure, and a trailing ",[19,333,334],{},"rest element"," (",[37,337,338],{},"...name",") collects\nthe remaining values into a new array.",[57,341,343],{"className":59,"code":342,"language":61,"meta":62,"style":62},"const [[a, b], [c]] = [[1, 2], [3]]   \u002F\u002F nested -> a=1, b=2, c=3\n\nconst [head, ...tail] = [1, 2, 3, 4]\nhead   \u002F\u002F 1\ntail   \u002F\u002F [2, 3, 4] a real array\n",[37,344,345,389,393,432,440],{"__ignoreMap":62},[66,346,347,349,352,354,356,358,361,363,366,368,370,373,375,378,380,383,386],{"class":68,"line":69},[66,348,73],{"class":72},[66,350,351],{"class":76}," [[",[66,353,206],{"class":80},[66,355,84],{"class":76},[66,357,217],{"class":80},[66,359,360],{"class":76},"], [",[66,362,246],{"class":80},[66,364,365],{"class":76},"]] ",[66,367,54],{"class":72},[66,369,351],{"class":76},[66,371,372],{"class":80},"1",[66,374,84],{"class":76},[66,376,377],{"class":80},"2",[66,379,360],{"class":76},[66,381,382],{"class":80},"3",[66,384,385],{"class":76},"]]   ",[66,387,388],{"class":114},"\u002F\u002F nested -> a=1, b=2, c=3\n",[66,390,391],{"class":68,"line":108},[66,392,197],{"emptyLinePlaceholder":196},[66,394,395,397,399,402,404,406,409,411,413,415,417,419,421,423,425,427,430],{"class":68,"line":118},[66,396,73],{"class":72},[66,398,77],{"class":76},[66,400,401],{"class":80},"head",[66,403,84],{"class":76},[66,405,39],{"class":72},[66,407,408],{"class":80},"tail",[66,410,90],{"class":76},[66,412,54],{"class":72},[66,414,77],{"class":76},[66,416,372],{"class":80},[66,418,84],{"class":76},[66,420,377],{"class":80},[66,422,84],{"class":76},[66,424,382],{"class":80},[66,426,84],{"class":76},[66,428,429],{"class":80},"4",[66,431,105],{"class":76},[66,433,434,437],{"class":68,"line":239},[66,435,436],{"class":76},"head   ",[66,438,439],{"class":114},"\u002F\u002F 1\n",[66,441,442,445],{"class":68,"line":269},[66,443,444],{"class":76},"tail   ",[66,446,447],{"class":114},"\u002F\u002F [2, 3, 4] a real array\n",[15,449,450,451,454,455,458],{},"The rest element must be ",[19,452,453],{},"last"," — ",[37,456,457],{},"const [...rest, last]"," is a SyntaxError. It always\nproduces an array, even an empty one.",[10,460,462],{"id":461},"destructuring-in-parameters-and-loops","Destructuring in parameters and loops",[15,464,465,466,469,470,473,474,55],{},"Two of the most useful places for array destructuring are function parameters and ",[37,467,468],{},"for...of","\nloops — especially with ",[37,471,472],{},"entries()"," and ",[37,475,476],{},"Object.entries",[57,478,480],{"className":59,"code":479,"language":61,"meta":62,"style":62},"function distance([x1, y1], [x2, y2]) {\n  return Math.hypot(x2 - x1, y2 - y1)\n}\ndistance([0, 0], [3, 4])   \u002F\u002F 5\n\nfor (const [i, value] of arr.entries()) {\n  console.log(i, value)    \u002F\u002F index and value, cleanly\n}\nfor (const [key, val] of Object.entries(obj)) { \u002F* ... *\u002F }\n",[37,481,482,516,541,546,574,578,611,625,630],{"__ignoreMap":62},[66,483,484,487,491,494,498,500,503,505,508,510,513],{"class":68,"line":69},[66,485,486],{"class":72},"function",[66,488,490],{"class":489},"sScJk"," distance",[66,492,493],{"class":76},"([",[66,495,497],{"class":496},"s4XuR","x1",[66,499,84],{"class":76},[66,501,502],{"class":496},"y1",[66,504,360],{"class":76},[66,506,507],{"class":496},"x2",[66,509,84],{"class":76},[66,511,512],{"class":496},"y2",[66,514,515],{"class":76},"]) {\n",[66,517,518,521,524,527,530,533,536,538],{"class":68,"line":108},[66,519,520],{"class":72},"  return",[66,522,523],{"class":76}," Math.",[66,525,526],{"class":489},"hypot",[66,528,529],{"class":76},"(x2 ",[66,531,532],{"class":72},"-",[66,534,535],{"class":76}," x1, y2 ",[66,537,532],{"class":72},[66,539,540],{"class":76}," y1)\n",[66,542,543],{"class":68,"line":118},[66,544,545],{"class":76},"}\n",[66,547,548,551,553,556,558,560,562,564,566,568,571],{"class":68,"line":239},[66,549,550],{"class":489},"distance",[66,552,493],{"class":76},[66,554,555],{"class":80},"0",[66,557,84],{"class":76},[66,559,555],{"class":80},[66,561,360],{"class":76},[66,563,382],{"class":80},[66,565,84],{"class":76},[66,567,429],{"class":80},[66,569,570],{"class":76},"])   ",[66,572,573],{"class":114},"\u002F\u002F 5\n",[66,575,576],{"class":68,"line":269},[66,577,197],{"emptyLinePlaceholder":196},[66,579,580,583,585,587,589,592,594,597,599,602,605,608],{"class":68,"line":274},[66,581,582],{"class":72},"for",[66,584,335],{"class":76},[66,586,73],{"class":72},[66,588,77],{"class":76},[66,590,591],{"class":80},"i",[66,593,84],{"class":76},[66,595,596],{"class":80},"value",[66,598,90],{"class":76},[66,600,601],{"class":72},"of",[66,603,604],{"class":76}," arr.",[66,606,607],{"class":489},"entries",[66,609,610],{"class":76},"()) {\n",[66,612,613,616,619,622],{"class":68,"line":295},[66,614,615],{"class":76},"  console.",[66,617,618],{"class":489},"log",[66,620,621],{"class":76},"(i, value)    ",[66,623,624],{"class":114},"\u002F\u002F index and value, cleanly\n",[66,626,628],{"class":68,"line":627},8,[66,629,545],{"class":76},[66,631,633,635,637,639,641,644,646,649,651,653,656,658,661,664],{"class":68,"line":632},9,[66,634,582],{"class":72},[66,636,335],{"class":76},[66,638,73],{"class":72},[66,640,77],{"class":76},[66,642,643],{"class":80},"key",[66,645,84],{"class":76},[66,647,648],{"class":80},"val",[66,650,90],{"class":76},[66,652,601],{"class":72},[66,654,655],{"class":76}," Object.",[66,657,607],{"class":489},[66,659,660],{"class":76},"(obj)) { ",[66,662,663],{"class":114},"\u002F* ... *\u002F",[66,665,666],{"class":76}," }\n",[15,668,669,670,673,674,677],{},"This keeps loop bodies free of clumsy ",[37,671,672],{},"pair[0]","\u002F",[37,675,676],{},"pair[1]"," indexing.",[10,679,681],{"id":680},"the-spread-operator","The spread operator",[15,683,684,685,688,689,692],{},"Spread expands an iterable into individual elements — the inverse of a rest element. Its most\ncommon use is making a ",[19,686,687],{},"shallow copy"," or ",[19,690,691],{},"merging"," arrays.",[57,694,696],{"className":59,"code":695,"language":61,"meta":62,"style":62},"const copy = [...arr]                 \u002F\u002F shallow copy\nconst merged = [...a, ...b, ...c]     \u002F\u002F concatenate\nconst withExtras = [0, ...a, 99]      \u002F\u002F insert around elements\n",[37,697,698,717,746],{"__ignoreMap":62},[66,699,700,702,705,707,709,711,714],{"class":68,"line":69},[66,701,73],{"class":72},[66,703,704],{"class":80}," copy",[66,706,209],{"class":72},[66,708,77],{"class":76},[66,710,39],{"class":72},[66,712,713],{"class":76},"arr]                 ",[66,715,716],{"class":114},"\u002F\u002F shallow copy\n",[66,718,719,721,724,726,728,730,733,735,738,740,743],{"class":68,"line":108},[66,720,73],{"class":72},[66,722,723],{"class":80}," merged",[66,725,209],{"class":72},[66,727,77],{"class":76},[66,729,39],{"class":72},[66,731,732],{"class":76},"a, ",[66,734,39],{"class":72},[66,736,737],{"class":76},"b, ",[66,739,39],{"class":72},[66,741,742],{"class":76},"c]     ",[66,744,745],{"class":114},"\u002F\u002F concatenate\n",[66,747,748,750,753,755,757,759,761,763,765,768,771],{"class":68,"line":118},[66,749,73],{"class":72},[66,751,752],{"class":80}," withExtras",[66,754,209],{"class":72},[66,756,77],{"class":76},[66,758,555],{"class":80},[66,760,84],{"class":76},[66,762,39],{"class":72},[66,764,732],{"class":76},[66,766,767],{"class":80},"99",[66,769,770],{"class":76},"]      ",[66,772,773],{"class":114},"\u002F\u002F insert around elements\n",[15,775,776,777,780,781,784],{},"Element order follows source order, and you can freely interleave individual values with\nspreads. It reads more clearly than ",[37,778,779],{},"a.concat(b, c)",", though ",[37,782,783],{},"concat"," can be marginally faster\nfor very large arrays.",[10,786,788],{"id":787},"spread-vs-concat","Spread vs concat",[15,790,791,792,794],{},"Both merge arrays, but they have slightly different strengths. ",[37,793,783],{}," can append non-array\nvalues directly and is often faster on huge arrays; spread is more readable and supports\ninterleaving.",[57,796,798],{"className":59,"code":797,"language":61,"meta":62,"style":62},"[1, 2].concat(3, [4, 5])   \u002F\u002F [1, 2, 3, 4, 5] — mixes values and arrays\n[...[1, 2], 3, ...[4, 5]]  \u002F\u002F same result via spread\n",[37,799,800,835],{"__ignoreMap":62},[66,801,802,804,806,808,810,813,815,818,820,823,825,827,830,832],{"class":68,"line":69},[66,803,323],{"class":76},[66,805,372],{"class":80},[66,807,84],{"class":76},[66,809,377],{"class":80},[66,811,812],{"class":76},"].",[66,814,783],{"class":489},[66,816,817],{"class":76},"(",[66,819,382],{"class":80},[66,821,822],{"class":76},", [",[66,824,429],{"class":80},[66,826,84],{"class":76},[66,828,829],{"class":80},"5",[66,831,570],{"class":76},[66,833,834],{"class":114},"\u002F\u002F [1, 2, 3, 4, 5] — mixes values and arrays\n",[66,836,837,839,841,843,845,847,849,852,854,856,858,860,862,864,866,869],{"class":68,"line":108},[66,838,323],{"class":76},[66,840,39],{"class":72},[66,842,323],{"class":76},[66,844,372],{"class":80},[66,846,84],{"class":76},[66,848,377],{"class":80},[66,850,851],{"class":76},"], ",[66,853,382],{"class":80},[66,855,84],{"class":76},[66,857,39],{"class":72},[66,859,323],{"class":76},[66,861,429],{"class":80},[66,863,84],{"class":76},[66,865,829],{"class":80},[66,867,868],{"class":76},"]]  ",[66,870,871],{"class":114},"\u002F\u002F same result via spread\n",[15,873,874,875,877],{},"Use spread for clarity in normal code; reach for ",[37,876,783],{}," in performance-critical paths over\nlarge arrays.",[10,879,881],{"id":880},"spreading-iterables-and-the-emoji-trap","Spreading iterables and the emoji trap",[15,883,884,885,888,889,892,893,896],{},"Spread works on anything iterable: strings, Sets, Maps, ",[37,886,887],{},"arguments",", NodeLists, generators.\nFor splitting a string into characters, prefer spread over ",[37,890,891],{},"split('')"," because spread iterates\nby ",[19,894,895],{},"code point",", correctly handling emoji and other astral characters.",[57,898,900],{"className":59,"code":899,"language":61,"meta":62,"style":62},"[...'a😀b']        \u002F\u002F ['a', '😀', 'b'] ✅\n'a😀b'.split('')   \u002F\u002F ['a', '\\ud83d', '\\ude00', 'b'] ❌ broken surrogate pair\n[...new Set([1, 1, 2])]   \u002F\u002F [1, 2] — dedupe in one line\n",[37,901,902,917,937],{"__ignoreMap":62},[66,903,904,906,908,911,914],{"class":68,"line":69},[66,905,323],{"class":76},[66,907,39],{"class":72},[66,909,910],{"class":174},"'a😀b'",[66,912,913],{"class":76},"]        ",[66,915,916],{"class":114},"\u002F\u002F ['a', '😀', 'b'] ✅\n",[66,918,919,921,923,926,928,931,934],{"class":68,"line":108},[66,920,910],{"class":174},[66,922,55],{"class":76},[66,924,925],{"class":489},"split",[66,927,817],{"class":76},[66,929,930],{"class":174},"''",[66,932,933],{"class":76},")   ",[66,935,936],{"class":114},"\u002F\u002F ['a', '\\ud83d', '\\ude00', 'b'] ❌ broken surrogate pair\n",[66,938,939,941,944,947,949,951,953,955,957,959,962],{"class":68,"line":118},[66,940,323],{"class":76},[66,942,943],{"class":72},"...new",[66,945,946],{"class":489}," Set",[66,948,493],{"class":76},[66,950,372],{"class":80},[66,952,84],{"class":76},[66,954,372],{"class":80},[66,956,84],{"class":76},[66,958,377],{"class":80},[66,960,961],{"class":76},"])]   ",[66,963,964],{"class":114},"\u002F\u002F [1, 2] — dedupe in one line\n",[15,966,967,968,971],{},"Spreading a ",[37,969,970],{},"Set"," into an array is the idiomatic one-line way to deduplicate.",[10,973,975],{"id":974},"passing-arrays-as-arguments","Passing arrays as arguments",[15,977,978,979,982],{},"Spread replaces the old ",[37,980,981],{},"Function.prototype.apply"," pattern for passing an array as separate\narguments.",[57,984,986],{"className":59,"code":985,"language":61,"meta":62,"style":62},"const nums = [5, 1, 9]\nMath.max(...nums)    \u002F\u002F 9\nMath.max.apply(null, nums)   \u002F\u002F old, verbose equivalent\n",[37,987,988,1012,1030],{"__ignoreMap":62},[66,989,990,992,995,997,999,1001,1003,1005,1007,1010],{"class":68,"line":69},[66,991,73],{"class":72},[66,993,994],{"class":80}," nums",[66,996,209],{"class":72},[66,998,77],{"class":76},[66,1000,829],{"class":80},[66,1002,84],{"class":76},[66,1004,372],{"class":80},[66,1006,84],{"class":76},[66,1008,1009],{"class":80},"9",[66,1011,105],{"class":76},[66,1013,1014,1017,1020,1022,1024,1027],{"class":68,"line":108},[66,1015,1016],{"class":76},"Math.",[66,1018,1019],{"class":489},"max",[66,1021,817],{"class":76},[66,1023,39],{"class":72},[66,1025,1026],{"class":76},"nums)    ",[66,1028,1029],{"class":114},"\u002F\u002F 9\n",[66,1031,1032,1035,1038,1040,1042,1045],{"class":68,"line":118},[66,1033,1034],{"class":76},"Math.max.",[66,1036,1037],{"class":489},"apply",[66,1039,817],{"class":76},[66,1041,260],{"class":80},[66,1043,1044],{"class":76},", nums)   ",[66,1046,1047],{"class":114},"\u002F\u002F old, verbose equivalent\n",[15,1049,1050,1051,1054],{},"One caveat: spreading an extremely large array (100k+ elements) into a call can exceed\nargument-count limits — use a loop or ",[37,1052,1053],{},"reduce"," for those cases.",[10,1056,1058],{"id":1057},"the-shallow-copy-pitfall","The shallow-copy pitfall",[15,1060,1061,1062,1065],{},"The most common spread bug is assuming ",[37,1063,1064],{},"[...arr]"," deep-copies. It doesn't — nested\nobjects\u002Farrays remain shared.",[57,1067,1069],{"className":59,"code":1068,"language":61,"meta":62,"style":62},"const matrix = [[1], [2]]\nconst copy = [...matrix]\ncopy[0].push(99)\nmatrix[0]   \u002F\u002F [1, 99] inner array was shared\n",[37,1070,1071,1091,1106,1125],{"__ignoreMap":62},[66,1072,1073,1075,1078,1080,1082,1084,1086,1088],{"class":68,"line":69},[66,1074,73],{"class":72},[66,1076,1077],{"class":80}," matrix",[66,1079,209],{"class":72},[66,1081,351],{"class":76},[66,1083,372],{"class":80},[66,1085,360],{"class":76},[66,1087,377],{"class":80},[66,1089,1090],{"class":76},"]]\n",[66,1092,1093,1095,1097,1099,1101,1103],{"class":68,"line":108},[66,1094,73],{"class":72},[66,1096,704],{"class":80},[66,1098,209],{"class":72},[66,1100,77],{"class":76},[66,1102,39],{"class":72},[66,1104,1105],{"class":76},"matrix]\n",[66,1107,1108,1111,1113,1115,1118,1120,1122],{"class":68,"line":118},[66,1109,1110],{"class":76},"copy[",[66,1112,555],{"class":80},[66,1114,812],{"class":76},[66,1116,1117],{"class":489},"push",[66,1119,817],{"class":76},[66,1121,767],{"class":80},[66,1123,1124],{"class":76},")\n",[66,1126,1127,1130,1132,1134],{"class":68,"line":239},[66,1128,1129],{"class":76},"matrix[",[66,1131,555],{"class":80},[66,1133,188],{"class":76},[66,1135,1136],{"class":114},"\u002F\u002F [1, 99] inner array was shared\n",[15,1138,1139,1140,1143,1144,55],{},"For one level of nesting, map and spread each row (",[37,1141,1142],{},"matrix.map(row => [...row])","); for\narbitrary depth, use ",[37,1145,1146],{},"structuredClone(matrix)",[10,1148,1150],{"id":1149},"immutable-updates-with-spread","Immutable updates with spread",[15,1152,1153],{},"Spread is the backbone of immutable array updates — building a new array around the change\ninstead of mutating.",[57,1155,1157],{"className":59,"code":1156,"language":61,"meta":62,"style":62},"const added    = [...arr, item]                            \u002F\u002F append\nconst prepended = [item, ...arr]                           \u002F\u002F prepend\nconst removed  = [...arr.slice(0, i), ...arr.slice(i + 1)] \u002F\u002F remove at index\n",[37,1158,1159,1179,1199],{"__ignoreMap":62},[66,1160,1161,1163,1166,1169,1171,1173,1176],{"class":68,"line":69},[66,1162,73],{"class":72},[66,1164,1165],{"class":80}," added",[66,1167,1168],{"class":72},"    =",[66,1170,77],{"class":76},[66,1172,39],{"class":72},[66,1174,1175],{"class":76},"arr, item]                            ",[66,1177,1178],{"class":114},"\u002F\u002F append\n",[66,1180,1181,1183,1186,1188,1191,1193,1196],{"class":68,"line":108},[66,1182,73],{"class":72},[66,1184,1185],{"class":80}," prepended",[66,1187,209],{"class":72},[66,1189,1190],{"class":76}," [item, ",[66,1192,39],{"class":72},[66,1194,1195],{"class":76},"arr]                           ",[66,1197,1198],{"class":114},"\u002F\u002F prepend\n",[66,1200,1201,1203,1206,1209,1211,1213,1216,1219,1221,1223,1226,1228,1230,1232,1235,1238,1240,1243],{"class":68,"line":118},[66,1202,73],{"class":72},[66,1204,1205],{"class":80}," removed",[66,1207,1208],{"class":72},"  =",[66,1210,77],{"class":76},[66,1212,39],{"class":72},[66,1214,1215],{"class":76},"arr.",[66,1217,1218],{"class":489},"slice",[66,1220,817],{"class":76},[66,1222,555],{"class":80},[66,1224,1225],{"class":76},", i), ",[66,1227,39],{"class":72},[66,1229,1215],{"class":76},[66,1231,1218],{"class":489},[66,1233,1234],{"class":76},"(i ",[66,1236,1237],{"class":72},"+",[66,1239,212],{"class":80},[66,1241,1242],{"class":76},")] ",[66,1244,1245],{"class":114},"\u002F\u002F remove at index\n",[15,1247,1248,1249,473,1252,1255],{},"These are the standard patterns in React\u002FRedux state. The ES2023 ",[37,1250,1251],{},"with",[37,1253,1254],{},"toSpliced","\nmethods cover replace\u002Fremove even more concisely.",[10,1257,1259],{"id":1258},"a-word-on-infinite-iterables","A word on infinite iterables",[15,1261,1262,1263,1265],{},"Because destructuring pulls only as many values as the pattern needs, it works on infinite\niterables — but a ",[19,1264,334],{}," would try to drain them and hang forever.",[57,1267,1269],{"className":59,"code":1268,"language":61,"meta":62,"style":62},"function* naturals() { let n = 1; while (true) yield n++ }\nconst [a, b, c] = naturals()     \u002F\u002F 1, 2, 3 only three pulled\n\u002F\u002F const [...all] = naturals()   \u002F\u002F infinite loop — never do this\n",[37,1270,1271,1316,1344],{"__ignoreMap":62},[66,1272,1273,1276,1279,1282,1284,1287,1289,1291,1294,1297,1299,1302,1305,1308,1311,1314],{"class":68,"line":69},[66,1274,1275],{"class":72},"function*",[66,1277,1278],{"class":489}," naturals",[66,1280,1281],{"class":76},"() { ",[66,1283,277],{"class":72},[66,1285,1286],{"class":76}," n ",[66,1288,54],{"class":72},[66,1290,212],{"class":80},[66,1292,1293],{"class":76},"; ",[66,1295,1296],{"class":72},"while",[66,1298,335],{"class":76},[66,1300,1301],{"class":80},"true",[66,1303,1304],{"class":76},") ",[66,1306,1307],{"class":72},"yield",[66,1309,1310],{"class":76}," n",[66,1312,1313],{"class":72},"++",[66,1315,666],{"class":76},[66,1317,1318,1320,1322,1324,1326,1328,1330,1332,1334,1336,1338,1341],{"class":68,"line":108},[66,1319,73],{"class":72},[66,1321,77],{"class":76},[66,1323,206],{"class":80},[66,1325,84],{"class":76},[66,1327,217],{"class":80},[66,1329,84],{"class":76},[66,1331,246],{"class":80},[66,1333,90],{"class":76},[66,1335,54],{"class":72},[66,1337,1278],{"class":489},[66,1339,1340],{"class":76},"()     ",[66,1342,1343],{"class":114},"\u002F\u002F 1, 2, 3 only three pulled\n",[66,1345,1346,1349],{"class":68,"line":118},[66,1347,1348],{"class":114},"\u002F\u002F const [...all] = naturals()",[66,1350,1351],{"class":114},"   \u002F\u002F infinite loop — never do this\n",[10,1353,1355],{"id":1354},"key-takeaways","Key takeaways",[1357,1358,1359,1366,1374,1377,1387,1397],"ul",{},[1360,1361,1362,1363,1365],"li",{},"Array destructuring unpacks by position from any iterable; supports skipping, defaults\n(only for ",[37,1364,316],{},"), nested patterns, and a trailing rest element.",[1360,1367,1368,1369,1371,1372,55],{},"It shines in function parameters and ",[37,1370,468],{}," loops, especially with ",[37,1373,472],{},[1360,1375,1376],{},"Spread expands iterables — use it to shallow-copy, merge, interleave, and pass arrays as\narguments.",[1360,1378,1379,1380,1382,1383,1386],{},"Prefer spread over ",[37,1381,891],{}," for characters (handles emoji) and ",[37,1384,1385],{},"[...new Set(arr)]"," to\ndedupe.",[1360,1388,1389,1390,1393,1394,55],{},"Spread copies are ",[19,1391,1392],{},"shallow"," — deep-update by copying the changed path or ",[37,1395,1396],{},"structuredClone",[1360,1398,1399],{},"Destructuring is safe on infinite iterables, but never use a rest element on one.",[15,1401,1402],{},"Destructuring and spread together let you express unpacking, copying, and combining arrays in\na single readable line — fluency with them is a hallmark of idiomatic modern JavaScript.",[1404,1405,1406],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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 .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":62,"searchDepth":108,"depth":108,"links":1408},[1409,1410,1411,1412,1413,1414,1415,1416,1417,1418,1419,1420,1421],{"id":12,"depth":108,"text":13},{"id":43,"depth":108,"text":44},{"id":134,"depth":108,"text":135},{"id":327,"depth":108,"text":328},{"id":461,"depth":108,"text":462},{"id":680,"depth":108,"text":681},{"id":787,"depth":108,"text":788},{"id":880,"depth":108,"text":881},{"id":974,"depth":108,"text":975},{"id":1057,"depth":108,"text":1058},{"id":1149,"depth":108,"text":1150},{"id":1258,"depth":108,"text":1259},{"id":1354,"depth":108,"text":1355},"Master array destructuring and the spread operator in JavaScript — defaults, skipping, swapping, nested patterns, rest elements, copying and merging arrays, and consuming iterables.","medium","md","JavaScript","javascript",{},"\u002Fblog\u002Fjavascript-array-destructuring-spread","\u002Fjavascript\u002Farrays\u002Fdestructuring-spread",{"title":5,"description":1422},"blog\u002Fjavascript-array-destructuring-spread","Array Destructuring & Spread","Arrays & Iteration","arrays","2026-06-18","svd5jzWJyLv0JeD_Ge8dm3cQlTmUKT23zbvwJmE_Bj0",1781808673080]