[{"data":1,"prerenderedAt":4115},["ShallowReactive",2],{"page-\u002Fjs\u002F08-arrays-and-array-methods":3},{"id":4,"title":5,"body":6,"description":4108,"extension":4109,"meta":4110,"navigation":165,"path":4111,"seo":4112,"stem":4113,"__hash__":4114},"content\u002Fjs\u002F08-arrays-and-array-methods.md","JavaScript 08 — Array Internals: Sparse Holes, Iteration Methods & Mutation Semantics",{"type":7,"value":8,"toc":4094},"minimark",[9,14,23,673,677,1003,1011,1426,1433,1848,1852,2479,2483,2937,2941,3478,3482,3861,3865,3869,3982,4090],[10,11,13],"h1",{"id":12},"_08-array-internals-sparse-holes-iteration-methods-mutation-semantics","08 — Array Internals: Sparse Holes, Iteration Methods & Mutation Semantics",[15,16,18,19],"h2",{"id":17},"array-holes-empty-slots-vs-undefined","Array Holes: Empty Slots vs ",[20,21,22],"code",{},"undefined",[24,25,27],"code-wrapper",{"language":26},"javascript",[28,29,33],"pre",{"className":30,"code":31,"language":26,"meta":32,"style":32},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F ── Arrays with holes: empty slots (not the same as undefined) ──\nconst arr = [1, , 3];  \u002F\u002F hole at index 1 (comma with nothing between)\nconsole.log(arr.length);     \u002F\u002F 3\nconsole.log(arr[1]);         \u002F\u002F undefined (accessing a hole returns undefined)\nconsole.log(1 in arr);       \u002F\u002F false — index 1 has NO element (it's a hole)\nconsole.log(arr.hasOwnProperty(1));  \u002F\u002F false — no property at index 1\n\n\u002F\u002F ── Holes vs explicit undefined: behavior differs across methods ──\nconst withHole = [1, , 3];\nconst withUndefined = [1, undefined, 3];\n\n\u002F\u002F ── forEach: SKIPS holes, visits undefined ──\nwithHole.forEach(x => console.log(x));     \u002F\u002F 1, 3 (skips index 1!)\nwithUndefined.forEach(x => console.log(x));  \u002F\u002F 1, undefined, 3 (visits all)\n\n\u002F\u002F ── map: SKIPS holes (preserves them) ──\nconsole.log(withHole.map(x => x * 2));         \u002F\u002F [2, \u003Cempty>, 6] (hole preserved)\nconsole.log(withUndefined.map(x => x * 2));    \u002F\u002F [2, NaN, 6] (undefined * 2 = NaN)\n\n\u002F\u002F ── filter: skips holes ──\nconsole.log(withHole.filter(() => true));     \u002F\u002F [1, 3] (hole skipped, not in result)\nconsole.log(withUndefined.filter(() => true));  \u002F\u002F [1, undefined, 3] (undefined kept)\n\n\u002F\u002F ── spread and Array.from: convert holes to undefined ──\nconsole.log([...withHole]);  \u002F\u002F [1, undefined, 3] (holes → undefined)\nconsole.log(Array.from(withHole));  \u002F\u002F [1, undefined, 3]\n\n\u002F\u002F ── Creating arrays with Array(n) (all holes) ──\nconst empty = Array(3);  \u002F\u002F [empty × 3] — 3 holes (NOT 3 undefined values!)\nconsole.log(empty.map(x => x));  \u002F\u002F [empty × 3] — map skips holes, does nothing\nconsole.log([...Array(3)]);      \u002F\u002F [undefined, undefined, undefined] — spread fills with undefined\nconsole.log(Array(3).fill(0));   \u002F\u002F [0, 0, 0] — fill replaces holes with a value\n\n\u002F\u002F ── Array(n) vs Array.of(n) ──\nArray(3);     \u002F\u002F [empty × 3] — creates array with 3 holes (length 3)\nArray.of(3);  \u002F\u002F [3] — creates array with 3 as a single element\nArray(1, 2, 3);   \u002F\u002F [1, 2, 3] — multiple args → array of args\nArray.of(1, 2, 3); \u002F\u002F [1, 2, 3] — same with multiple args\n","",[20,34,35,44,77,99,117,138,160,167,173,194,219,224,230,259,283,288,294,328,358,363,369,396,418,423,429,448,467,472,478,501,525,549,581,586,592,606,624,648],{"__ignoreMap":32},[36,37,40],"span",{"class":38,"line":39},"line",1,[36,41,43],{"class":42},"sdCPZ","\u002F\u002F ── Arrays with holes: empty slots (not the same as undefined) ──\n",[36,45,47,51,55,58,62,65,68,71,74],{"class":38,"line":46},2,[36,48,50],{"class":49},"svdQ7","const",[36,52,54],{"class":53},"snvgF"," arr",[36,56,57],{"class":49}," =",[36,59,61],{"class":60},"ssxIu"," [",[36,63,64],{"class":53},"1",[36,66,67],{"class":60},", , ",[36,69,70],{"class":53},"3",[36,72,73],{"class":60},"];  ",[36,75,76],{"class":42},"\u002F\u002F hole at index 1 (comma with nothing between)\n",[36,78,80,83,87,90,93,96],{"class":38,"line":79},3,[36,81,82],{"class":60},"console.",[36,84,86],{"class":85},"sIsaT","log",[36,88,89],{"class":60},"(arr.",[36,91,92],{"class":53},"length",[36,94,95],{"class":60},");     ",[36,97,98],{"class":42},"\u002F\u002F 3\n",[36,100,102,104,106,109,111,114],{"class":38,"line":101},4,[36,103,82],{"class":60},[36,105,86],{"class":85},[36,107,108],{"class":60},"(arr[",[36,110,64],{"class":53},[36,112,113],{"class":60},"]);         ",[36,115,116],{"class":42},"\u002F\u002F undefined (accessing a hole returns undefined)\n",[36,118,120,122,124,127,129,132,135],{"class":38,"line":119},5,[36,121,82],{"class":60},[36,123,86],{"class":85},[36,125,126],{"class":60},"(",[36,128,64],{"class":53},[36,130,131],{"class":49}," in",[36,133,134],{"class":60}," arr);       ",[36,136,137],{"class":42},"\u002F\u002F false — index 1 has NO element (it's a hole)\n",[36,139,141,143,145,147,150,152,154,157],{"class":38,"line":140},6,[36,142,82],{"class":60},[36,144,86],{"class":85},[36,146,89],{"class":60},[36,148,149],{"class":85},"hasOwnProperty",[36,151,126],{"class":60},[36,153,64],{"class":53},[36,155,156],{"class":60},"));  ",[36,158,159],{"class":42},"\u002F\u002F false — no property at index 1\n",[36,161,163],{"class":38,"line":162},7,[36,164,166],{"emptyLinePlaceholder":165},true,"\n",[36,168,170],{"class":38,"line":169},8,[36,171,172],{"class":42},"\u002F\u002F ── Holes vs explicit undefined: behavior differs across methods ──\n",[36,174,176,178,181,183,185,187,189,191],{"class":38,"line":175},9,[36,177,50],{"class":49},[36,179,180],{"class":53}," withHole",[36,182,57],{"class":49},[36,184,61],{"class":60},[36,186,64],{"class":53},[36,188,67],{"class":60},[36,190,70],{"class":53},[36,192,193],{"class":60},"];\n",[36,195,197,199,202,204,206,208,211,213,215,217],{"class":38,"line":196},10,[36,198,50],{"class":49},[36,200,201],{"class":53}," withUndefined",[36,203,57],{"class":49},[36,205,61],{"class":60},[36,207,64],{"class":53},[36,209,210],{"class":60},", ",[36,212,22],{"class":53},[36,214,210],{"class":60},[36,216,70],{"class":53},[36,218,193],{"class":60},[36,220,222],{"class":38,"line":221},11,[36,223,166],{"emptyLinePlaceholder":165},[36,225,227],{"class":38,"line":226},12,[36,228,229],{"class":42},"\u002F\u002F ── forEach: SKIPS holes, visits undefined ──\n",[36,231,233,236,239,241,245,248,251,253,256],{"class":38,"line":232},13,[36,234,235],{"class":60},"withHole.",[36,237,238],{"class":85},"forEach",[36,240,126],{"class":60},[36,242,244],{"class":243},"sCrzJ","x",[36,246,247],{"class":49}," =>",[36,249,250],{"class":60}," console.",[36,252,86],{"class":85},[36,254,255],{"class":60},"(x));     ",[36,257,258],{"class":42},"\u002F\u002F 1, 3 (skips index 1!)\n",[36,260,262,265,267,269,271,273,275,277,280],{"class":38,"line":261},14,[36,263,264],{"class":60},"withUndefined.",[36,266,238],{"class":85},[36,268,126],{"class":60},[36,270,244],{"class":243},[36,272,247],{"class":49},[36,274,250],{"class":60},[36,276,86],{"class":85},[36,278,279],{"class":60},"(x));  ",[36,281,282],{"class":42},"\u002F\u002F 1, undefined, 3 (visits all)\n",[36,284,286],{"class":38,"line":285},15,[36,287,166],{"emptyLinePlaceholder":165},[36,289,291],{"class":38,"line":290},16,[36,292,293],{"class":42},"\u002F\u002F ── map: SKIPS holes (preserves them) ──\n",[36,295,297,299,301,304,307,309,311,313,316,319,322,325],{"class":38,"line":296},17,[36,298,82],{"class":60},[36,300,86],{"class":85},[36,302,303],{"class":60},"(withHole.",[36,305,306],{"class":85},"map",[36,308,126],{"class":60},[36,310,244],{"class":243},[36,312,247],{"class":49},[36,314,315],{"class":60}," x ",[36,317,318],{"class":49},"*",[36,320,321],{"class":53}," 2",[36,323,324],{"class":60},"));         ",[36,326,327],{"class":42},"\u002F\u002F [2, \u003Cempty>, 6] (hole preserved)\n",[36,329,331,333,335,338,340,342,344,346,348,350,352,355],{"class":38,"line":330},18,[36,332,82],{"class":60},[36,334,86],{"class":85},[36,336,337],{"class":60},"(withUndefined.",[36,339,306],{"class":85},[36,341,126],{"class":60},[36,343,244],{"class":243},[36,345,247],{"class":49},[36,347,315],{"class":60},[36,349,318],{"class":49},[36,351,321],{"class":53},[36,353,354],{"class":60},"));    ",[36,356,357],{"class":42},"\u002F\u002F [2, NaN, 6] (undefined * 2 = NaN)\n",[36,359,361],{"class":38,"line":360},19,[36,362,166],{"emptyLinePlaceholder":165},[36,364,366],{"class":38,"line":365},20,[36,367,368],{"class":42},"\u002F\u002F ── filter: skips holes ──\n",[36,370,372,374,376,378,381,384,387,390,393],{"class":38,"line":371},21,[36,373,82],{"class":60},[36,375,86],{"class":85},[36,377,303],{"class":60},[36,379,380],{"class":85},"filter",[36,382,383],{"class":60},"(() ",[36,385,386],{"class":49},"=>",[36,388,389],{"class":53}," true",[36,391,392],{"class":60},"));     ",[36,394,395],{"class":42},"\u002F\u002F [1, 3] (hole skipped, not in result)\n",[36,397,399,401,403,405,407,409,411,413,415],{"class":38,"line":398},22,[36,400,82],{"class":60},[36,402,86],{"class":85},[36,404,337],{"class":60},[36,406,380],{"class":85},[36,408,383],{"class":60},[36,410,386],{"class":49},[36,412,389],{"class":53},[36,414,156],{"class":60},[36,416,417],{"class":42},"\u002F\u002F [1, undefined, 3] (undefined kept)\n",[36,419,421],{"class":38,"line":420},23,[36,422,166],{"emptyLinePlaceholder":165},[36,424,426],{"class":38,"line":425},24,[36,427,428],{"class":42},"\u002F\u002F ── spread and Array.from: convert holes to undefined ──\n",[36,430,432,434,436,439,442,445],{"class":38,"line":431},25,[36,433,82],{"class":60},[36,435,86],{"class":85},[36,437,438],{"class":60},"([",[36,440,441],{"class":49},"...",[36,443,444],{"class":60},"withHole]);  ",[36,446,447],{"class":42},"\u002F\u002F [1, undefined, 3] (holes → undefined)\n",[36,449,451,453,455,458,461,464],{"class":38,"line":450},26,[36,452,82],{"class":60},[36,454,86],{"class":85},[36,456,457],{"class":60},"(Array.",[36,459,460],{"class":85},"from",[36,462,463],{"class":60},"(withHole));  ",[36,465,466],{"class":42},"\u002F\u002F [1, undefined, 3]\n",[36,468,470],{"class":38,"line":469},27,[36,471,166],{"emptyLinePlaceholder":165},[36,473,475],{"class":38,"line":474},28,[36,476,477],{"class":42},"\u002F\u002F ── Creating arrays with Array(n) (all holes) ──\n",[36,479,481,483,486,488,491,493,495,498],{"class":38,"line":480},29,[36,482,50],{"class":49},[36,484,485],{"class":53}," empty",[36,487,57],{"class":49},[36,489,490],{"class":85}," Array",[36,492,126],{"class":60},[36,494,70],{"class":53},[36,496,497],{"class":60},");  ",[36,499,500],{"class":42},"\u002F\u002F [empty × 3] — 3 holes (NOT 3 undefined values!)\n",[36,502,504,506,508,511,513,515,517,519,522],{"class":38,"line":503},30,[36,505,82],{"class":60},[36,507,86],{"class":85},[36,509,510],{"class":60},"(empty.",[36,512,306],{"class":85},[36,514,126],{"class":60},[36,516,244],{"class":243},[36,518,247],{"class":49},[36,520,521],{"class":60}," x));  ",[36,523,524],{"class":42},"\u002F\u002F [empty × 3] — map skips holes, does nothing\n",[36,526,528,530,532,534,536,539,541,543,546],{"class":38,"line":527},31,[36,529,82],{"class":60},[36,531,86],{"class":85},[36,533,438],{"class":60},[36,535,441],{"class":49},[36,537,538],{"class":85},"Array",[36,540,126],{"class":60},[36,542,70],{"class":53},[36,544,545],{"class":60},")]);      ",[36,547,548],{"class":42},"\u002F\u002F [undefined, undefined, undefined] — spread fills with undefined\n",[36,550,552,554,556,558,560,562,564,567,570,572,575,578],{"class":38,"line":551},32,[36,553,82],{"class":60},[36,555,86],{"class":85},[36,557,126],{"class":60},[36,559,538],{"class":85},[36,561,126],{"class":60},[36,563,70],{"class":53},[36,565,566],{"class":60},").",[36,568,569],{"class":85},"fill",[36,571,126],{"class":60},[36,573,574],{"class":53},"0",[36,576,577],{"class":60},"));   ",[36,579,580],{"class":42},"\u002F\u002F [0, 0, 0] — fill replaces holes with a value\n",[36,582,584],{"class":38,"line":583},33,[36,585,166],{"emptyLinePlaceholder":165},[36,587,589],{"class":38,"line":588},34,[36,590,591],{"class":42},"\u002F\u002F ── Array(n) vs Array.of(n) ──\n",[36,593,595,597,599,601,603],{"class":38,"line":594},35,[36,596,538],{"class":85},[36,598,126],{"class":60},[36,600,70],{"class":53},[36,602,95],{"class":60},[36,604,605],{"class":42},"\u002F\u002F [empty × 3] — creates array with 3 holes (length 3)\n",[36,607,609,612,615,617,619,621],{"class":38,"line":608},36,[36,610,611],{"class":60},"Array.",[36,613,614],{"class":85},"of",[36,616,126],{"class":60},[36,618,70],{"class":53},[36,620,497],{"class":60},[36,622,623],{"class":42},"\u002F\u002F [3] — creates array with 3 as a single element\n",[36,625,627,629,631,633,635,638,640,642,645],{"class":38,"line":626},37,[36,628,538],{"class":85},[36,630,126],{"class":60},[36,632,64],{"class":53},[36,634,210],{"class":60},[36,636,637],{"class":53},"2",[36,639,210],{"class":60},[36,641,70],{"class":53},[36,643,644],{"class":60},");   ",[36,646,647],{"class":42},"\u002F\u002F [1, 2, 3] — multiple args → array of args\n",[36,649,651,653,655,657,659,661,663,665,667,670],{"class":38,"line":650},38,[36,652,611],{"class":60},[36,654,614],{"class":85},[36,656,126],{"class":60},[36,658,64],{"class":53},[36,660,210],{"class":60},[36,662,637],{"class":53},[36,664,210],{"class":60},[36,666,70],{"class":53},[36,668,669],{"class":60},"); ",[36,671,672],{"class":42},"\u002F\u002F [1, 2, 3] — same with multiple args\n",[15,674,676],{"id":675},"mutation-vs-non-mutation-methods","Mutation vs Non-Mutation Methods",[24,678,679],{"language":26},[28,680,682],{"className":30,"code":681,"language":26,"meta":32,"style":32},"\u002F\u002F ── MUTATING methods (modify the original array) ──\nconst arr = [3, 1, 2];\n\narr.push(4);       \u002F\u002F [3, 1, 2, 4] — adds to end, returns new length\narr.pop();         \u002F\u002F returns 4, arr is [3, 1, 2] — removes from end\narr.unshift(0);    \u002F\u002F [0, 3, 1, 2] — adds to start (O(n) — shifts all elements!)\narr.shift();       \u002F\u002F returns 0, arr is [3, 1, 2] — removes from start (O(n))\narr.sort();        \u002F\u002F [1, 2, 3] — sorts IN PLACE (returns same array, modified!)\narr.reverse();    \u002F\u002F [3, 2, 1] — reverses IN PLACE\narr.splice(1, 1);  \u002F\u002F removes 1 element at index 1 — [3, 1] (mutates)\narr.fill(0);       \u002F\u002F [0, 0] — fills with 0 IN PLACE\n\n\u002F\u002F ── NON-MUTATING methods (return a new array) ──\nconst arr2 = [3, 1, 2];\n\narr2.map(x => x * 2);       \u002F\u002F [6, 2, 4] — new array, original unchanged\narr2.filter(x => x > 1);   \u002F\u002F [3, 2] — new array\narr2.slice(0, 2);          \u002F\u002F [3, 1] — new array (subarray)\narr2.concat([4, 5]);      \u002F\u002F [3, 1, 2, 4, 5] — new array\narr2.flatMap(x => [x, x]); \u002F\u002F [3, 3, 1, 1, 2, 2] — new array\n[...arr2].sort();          \u002F\u002F [1, 2, 3] — copy + sort (original unchanged)\n",[20,683,684,689,711,715,734,747,764,777,790,803,823,838,842,847,870,874,898,923,944,966,985],{"__ignoreMap":32},[36,685,686],{"class":38,"line":39},[36,687,688],{"class":42},"\u002F\u002F ── MUTATING methods (modify the original array) ──\n",[36,690,691,693,695,697,699,701,703,705,707,709],{"class":38,"line":46},[36,692,50],{"class":49},[36,694,54],{"class":53},[36,696,57],{"class":49},[36,698,61],{"class":60},[36,700,70],{"class":53},[36,702,210],{"class":60},[36,704,64],{"class":53},[36,706,210],{"class":60},[36,708,637],{"class":53},[36,710,193],{"class":60},[36,712,713],{"class":38,"line":79},[36,714,166],{"emptyLinePlaceholder":165},[36,716,717,720,723,725,728,731],{"class":38,"line":101},[36,718,719],{"class":60},"arr.",[36,721,722],{"class":85},"push",[36,724,126],{"class":60},[36,726,727],{"class":53},"4",[36,729,730],{"class":60},");       ",[36,732,733],{"class":42},"\u002F\u002F [3, 1, 2, 4] — adds to end, returns new length\n",[36,735,736,738,741,744],{"class":38,"line":119},[36,737,719],{"class":60},[36,739,740],{"class":85},"pop",[36,742,743],{"class":60},"();         ",[36,745,746],{"class":42},"\u002F\u002F returns 4, arr is [3, 1, 2] — removes from end\n",[36,748,749,751,754,756,758,761],{"class":38,"line":140},[36,750,719],{"class":60},[36,752,753],{"class":85},"unshift",[36,755,126],{"class":60},[36,757,574],{"class":53},[36,759,760],{"class":60},");    ",[36,762,763],{"class":42},"\u002F\u002F [0, 3, 1, 2] — adds to start (O(n) — shifts all elements!)\n",[36,765,766,768,771,774],{"class":38,"line":162},[36,767,719],{"class":60},[36,769,770],{"class":85},"shift",[36,772,773],{"class":60},"();       ",[36,775,776],{"class":42},"\u002F\u002F returns 0, arr is [3, 1, 2] — removes from start (O(n))\n",[36,778,779,781,784,787],{"class":38,"line":169},[36,780,719],{"class":60},[36,782,783],{"class":85},"sort",[36,785,786],{"class":60},"();        ",[36,788,789],{"class":42},"\u002F\u002F [1, 2, 3] — sorts IN PLACE (returns same array, modified!)\n",[36,791,792,794,797,800],{"class":38,"line":175},[36,793,719],{"class":60},[36,795,796],{"class":85},"reverse",[36,798,799],{"class":60},"();    ",[36,801,802],{"class":42},"\u002F\u002F [3, 2, 1] — reverses IN PLACE\n",[36,804,805,807,810,812,814,816,818,820],{"class":38,"line":196},[36,806,719],{"class":60},[36,808,809],{"class":85},"splice",[36,811,126],{"class":60},[36,813,64],{"class":53},[36,815,210],{"class":60},[36,817,64],{"class":53},[36,819,497],{"class":60},[36,821,822],{"class":42},"\u002F\u002F removes 1 element at index 1 — [3, 1] (mutates)\n",[36,824,825,827,829,831,833,835],{"class":38,"line":221},[36,826,719],{"class":60},[36,828,569],{"class":85},[36,830,126],{"class":60},[36,832,574],{"class":53},[36,834,730],{"class":60},[36,836,837],{"class":42},"\u002F\u002F [0, 0] — fills with 0 IN PLACE\n",[36,839,840],{"class":38,"line":226},[36,841,166],{"emptyLinePlaceholder":165},[36,843,844],{"class":38,"line":232},[36,845,846],{"class":42},"\u002F\u002F ── NON-MUTATING methods (return a new array) ──\n",[36,848,849,851,854,856,858,860,862,864,866,868],{"class":38,"line":261},[36,850,50],{"class":49},[36,852,853],{"class":53}," arr2",[36,855,57],{"class":49},[36,857,61],{"class":60},[36,859,70],{"class":53},[36,861,210],{"class":60},[36,863,64],{"class":53},[36,865,210],{"class":60},[36,867,637],{"class":53},[36,869,193],{"class":60},[36,871,872],{"class":38,"line":285},[36,873,166],{"emptyLinePlaceholder":165},[36,875,876,879,881,883,885,887,889,891,893,895],{"class":38,"line":290},[36,877,878],{"class":60},"arr2.",[36,880,306],{"class":85},[36,882,126],{"class":60},[36,884,244],{"class":243},[36,886,247],{"class":49},[36,888,315],{"class":60},[36,890,318],{"class":49},[36,892,321],{"class":53},[36,894,730],{"class":60},[36,896,897],{"class":42},"\u002F\u002F [6, 2, 4] — new array, original unchanged\n",[36,899,900,902,904,906,908,910,912,915,918,920],{"class":38,"line":296},[36,901,878],{"class":60},[36,903,380],{"class":85},[36,905,126],{"class":60},[36,907,244],{"class":243},[36,909,247],{"class":49},[36,911,315],{"class":60},[36,913,914],{"class":49},">",[36,916,917],{"class":53}," 1",[36,919,644],{"class":60},[36,921,922],{"class":42},"\u002F\u002F [3, 2] — new array\n",[36,924,925,927,930,932,934,936,938,941],{"class":38,"line":330},[36,926,878],{"class":60},[36,928,929],{"class":85},"slice",[36,931,126],{"class":60},[36,933,574],{"class":53},[36,935,210],{"class":60},[36,937,637],{"class":53},[36,939,940],{"class":60},");          ",[36,942,943],{"class":42},"\u002F\u002F [3, 1] — new array (subarray)\n",[36,945,946,948,951,953,955,957,960,963],{"class":38,"line":360},[36,947,878],{"class":60},[36,949,950],{"class":85},"concat",[36,952,438],{"class":60},[36,954,727],{"class":53},[36,956,210],{"class":60},[36,958,959],{"class":53},"5",[36,961,962],{"class":60},"]);      ",[36,964,965],{"class":42},"\u002F\u002F [3, 1, 2, 4, 5] — new array\n",[36,967,968,970,973,975,977,979,982],{"class":38,"line":365},[36,969,878],{"class":60},[36,971,972],{"class":85},"flatMap",[36,974,126],{"class":60},[36,976,244],{"class":243},[36,978,247],{"class":49},[36,980,981],{"class":60}," [x, x]); ",[36,983,984],{"class":42},"\u002F\u002F [3, 3, 1, 1, 2, 2] — new array\n",[36,986,987,990,992,995,997,1000],{"class":38,"line":371},[36,988,989],{"class":60},"[",[36,991,441],{"class":49},[36,993,994],{"class":60},"arr2].",[36,996,783],{"class":85},[36,998,999],{"class":60},"();          ",[36,1001,1002],{"class":42},"\u002F\u002F [1, 2, 3] — copy + sort (original unchanged)\n",[15,1004,1006,1007,1010],{"id":1005},"anti-pattern-sort-without-a-comparator","Anti-Pattern: ",[20,1008,1009],{},"sort()"," Without a Comparator",[24,1012,1013],{"language":26},[28,1014,1016],{"className":30,"code":1015,"language":26,"meta":32,"style":32},"\u002F\u002F ❌ NAIVE — .sort() without a comparator converts to STRING and sorts lexicographically\n[10, 2, 1, 21].sort();  \u002F\u002F [1, 10, 2, 21] — string sort! (\"10\" \u003C \"2\" because \"1\" \u003C \"2\")\n[100, 1, 2].sort();     \u002F\u002F [1, 100, 2] — string sort!\n[\"banana\", \"apple\", \"cherry\"].sort();  \u002F\u002F [\"apple\", \"banana\", \"cherry\"] — correct for strings\n\n\u002F\u002F ✅ CORRECT — numeric sort with comparator\n[10, 2, 1, 21].sort((a, b) => a - b);  \u002F\u002F [1, 2, 10, 21] — numeric ascending\n[10, 2, 1, 21].sort((a, b) => b - a);  \u002F\u002F [21, 10, 2, 1] — numeric descending\n\n\u002F\u002F ── Comparator semantics ──\n\u002F\u002F (a, b) => a - b  → ascending (return \u003C0: a first, >0: b first, 0: equal)\n\u002F\u002F (a, b) => b - a  → descending\n\u002F\u002F ⚠️ The comparator must return a NUMBER (not boolean). Returning true\u002Ffalse is a bug.\n\n\u002F\u002F ── Sort by multiple criteria ──\nconst people = [\n    { name: \"Alice\", age: 30 },\n    { name: \"Bob\", age: 30 },\n    { name: \"Charlie\", age: 25 },\n];\npeople.sort((a, b) => a.age - b.age || a.name.localeCompare(b.name));\n\u002F\u002F Sort by age ascending, then name ascending (for ties)\n\u002F\u002F `||` falls through to the next criterion when the first returns 0 (tie)\n\n\u002F\u002F ── ⚠️ .sort() MUTATES the original array ──\nconst original = [3, 1, 2];\nconst sorted = original.sort();  \u002F\u002F both `original` and `sorted` are [1, 2, 3]\nconsole.log(original === sorted);  \u002F\u002F true — same reference, original was modified!\n\u002F\u002F ✅ Non-mutating sort: const sorted = [...original].sort();\n",[20,1017,1018,1023,1054,1079,1106,1110,1115,1165,1210,1214,1219,1224,1229,1234,1238,1243,1255,1272,1285,1299,1303,1342,1347,1352,1356,1361,1384,1403,1421],{"__ignoreMap":32},[36,1019,1020],{"class":38,"line":39},[36,1021,1022],{"class":42},"\u002F\u002F ❌ NAIVE — .sort() without a comparator converts to STRING and sorts lexicographically\n",[36,1024,1025,1027,1030,1032,1034,1036,1038,1040,1043,1046,1048,1051],{"class":38,"line":46},[36,1026,989],{"class":60},[36,1028,1029],{"class":53},"10",[36,1031,210],{"class":60},[36,1033,637],{"class":53},[36,1035,210],{"class":60},[36,1037,64],{"class":53},[36,1039,210],{"class":60},[36,1041,1042],{"class":53},"21",[36,1044,1045],{"class":60},"].",[36,1047,783],{"class":85},[36,1049,1050],{"class":60},"();  ",[36,1052,1053],{"class":42},"\u002F\u002F [1, 10, 2, 21] — string sort! (\"10\" \u003C \"2\" because \"1\" \u003C \"2\")\n",[36,1055,1056,1058,1061,1063,1065,1067,1069,1071,1073,1076],{"class":38,"line":79},[36,1057,989],{"class":60},[36,1059,1060],{"class":53},"100",[36,1062,210],{"class":60},[36,1064,64],{"class":53},[36,1066,210],{"class":60},[36,1068,637],{"class":53},[36,1070,1045],{"class":60},[36,1072,783],{"class":85},[36,1074,1075],{"class":60},"();     ",[36,1077,1078],{"class":42},"\u002F\u002F [1, 100, 2] — string sort!\n",[36,1080,1081,1083,1087,1089,1092,1094,1097,1099,1101,1103],{"class":38,"line":101},[36,1082,989],{"class":60},[36,1084,1086],{"class":1085},"sJ6F3","\"banana\"",[36,1088,210],{"class":60},[36,1090,1091],{"class":1085},"\"apple\"",[36,1093,210],{"class":60},[36,1095,1096],{"class":1085},"\"cherry\"",[36,1098,1045],{"class":60},[36,1100,783],{"class":85},[36,1102,1050],{"class":60},[36,1104,1105],{"class":42},"\u002F\u002F [\"apple\", \"banana\", \"cherry\"] — correct for strings\n",[36,1107,1108],{"class":38,"line":119},[36,1109,166],{"emptyLinePlaceholder":165},[36,1111,1112],{"class":38,"line":140},[36,1113,1114],{"class":42},"\u002F\u002F ✅ CORRECT — numeric sort with comparator\n",[36,1116,1117,1119,1121,1123,1125,1127,1129,1131,1133,1135,1137,1140,1143,1145,1148,1151,1153,1156,1159,1162],{"class":38,"line":162},[36,1118,989],{"class":60},[36,1120,1029],{"class":53},[36,1122,210],{"class":60},[36,1124,637],{"class":53},[36,1126,210],{"class":60},[36,1128,64],{"class":53},[36,1130,210],{"class":60},[36,1132,1042],{"class":53},[36,1134,1045],{"class":60},[36,1136,783],{"class":85},[36,1138,1139],{"class":60},"((",[36,1141,1142],{"class":243},"a",[36,1144,210],{"class":60},[36,1146,1147],{"class":243},"b",[36,1149,1150],{"class":60},") ",[36,1152,386],{"class":49},[36,1154,1155],{"class":60}," a ",[36,1157,1158],{"class":49},"-",[36,1160,1161],{"class":60}," b);  ",[36,1163,1164],{"class":42},"\u002F\u002F [1, 2, 10, 21] — numeric ascending\n",[36,1166,1167,1169,1171,1173,1175,1177,1179,1181,1183,1185,1187,1189,1191,1193,1195,1197,1199,1202,1204,1207],{"class":38,"line":169},[36,1168,989],{"class":60},[36,1170,1029],{"class":53},[36,1172,210],{"class":60},[36,1174,637],{"class":53},[36,1176,210],{"class":60},[36,1178,64],{"class":53},[36,1180,210],{"class":60},[36,1182,1042],{"class":53},[36,1184,1045],{"class":60},[36,1186,783],{"class":85},[36,1188,1139],{"class":60},[36,1190,1142],{"class":243},[36,1192,210],{"class":60},[36,1194,1147],{"class":243},[36,1196,1150],{"class":60},[36,1198,386],{"class":49},[36,1200,1201],{"class":60}," b ",[36,1203,1158],{"class":49},[36,1205,1206],{"class":60}," a);  ",[36,1208,1209],{"class":42},"\u002F\u002F [21, 10, 2, 1] — numeric descending\n",[36,1211,1212],{"class":38,"line":175},[36,1213,166],{"emptyLinePlaceholder":165},[36,1215,1216],{"class":38,"line":196},[36,1217,1218],{"class":42},"\u002F\u002F ── Comparator semantics ──\n",[36,1220,1221],{"class":38,"line":221},[36,1222,1223],{"class":42},"\u002F\u002F (a, b) => a - b  → ascending (return \u003C0: a first, >0: b first, 0: equal)\n",[36,1225,1226],{"class":38,"line":226},[36,1227,1228],{"class":42},"\u002F\u002F (a, b) => b - a  → descending\n",[36,1230,1231],{"class":38,"line":232},[36,1232,1233],{"class":42},"\u002F\u002F ⚠️ The comparator must return a NUMBER (not boolean). Returning true\u002Ffalse is a bug.\n",[36,1235,1236],{"class":38,"line":261},[36,1237,166],{"emptyLinePlaceholder":165},[36,1239,1240],{"class":38,"line":285},[36,1241,1242],{"class":42},"\u002F\u002F ── Sort by multiple criteria ──\n",[36,1244,1245,1247,1250,1252],{"class":38,"line":290},[36,1246,50],{"class":49},[36,1248,1249],{"class":53}," people",[36,1251,57],{"class":49},[36,1253,1254],{"class":60}," [\n",[36,1256,1257,1260,1263,1266,1269],{"class":38,"line":296},[36,1258,1259],{"class":60},"    { name: ",[36,1261,1262],{"class":1085},"\"Alice\"",[36,1264,1265],{"class":60},", age: ",[36,1267,1268],{"class":53},"30",[36,1270,1271],{"class":60}," },\n",[36,1273,1274,1276,1279,1281,1283],{"class":38,"line":330},[36,1275,1259],{"class":60},[36,1277,1278],{"class":1085},"\"Bob\"",[36,1280,1265],{"class":60},[36,1282,1268],{"class":53},[36,1284,1271],{"class":60},[36,1286,1287,1289,1292,1294,1297],{"class":38,"line":360},[36,1288,1259],{"class":60},[36,1290,1291],{"class":1085},"\"Charlie\"",[36,1293,1265],{"class":60},[36,1295,1296],{"class":53},"25",[36,1298,1271],{"class":60},[36,1300,1301],{"class":38,"line":365},[36,1302,193],{"class":60},[36,1304,1305,1308,1310,1312,1314,1316,1318,1320,1322,1325,1327,1330,1333,1336,1339],{"class":38,"line":371},[36,1306,1307],{"class":60},"people.",[36,1309,783],{"class":85},[36,1311,1139],{"class":60},[36,1313,1142],{"class":243},[36,1315,210],{"class":60},[36,1317,1147],{"class":243},[36,1319,1150],{"class":60},[36,1321,386],{"class":49},[36,1323,1324],{"class":60}," a.age ",[36,1326,1158],{"class":49},[36,1328,1329],{"class":60}," b.age ",[36,1331,1332],{"class":49},"||",[36,1334,1335],{"class":60}," a.name.",[36,1337,1338],{"class":85},"localeCompare",[36,1340,1341],{"class":60},"(b.name));\n",[36,1343,1344],{"class":38,"line":398},[36,1345,1346],{"class":42},"\u002F\u002F Sort by age ascending, then name ascending (for ties)\n",[36,1348,1349],{"class":38,"line":420},[36,1350,1351],{"class":42},"\u002F\u002F `||` falls through to the next criterion when the first returns 0 (tie)\n",[36,1353,1354],{"class":38,"line":425},[36,1355,166],{"emptyLinePlaceholder":165},[36,1357,1358],{"class":38,"line":431},[36,1359,1360],{"class":42},"\u002F\u002F ── ⚠️ .sort() MUTATES the original array ──\n",[36,1362,1363,1365,1368,1370,1372,1374,1376,1378,1380,1382],{"class":38,"line":450},[36,1364,50],{"class":49},[36,1366,1367],{"class":53}," original",[36,1369,57],{"class":49},[36,1371,61],{"class":60},[36,1373,70],{"class":53},[36,1375,210],{"class":60},[36,1377,64],{"class":53},[36,1379,210],{"class":60},[36,1381,637],{"class":53},[36,1383,193],{"class":60},[36,1385,1386,1388,1391,1393,1396,1398,1400],{"class":38,"line":469},[36,1387,50],{"class":49},[36,1389,1390],{"class":53}," sorted",[36,1392,57],{"class":49},[36,1394,1395],{"class":60}," original.",[36,1397,783],{"class":85},[36,1399,1050],{"class":60},[36,1401,1402],{"class":42},"\u002F\u002F both `original` and `sorted` are [1, 2, 3]\n",[36,1404,1405,1407,1409,1412,1415,1418],{"class":38,"line":474},[36,1406,82],{"class":60},[36,1408,86],{"class":85},[36,1410,1411],{"class":60},"(original ",[36,1413,1414],{"class":49},"===",[36,1416,1417],{"class":60}," sorted);  ",[36,1419,1420],{"class":42},"\u002F\u002F true — same reference, original was modified!\n",[36,1422,1423],{"class":38,"line":480},[36,1424,1425],{"class":42},"\u002F\u002F ✅ Non-mutating sort: const sorted = [...original].sort();\n",[15,1427,1429,1432],{"id":1428},"reduce-the-fold-pattern",[20,1430,1431],{},"reduce",": The Fold Pattern",[24,1434,1435],{"language":26},[28,1436,1438],{"className":30,"code":1437,"language":26,"meta":32,"style":32},"\u002F\u002F ── reduce: fold left (processes left-to-right) ──\n\u002F\u002F Signature: arr.reduce((accumulator, current, index, array) => newAccumulator, initialValue)\n\n\u002F\u002F ── Sum ──\nconst sum = [1, 2, 3, 4].reduce((acc, cur) => acc + cur, 0);  \u002F\u002F 10\n\u002F\u002F Step: 0+1=1, 1+2=3, 3+3=6, 6+4=10\n\n\u002F\u002F ── Product ──\nconst product = [1, 2, 3, 4].reduce((acc, cur) => acc * cur, 1);  \u002F\u002F 24\n\n\u002F\u002F ── Group by (object accumulator) ──\nconst people = [\n    { role: \"admin\", name: \"Alice\" },\n    { role: \"user\", name: \"Bob\" },\n    { role: \"admin\", name: \"Charlie\" },\n];\nconst grouped = people.reduce((acc, person) => {\n    (acc[person.role] ??= []).push(person.name);  \u002F\u002F ??= creates array if not exists\n    return acc;\n}, {});\n\u002F\u002F { admin: [\"Alice\", \"Charlie\"], user: [\"Bob\"] }\n\n\u002F\u002F ── reduceRight: fold right (processes right-to-left) ──\n\u002F\u002F Useful for building nested structures from inside-out\nconst piped = [double, addOne, square].reduceRight((acc, fn) => fn(acc), 5);\n\u002F\u002F Right-to-left: square(5)=25 → addOne(25)=26 → double(26)=52\n\n\u002F\u002F ── ⚠️ reduce on empty array without initial value throws ──\n[].reduce((acc, cur) => acc + cur);  \u002F\u002F TypeError: Reduce of empty array with no initial value\n[].reduce((acc, cur) => acc + cur, 0);  \u002F\u002F 0 — safe with initial value\n\u002F\u002F ALWAYS provide an initial value to avoid the empty array error and for clarity.\n",[20,1439,1440,1445,1450,1454,1459,1518,1523,1527,1532,1586,1590,1595,1605,1620,1633,1645,1649,1679,1698,1706,1711,1716,1720,1725,1730,1769,1774,1778,1783,1812,1843],{"__ignoreMap":32},[36,1441,1442],{"class":38,"line":39},[36,1443,1444],{"class":42},"\u002F\u002F ── reduce: fold left (processes left-to-right) ──\n",[36,1446,1447],{"class":38,"line":46},[36,1448,1449],{"class":42},"\u002F\u002F Signature: arr.reduce((accumulator, current, index, array) => newAccumulator, initialValue)\n",[36,1451,1452],{"class":38,"line":79},[36,1453,166],{"emptyLinePlaceholder":165},[36,1455,1456],{"class":38,"line":101},[36,1457,1458],{"class":42},"\u002F\u002F ── Sum ──\n",[36,1460,1461,1463,1466,1468,1470,1472,1474,1476,1478,1480,1482,1484,1486,1488,1490,1493,1495,1498,1500,1502,1505,1508,1511,1513,1515],{"class":38,"line":119},[36,1462,50],{"class":49},[36,1464,1465],{"class":53}," sum",[36,1467,57],{"class":49},[36,1469,61],{"class":60},[36,1471,64],{"class":53},[36,1473,210],{"class":60},[36,1475,637],{"class":53},[36,1477,210],{"class":60},[36,1479,70],{"class":53},[36,1481,210],{"class":60},[36,1483,727],{"class":53},[36,1485,1045],{"class":60},[36,1487,1431],{"class":85},[36,1489,1139],{"class":60},[36,1491,1492],{"class":243},"acc",[36,1494,210],{"class":60},[36,1496,1497],{"class":243},"cur",[36,1499,1150],{"class":60},[36,1501,386],{"class":49},[36,1503,1504],{"class":60}," acc ",[36,1506,1507],{"class":49},"+",[36,1509,1510],{"class":60}," cur, ",[36,1512,574],{"class":53},[36,1514,497],{"class":60},[36,1516,1517],{"class":42},"\u002F\u002F 10\n",[36,1519,1520],{"class":38,"line":140},[36,1521,1522],{"class":42},"\u002F\u002F Step: 0+1=1, 1+2=3, 3+3=6, 6+4=10\n",[36,1524,1525],{"class":38,"line":162},[36,1526,166],{"emptyLinePlaceholder":165},[36,1528,1529],{"class":38,"line":169},[36,1530,1531],{"class":42},"\u002F\u002F ── Product ──\n",[36,1533,1534,1536,1539,1541,1543,1545,1547,1549,1551,1553,1555,1557,1559,1561,1563,1565,1567,1569,1571,1573,1575,1577,1579,1581,1583],{"class":38,"line":175},[36,1535,50],{"class":49},[36,1537,1538],{"class":53}," product",[36,1540,57],{"class":49},[36,1542,61],{"class":60},[36,1544,64],{"class":53},[36,1546,210],{"class":60},[36,1548,637],{"class":53},[36,1550,210],{"class":60},[36,1552,70],{"class":53},[36,1554,210],{"class":60},[36,1556,727],{"class":53},[36,1558,1045],{"class":60},[36,1560,1431],{"class":85},[36,1562,1139],{"class":60},[36,1564,1492],{"class":243},[36,1566,210],{"class":60},[36,1568,1497],{"class":243},[36,1570,1150],{"class":60},[36,1572,386],{"class":49},[36,1574,1504],{"class":60},[36,1576,318],{"class":49},[36,1578,1510],{"class":60},[36,1580,64],{"class":53},[36,1582,497],{"class":60},[36,1584,1585],{"class":42},"\u002F\u002F 24\n",[36,1587,1588],{"class":38,"line":196},[36,1589,166],{"emptyLinePlaceholder":165},[36,1591,1592],{"class":38,"line":221},[36,1593,1594],{"class":42},"\u002F\u002F ── Group by (object accumulator) ──\n",[36,1596,1597,1599,1601,1603],{"class":38,"line":226},[36,1598,50],{"class":49},[36,1600,1249],{"class":53},[36,1602,57],{"class":49},[36,1604,1254],{"class":60},[36,1606,1607,1610,1613,1616,1618],{"class":38,"line":232},[36,1608,1609],{"class":60},"    { role: ",[36,1611,1612],{"class":1085},"\"admin\"",[36,1614,1615],{"class":60},", name: ",[36,1617,1262],{"class":1085},[36,1619,1271],{"class":60},[36,1621,1622,1624,1627,1629,1631],{"class":38,"line":261},[36,1623,1609],{"class":60},[36,1625,1626],{"class":1085},"\"user\"",[36,1628,1615],{"class":60},[36,1630,1278],{"class":1085},[36,1632,1271],{"class":60},[36,1634,1635,1637,1639,1641,1643],{"class":38,"line":285},[36,1636,1609],{"class":60},[36,1638,1612],{"class":1085},[36,1640,1615],{"class":60},[36,1642,1291],{"class":1085},[36,1644,1271],{"class":60},[36,1646,1647],{"class":38,"line":290},[36,1648,193],{"class":60},[36,1650,1651,1653,1656,1658,1661,1663,1665,1667,1669,1672,1674,1676],{"class":38,"line":296},[36,1652,50],{"class":49},[36,1654,1655],{"class":53}," grouped",[36,1657,57],{"class":49},[36,1659,1660],{"class":60}," people.",[36,1662,1431],{"class":85},[36,1664,1139],{"class":60},[36,1666,1492],{"class":243},[36,1668,210],{"class":60},[36,1670,1671],{"class":243},"person",[36,1673,1150],{"class":60},[36,1675,386],{"class":49},[36,1677,1678],{"class":60}," {\n",[36,1680,1681,1684,1687,1690,1692,1695],{"class":38,"line":330},[36,1682,1683],{"class":60},"    (acc[person.role] ",[36,1685,1686],{"class":49},"??=",[36,1688,1689],{"class":60}," []).",[36,1691,722],{"class":85},[36,1693,1694],{"class":60},"(person.name);  ",[36,1696,1697],{"class":42},"\u002F\u002F ??= creates array if not exists\n",[36,1699,1700,1703],{"class":38,"line":360},[36,1701,1702],{"class":49},"    return",[36,1704,1705],{"class":60}," acc;\n",[36,1707,1708],{"class":38,"line":365},[36,1709,1710],{"class":60},"}, {});\n",[36,1712,1713],{"class":38,"line":371},[36,1714,1715],{"class":42},"\u002F\u002F { admin: [\"Alice\", \"Charlie\"], user: [\"Bob\"] }\n",[36,1717,1718],{"class":38,"line":398},[36,1719,166],{"emptyLinePlaceholder":165},[36,1721,1722],{"class":38,"line":420},[36,1723,1724],{"class":42},"\u002F\u002F ── reduceRight: fold right (processes right-to-left) ──\n",[36,1726,1727],{"class":38,"line":425},[36,1728,1729],{"class":42},"\u002F\u002F Useful for building nested structures from inside-out\n",[36,1731,1732,1734,1737,1739,1742,1745,1747,1749,1751,1754,1756,1758,1761,1764,1766],{"class":38,"line":431},[36,1733,50],{"class":49},[36,1735,1736],{"class":53}," piped",[36,1738,57],{"class":49},[36,1740,1741],{"class":60}," [double, addOne, square].",[36,1743,1744],{"class":85},"reduceRight",[36,1746,1139],{"class":60},[36,1748,1492],{"class":243},[36,1750,210],{"class":60},[36,1752,1753],{"class":243},"fn",[36,1755,1150],{"class":60},[36,1757,386],{"class":49},[36,1759,1760],{"class":85}," fn",[36,1762,1763],{"class":60},"(acc), ",[36,1765,959],{"class":53},[36,1767,1768],{"class":60},");\n",[36,1770,1771],{"class":38,"line":450},[36,1772,1773],{"class":42},"\u002F\u002F Right-to-left: square(5)=25 → addOne(25)=26 → double(26)=52\n",[36,1775,1776],{"class":38,"line":469},[36,1777,166],{"emptyLinePlaceholder":165},[36,1779,1780],{"class":38,"line":474},[36,1781,1782],{"class":42},"\u002F\u002F ── ⚠️ reduce on empty array without initial value throws ──\n",[36,1784,1785,1788,1790,1792,1794,1796,1798,1800,1802,1804,1806,1809],{"class":38,"line":480},[36,1786,1787],{"class":60},"[].",[36,1789,1431],{"class":85},[36,1791,1139],{"class":60},[36,1793,1492],{"class":243},[36,1795,210],{"class":60},[36,1797,1497],{"class":243},[36,1799,1150],{"class":60},[36,1801,386],{"class":49},[36,1803,1504],{"class":60},[36,1805,1507],{"class":49},[36,1807,1808],{"class":60}," cur);  ",[36,1810,1811],{"class":42},"\u002F\u002F TypeError: Reduce of empty array with no initial value\n",[36,1813,1814,1816,1818,1820,1822,1824,1826,1828,1830,1832,1834,1836,1838,1840],{"class":38,"line":503},[36,1815,1787],{"class":60},[36,1817,1431],{"class":85},[36,1819,1139],{"class":60},[36,1821,1492],{"class":243},[36,1823,210],{"class":60},[36,1825,1497],{"class":243},[36,1827,1150],{"class":60},[36,1829,386],{"class":49},[36,1831,1504],{"class":60},[36,1833,1507],{"class":49},[36,1835,1510],{"class":60},[36,1837,574],{"class":53},[36,1839,497],{"class":60},[36,1841,1842],{"class":42},"\u002F\u002F 0 — safe with initial value\n",[36,1844,1845],{"class":38,"line":527},[36,1846,1847],{"class":42},"\u002F\u002F ALWAYS provide an initial value to avoid the empty array error and for clarity.\n",[15,1849,1851],{"id":1850},"production-pattern-pipeline-composition","Production Pattern: Pipeline Composition",[24,1853,1854],{"language":26},[28,1855,1857],{"className":30,"code":1856,"language":26,"meta":32,"style":32},"\u002F\u002F ── Function pipeline using reduce ──\nconst pipe = (...fns) => (input) => fns.reduce((acc, fn) => fn(acc), input);\n\nconst pipeline = pipe(\n    x => x + 1,       \u002F\u002F 5 → 6\n    x => x * 2,       \u002F\u002F 6 → 12\n    x => x - 3,       \u002F\u002F 12 → 9\n);\nconsole.log(pipeline(5));  \u002F\u002F 9\n\n\u002F\u002F ── Async pipeline (each step is async) ──\nconst pipeAsync = (...fns) => (input) =>\n    fns.reduce(async (acc, fn) => fn(await acc), Promise.resolve(input));\n\nconst asyncPipeline = pipeAsync(\n    async x => { await delay(100); return x + 1; },\n    async x => { await delay(100); return x * 2; },\n);\nasyncPipeline(5).then(console.log);  \u002F\u002F 12 (after ~200ms)\n\n\u002F\u002F ── Array flattening with flat and flatMap ──\n[[1, 2], [3, 4], [5]].flat();       \u002F\u002F [1, 2, 3, 4, 5] (1 level deep)\n[[1, [2, [3]]]].flat();             \u002F\u002F [1, 2, [3]] (1 level — [3] still nested)\n[[1, [2, [3]]]].flat(Infinity);     \u002F\u002F [1, 2, 3] (fully flat)\n[1, 2, 3].flatMap(x => [x, x * 2]); \u002F\u002F [1, 2, 2, 4, 3, 6] (map + flat in one pass)\n\n\u002F\u002F ── Chaining array methods (each creates a new array) ──\nconst result = [1, 2, 3, 4, 5, 6]\n    .filter(x => x % 2 === 0)     \u002F\u002F [2, 4, 6]\n    .map(x => x * x)              \u002F\u002F [4, 16, 36]\n    .reduce((a, b) => a + b, 0);  \u002F\u002F 56\n\u002F\u002F ⚠️ Each method creates an intermediate array (3 arrays total).\n\u002F\u002F For large arrays, a single reduce loop is more efficient (one pass, no intermediates).\n",[20,1858,1859,1864,1916,1920,1934,1953,1970,1988,1992,2012,2016,2021,2049,2095,2099,2112,2148,2178,2182,2202,2206,2211,2246,2272,2300,2337,2341,2346,2383,2415,2437,2469,2474],{"__ignoreMap":32},[36,1860,1861],{"class":38,"line":39},[36,1862,1863],{"class":42},"\u002F\u002F ── Function pipeline using reduce ──\n",[36,1865,1866,1868,1871,1873,1876,1878,1881,1883,1885,1887,1890,1892,1894,1897,1899,1901,1903,1905,1907,1909,1911,1913],{"class":38,"line":46},[36,1867,50],{"class":49},[36,1869,1870],{"class":85}," pipe",[36,1872,57],{"class":49},[36,1874,1875],{"class":60}," (",[36,1877,441],{"class":49},[36,1879,1880],{"class":243},"fns",[36,1882,1150],{"class":60},[36,1884,386],{"class":49},[36,1886,1875],{"class":60},[36,1888,1889],{"class":243},"input",[36,1891,1150],{"class":60},[36,1893,386],{"class":49},[36,1895,1896],{"class":60}," fns.",[36,1898,1431],{"class":85},[36,1900,1139],{"class":60},[36,1902,1492],{"class":243},[36,1904,210],{"class":60},[36,1906,1753],{"class":243},[36,1908,1150],{"class":60},[36,1910,386],{"class":49},[36,1912,1760],{"class":85},[36,1914,1915],{"class":60},"(acc), input);\n",[36,1917,1918],{"class":38,"line":79},[36,1919,166],{"emptyLinePlaceholder":165},[36,1921,1922,1924,1927,1929,1931],{"class":38,"line":101},[36,1923,50],{"class":49},[36,1925,1926],{"class":53}," pipeline",[36,1928,57],{"class":49},[36,1930,1870],{"class":85},[36,1932,1933],{"class":60},"(\n",[36,1935,1936,1939,1941,1943,1945,1947,1950],{"class":38,"line":119},[36,1937,1938],{"class":243},"    x",[36,1940,247],{"class":49},[36,1942,315],{"class":60},[36,1944,1507],{"class":49},[36,1946,917],{"class":53},[36,1948,1949],{"class":60},",       ",[36,1951,1952],{"class":42},"\u002F\u002F 5 → 6\n",[36,1954,1955,1957,1959,1961,1963,1965,1967],{"class":38,"line":140},[36,1956,1938],{"class":243},[36,1958,247],{"class":49},[36,1960,315],{"class":60},[36,1962,318],{"class":49},[36,1964,321],{"class":53},[36,1966,1949],{"class":60},[36,1968,1969],{"class":42},"\u002F\u002F 6 → 12\n",[36,1971,1972,1974,1976,1978,1980,1983,1985],{"class":38,"line":162},[36,1973,1938],{"class":243},[36,1975,247],{"class":49},[36,1977,315],{"class":60},[36,1979,1158],{"class":49},[36,1981,1982],{"class":53}," 3",[36,1984,1949],{"class":60},[36,1986,1987],{"class":42},"\u002F\u002F 12 → 9\n",[36,1989,1990],{"class":38,"line":169},[36,1991,1768],{"class":60},[36,1993,1994,1996,1998,2000,2003,2005,2007,2009],{"class":38,"line":175},[36,1995,82],{"class":60},[36,1997,86],{"class":85},[36,1999,126],{"class":60},[36,2001,2002],{"class":85},"pipeline",[36,2004,126],{"class":60},[36,2006,959],{"class":53},[36,2008,156],{"class":60},[36,2010,2011],{"class":42},"\u002F\u002F 9\n",[36,2013,2014],{"class":38,"line":196},[36,2015,166],{"emptyLinePlaceholder":165},[36,2017,2018],{"class":38,"line":221},[36,2019,2020],{"class":42},"\u002F\u002F ── Async pipeline (each step is async) ──\n",[36,2022,2023,2025,2028,2030,2032,2034,2036,2038,2040,2042,2044,2046],{"class":38,"line":226},[36,2024,50],{"class":49},[36,2026,2027],{"class":85}," pipeAsync",[36,2029,57],{"class":49},[36,2031,1875],{"class":60},[36,2033,441],{"class":49},[36,2035,1880],{"class":243},[36,2037,1150],{"class":60},[36,2039,386],{"class":49},[36,2041,1875],{"class":60},[36,2043,1889],{"class":243},[36,2045,1150],{"class":60},[36,2047,2048],{"class":49},"=>\n",[36,2050,2051,2054,2056,2058,2061,2063,2065,2067,2069,2071,2073,2075,2077,2080,2083,2086,2089,2092],{"class":38,"line":232},[36,2052,2053],{"class":60},"    fns.",[36,2055,1431],{"class":85},[36,2057,126],{"class":60},[36,2059,2060],{"class":49},"async",[36,2062,1875],{"class":60},[36,2064,1492],{"class":243},[36,2066,210],{"class":60},[36,2068,1753],{"class":243},[36,2070,1150],{"class":60},[36,2072,386],{"class":49},[36,2074,1760],{"class":85},[36,2076,126],{"class":60},[36,2078,2079],{"class":49},"await",[36,2081,2082],{"class":60}," acc), ",[36,2084,2085],{"class":53},"Promise",[36,2087,2088],{"class":60},".",[36,2090,2091],{"class":85},"resolve",[36,2093,2094],{"class":60},"(input));\n",[36,2096,2097],{"class":38,"line":261},[36,2098,166],{"emptyLinePlaceholder":165},[36,2100,2101,2103,2106,2108,2110],{"class":38,"line":285},[36,2102,50],{"class":49},[36,2104,2105],{"class":53}," asyncPipeline",[36,2107,57],{"class":49},[36,2109,2027],{"class":85},[36,2111,1933],{"class":60},[36,2113,2114,2117,2120,2122,2125,2127,2130,2132,2134,2136,2139,2141,2143,2145],{"class":38,"line":290},[36,2115,2116],{"class":49},"    async",[36,2118,2119],{"class":243}," x",[36,2121,247],{"class":49},[36,2123,2124],{"class":60}," { ",[36,2126,2079],{"class":49},[36,2128,2129],{"class":85}," delay",[36,2131,126],{"class":60},[36,2133,1060],{"class":53},[36,2135,669],{"class":60},[36,2137,2138],{"class":49},"return",[36,2140,315],{"class":60},[36,2142,1507],{"class":49},[36,2144,917],{"class":53},[36,2146,2147],{"class":60},"; },\n",[36,2149,2150,2152,2154,2156,2158,2160,2162,2164,2166,2168,2170,2172,2174,2176],{"class":38,"line":296},[36,2151,2116],{"class":49},[36,2153,2119],{"class":243},[36,2155,247],{"class":49},[36,2157,2124],{"class":60},[36,2159,2079],{"class":49},[36,2161,2129],{"class":85},[36,2163,126],{"class":60},[36,2165,1060],{"class":53},[36,2167,669],{"class":60},[36,2169,2138],{"class":49},[36,2171,315],{"class":60},[36,2173,318],{"class":49},[36,2175,321],{"class":53},[36,2177,2147],{"class":60},[36,2179,2180],{"class":38,"line":330},[36,2181,1768],{"class":60},[36,2183,2184,2187,2189,2191,2193,2196,2199],{"class":38,"line":360},[36,2185,2186],{"class":85},"asyncPipeline",[36,2188,126],{"class":60},[36,2190,959],{"class":53},[36,2192,566],{"class":60},[36,2194,2195],{"class":85},"then",[36,2197,2198],{"class":60},"(console.log);  ",[36,2200,2201],{"class":42},"\u002F\u002F 12 (after ~200ms)\n",[36,2203,2204],{"class":38,"line":365},[36,2205,166],{"emptyLinePlaceholder":165},[36,2207,2208],{"class":38,"line":371},[36,2209,2210],{"class":42},"\u002F\u002F ── Array flattening with flat and flatMap ──\n",[36,2212,2213,2216,2218,2220,2222,2225,2227,2229,2231,2233,2235,2238,2241,2243],{"class":38,"line":398},[36,2214,2215],{"class":60},"[[",[36,2217,64],{"class":53},[36,2219,210],{"class":60},[36,2221,637],{"class":53},[36,2223,2224],{"class":60},"], [",[36,2226,70],{"class":53},[36,2228,210],{"class":60},[36,2230,727],{"class":53},[36,2232,2224],{"class":60},[36,2234,959],{"class":53},[36,2236,2237],{"class":60},"]].",[36,2239,2240],{"class":85},"flat",[36,2242,773],{"class":60},[36,2244,2245],{"class":42},"\u002F\u002F [1, 2, 3, 4, 5] (1 level deep)\n",[36,2247,2248,2250,2252,2255,2257,2259,2261,2264,2266,2269],{"class":38,"line":420},[36,2249,2215],{"class":60},[36,2251,64],{"class":53},[36,2253,2254],{"class":60},", [",[36,2256,637],{"class":53},[36,2258,2254],{"class":60},[36,2260,70],{"class":53},[36,2262,2263],{"class":60},"]]]].",[36,2265,2240],{"class":85},[36,2267,2268],{"class":60},"();             ",[36,2270,2271],{"class":42},"\u002F\u002F [1, 2, [3]] (1 level — [3] still nested)\n",[36,2273,2274,2276,2278,2280,2282,2284,2286,2288,2290,2292,2295,2297],{"class":38,"line":425},[36,2275,2215],{"class":60},[36,2277,64],{"class":53},[36,2279,2254],{"class":60},[36,2281,637],{"class":53},[36,2283,2254],{"class":60},[36,2285,70],{"class":53},[36,2287,2263],{"class":60},[36,2289,2240],{"class":85},[36,2291,126],{"class":60},[36,2293,2294],{"class":53},"Infinity",[36,2296,95],{"class":60},[36,2298,2299],{"class":42},"\u002F\u002F [1, 2, 3] (fully flat)\n",[36,2301,2302,2304,2306,2308,2310,2312,2314,2316,2318,2320,2322,2324,2327,2329,2331,2334],{"class":38,"line":431},[36,2303,989],{"class":60},[36,2305,64],{"class":53},[36,2307,210],{"class":60},[36,2309,637],{"class":53},[36,2311,210],{"class":60},[36,2313,70],{"class":53},[36,2315,1045],{"class":60},[36,2317,972],{"class":85},[36,2319,126],{"class":60},[36,2321,244],{"class":243},[36,2323,247],{"class":49},[36,2325,2326],{"class":60}," [x, x ",[36,2328,318],{"class":49},[36,2330,321],{"class":53},[36,2332,2333],{"class":60},"]); ",[36,2335,2336],{"class":42},"\u002F\u002F [1, 2, 2, 4, 3, 6] (map + flat in one pass)\n",[36,2338,2339],{"class":38,"line":450},[36,2340,166],{"emptyLinePlaceholder":165},[36,2342,2343],{"class":38,"line":469},[36,2344,2345],{"class":42},"\u002F\u002F ── Chaining array methods (each creates a new array) ──\n",[36,2347,2348,2350,2353,2355,2357,2359,2361,2363,2365,2367,2369,2371,2373,2375,2377,2380],{"class":38,"line":474},[36,2349,50],{"class":49},[36,2351,2352],{"class":53}," result",[36,2354,57],{"class":49},[36,2356,61],{"class":60},[36,2358,64],{"class":53},[36,2360,210],{"class":60},[36,2362,637],{"class":53},[36,2364,210],{"class":60},[36,2366,70],{"class":53},[36,2368,210],{"class":60},[36,2370,727],{"class":53},[36,2372,210],{"class":60},[36,2374,959],{"class":53},[36,2376,210],{"class":60},[36,2378,2379],{"class":53},"6",[36,2381,2382],{"class":60},"]\n",[36,2384,2385,2388,2390,2392,2394,2396,2398,2401,2403,2406,2409,2412],{"class":38,"line":480},[36,2386,2387],{"class":60},"    .",[36,2389,380],{"class":85},[36,2391,126],{"class":60},[36,2393,244],{"class":243},[36,2395,247],{"class":49},[36,2397,315],{"class":60},[36,2399,2400],{"class":49},"%",[36,2402,321],{"class":53},[36,2404,2405],{"class":49}," ===",[36,2407,2408],{"class":53}," 0",[36,2410,2411],{"class":60},")     ",[36,2413,2414],{"class":42},"\u002F\u002F [2, 4, 6]\n",[36,2416,2417,2419,2421,2423,2425,2427,2429,2431,2434],{"class":38,"line":503},[36,2418,2387],{"class":60},[36,2420,306],{"class":85},[36,2422,126],{"class":60},[36,2424,244],{"class":243},[36,2426,247],{"class":49},[36,2428,315],{"class":60},[36,2430,318],{"class":49},[36,2432,2433],{"class":60}," x)              ",[36,2435,2436],{"class":42},"\u002F\u002F [4, 16, 36]\n",[36,2438,2439,2441,2443,2445,2447,2449,2451,2453,2455,2457,2459,2462,2464,2466],{"class":38,"line":527},[36,2440,2387],{"class":60},[36,2442,1431],{"class":85},[36,2444,1139],{"class":60},[36,2446,1142],{"class":243},[36,2448,210],{"class":60},[36,2450,1147],{"class":243},[36,2452,1150],{"class":60},[36,2454,386],{"class":49},[36,2456,1155],{"class":60},[36,2458,1507],{"class":49},[36,2460,2461],{"class":60}," b, ",[36,2463,574],{"class":53},[36,2465,497],{"class":60},[36,2467,2468],{"class":42},"\u002F\u002F 56\n",[36,2470,2471],{"class":38,"line":551},[36,2472,2473],{"class":42},"\u002F\u002F ⚠️ Each method creates an intermediate array (3 arrays total).\n",[36,2475,2476],{"class":38,"line":583},[36,2477,2478],{"class":42},"\u002F\u002F For large arrays, a single reduce loop is more efficient (one pass, no intermediates).\n",[15,2480,2482],{"id":2481},"array-like-objects-and-typed-arrays","Array-Like Objects and Typed Arrays",[24,2484,2485],{"language":26},[28,2486,2488],{"className":30,"code":2487,"language":26,"meta":32,"style":32},"\u002F\u002F ── Array-like: has .length and indexed access, but NOT array methods ──\nconst arrayLike = { 0: \"a\", 1: \"b\", length: 2 };\n\u002F\u002F arrayLike.map(...)  \u002F\u002F TypeError: arrayLike.map is not a function\nconsole.log(arrayLike[0]);  \u002F\u002F \"a\" (indexed access works)\nconsole.log(arrayLike.length);  \u002F\u002F 2\n\n\u002F\u002F ── Convert array-like to real array ──\nArray.from(arrayLike);     \u002F\u002F [\"a\", \"b\"] — creates a real Array\n[...arrayLike];            \u002F\u002F [\"a\", \"b\"] — spread works on iterables (but arrayLike isn't iterable by default!)\n\u002F\u002F Actually: spread works on iterables; array-like objects aren't iterable unless they have Symbol.iterator.\n\u002F\u002F For array-like: use Array.from() (handles array-like) or Array.prototype.slice.call(arrayLike).\n\n\u002F\u002F ── Real array-like objects ──\n\u002F\u002F `arguments` object (in regular functions):\nfunction example() {\n    console.log(arguments);  \u002F\u002F [Arguments] { '0': 1, '1': 2 } — array-like\n    const args = Array.from(arguments);  \u002F\u002F convert to real array\n    console.log(args.map(x => x * 2));\n}\nexample(1, 2);\n\n\u002F\u002F NodeList (from DOM):\n\u002F\u002F document.querySelectorAll(\"div\")  — array-like, not a real Array\n\u002F\u002F const divs = Array.from(document.querySelectorAll(\"div\"));\n\n\u002F\u002F ── Typed arrays: fixed-length, typed numeric arrays (for binary data) ──\nconst uint8 = new Uint8Array([255, 256, 257]);  \u002F\u002F [255, 0, 1] (overflow: 256→0, 257→1)\nconst int32 = new Int32Array([1, 2, 3]);  \u002F\u002F 32-bit signed integers\nconst float64 = new Float64Array([1.5, 2.5]);  \u002F\u002F 64-bit floats\n\u002F\u002F Typed arrays:\n\u002F\u002F   - Fixed length (can't push\u002Fpop)\n\u002F\u002F   - All elements are the same type (no mixed types)\n\u002F\u002F   - Memory-efficient (no boxing, contiguous memory)\n\u002F\u002F   - Used for: binary protocols, canvas, WebGL, file I\u002FO, crypto\nconst buffer = new ArrayBuffer(16);  \u002F\u002F 16 bytes of raw memory\nconst view = new Uint8Array(buffer);  \u002F\u002F view the buffer as bytes\nview[0] = 255;\n",[20,2489,2490,2495,2531,2539,2556,2572,2576,2581,2593,2605,2610,2615,2619,2624,2629,2640,2657,2681,2707,2712,2727,2731,2736,2741,2746,2750,2755,2790,2821,2850,2855,2860,2865,2870,2875,2899,2918],{"__ignoreMap":32},[36,2491,2492],{"class":38,"line":39},[36,2493,2494],{"class":42},"\u002F\u002F ── Array-like: has .length and indexed access, but NOT array methods ──\n",[36,2496,2497,2499,2502,2504,2506,2508,2511,2514,2516,2518,2520,2523,2526,2528],{"class":38,"line":46},[36,2498,50],{"class":49},[36,2500,2501],{"class":53}," arrayLike",[36,2503,57],{"class":49},[36,2505,2124],{"class":60},[36,2507,574],{"class":53},[36,2509,2510],{"class":60},": ",[36,2512,2513],{"class":1085},"\"a\"",[36,2515,210],{"class":60},[36,2517,64],{"class":53},[36,2519,2510],{"class":60},[36,2521,2522],{"class":1085},"\"b\"",[36,2524,2525],{"class":60},", length: ",[36,2527,637],{"class":53},[36,2529,2530],{"class":60}," };\n",[36,2532,2533,2536],{"class":38,"line":79},[36,2534,2535],{"class":42},"\u002F\u002F arrayLike.map(...)",[36,2537,2538],{"class":42},"  \u002F\u002F TypeError: arrayLike.map is not a function\n",[36,2540,2541,2543,2545,2548,2550,2553],{"class":38,"line":101},[36,2542,82],{"class":60},[36,2544,86],{"class":85},[36,2546,2547],{"class":60},"(arrayLike[",[36,2549,574],{"class":53},[36,2551,2552],{"class":60},"]);  ",[36,2554,2555],{"class":42},"\u002F\u002F \"a\" (indexed access works)\n",[36,2557,2558,2560,2562,2565,2567,2569],{"class":38,"line":119},[36,2559,82],{"class":60},[36,2561,86],{"class":85},[36,2563,2564],{"class":60},"(arrayLike.",[36,2566,92],{"class":53},[36,2568,497],{"class":60},[36,2570,2571],{"class":42},"\u002F\u002F 2\n",[36,2573,2574],{"class":38,"line":140},[36,2575,166],{"emptyLinePlaceholder":165},[36,2577,2578],{"class":38,"line":162},[36,2579,2580],{"class":42},"\u002F\u002F ── Convert array-like to real array ──\n",[36,2582,2583,2585,2587,2590],{"class":38,"line":169},[36,2584,611],{"class":60},[36,2586,460],{"class":85},[36,2588,2589],{"class":60},"(arrayLike);     ",[36,2591,2592],{"class":42},"\u002F\u002F [\"a\", \"b\"] — creates a real Array\n",[36,2594,2595,2597,2599,2602],{"class":38,"line":175},[36,2596,989],{"class":60},[36,2598,441],{"class":49},[36,2600,2601],{"class":60},"arrayLike];            ",[36,2603,2604],{"class":42},"\u002F\u002F [\"a\", \"b\"] — spread works on iterables (but arrayLike isn't iterable by default!)\n",[36,2606,2607],{"class":38,"line":196},[36,2608,2609],{"class":42},"\u002F\u002F Actually: spread works on iterables; array-like objects aren't iterable unless they have Symbol.iterator.\n",[36,2611,2612],{"class":38,"line":221},[36,2613,2614],{"class":42},"\u002F\u002F For array-like: use Array.from() (handles array-like) or Array.prototype.slice.call(arrayLike).\n",[36,2616,2617],{"class":38,"line":226},[36,2618,166],{"emptyLinePlaceholder":165},[36,2620,2621],{"class":38,"line":232},[36,2622,2623],{"class":42},"\u002F\u002F ── Real array-like objects ──\n",[36,2625,2626],{"class":38,"line":261},[36,2627,2628],{"class":42},"\u002F\u002F `arguments` object (in regular functions):\n",[36,2630,2631,2634,2637],{"class":38,"line":285},[36,2632,2633],{"class":49},"function",[36,2635,2636],{"class":85}," example",[36,2638,2639],{"class":60},"() {\n",[36,2641,2642,2645,2647,2649,2652,2654],{"class":38,"line":290},[36,2643,2644],{"class":60},"    console.",[36,2646,86],{"class":85},[36,2648,126],{"class":60},[36,2650,2651],{"class":53},"arguments",[36,2653,497],{"class":60},[36,2655,2656],{"class":42},"\u002F\u002F [Arguments] { '0': 1, '1': 2 } — array-like\n",[36,2658,2659,2662,2665,2667,2670,2672,2674,2676,2678],{"class":38,"line":296},[36,2660,2661],{"class":49},"    const",[36,2663,2664],{"class":53}," args",[36,2666,57],{"class":49},[36,2668,2669],{"class":60}," Array.",[36,2671,460],{"class":85},[36,2673,126],{"class":60},[36,2675,2651],{"class":53},[36,2677,497],{"class":60},[36,2679,2680],{"class":42},"\u002F\u002F convert to real array\n",[36,2682,2683,2685,2687,2690,2692,2694,2696,2698,2700,2702,2704],{"class":38,"line":330},[36,2684,2644],{"class":60},[36,2686,86],{"class":85},[36,2688,2689],{"class":60},"(args.",[36,2691,306],{"class":85},[36,2693,126],{"class":60},[36,2695,244],{"class":243},[36,2697,247],{"class":49},[36,2699,315],{"class":60},[36,2701,318],{"class":49},[36,2703,321],{"class":53},[36,2705,2706],{"class":60},"));\n",[36,2708,2709],{"class":38,"line":360},[36,2710,2711],{"class":60},"}\n",[36,2713,2714,2717,2719,2721,2723,2725],{"class":38,"line":365},[36,2715,2716],{"class":85},"example",[36,2718,126],{"class":60},[36,2720,64],{"class":53},[36,2722,210],{"class":60},[36,2724,637],{"class":53},[36,2726,1768],{"class":60},[36,2728,2729],{"class":38,"line":371},[36,2730,166],{"emptyLinePlaceholder":165},[36,2732,2733],{"class":38,"line":398},[36,2734,2735],{"class":42},"\u002F\u002F NodeList (from DOM):\n",[36,2737,2738],{"class":38,"line":420},[36,2739,2740],{"class":42},"\u002F\u002F document.querySelectorAll(\"div\")  — array-like, not a real Array\n",[36,2742,2743],{"class":38,"line":425},[36,2744,2745],{"class":42},"\u002F\u002F const divs = Array.from(document.querySelectorAll(\"div\"));\n",[36,2747,2748],{"class":38,"line":431},[36,2749,166],{"emptyLinePlaceholder":165},[36,2751,2752],{"class":38,"line":450},[36,2753,2754],{"class":42},"\u002F\u002F ── Typed arrays: fixed-length, typed numeric arrays (for binary data) ──\n",[36,2756,2757,2759,2762,2764,2767,2770,2772,2775,2777,2780,2782,2785,2787],{"class":38,"line":469},[36,2758,50],{"class":49},[36,2760,2761],{"class":53}," uint8",[36,2763,57],{"class":49},[36,2765,2766],{"class":49}," new",[36,2768,2769],{"class":85}," Uint8Array",[36,2771,438],{"class":60},[36,2773,2774],{"class":53},"255",[36,2776,210],{"class":60},[36,2778,2779],{"class":53},"256",[36,2781,210],{"class":60},[36,2783,2784],{"class":53},"257",[36,2786,2552],{"class":60},[36,2788,2789],{"class":42},"\u002F\u002F [255, 0, 1] (overflow: 256→0, 257→1)\n",[36,2791,2792,2794,2797,2799,2801,2804,2806,2808,2810,2812,2814,2816,2818],{"class":38,"line":474},[36,2793,50],{"class":49},[36,2795,2796],{"class":53}," int32",[36,2798,57],{"class":49},[36,2800,2766],{"class":49},[36,2802,2803],{"class":85}," Int32Array",[36,2805,438],{"class":60},[36,2807,64],{"class":53},[36,2809,210],{"class":60},[36,2811,637],{"class":53},[36,2813,210],{"class":60},[36,2815,70],{"class":53},[36,2817,2552],{"class":60},[36,2819,2820],{"class":42},"\u002F\u002F 32-bit signed integers\n",[36,2822,2823,2825,2828,2830,2832,2835,2837,2840,2842,2845,2847],{"class":38,"line":480},[36,2824,50],{"class":49},[36,2826,2827],{"class":53}," float64",[36,2829,57],{"class":49},[36,2831,2766],{"class":49},[36,2833,2834],{"class":85}," Float64Array",[36,2836,438],{"class":60},[36,2838,2839],{"class":53},"1.5",[36,2841,210],{"class":60},[36,2843,2844],{"class":53},"2.5",[36,2846,2552],{"class":60},[36,2848,2849],{"class":42},"\u002F\u002F 64-bit floats\n",[36,2851,2852],{"class":38,"line":503},[36,2853,2854],{"class":42},"\u002F\u002F Typed arrays:\n",[36,2856,2857],{"class":38,"line":527},[36,2858,2859],{"class":42},"\u002F\u002F   - Fixed length (can't push\u002Fpop)\n",[36,2861,2862],{"class":38,"line":551},[36,2863,2864],{"class":42},"\u002F\u002F   - All elements are the same type (no mixed types)\n",[36,2866,2867],{"class":38,"line":583},[36,2868,2869],{"class":42},"\u002F\u002F   - Memory-efficient (no boxing, contiguous memory)\n",[36,2871,2872],{"class":38,"line":588},[36,2873,2874],{"class":42},"\u002F\u002F   - Used for: binary protocols, canvas, WebGL, file I\u002FO, crypto\n",[36,2876,2877,2879,2882,2884,2886,2889,2891,2894,2896],{"class":38,"line":594},[36,2878,50],{"class":49},[36,2880,2881],{"class":53}," buffer",[36,2883,57],{"class":49},[36,2885,2766],{"class":49},[36,2887,2888],{"class":85}," ArrayBuffer",[36,2890,126],{"class":60},[36,2892,2893],{"class":53},"16",[36,2895,497],{"class":60},[36,2897,2898],{"class":42},"\u002F\u002F 16 bytes of raw memory\n",[36,2900,2901,2903,2906,2908,2910,2912,2915],{"class":38,"line":608},[36,2902,50],{"class":49},[36,2904,2905],{"class":53}," view",[36,2907,57],{"class":49},[36,2909,2766],{"class":49},[36,2911,2769],{"class":85},[36,2913,2914],{"class":60},"(buffer);  ",[36,2916,2917],{"class":42},"\u002F\u002F view the buffer as bytes\n",[36,2919,2920,2923,2925,2928,2931,2934],{"class":38,"line":626},[36,2921,2922],{"class":60},"view[",[36,2924,574],{"class":53},[36,2926,2927],{"class":60},"] ",[36,2929,2930],{"class":49},"=",[36,2932,2933],{"class":53}," 255",[36,2935,2936],{"class":60},";\n",[15,2938,2940],{"id":2939},"tips-tricks","💡 Tips & Tricks",[24,2942,2943],{"language":26},[28,2944,2946],{"className":30,"code":2945,"language":26,"meta":32,"style":32},"\u002F\u002F ── Array.from with a mapping function (map during creation) ──\nArray.from({ length: 5 }, (_, i) => i);  \u002F\u002F [0, 1, 2, 3, 4] — range generator\nArray.from({ length: 3 }, () => Math.random());  \u002F\u002F [random, random, random]\n\n\u002F\u002F ── Array.from with Set for deduplication ──\nconst unique = Array.from(new Set([1, 2, 2, 3, 3, 3]));  \u002F\u002F [1, 2, 3]\n\u002F\u002F Or: [...new Set([1, 2, 2, 3])] — spread a Set (ES2015+)\n\n\u002F\u002F ── Finding: find and findIndex \u002F findLast \u002F findLastIndex (ES2023) ──\n[1, 2, 3, 4].find(x => x > 2);          \u002F\u002F 3 (first match)\n[1, 2, 3, 4].findIndex(x => x > 2);     \u002F\u002F 2 (index of first match)\n[1, 2, 3, 4].findLast(x => x > 2);     \u002F\u002F 4 (last match, ES2023)\n[1, 2, 3, 4].findLastIndex(x => x > 2); \u002F\u002F 3 (index of last match, ES2023)\n\n\u002F\u002F ── Includes vs indexOf (NaN handling) ──\n[1, 2, NaN].includes(NaN);  \u002F\u002F true (includes finds NaN!)\n[1, 2, NaN].indexOf(NaN);   \u002F\u002F -1 (indexOf can't find NaN — uses ===)\n\n\u002F\u002F ── at() for negative indexing (ES2022) ──\n[1, 2, 3].at(-1);  \u002F\u002F 3 (last element — cleaner than arr[arr.length - 1])\n[1, 2, 3].at(-2);  \u002F\u002F 2\n\n\u002F\u002F ── toSorted \u002F toReversed \u002F toSpliced \u002F with (non-mutating, ES2023) ──\nconst arr = [3, 1, 2];\narr.toSorted((a, b) => a - b);  \u002F\u002F [1, 2, 3] — new array, original unchanged\narr.toReversed();               \u002F\u002F [2, 1, 3] — new array\narr.with(0, 99);                 \u002F\u002F [99, 1, 2] — new array with index 0 replaced\n\u002F\u002F These are the non-mutating alternatives to sort\u002Freverse\u002Fsplice\u002F[i]=\n",[20,2947,2948,2953,2985,3012,3016,3021,3072,3077,3081,3086,3126,3166,3206,3246,3250,3255,3284,3312,3316,3321,3351,3379,3383,3388,3410,3438,3451,3473],{"__ignoreMap":32},[36,2949,2950],{"class":38,"line":39},[36,2951,2952],{"class":42},"\u002F\u002F ── Array.from with a mapping function (map during creation) ──\n",[36,2954,2955,2957,2959,2962,2964,2967,2970,2972,2975,2977,2979,2982],{"class":38,"line":46},[36,2956,611],{"class":60},[36,2958,460],{"class":85},[36,2960,2961],{"class":60},"({ length: ",[36,2963,959],{"class":53},[36,2965,2966],{"class":60}," }, (",[36,2968,2969],{"class":243},"_",[36,2971,210],{"class":60},[36,2973,2974],{"class":243},"i",[36,2976,1150],{"class":60},[36,2978,386],{"class":49},[36,2980,2981],{"class":60}," i);  ",[36,2983,2984],{"class":42},"\u002F\u002F [0, 1, 2, 3, 4] — range generator\n",[36,2986,2987,2989,2991,2993,2995,2998,3000,3003,3006,3009],{"class":38,"line":79},[36,2988,611],{"class":60},[36,2990,460],{"class":85},[36,2992,2961],{"class":60},[36,2994,70],{"class":53},[36,2996,2997],{"class":60}," }, () ",[36,2999,386],{"class":49},[36,3001,3002],{"class":60}," Math.",[36,3004,3005],{"class":85},"random",[36,3007,3008],{"class":60},"());  ",[36,3010,3011],{"class":42},"\u002F\u002F [random, random, random]\n",[36,3013,3014],{"class":38,"line":101},[36,3015,166],{"emptyLinePlaceholder":165},[36,3017,3018],{"class":38,"line":119},[36,3019,3020],{"class":42},"\u002F\u002F ── Array.from with Set for deduplication ──\n",[36,3022,3023,3025,3028,3030,3032,3034,3036,3039,3042,3044,3046,3048,3050,3052,3054,3056,3058,3060,3062,3064,3066,3069],{"class":38,"line":140},[36,3024,50],{"class":49},[36,3026,3027],{"class":53}," unique",[36,3029,57],{"class":49},[36,3031,2669],{"class":60},[36,3033,460],{"class":85},[36,3035,126],{"class":60},[36,3037,3038],{"class":49},"new",[36,3040,3041],{"class":85}," Set",[36,3043,438],{"class":60},[36,3045,64],{"class":53},[36,3047,210],{"class":60},[36,3049,637],{"class":53},[36,3051,210],{"class":60},[36,3053,637],{"class":53},[36,3055,210],{"class":60},[36,3057,70],{"class":53},[36,3059,210],{"class":60},[36,3061,70],{"class":53},[36,3063,210],{"class":60},[36,3065,70],{"class":53},[36,3067,3068],{"class":60},"]));  ",[36,3070,3071],{"class":42},"\u002F\u002F [1, 2, 3]\n",[36,3073,3074],{"class":38,"line":162},[36,3075,3076],{"class":42},"\u002F\u002F Or: [...new Set([1, 2, 2, 3])] — spread a Set (ES2015+)\n",[36,3078,3079],{"class":38,"line":169},[36,3080,166],{"emptyLinePlaceholder":165},[36,3082,3083],{"class":38,"line":175},[36,3084,3085],{"class":42},"\u002F\u002F ── Finding: find and findIndex \u002F findLast \u002F findLastIndex (ES2023) ──\n",[36,3087,3088,3090,3092,3094,3096,3098,3100,3102,3104,3106,3109,3111,3113,3115,3117,3119,3121,3123],{"class":38,"line":196},[36,3089,989],{"class":60},[36,3091,64],{"class":53},[36,3093,210],{"class":60},[36,3095,637],{"class":53},[36,3097,210],{"class":60},[36,3099,70],{"class":53},[36,3101,210],{"class":60},[36,3103,727],{"class":53},[36,3105,1045],{"class":60},[36,3107,3108],{"class":85},"find",[36,3110,126],{"class":60},[36,3112,244],{"class":243},[36,3114,247],{"class":49},[36,3116,315],{"class":60},[36,3118,914],{"class":49},[36,3120,321],{"class":53},[36,3122,940],{"class":60},[36,3124,3125],{"class":42},"\u002F\u002F 3 (first match)\n",[36,3127,3128,3130,3132,3134,3136,3138,3140,3142,3144,3146,3149,3151,3153,3155,3157,3159,3161,3163],{"class":38,"line":221},[36,3129,989],{"class":60},[36,3131,64],{"class":53},[36,3133,210],{"class":60},[36,3135,637],{"class":53},[36,3137,210],{"class":60},[36,3139,70],{"class":53},[36,3141,210],{"class":60},[36,3143,727],{"class":53},[36,3145,1045],{"class":60},[36,3147,3148],{"class":85},"findIndex",[36,3150,126],{"class":60},[36,3152,244],{"class":243},[36,3154,247],{"class":49},[36,3156,315],{"class":60},[36,3158,914],{"class":49},[36,3160,321],{"class":53},[36,3162,95],{"class":60},[36,3164,3165],{"class":42},"\u002F\u002F 2 (index of first match)\n",[36,3167,3168,3170,3172,3174,3176,3178,3180,3182,3184,3186,3189,3191,3193,3195,3197,3199,3201,3203],{"class":38,"line":226},[36,3169,989],{"class":60},[36,3171,64],{"class":53},[36,3173,210],{"class":60},[36,3175,637],{"class":53},[36,3177,210],{"class":60},[36,3179,70],{"class":53},[36,3181,210],{"class":60},[36,3183,727],{"class":53},[36,3185,1045],{"class":60},[36,3187,3188],{"class":85},"findLast",[36,3190,126],{"class":60},[36,3192,244],{"class":243},[36,3194,247],{"class":49},[36,3196,315],{"class":60},[36,3198,914],{"class":49},[36,3200,321],{"class":53},[36,3202,95],{"class":60},[36,3204,3205],{"class":42},"\u002F\u002F 4 (last match, ES2023)\n",[36,3207,3208,3210,3212,3214,3216,3218,3220,3222,3224,3226,3229,3231,3233,3235,3237,3239,3241,3243],{"class":38,"line":232},[36,3209,989],{"class":60},[36,3211,64],{"class":53},[36,3213,210],{"class":60},[36,3215,637],{"class":53},[36,3217,210],{"class":60},[36,3219,70],{"class":53},[36,3221,210],{"class":60},[36,3223,727],{"class":53},[36,3225,1045],{"class":60},[36,3227,3228],{"class":85},"findLastIndex",[36,3230,126],{"class":60},[36,3232,244],{"class":243},[36,3234,247],{"class":49},[36,3236,315],{"class":60},[36,3238,914],{"class":49},[36,3240,321],{"class":53},[36,3242,669],{"class":60},[36,3244,3245],{"class":42},"\u002F\u002F 3 (index of last match, ES2023)\n",[36,3247,3248],{"class":38,"line":261},[36,3249,166],{"emptyLinePlaceholder":165},[36,3251,3252],{"class":38,"line":285},[36,3253,3254],{"class":42},"\u002F\u002F ── Includes vs indexOf (NaN handling) ──\n",[36,3256,3257,3259,3261,3263,3265,3267,3270,3272,3275,3277,3279,3281],{"class":38,"line":290},[36,3258,989],{"class":60},[36,3260,64],{"class":53},[36,3262,210],{"class":60},[36,3264,637],{"class":53},[36,3266,210],{"class":60},[36,3268,3269],{"class":53},"NaN",[36,3271,1045],{"class":60},[36,3273,3274],{"class":85},"includes",[36,3276,126],{"class":60},[36,3278,3269],{"class":53},[36,3280,497],{"class":60},[36,3282,3283],{"class":42},"\u002F\u002F true (includes finds NaN!)\n",[36,3285,3286,3288,3290,3292,3294,3296,3298,3300,3303,3305,3307,3309],{"class":38,"line":296},[36,3287,989],{"class":60},[36,3289,64],{"class":53},[36,3291,210],{"class":60},[36,3293,637],{"class":53},[36,3295,210],{"class":60},[36,3297,3269],{"class":53},[36,3299,1045],{"class":60},[36,3301,3302],{"class":85},"indexOf",[36,3304,126],{"class":60},[36,3306,3269],{"class":53},[36,3308,644],{"class":60},[36,3310,3311],{"class":42},"\u002F\u002F -1 (indexOf can't find NaN — uses ===)\n",[36,3313,3314],{"class":38,"line":330},[36,3315,166],{"emptyLinePlaceholder":165},[36,3317,3318],{"class":38,"line":360},[36,3319,3320],{"class":42},"\u002F\u002F ── at() for negative indexing (ES2022) ──\n",[36,3322,3323,3325,3327,3329,3331,3333,3335,3337,3340,3342,3344,3346,3348],{"class":38,"line":365},[36,3324,989],{"class":60},[36,3326,64],{"class":53},[36,3328,210],{"class":60},[36,3330,637],{"class":53},[36,3332,210],{"class":60},[36,3334,70],{"class":53},[36,3336,1045],{"class":60},[36,3338,3339],{"class":85},"at",[36,3341,126],{"class":60},[36,3343,1158],{"class":49},[36,3345,64],{"class":53},[36,3347,497],{"class":60},[36,3349,3350],{"class":42},"\u002F\u002F 3 (last element — cleaner than arr[arr.length - 1])\n",[36,3352,3353,3355,3357,3359,3361,3363,3365,3367,3369,3371,3373,3375,3377],{"class":38,"line":371},[36,3354,989],{"class":60},[36,3356,64],{"class":53},[36,3358,210],{"class":60},[36,3360,637],{"class":53},[36,3362,210],{"class":60},[36,3364,70],{"class":53},[36,3366,1045],{"class":60},[36,3368,3339],{"class":85},[36,3370,126],{"class":60},[36,3372,1158],{"class":49},[36,3374,637],{"class":53},[36,3376,497],{"class":60},[36,3378,2571],{"class":42},[36,3380,3381],{"class":38,"line":398},[36,3382,166],{"emptyLinePlaceholder":165},[36,3384,3385],{"class":38,"line":420},[36,3386,3387],{"class":42},"\u002F\u002F ── toSorted \u002F toReversed \u002F toSpliced \u002F with (non-mutating, ES2023) ──\n",[36,3389,3390,3392,3394,3396,3398,3400,3402,3404,3406,3408],{"class":38,"line":425},[36,3391,50],{"class":49},[36,3393,54],{"class":53},[36,3395,57],{"class":49},[36,3397,61],{"class":60},[36,3399,70],{"class":53},[36,3401,210],{"class":60},[36,3403,64],{"class":53},[36,3405,210],{"class":60},[36,3407,637],{"class":53},[36,3409,193],{"class":60},[36,3411,3412,3414,3417,3419,3421,3423,3425,3427,3429,3431,3433,3435],{"class":38,"line":431},[36,3413,719],{"class":60},[36,3415,3416],{"class":85},"toSorted",[36,3418,1139],{"class":60},[36,3420,1142],{"class":243},[36,3422,210],{"class":60},[36,3424,1147],{"class":243},[36,3426,1150],{"class":60},[36,3428,386],{"class":49},[36,3430,1155],{"class":60},[36,3432,1158],{"class":49},[36,3434,1161],{"class":60},[36,3436,3437],{"class":42},"\u002F\u002F [1, 2, 3] — new array, original unchanged\n",[36,3439,3440,3442,3445,3448],{"class":38,"line":450},[36,3441,719],{"class":60},[36,3443,3444],{"class":85},"toReversed",[36,3446,3447],{"class":60},"();               ",[36,3449,3450],{"class":42},"\u002F\u002F [2, 1, 3] — new array\n",[36,3452,3453,3455,3458,3460,3462,3464,3467,3470],{"class":38,"line":469},[36,3454,719],{"class":60},[36,3456,3457],{"class":85},"with",[36,3459,126],{"class":60},[36,3461,574],{"class":53},[36,3463,210],{"class":60},[36,3465,3466],{"class":53},"99",[36,3468,3469],{"class":60},");                 ",[36,3471,3472],{"class":42},"\u002F\u002F [99, 1, 2] — new array with index 0 replaced\n",[36,3474,3475],{"class":38,"line":474},[36,3476,3477],{"class":42},"\u002F\u002F These are the non-mutating alternatives to sort\u002Freverse\u002Fsplice\u002F[i]=\n",[15,3479,3481],{"id":3480},"️-edge-cases-gotchas","⚠️ Edge Cases & Gotchas",[24,3483,3484],{"language":26},[28,3485,3487],{"className":30,"code":3486,"language":26,"meta":32,"style":32},"\u002F\u002F ── Holes are skipped by map\u002FforEach\u002Ffilter (unlike undefined) ──\n[1, , 3].map(x => x * 2);     \u002F\u002F [2, \u003Cempty>, 6] (hole preserved, not processed)\n[1, undefined, 3].map(x => x * 2);  \u002F\u002F [2, NaN, 6] (undefined * 2 = NaN)\n\n\u002F\u002F ── .sort() converts to string by default (lexicographic, not numeric) ──\n[10, 2, 1].sort();  \u002F\u002F [1, 10, 2] — \"10\" \u003C \"2\" (string comparison)\n\u002F\u002F Always pass a comparator for numeric sort: .sort((a, b) => a - b)\n\n\u002F\u002F ── .sort() MUTATES the original array ──\nconst arr = [3, 1, 2];\nconst sorted = arr.sort();  \u002F\u002F arr is now [1, 2, 3] (mutated!)\n\u002F\u002F Use [...arr].sort() for a non-mutating sort (or arr.toSorted() in ES2023)\n\n\u002F\u002F ── .includes() finds NaN, .indexOf() doesn't ──\n[NaN].includes(NaN);  \u002F\u002F true (uses SameValueZero algorithm)\n[NaN].indexOf(NaN);   \u002F\u002F -1 (uses strict equality ===, NaN !== NaN)\n\n\u002F\u002F ── .splice() mutates and returns removed elements ──\nconst arr = [1, 2, 3, 4];\nconst removed = arr.splice(1, 2, \"a\", \"b\");  \u002F\u002F removes [2, 3], inserts [\"a\", \"b\"]\nconsole.log(removed);  \u002F\u002F [2, 3] (removed elements)\nconsole.log(arr);     \u002F\u002F [1, \"a\", \"b\", 4] (mutated)\n\n\u002F\u002F ── Array(n) creates holes, not undefined values ──\nArray(3).map(x => 0);    \u002F\u002F [empty × 3] — map skips holes, does nothing!\nArray(3).fill(0).map(x => x + 1);  \u002F\u002F [1, 1, 1] — fill first, then map\n",[20,3488,3489,3494,3525,3559,3563,3568,3591,3596,3600,3605,3627,3645,3650,3654,3659,3678,3697,3701,3706,3732,3766,3778,3790,3794,3799,3824],{"__ignoreMap":32},[36,3490,3491],{"class":38,"line":39},[36,3492,3493],{"class":42},"\u002F\u002F ── Holes are skipped by map\u002FforEach\u002Ffilter (unlike undefined) ──\n",[36,3495,3496,3498,3500,3502,3504,3506,3508,3510,3512,3514,3516,3518,3520,3522],{"class":38,"line":46},[36,3497,989],{"class":60},[36,3499,64],{"class":53},[36,3501,67],{"class":60},[36,3503,70],{"class":53},[36,3505,1045],{"class":60},[36,3507,306],{"class":85},[36,3509,126],{"class":60},[36,3511,244],{"class":243},[36,3513,247],{"class":49},[36,3515,315],{"class":60},[36,3517,318],{"class":49},[36,3519,321],{"class":53},[36,3521,95],{"class":60},[36,3523,3524],{"class":42},"\u002F\u002F [2, \u003Cempty>, 6] (hole preserved, not processed)\n",[36,3526,3527,3529,3531,3533,3535,3537,3539,3541,3543,3545,3547,3549,3551,3553,3555,3557],{"class":38,"line":79},[36,3528,989],{"class":60},[36,3530,64],{"class":53},[36,3532,210],{"class":60},[36,3534,22],{"class":53},[36,3536,210],{"class":60},[36,3538,70],{"class":53},[36,3540,1045],{"class":60},[36,3542,306],{"class":85},[36,3544,126],{"class":60},[36,3546,244],{"class":243},[36,3548,247],{"class":49},[36,3550,315],{"class":60},[36,3552,318],{"class":49},[36,3554,321],{"class":53},[36,3556,497],{"class":60},[36,3558,357],{"class":42},[36,3560,3561],{"class":38,"line":101},[36,3562,166],{"emptyLinePlaceholder":165},[36,3564,3565],{"class":38,"line":119},[36,3566,3567],{"class":42},"\u002F\u002F ── .sort() converts to string by default (lexicographic, not numeric) ──\n",[36,3569,3570,3572,3574,3576,3578,3580,3582,3584,3586,3588],{"class":38,"line":140},[36,3571,989],{"class":60},[36,3573,1029],{"class":53},[36,3575,210],{"class":60},[36,3577,637],{"class":53},[36,3579,210],{"class":60},[36,3581,64],{"class":53},[36,3583,1045],{"class":60},[36,3585,783],{"class":85},[36,3587,1050],{"class":60},[36,3589,3590],{"class":42},"\u002F\u002F [1, 10, 2] — \"10\" \u003C \"2\" (string comparison)\n",[36,3592,3593],{"class":38,"line":162},[36,3594,3595],{"class":42},"\u002F\u002F Always pass a comparator for numeric sort: .sort((a, b) => a - b)\n",[36,3597,3598],{"class":38,"line":169},[36,3599,166],{"emptyLinePlaceholder":165},[36,3601,3602],{"class":38,"line":175},[36,3603,3604],{"class":42},"\u002F\u002F ── .sort() MUTATES the original array ──\n",[36,3606,3607,3609,3611,3613,3615,3617,3619,3621,3623,3625],{"class":38,"line":196},[36,3608,50],{"class":49},[36,3610,54],{"class":53},[36,3612,57],{"class":49},[36,3614,61],{"class":60},[36,3616,70],{"class":53},[36,3618,210],{"class":60},[36,3620,64],{"class":53},[36,3622,210],{"class":60},[36,3624,637],{"class":53},[36,3626,193],{"class":60},[36,3628,3629,3631,3633,3635,3638,3640,3642],{"class":38,"line":221},[36,3630,50],{"class":49},[36,3632,1390],{"class":53},[36,3634,57],{"class":49},[36,3636,3637],{"class":60}," arr.",[36,3639,783],{"class":85},[36,3641,1050],{"class":60},[36,3643,3644],{"class":42},"\u002F\u002F arr is now [1, 2, 3] (mutated!)\n",[36,3646,3647],{"class":38,"line":226},[36,3648,3649],{"class":42},"\u002F\u002F Use [...arr].sort() for a non-mutating sort (or arr.toSorted() in ES2023)\n",[36,3651,3652],{"class":38,"line":232},[36,3653,166],{"emptyLinePlaceholder":165},[36,3655,3656],{"class":38,"line":261},[36,3657,3658],{"class":42},"\u002F\u002F ── .includes() finds NaN, .indexOf() doesn't ──\n",[36,3660,3661,3663,3665,3667,3669,3671,3673,3675],{"class":38,"line":285},[36,3662,989],{"class":60},[36,3664,3269],{"class":53},[36,3666,1045],{"class":60},[36,3668,3274],{"class":85},[36,3670,126],{"class":60},[36,3672,3269],{"class":53},[36,3674,497],{"class":60},[36,3676,3677],{"class":42},"\u002F\u002F true (uses SameValueZero algorithm)\n",[36,3679,3680,3682,3684,3686,3688,3690,3692,3694],{"class":38,"line":290},[36,3681,989],{"class":60},[36,3683,3269],{"class":53},[36,3685,1045],{"class":60},[36,3687,3302],{"class":85},[36,3689,126],{"class":60},[36,3691,3269],{"class":53},[36,3693,644],{"class":60},[36,3695,3696],{"class":42},"\u002F\u002F -1 (uses strict equality ===, NaN !== NaN)\n",[36,3698,3699],{"class":38,"line":296},[36,3700,166],{"emptyLinePlaceholder":165},[36,3702,3703],{"class":38,"line":330},[36,3704,3705],{"class":42},"\u002F\u002F ── .splice() mutates and returns removed elements ──\n",[36,3707,3708,3710,3712,3714,3716,3718,3720,3722,3724,3726,3728,3730],{"class":38,"line":360},[36,3709,50],{"class":49},[36,3711,54],{"class":53},[36,3713,57],{"class":49},[36,3715,61],{"class":60},[36,3717,64],{"class":53},[36,3719,210],{"class":60},[36,3721,637],{"class":53},[36,3723,210],{"class":60},[36,3725,70],{"class":53},[36,3727,210],{"class":60},[36,3729,727],{"class":53},[36,3731,193],{"class":60},[36,3733,3734,3736,3739,3741,3743,3745,3747,3749,3751,3753,3755,3757,3759,3761,3763],{"class":38,"line":365},[36,3735,50],{"class":49},[36,3737,3738],{"class":53}," removed",[36,3740,57],{"class":49},[36,3742,3637],{"class":60},[36,3744,809],{"class":85},[36,3746,126],{"class":60},[36,3748,64],{"class":53},[36,3750,210],{"class":60},[36,3752,637],{"class":53},[36,3754,210],{"class":60},[36,3756,2513],{"class":1085},[36,3758,210],{"class":60},[36,3760,2522],{"class":1085},[36,3762,497],{"class":60},[36,3764,3765],{"class":42},"\u002F\u002F removes [2, 3], inserts [\"a\", \"b\"]\n",[36,3767,3768,3770,3772,3775],{"class":38,"line":371},[36,3769,82],{"class":60},[36,3771,86],{"class":85},[36,3773,3774],{"class":60},"(removed);  ",[36,3776,3777],{"class":42},"\u002F\u002F [2, 3] (removed elements)\n",[36,3779,3780,3782,3784,3787],{"class":38,"line":398},[36,3781,82],{"class":60},[36,3783,86],{"class":85},[36,3785,3786],{"class":60},"(arr);     ",[36,3788,3789],{"class":42},"\u002F\u002F [1, \"a\", \"b\", 4] (mutated)\n",[36,3791,3792],{"class":38,"line":420},[36,3793,166],{"emptyLinePlaceholder":165},[36,3795,3796],{"class":38,"line":425},[36,3797,3798],{"class":42},"\u002F\u002F ── Array(n) creates holes, not undefined values ──\n",[36,3800,3801,3803,3805,3807,3809,3811,3813,3815,3817,3819,3821],{"class":38,"line":431},[36,3802,538],{"class":85},[36,3804,126],{"class":60},[36,3806,70],{"class":53},[36,3808,566],{"class":60},[36,3810,306],{"class":85},[36,3812,126],{"class":60},[36,3814,244],{"class":243},[36,3816,247],{"class":49},[36,3818,2408],{"class":53},[36,3820,760],{"class":60},[36,3822,3823],{"class":42},"\u002F\u002F [empty × 3] — map skips holes, does nothing!\n",[36,3825,3826,3828,3830,3832,3834,3836,3838,3840,3842,3844,3846,3848,3850,3852,3854,3856,3858],{"class":38,"line":450},[36,3827,538],{"class":85},[36,3829,126],{"class":60},[36,3831,70],{"class":53},[36,3833,566],{"class":60},[36,3835,569],{"class":85},[36,3837,126],{"class":60},[36,3839,574],{"class":53},[36,3841,566],{"class":60},[36,3843,306],{"class":85},[36,3845,126],{"class":60},[36,3847,244],{"class":243},[36,3849,247],{"class":49},[36,3851,315],{"class":60},[36,3853,1507],{"class":49},[36,3855,917],{"class":53},[36,3857,497],{"class":60},[36,3859,3860],{"class":42},"\u002F\u002F [1, 1, 1] — fill first, then map\n",[15,3862,3864],{"id":3863},"quick-quiz","🧠 Quick Quiz",[3866,3867,3868],"p",{},"What does this output?",[24,3870,3871],{"language":26},[28,3872,3874],{"className":30,"code":3873,"language":26,"meta":32,"style":32},"const arr = [1, , 3];\nconsole.log(arr.map(x => x * 2));\nconsole.log(arr.filter(() => true));\nconsole.log([...arr]);\nconsole.log(arr.forEach(() => {}));\nconsole.log(arr.indexOf(undefined));\n",[20,3875,3876,3894,3918,3936,3949,3966],{"__ignoreMap":32},[36,3877,3878,3880,3882,3884,3886,3888,3890,3892],{"class":38,"line":39},[36,3879,50],{"class":49},[36,3881,54],{"class":53},[36,3883,57],{"class":49},[36,3885,61],{"class":60},[36,3887,64],{"class":53},[36,3889,67],{"class":60},[36,3891,70],{"class":53},[36,3893,193],{"class":60},[36,3895,3896,3898,3900,3902,3904,3906,3908,3910,3912,3914,3916],{"class":38,"line":46},[36,3897,82],{"class":60},[36,3899,86],{"class":85},[36,3901,89],{"class":60},[36,3903,306],{"class":85},[36,3905,126],{"class":60},[36,3907,244],{"class":243},[36,3909,247],{"class":49},[36,3911,315],{"class":60},[36,3913,318],{"class":49},[36,3915,321],{"class":53},[36,3917,2706],{"class":60},[36,3919,3920,3922,3924,3926,3928,3930,3932,3934],{"class":38,"line":79},[36,3921,82],{"class":60},[36,3923,86],{"class":85},[36,3925,89],{"class":60},[36,3927,380],{"class":85},[36,3929,383],{"class":60},[36,3931,386],{"class":49},[36,3933,389],{"class":53},[36,3935,2706],{"class":60},[36,3937,3938,3940,3942,3944,3946],{"class":38,"line":101},[36,3939,82],{"class":60},[36,3941,86],{"class":85},[36,3943,438],{"class":60},[36,3945,441],{"class":49},[36,3947,3948],{"class":60},"arr]);\n",[36,3950,3951,3953,3955,3957,3959,3961,3963],{"class":38,"line":119},[36,3952,82],{"class":60},[36,3954,86],{"class":85},[36,3956,89],{"class":60},[36,3958,238],{"class":85},[36,3960,383],{"class":60},[36,3962,386],{"class":49},[36,3964,3965],{"class":60}," {}));\n",[36,3967,3968,3970,3972,3974,3976,3978,3980],{"class":38,"line":140},[36,3969,82],{"class":60},[36,3971,86],{"class":85},[36,3973,89],{"class":60},[36,3975,3302],{"class":85},[36,3977,126],{"class":60},[36,3979,22],{"class":53},[36,3981,2706],{"class":60},[3983,3984,3985,3989,4030,4061,4075],"details",{},[3986,3987,3988],"summary",{},"Answer",[28,3990,3992],{"className":30,"code":3991,"language":26,"meta":32,"style":32},"[2, \u003Cempty>, 6]   \u002F\u002F map: skips holes (index 1 is a hole, not visited, preserved in output)\n[1, 3]            \u002F\u002F filter: skips holes (only non-hole elements pass through)\n[1, undefined, 3] \u002F\u002F spread: converts holes to undefined\nundefined         \u002F\u002F forEach: returns undefined (always); visits 1 and 3, skips hole at 1\n-1                \u002F\u002F indexOf: undefined is not at any index (the hole is NOT undefined)\n",[20,3993,3994,4010,4015,4020,4025],{"__ignoreMap":32},[36,3995,3996,3998,4000,4003,4007],{"class":38,"line":39},[36,3997,989],{"class":60},[36,3999,637],{"class":53},[36,4001,4002],{"class":60},", \u003C",[36,4004,4006],{"class":4005},"sk71V","empty",[36,4008,4009],{"class":60},">, 6]   \u002F\u002F map: skips holes (index 1 is a hole, not visited, preserved in output)\n",[36,4011,4012],{"class":38,"line":46},[36,4013,4014],{"class":60},"[1, 3]            \u002F\u002F filter: skips holes (only non-hole elements pass through)\n",[36,4016,4017],{"class":38,"line":79},[36,4018,4019],{"class":60},"[1, undefined, 3] \u002F\u002F spread: converts holes to undefined\n",[36,4021,4022],{"class":38,"line":101},[36,4023,4024],{"class":60},"undefined         \u002F\u002F forEach: returns undefined (always); visits 1 and 3, skips hole at 1\n",[36,4026,4027],{"class":38,"line":119},[36,4028,4029],{"class":60},"-1                \u002F\u002F indexOf: undefined is not at any index (the hole is NOT undefined)\n",[3866,4031,4032,4036,4037,4040,4041,4043,4044,210,4046,210,4048,4050,4051,4053,4054,4057,4058,4060],{},[4033,4034,4035],"strong",{},"The key insight",": holes (empty slots from ",[20,4038,4039],{},"[1, , 3]",") are NOT the same as ",[20,4042,22],{},". Holes are missing properties — they have no value at all. Array methods like ",[20,4045,306],{},[20,4047,238],{},[20,4049,380],{},", and ",[20,4052,1431],{}," ",[4033,4055,4056],{},"skip holes"," entirely (don't call the callback for that index). But ",[20,4059,22],{}," is a real value that methods do process.",[3866,4062,4063,4064,4067,4068,4071,4072,4074],{},"Spread (",[20,4065,4066],{},"[...arr]",") and ",[20,4069,4070],{},"Array.from()"," convert holes to ",[20,4073,22],{}," (they iterate using the array iterator, which yields undefined for holes).",[3866,4076,4077,4080,4081,4083,4084,4087,4088,566],{},[20,4078,4079],{},"indexOf(undefined)"," returns -1 because the hole has no value — it's not ",[20,4082,22],{}," in the array, it's a missing property. Use ",[20,4085,4086],{},"arr.includes(undefined)"," if you want to find holes (it returns true for ",[20,4089,4039],{},[4091,4092,4093],"style",{},"html pre.shiki code .sdCPZ, html code.shiki .sdCPZ{--shiki-default:#6A737D;--shiki-github-dark:#6A737D}html pre.shiki code .svdQ7, html code.shiki .svdQ7{--shiki-default:#D73A49;--shiki-github-dark:#F97583}html pre.shiki code .snvgF, html code.shiki .snvgF{--shiki-default:#005CC5;--shiki-github-dark:#79B8FF}html pre.shiki code .ssxIu, html code.shiki .ssxIu{--shiki-default:#24292E;--shiki-github-dark:#E1E4E8}html pre.shiki code .sIsaT, html code.shiki .sIsaT{--shiki-default:#6F42C1;--shiki-github-dark:#B392F0}html pre.shiki code .sCrzJ, html code.shiki .sCrzJ{--shiki-default:#E36209;--shiki-github-dark:#FFAB70}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 .github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}html.github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}html pre.shiki code .sJ6F3, html code.shiki .sJ6F3{--shiki-default:#032F62;--shiki-github-dark:#9ECBFF}html pre.shiki code .sk71V, html code.shiki .sk71V{--shiki-default:#22863A;--shiki-github-dark:#85E89D}",{"title":32,"searchDepth":46,"depth":46,"links":4095},[4096,4098,4099,4101,4103,4104,4105,4106,4107],{"id":17,"depth":46,"text":4097},"Array Holes: Empty Slots vs undefined",{"id":675,"depth":46,"text":676},{"id":1005,"depth":46,"text":4100},"Anti-Pattern: sort() Without a Comparator",{"id":1428,"depth":46,"text":4102},"reduce: The Fold Pattern",{"id":1850,"depth":46,"text":1851},{"id":2481,"depth":46,"text":2482},{"id":2939,"depth":46,"text":2940},{"id":3480,"depth":46,"text":3481},{"id":3863,"depth":46,"text":3864},"Deep-dive into JavaScript array mechanics: holes (empty slots) vs undefined, typed arrays, mutation vs non-mutation methods, reduce\u002Ffold patterns, and array-like objects. Code-first reference for senior engineers.","md",{},"\u002Fjs\u002F08-arrays-and-array-methods",{"title":5,"description":4108},"js\u002F08-arrays-and-array-methods","2GoJP-1iNl9UUkWAL877Hy2UQ08ZeAcvpu83N8OrYvQ",1789924649109]