[{"data":1,"prerenderedAt":1305},["ShallowReactive",2],{"blog-\u002Fblog\u002Fjavascript-mutating-vs-nonmutating-arrays":3},{"id":4,"title":5,"body":6,"description":1290,"difficulty":1291,"extension":1292,"framework":1293,"frameworkSlug":1294,"meta":1295,"navigation":686,"order":95,"path":1296,"qaPath":1297,"seo":1298,"stem":1299,"subtopic":1300,"topic":1301,"topicSlug":1302,"updated":1303,"__hash__":1304},"blog\u002Fblog\u002Fjavascript-mutating-vs-nonmutating-arrays.md","Mutating vs Non-Mutating Array Methods in JavaScript — Immutability Done Right",{"type":7,"value":8,"toc":1278},"minimark",[9,14,36,39,43,46,138,141,145,152,279,296,379,383,391,487,500,504,523,636,647,651,654,883,886,890,901,955,962,966,979,1050,1060,1117,1121,1137,1185,1188,1192,1271,1274],[10,11,13],"h2",{"id":12},"why-mutation-matters","Why mutation matters",[15,16,17,18,22,23,27,28,31,32,35],"p",{},"One of the most common sources of subtle bugs in JavaScript is ",[19,20,21],"strong",{},"accidental mutation",".\nArrays are reference types: when you pass an array to a function or assign it to another\nvariable, both names point to the ",[24,25,26],"em",{},"same"," array. If one place mutates it, the change is\nvisible everywhere — often far from where you'd expect. Knowing exactly which array methods\n",[19,29,30],{},"mutate in place"," versus which ",[19,33,34],{},"return a new array"," is essential for writing predictable\ncode, and it's the foundation of immutable state in frameworks like React and Redux.",[15,37,38],{},"This guide draws the line clearly and shows the patterns for working immutably.",[10,40,42],{"id":41},"the-reference-sharing-trap","The reference-sharing trap",[15,44,45],{},"First, the core problem. Two variables can reference one array:",[47,48,53],"pre",{"className":49,"code":50,"language":51,"meta":52,"style":52},"language-js shiki shiki-themes github-light github-dark","const original = [1, 2, 3]\nconst alias = original      \u002F\u002F NOT a copy — same array\nalias.push(4)\noriginal                    \u002F\u002F [1, 2, 3, 4] original changed too\n","js","",[54,55,56,93,110,129],"code",{"__ignoreMap":52},[57,58,61,65,69,72,76,79,82,85,87,90],"span",{"class":59,"line":60},"line",1,[57,62,64],{"class":63},"szBVR","const",[57,66,68],{"class":67},"sj4cs"," original",[57,70,71],{"class":63}," =",[57,73,75],{"class":74},"sVt8B"," [",[57,77,78],{"class":67},"1",[57,80,81],{"class":74},", ",[57,83,84],{"class":67},"2",[57,86,81],{"class":74},[57,88,89],{"class":67},"3",[57,91,92],{"class":74},"]\n",[57,94,96,98,101,103,106],{"class":59,"line":95},2,[57,97,64],{"class":63},[57,99,100],{"class":67}," alias",[57,102,71],{"class":63},[57,104,105],{"class":74}," original      ",[57,107,109],{"class":108},"sJ8bj","\u002F\u002F NOT a copy — same array\n",[57,111,113,116,120,123,126],{"class":59,"line":112},3,[57,114,115],{"class":74},"alias.",[57,117,119],{"class":118},"sScJk","push",[57,121,122],{"class":74},"(",[57,124,125],{"class":67},"4",[57,127,128],{"class":74},")\n",[57,130,132,135],{"class":59,"line":131},4,[57,133,134],{"class":74},"original                    ",[57,136,137],{"class":108},"\u002F\u002F [1, 2, 3, 4] original changed too\n",[15,139,140],{},"This also bites function arguments: a function that mutates its array parameter silently\nchanges the caller's data. The fix is either to copy before mutating or to use non-mutating\nmethods that return new arrays.",[10,142,144],{"id":143},"the-mutating-methods","The mutating methods",[15,146,147,148,151],{},"These methods ",[19,149,150],{},"change the array in place"," and (usually) return something other than a fresh\narray. Memorize this list — it's the source of most mutation surprises:",[47,153,155],{"className":49,"code":154,"language":51,"meta":52,"style":52},"arr.push(x)      \u002F\u002F add to end, returns new length\narr.pop()        \u002F\u002F remove from end, returns the element\narr.shift()      \u002F\u002F remove from front, returns the element\narr.unshift(x)   \u002F\u002F add to front, returns new length\narr.splice(i, n) \u002F\u002F remove\u002Finsert at index, returns removed items\narr.sort(fn)     \u002F\u002F sorts IN PLACE\narr.reverse()    \u002F\u002F reverses IN PLACE\narr.fill(v)      \u002F\u002F overwrites a range in place\narr.copyWithin() \u002F\u002F copies a range in place\n",[54,156,157,170,183,196,209,223,237,251,265],{"__ignoreMap":52},[57,158,159,162,164,167],{"class":59,"line":60},[57,160,161],{"class":74},"arr.",[57,163,119],{"class":118},[57,165,166],{"class":74},"(x)      ",[57,168,169],{"class":108},"\u002F\u002F add to end, returns new length\n",[57,171,172,174,177,180],{"class":59,"line":95},[57,173,161],{"class":74},[57,175,176],{"class":118},"pop",[57,178,179],{"class":74},"()        ",[57,181,182],{"class":108},"\u002F\u002F remove from end, returns the element\n",[57,184,185,187,190,193],{"class":59,"line":112},[57,186,161],{"class":74},[57,188,189],{"class":118},"shift",[57,191,192],{"class":74},"()      ",[57,194,195],{"class":108},"\u002F\u002F remove from front, returns the element\n",[57,197,198,200,203,206],{"class":59,"line":131},[57,199,161],{"class":74},[57,201,202],{"class":118},"unshift",[57,204,205],{"class":74},"(x)   ",[57,207,208],{"class":108},"\u002F\u002F add to front, returns new length\n",[57,210,212,214,217,220],{"class":59,"line":211},5,[57,213,161],{"class":74},[57,215,216],{"class":118},"splice",[57,218,219],{"class":74},"(i, n) ",[57,221,222],{"class":108},"\u002F\u002F remove\u002Finsert at index, returns removed items\n",[57,224,226,228,231,234],{"class":59,"line":225},6,[57,227,161],{"class":74},[57,229,230],{"class":118},"sort",[57,232,233],{"class":74},"(fn)     ",[57,235,236],{"class":108},"\u002F\u002F sorts IN PLACE\n",[57,238,240,242,245,248],{"class":59,"line":239},7,[57,241,161],{"class":74},[57,243,244],{"class":118},"reverse",[57,246,247],{"class":74},"()    ",[57,249,250],{"class":108},"\u002F\u002F reverses IN PLACE\n",[57,252,254,256,259,262],{"class":59,"line":253},8,[57,255,161],{"class":74},[57,257,258],{"class":118},"fill",[57,260,261],{"class":74},"(v)      ",[57,263,264],{"class":108},"\u002F\u002F overwrites a range in place\n",[57,266,268,270,273,276],{"class":59,"line":267},9,[57,269,161],{"class":74},[57,271,272],{"class":118},"copyWithin",[57,274,275],{"class":74},"() ",[57,277,278],{"class":108},"\u002F\u002F copies a range in place\n",[15,280,281,282,286,287,291,292,295],{},"The two that catch people off guard are ",[19,283,284],{},[54,285,230],{}," and ",[19,288,289],{},[54,290,244],{}," — they look like they\nproduce a new ordering but actually mutate the original ",[24,293,294],{},"and"," return the same reference.",[47,297,299],{"className":49,"code":298,"language":51,"meta":52,"style":52},"const a = [3, 1, 2]\nconst b = a.sort((x, y) => x - y)\nb === a      \u002F\u002F true a is now sorted too, b is just the same array\n",[54,300,301,324,365],{"__ignoreMap":52},[57,302,303,305,308,310,312,314,316,318,320,322],{"class":59,"line":60},[57,304,64],{"class":63},[57,306,307],{"class":67}," a",[57,309,71],{"class":63},[57,311,75],{"class":74},[57,313,89],{"class":67},[57,315,81],{"class":74},[57,317,78],{"class":67},[57,319,81],{"class":74},[57,321,84],{"class":67},[57,323,92],{"class":74},[57,325,326,328,331,333,336,338,341,345,347,350,353,356,359,362],{"class":59,"line":95},[57,327,64],{"class":63},[57,329,330],{"class":67}," b",[57,332,71],{"class":63},[57,334,335],{"class":74}," a.",[57,337,230],{"class":118},[57,339,340],{"class":74},"((",[57,342,344],{"class":343},"s4XuR","x",[57,346,81],{"class":74},[57,348,349],{"class":343},"y",[57,351,352],{"class":74},") ",[57,354,355],{"class":63},"=>",[57,357,358],{"class":74}," x ",[57,360,361],{"class":63},"-",[57,363,364],{"class":74}," y)\n",[57,366,367,370,373,376],{"class":59,"line":112},[57,368,369],{"class":74},"b ",[57,371,372],{"class":63},"===",[57,374,375],{"class":74}," a      ",[57,377,378],{"class":108},"\u002F\u002F true a is now sorted too, b is just the same array\n",[10,380,382],{"id":381},"the-non-mutating-methods","The non-mutating methods",[15,384,147,385,286,388,390],{},[19,386,387],{},"leave the original untouched",[19,389,34],{}," (or a value). They\nare safe to use freely without worrying about side effects:",[47,392,394],{"className":49,"code":393,"language":51,"meta":52,"style":52},"arr.map(fn)        \u002F\u002F new transformed array\narr.filter(fn)     \u002F\u002F new filtered array\narr.slice(s, e)    \u002F\u002F new sub-array (a shallow copy)\narr.concat(other)  \u002F\u002F new combined array\narr.flat()         \u002F\u002F new flattened array\narr.flatMap(fn)    \u002F\u002F new mapped+flattened array\n[...arr]           \u002F\u002F spread — new shallow copy\n",[54,395,396,409,421,434,447,460,473],{"__ignoreMap":52},[57,397,398,400,403,406],{"class":59,"line":60},[57,399,161],{"class":74},[57,401,402],{"class":118},"map",[57,404,405],{"class":74},"(fn)        ",[57,407,408],{"class":108},"\u002F\u002F new transformed array\n",[57,410,411,413,416,418],{"class":59,"line":95},[57,412,161],{"class":74},[57,414,415],{"class":118},"filter",[57,417,233],{"class":74},[57,419,420],{"class":108},"\u002F\u002F new filtered array\n",[57,422,423,425,428,431],{"class":59,"line":112},[57,424,161],{"class":74},[57,426,427],{"class":118},"slice",[57,429,430],{"class":74},"(s, e)    ",[57,432,433],{"class":108},"\u002F\u002F new sub-array (a shallow copy)\n",[57,435,436,438,441,444],{"class":59,"line":131},[57,437,161],{"class":74},[57,439,440],{"class":118},"concat",[57,442,443],{"class":74},"(other)  ",[57,445,446],{"class":108},"\u002F\u002F new combined array\n",[57,448,449,451,454,457],{"class":59,"line":211},[57,450,161],{"class":74},[57,452,453],{"class":118},"flat",[57,455,456],{"class":74},"()         ",[57,458,459],{"class":108},"\u002F\u002F new flattened array\n",[57,461,462,464,467,470],{"class":59,"line":225},[57,463,161],{"class":74},[57,465,466],{"class":118},"flatMap",[57,468,469],{"class":74},"(fn)    ",[57,471,472],{"class":108},"\u002F\u002F new mapped+flattened array\n",[57,474,475,478,481,484],{"class":59,"line":239},[57,476,477],{"class":74},"[",[57,479,480],{"class":63},"...",[57,482,483],{"class":74},"arr]           ",[57,485,486],{"class":108},"\u002F\u002F spread — new shallow copy\n",[15,488,489,491,492,495,496,499],{},[54,490,427],{}," with no arguments (",[54,493,494],{},"arr.slice()",") and spread (",[54,497,498],{},"[...arr]",") are the two idiomatic ways\nto make a quick shallow copy of an array.",[10,501,503],{"id":502},"the-new-immutable-twins-es2023","The new immutable twins (ES2023)",[15,505,506,507,509,510,509,512,514,515,518,519,522],{},"Recognizing the danger of ",[54,508,230],{},"\u002F",[54,511,244],{},[54,513,216],{},", ES2023 added ",[19,516,517],{},"non-mutating\ncounterparts"," that return new arrays, plus a ",[54,520,521],{},"with"," method for immutable index replacement:",[47,524,526],{"className":49,"code":525,"language":51,"meta":52,"style":52},"const a = [3, 1, 2]\na.toSorted((x, y) => x - y)   \u002F\u002F new sorted array a unchanged\na.toReversed()                \u002F\u002F new reversed array\na.toSpliced(1, 1)             \u002F\u002F new array with item removed\na.with(0, 99)                 \u002F\u002F new array with index 0 replaced\n",[54,527,528,550,580,593,614],{"__ignoreMap":52},[57,529,530,532,534,536,538,540,542,544,546,548],{"class":59,"line":60},[57,531,64],{"class":63},[57,533,307],{"class":67},[57,535,71],{"class":63},[57,537,75],{"class":74},[57,539,89],{"class":67},[57,541,81],{"class":74},[57,543,78],{"class":67},[57,545,81],{"class":74},[57,547,84],{"class":67},[57,549,92],{"class":74},[57,551,552,555,558,560,562,564,566,568,570,572,574,577],{"class":59,"line":95},[57,553,554],{"class":74},"a.",[57,556,557],{"class":118},"toSorted",[57,559,340],{"class":74},[57,561,344],{"class":343},[57,563,81],{"class":74},[57,565,349],{"class":343},[57,567,352],{"class":74},[57,569,355],{"class":63},[57,571,358],{"class":74},[57,573,361],{"class":63},[57,575,576],{"class":74}," y)   ",[57,578,579],{"class":108},"\u002F\u002F new sorted array a unchanged\n",[57,581,582,584,587,590],{"class":59,"line":112},[57,583,554],{"class":74},[57,585,586],{"class":118},"toReversed",[57,588,589],{"class":74},"()                ",[57,591,592],{"class":108},"\u002F\u002F new reversed array\n",[57,594,595,597,600,602,604,606,608,611],{"class":59,"line":131},[57,596,554],{"class":74},[57,598,599],{"class":118},"toSpliced",[57,601,122],{"class":74},[57,603,78],{"class":67},[57,605,81],{"class":74},[57,607,78],{"class":67},[57,609,610],{"class":74},")             ",[57,612,613],{"class":108},"\u002F\u002F new array with item removed\n",[57,615,616,618,620,622,625,627,630,633],{"class":59,"line":211},[57,617,554],{"class":74},[57,619,521],{"class":118},[57,621,122],{"class":74},[57,623,624],{"class":67},"0",[57,626,81],{"class":74},[57,628,629],{"class":67},"99",[57,631,632],{"class":74},")                 ",[57,634,635],{"class":108},"\u002F\u002F new array with index 0 replaced\n",[15,637,638,639,642,643,646],{},"These replace verbose patterns like ",[54,640,641],{},"[...a].sort(...)"," and the old\n",[54,644,645],{},"[...a.slice(0, i), val, ...a.slice(i + 1)]"," dance. Prefer them wherever immutability matters.",[10,648,650],{"id":649},"immutable-update-patterns","Immutable update patterns",[15,652,653],{},"When you must \"change\" an array without mutating it, build a new one around the change:",[47,655,657],{"className":49,"code":656,"language":51,"meta":52,"style":52},"const arr = [1, 2, 3]\n\nconst added    = [...arr, 4]                          \u002F\u002F append\nconst prepended = [0, ...arr]                         \u002F\u002F prepend\nconst removed  = arr.filter(x => x !== 2)             \u002F\u002F remove by value\nconst removedAt = [...arr.slice(0, 1), ...arr.slice(2)] \u002F\u002F remove by index\nconst updated  = arr.map(x => x === 2 ? 20 : x)       \u002F\u002F replace by condition\nconst replaced = arr.with(1, 20)                      \u002F\u002F replace by index (ES2023)\n",[54,658,659,682,688,713,736,771,815,855],{"__ignoreMap":52},[57,660,661,663,666,668,670,672,674,676,678,680],{"class":59,"line":60},[57,662,64],{"class":63},[57,664,665],{"class":67}," arr",[57,667,71],{"class":63},[57,669,75],{"class":74},[57,671,78],{"class":67},[57,673,81],{"class":74},[57,675,84],{"class":67},[57,677,81],{"class":74},[57,679,89],{"class":67},[57,681,92],{"class":74},[57,683,684],{"class":59,"line":95},[57,685,687],{"emptyLinePlaceholder":686},true,"\n",[57,689,690,692,695,698,700,702,705,707,710],{"class":59,"line":112},[57,691,64],{"class":63},[57,693,694],{"class":67}," added",[57,696,697],{"class":63},"    =",[57,699,75],{"class":74},[57,701,480],{"class":63},[57,703,704],{"class":74},"arr, ",[57,706,125],{"class":67},[57,708,709],{"class":74},"]                          ",[57,711,712],{"class":108},"\u002F\u002F append\n",[57,714,715,717,720,722,724,726,728,730,733],{"class":59,"line":131},[57,716,64],{"class":63},[57,718,719],{"class":67}," prepended",[57,721,71],{"class":63},[57,723,75],{"class":74},[57,725,624],{"class":67},[57,727,81],{"class":74},[57,729,480],{"class":63},[57,731,732],{"class":74},"arr]                         ",[57,734,735],{"class":108},"\u002F\u002F prepend\n",[57,737,738,740,743,746,749,751,753,755,758,760,763,766,768],{"class":59,"line":211},[57,739,64],{"class":63},[57,741,742],{"class":67}," removed",[57,744,745],{"class":63},"  =",[57,747,748],{"class":74}," arr.",[57,750,415],{"class":118},[57,752,122],{"class":74},[57,754,344],{"class":343},[57,756,757],{"class":63}," =>",[57,759,358],{"class":74},[57,761,762],{"class":63},"!==",[57,764,765],{"class":67}," 2",[57,767,610],{"class":74},[57,769,770],{"class":108},"\u002F\u002F remove by value\n",[57,772,773,775,778,780,782,784,786,788,790,792,794,796,799,801,803,805,807,809,812],{"class":59,"line":225},[57,774,64],{"class":63},[57,776,777],{"class":67}," removedAt",[57,779,71],{"class":63},[57,781,75],{"class":74},[57,783,480],{"class":63},[57,785,161],{"class":74},[57,787,427],{"class":118},[57,789,122],{"class":74},[57,791,624],{"class":67},[57,793,81],{"class":74},[57,795,78],{"class":67},[57,797,798],{"class":74},"), ",[57,800,480],{"class":63},[57,802,161],{"class":74},[57,804,427],{"class":118},[57,806,122],{"class":74},[57,808,84],{"class":67},[57,810,811],{"class":74},")] ",[57,813,814],{"class":108},"\u002F\u002F remove by index\n",[57,816,817,819,822,824,826,828,830,832,834,836,838,840,843,846,849,852],{"class":59,"line":239},[57,818,64],{"class":63},[57,820,821],{"class":67}," updated",[57,823,745],{"class":63},[57,825,748],{"class":74},[57,827,402],{"class":118},[57,829,122],{"class":74},[57,831,344],{"class":343},[57,833,757],{"class":63},[57,835,358],{"class":74},[57,837,372],{"class":63},[57,839,765],{"class":67},[57,841,842],{"class":63}," ?",[57,844,845],{"class":67}," 20",[57,847,848],{"class":63}," :",[57,850,851],{"class":74}," x)       ",[57,853,854],{"class":108},"\u002F\u002F replace by condition\n",[57,856,857,859,862,864,866,868,870,872,874,877,880],{"class":59,"line":253},[57,858,64],{"class":63},[57,860,861],{"class":67}," replaced",[57,863,71],{"class":63},[57,865,748],{"class":74},[57,867,521],{"class":118},[57,869,122],{"class":74},[57,871,78],{"class":67},[57,873,81],{"class":74},[57,875,876],{"class":67},"20",[57,878,879],{"class":74},")                      ",[57,881,882],{"class":108},"\u002F\u002F replace by index (ES2023)\n",[15,884,885],{},"These patterns are the bread and butter of state management. Each produces a brand-new array,\nleaving the original intact so previous references remain stable.",[10,887,889],{"id":888},"why-immutability-helps-frameworks","Why immutability helps frameworks",[15,891,892,893,896,897,900],{},"React and similar libraries detect changes by ",[19,894,895],{},"reference comparison"," (",[54,898,899],{},"prevState === nextState","). If you mutate an array in place, the reference doesn't change, so the framework\ncan't tell anything happened and won't re-render.",[47,902,904],{"className":49,"code":903,"language":51,"meta":52,"style":52},"\u002F\u002F React won't re-render — same reference\nstate.items.push(newItem)\nsetState(state)\n\n\u002F\u002F new array reference signals a change\nsetState({ ...state, items: [...state.items, newItem] })\n",[54,905,906,911,921,929,933,938],{"__ignoreMap":52},[57,907,908],{"class":59,"line":60},[57,909,910],{"class":108},"\u002F\u002F React won't re-render — same reference\n",[57,912,913,916,918],{"class":59,"line":95},[57,914,915],{"class":74},"state.items.",[57,917,119],{"class":118},[57,919,920],{"class":74},"(newItem)\n",[57,922,923,926],{"class":59,"line":112},[57,924,925],{"class":118},"setState",[57,927,928],{"class":74},"(state)\n",[57,930,931],{"class":59,"line":131},[57,932,687],{"emptyLinePlaceholder":686},[57,934,935],{"class":59,"line":211},[57,936,937],{"class":108},"\u002F\u002F new array reference signals a change\n",[57,939,940,942,945,947,950,952],{"class":59,"line":225},[57,941,925],{"class":118},[57,943,944],{"class":74},"({ ",[57,946,480],{"class":63},[57,948,949],{"class":74},"state, items: [",[57,951,480],{"class":63},[57,953,954],{"class":74},"state.items, newItem] })\n",[15,956,957,958,961],{},"This is ",[24,959,960],{},"the"," reason immutable array methods matter so much in modern front-end work. Mutation\nbreaks change detection; new references enable it.",[10,963,965],{"id":964},"shallow-vs-deep-copies","Shallow vs deep copies",[15,967,968,969,971,972,974,975,978],{},"A critical caveat: spread, ",[54,970,427],{},", and ",[54,973,440],{}," all make ",[19,976,977],{},"shallow"," copies. The new array is\nindependent, but nested objects\u002Farrays inside it are still shared by reference.",[47,980,982],{"className":49,"code":981,"language":51,"meta":52,"style":52},"const original = [{ id: 1 }, { id: 2 }]\nconst copy = [...original]\ncopy[0].id = 99\noriginal[0].id   \u002F\u002F 99 inner object was shared\n",[54,983,984,1005,1021,1037],{"__ignoreMap":52},[57,985,986,988,990,992,995,997,1000,1002],{"class":59,"line":60},[57,987,64],{"class":63},[57,989,68],{"class":67},[57,991,71],{"class":63},[57,993,994],{"class":74}," [{ id: ",[57,996,78],{"class":67},[57,998,999],{"class":74}," }, { id: ",[57,1001,84],{"class":67},[57,1003,1004],{"class":74}," }]\n",[57,1006,1007,1009,1012,1014,1016,1018],{"class":59,"line":95},[57,1008,64],{"class":63},[57,1010,1011],{"class":67}," copy",[57,1013,71],{"class":63},[57,1015,75],{"class":74},[57,1017,480],{"class":63},[57,1019,1020],{"class":74},"original]\n",[57,1022,1023,1026,1028,1031,1034],{"class":59,"line":112},[57,1024,1025],{"class":74},"copy[",[57,1027,624],{"class":67},[57,1029,1030],{"class":74},"].id ",[57,1032,1033],{"class":63},"=",[57,1035,1036],{"class":67}," 99\n",[57,1038,1039,1042,1044,1047],{"class":59,"line":131},[57,1040,1041],{"class":74},"original[",[57,1043,624],{"class":67},[57,1045,1046],{"class":74},"].id   ",[57,1048,1049],{"class":108},"\u002F\u002F 99 inner object was shared\n",[15,1051,1052,1053,1055,1056,1059],{},"To update nested data immutably, copy the path you're changing (e.g.\n",[54,1054,402],{}," the array and spread the object you touch), or use ",[54,1057,1058],{},"structuredClone"," for a full deep\ncopy of plain data.",[47,1061,1063],{"className":49,"code":1062,"language":51,"meta":52,"style":52},"const updated = original.map(o => o.id === 1 ? { ...o, id: 99 } : o)  \u002F\u002F new objects\n",[54,1064,1065],{"__ignoreMap":52},[57,1066,1067,1069,1071,1073,1076,1078,1080,1083,1085,1088,1090,1093,1095,1098,1100,1103,1105,1108,1111,1114],{"class":59,"line":60},[57,1068,64],{"class":63},[57,1070,821],{"class":67},[57,1072,71],{"class":63},[57,1074,1075],{"class":74}," original.",[57,1077,402],{"class":118},[57,1079,122],{"class":74},[57,1081,1082],{"class":343},"o",[57,1084,757],{"class":63},[57,1086,1087],{"class":74}," o.id ",[57,1089,372],{"class":63},[57,1091,1092],{"class":67}," 1",[57,1094,842],{"class":63},[57,1096,1097],{"class":74}," { ",[57,1099,480],{"class":63},[57,1101,1102],{"class":74},"o, id: ",[57,1104,629],{"class":67},[57,1106,1107],{"class":74}," } ",[57,1109,1110],{"class":63},":",[57,1112,1113],{"class":74}," o)  ",[57,1115,1116],{"class":108},"\u002F\u002F new objects\n",[10,1118,1120],{"id":1119},"a-practical-rule-of-thumb","A practical rule of thumb",[15,1122,1123,1124,509,1126,509,1128,1130,1131,509,1134,1136],{},"When in doubt, treat arrays as immutable: prefer ",[54,1125,402],{},[54,1127,415],{},[54,1129,427],{},"\u002Fspread and the\n",[54,1132,1133],{},"to*",[54,1135,521],{}," methods, and reserve mutating methods for local arrays you fully own and never\nshare. If you do mutate, do it on a copy:",[47,1138,1140],{"className":49,"code":1139,"language":51,"meta":52,"style":52},"const sorted = [...arr].sort((a, b) => a - b)   \u002F\u002F original safe\n",[54,1141,1142],{"__ignoreMap":52},[57,1143,1144,1146,1149,1151,1153,1155,1158,1160,1162,1165,1167,1170,1172,1174,1177,1179,1182],{"class":59,"line":60},[57,1145,64],{"class":63},[57,1147,1148],{"class":67}," sorted",[57,1150,71],{"class":63},[57,1152,75],{"class":74},[57,1154,480],{"class":63},[57,1156,1157],{"class":74},"arr].",[57,1159,230],{"class":118},[57,1161,340],{"class":74},[57,1163,1164],{"class":343},"a",[57,1166,81],{"class":74},[57,1168,1169],{"class":343},"b",[57,1171,352],{"class":74},[57,1173,355],{"class":63},[57,1175,1176],{"class":74}," a ",[57,1178,361],{"class":63},[57,1180,1181],{"class":74}," b)   ",[57,1183,1184],{"class":108},"\u002F\u002F original safe\n",[15,1186,1187],{},"This single habit eliminates a large fraction of \"why did this value change?\" debugging\nsessions.",[10,1189,1191],{"id":1190},"key-takeaways","Key takeaways",[1193,1194,1195,1199,1230,1248,1260,1263],"ul",{},[1196,1197,1198],"li",{},"Arrays are references; assigning or passing one shares it, so in-place mutation leaks\neverywhere.",[1196,1200,1201,1204,1205,81,1207,81,1209,81,1211,81,1213,81,1215,81,1217,81,1219,1221,1222,1224,1225,509,1227,1229],{},[19,1202,1203],{},"Mutating:"," ",[54,1206,119],{},[54,1208,176],{},[54,1210,189],{},[54,1212,202],{},[54,1214,216],{},[54,1216,230],{},[54,1218,244],{},[54,1220,258],{},",\n",[54,1223,272],{}," — note ",[54,1226,230],{},[54,1228,244],{}," surprise people.",[1196,1231,1232,1204,1235,81,1237,81,1239,81,1241,81,1243,81,1245,1247],{},[19,1233,1234],{},"Non-mutating:",[54,1236,402],{},[54,1238,415],{},[54,1240,427],{},[54,1242,440],{},[54,1244,453],{},[54,1246,466],{},", spread — safe,\nreturn new arrays.",[1196,1249,1250,1251,81,1253,81,1255,971,1257,1259],{},"ES2023 adds immutable twins: ",[54,1252,557],{},[54,1254,586],{},[54,1256,599],{},[54,1258,521],{},".",[1196,1261,1262],{},"Frameworks rely on new references for change detection — mutation breaks re-rendering.",[1196,1264,1265,1266,1268,1269,1259],{},"Spread\u002Fslice are ",[19,1267,977],{},"; deep-update by copying the changed path or using\n",[54,1270,1058],{},[15,1272,1273],{},"Internalize which methods mutate and default to immutable patterns, and an entire category of\nhard-to-trace bugs simply disappears.",[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 .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}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}",{"title":52,"searchDepth":95,"depth":95,"links":1279},[1280,1281,1282,1283,1284,1285,1286,1287,1288,1289],{"id":12,"depth":95,"text":13},{"id":41,"depth":95,"text":42},{"id":143,"depth":95,"text":144},{"id":381,"depth":95,"text":382},{"id":502,"depth":95,"text":503},{"id":649,"depth":95,"text":650},{"id":888,"depth":95,"text":889},{"id":964,"depth":95,"text":965},{"id":1119,"depth":95,"text":1120},{"id":1190,"depth":95,"text":1191},"Understand which JavaScript array methods mutate and which return new arrays — push vs concat, sort vs toSorted, copying, and why immutability prevents whole classes of bugs.","medium","md","JavaScript","javascript",{},"\u002Fblog\u002Fjavascript-mutating-vs-nonmutating-arrays","\u002Fjavascript\u002Farrays\u002Fmutating-vs-nonmutating",{"title":5,"description":1290},"blog\u002Fjavascript-mutating-vs-nonmutating-arrays","Mutating vs Non-Mutating","Arrays & Iteration","arrays","2026-06-18","wjOGECDdd4NVzMkJxtqrJEb30WaJPGAscyq8Y9z9gHo",1781808673080]